Drag And Drop In Flex 4.5

<?xml version="1.0"?>
<!-- dragdrop\SimpleListToListMoveSparkDragIndicator.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="initApp();">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.collections.ArrayList;

            [Bindable]
            public var abc:ArrayCollection=new ArrayCollection([{id: "1", value: "one"}]);

            private function initApp():void
            {
                srclist.dataProvider=new ArrayList(['Reading', 'Television', 'Movies']);
                //destlist.dataProvider = new ArrayList([]);
            }
        ]]>
    </fx:Script>

    <s:HGroup>
        <s:VGroup>
            <s:Label text="Available Activities"/>
            <s:List id="srclist"
                    allowMultipleSelection="true"
                    dragEnabled="true"
                    dragMoveEnabled="true"
                    dropEnabled="true"/>
        </s:VGroup>

        <s:VGroup>
            <s:Label text="Activities I Like"/>
            <s:List id="destlist"
                    allowMultipleSelection="true"
                    dataProvider="{abc}"
                    labelField="value"
                    dragEnabled="true"
                    dragMoveEnabled="true"
                    dropEnabled="true"/>
        </s:VGroup>
    </s:HGroup>

    <s:Button id="b1"
              label="Reset"
              click="initApp();"/>
</s:Application>

Adobe Flex – Format Date & Time (inside of a DataGrid too)

<mx:DateFormatter id="formatDateTime" formatString="MM/DD/YY" />

 

 

the formatString will determine how your date & time is formatted. I have created a pattern chart below that’s a little easier to read then the one on Adobe’s Flex Documentation.

Pattern	Example
Year
YY	09 (Year Number Short)
YYY	2009 (Year Number Full)
YYYY	02009 (I have no clue why you would need this)
Month
M	7 (Month Number Short)
MM	07 (Month Number Full)
MMM	Jul (Month Name Short)
MMMM	July (Month Name Full)
Day
D	4 (Day Number Short)
DD	04 (Day Number Full)
Day Name
E	1 (Day Number Short)
EE	01 (Day Number Full)
EEE	Mon (Day Name Short)
EEEE	Monday (Day Name Full)
A	AM/PM
J	Hour in day (0-23)
H	Hour in day (1-24)
K	Hour in AM/PM (0-11)
L	Hour in AM/PM(1-12)
N	3 (Minutes)
NN	03 (Minutes)
SS	30 (Seconds)

OK now on to applying it to a date with funky database formatting

<mx:DateFormatter id="formatDateTime" formatString="MM/DD/YY" />

 

 

 

<mx:DataGridColumn headerText="Date">

     <mx:itemRenderer>

          <mx:Component>

               <mx:VBox>

                    <mx:DateFormatter id="formatDateTime" formatString="MM/DD/YY" />

                    <mx:Label text="{formatDateTime.format(data.myDate) }/>

 

 

 

 

 

 

Video URL Runn Application in flex Displaying a video in Flex using the NetConnection, NetStream, and Video classes

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/01/displaying-a-video-in-flex-using-the-netconnection-netstream-and-video-classes/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;
 
            private var nc:NetConnection;
            private var ns:NetStream;
            private var video:Video;
            private var meta:Object;
 
            private function init():void {
                var nsClient:Object = {};
                nsClient.onMetaData = ns_onMetaData;
                nsClient.onCuePoint = ns_onCuePoint;
 
                nc = new NetConnection();
                nc.connect(null);
 
                ns = new NetStream(nc);
                ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");
                ns.client = nsClient;
 
                video = new Video();
                video.attachNetStream(ns);
                uic.addChild(video);
            }
 
            private function ns_onMetaData(item:Object):void {
                trace("meta");
                meta = item;
                // Resize Video object to same size as meta data.
                video.width = item.width;
                video.height = item.height;
                // Resize UIComponent to same size as Video object.
                uic.width = video.width;
                uic.height = video.height;
                panel.title = "framerate: " + item.framerate;
                panel.visible = true;
                trace(ObjectUtil.toString(item));
            }
 
            private function ns_onCuePoint(item:Object):void {
                trace("cue");
            }
        ]]>
    </mx:Script>
 
    <mx:Panel id="panel" visible="false">
        <mx:UIComponent id="uic" />
        <mx:ControlBar>
            <mx:Button label="Play/Pause" click="ns.togglePause();" />
            <mx:Button label="Rewind" click="ns.seek(0); ns.pause();" />
        </mx:ControlBar>
    </mx:Panel>
 
</mx:Application>

Get Mouse Position in flex 4.5

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" horizontalAlign="left" 
  mouseMove="onMouseMove(event)"
  mouseDown="onMouseDown(event)">
<mx:Script><![CDATA[
 //tests mousedown to see if it is over Web Access button
 private var giMouseXLast:Number = 0;
 private var giMouseYLast:Number = 0;
 private function onMouseDown(oEvent:Object):Void
 {
  var iMouseX:Number = oEvent.target.mouseX;
  var iMouseY:Number = oEvent.target.mouseY;
  if (iMouseX > 200 && iMouseX < 400 && iMouseY > 100 && iMouseY <200)  {   //mousedown is over magic spot
   alert("You hit the magic spot");
  }
  lblLastMouseDownCoord.text = "(" + iMouseX + "," + iMouseY + ")"
 }

 //sets global variables when mouse moves
 private function onMouseMove(oEvent:Object):Void
 {
  giMouseXLast = oEvent.target.mouseX;
  giMouseYLast = oEvent.target.mouseY;
 }
]]></mx:Script>
 <mx:HBox>
  <mx:Label id="lblLastMouseDown" text="Last Mouse Down"  color="#FFFFFF" fontSize="18" />
  <mx:Label id="lblLastMouseDownCoord" text="" color="#FFFFFF" fontSize="18" />
 </mx:HBox>

 <mx:HBox>
  <mx:Label id="lblCurMousePos" text="Current Mouse Position"  color="#FFFFFF" fontSize="18" />
  <mx:Label id="lblCurMousePosCoord"
    text='{"(" + giMouseXLast + "," + giMouseYLast + ")"}'
    color="#FFFFFF" fontSize="18" />
 </mx:HBox>

</mx:Application>

Its me

Flex Logo

Displaying icons in a Flex PopUpButton control

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2008/01/24/displaying-icons-in-a-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            [Bindable]
            private var menu:Menu;

            private function initMenu():void {
                menu = new Menu();
                menu.dataProvider = arr;
            }
        ]]>
    </mx:Script>

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }

        .myCustomPopUpStyleName {
           fontWeight: normal;
           textAlign: left;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button"
                icon="@Embed('assets/Button.png')" />
        <mx:Object label="ButtonBar"
                icon="@Embed('assets/ButtonBar.png')" />
        <mx:Object label="CheckBox"
                icon="@Embed('assets/CheckBox.png')" />
        <mx:Object label="ColorPicker"
                icon="@Embed('assets/ColorPicker.png')" />
    </mx:Array>

    <mx:PopUpButton id="popUpButton"
            label="Select a control..."
            popUp="{menu}"
            preinitialize="initMenu();"
            creationComplete="popUpButton.open();" />

</mx:Application>