Flex 4.5: Customize Scrollbars

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute"
  creationComplete="onCreationComplete()" viewSourceURL="srcview/index.html">
 
  <mx:Style>
    ScrollBar
    {
      track-skin: Embed(source='assets/track.png',
              scaleGridLeft="2", scaleGridTop="6",
              scaleGridRight="7", scaleGridBottom="9");
      up-arrow-skin: ClassReference("undefined");
      down-arrow-skin: ClassReference("undefined");
    }
   
  </mx:Style>
 
  <mx:Script>
    <![CDATA[
      import mx.utils.UIDUtil;
      import mx.collections.ArrayCollection;
     
      [Bindable]
      private var ac : ArrayCollection;
     
      private function onCreationComplete() : void
      {
        ac = new ArrayCollection();
       
        for (var i:int = 0; i < 25; i ++)
        {
          ac.addItem( UIDUtil.createUID() );
        }
      }
    ]]>
  </mx:Script>
 
  <mx:List width="100%" height="100%"
    dataProvider="{ ac }" />
 
</mx:Application>

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>