What is Flex?

Flex Demos

Add the local home dir to the Flash Player Trust file

(this step might already be done)


cd ~
mkdir -p .macromedia/Flash_Player/#Security/FlashPlayerTrust
echo ~ > .macromedia/Flash_Player/#Security/FlashPlayerTrust/myTrustFiles.cfg

Explanation: By default Flash Player doesn't allow local swf's to access the network. So we need to "trust" swf's in our home dir so that they can access the network.

Write the a basic Flex application


vi youtube.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="srv.send()">

  <mx:HTTPService id="srv" url="http://ws.jamesward.org/youtube.xml"/>

  <mx:DataGrid dataProvider="{srv.lastResult.video}"/>

</mx:Application>

Explanation: HTTPService is the general purpose HTTP library in Flex. It can read restful style xml over the network and convert the xml to e4x objects or just plain old ActionScript objects. The DataGrid is the general purpose table component in Flex. Without explicitly specifying the columns it will figure them out based on the data it gets. The curly braces are a binding expression which tells the DataGrid to watch the srv.lastResult.video object for changes and refresh when it gets changes.

Compile and view the application:


/opt/flex/bin/mxmlc youtube.mxml
firefox -new-tab youtube.swf

Modify the application


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="srv.send()">

  <mx:HTTPService id="srv" url="http://ws.jamesward.org/youtube.xml"/>

  <mx:Panel width="100%" height="100%" title="MyYouTube" layout="horizontal" horizontalGap="0">
    <mx:List id="l" dataProvider="{srv.lastResult.video}" height="100%"/>
    <mx:VideoDisplay source="{l.selectedItem.url}" width="100%" height="100%"/>
  </mx:Panel>

</mx:Application>

Explanation: The List is like a single column DataGrid. It will use the label property by default. The VideoDisplay component just plays a video. The source property uses binding so that when a user selects something in the List it automatically begins playing the selected video.

Compile and view the application:


/opt/flex/bin/mxmlc youtube.mxml
firefox -new-tab youtube.swf

Add a fancy animation


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="srv.send()">

  <mx:HTTPService id="srv" url="http://ws.jamesward.org/youtube.xml"/>

  <mx:Panel id="p" title="MyYouTube" layout="horizontal" horizontalGap="0">
    <mx:List id="l" dataProvider="{srv.lastResult.video}" height="100%" change="v.width = 320; v.height = 240"/>
    <mx:VideoDisplay id="v" source="{l.selectedItem.url}" width="0" resizeEffect="Resize"/>
  </mx:Panel>

</mx:Application>

Explanation: Panel is a Flex container with a nice header and border. The resizeEffect is set to Resize which causes there to be a smooth effect when the size of the component changes.

Compile and view the application:


/opt/flex/bin/mxmlc youtube.mxml
firefox -new-tab youtube.swf