Slide 37 – First Hello World Application

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="" layout="absolute"> <mx:Panel id=“myPanel” x="334" y="227" height="305“ layout="absolute"> width="383"

<mx:TextArea x="10" y="0" width="343" height="153" text="Hello World!" textAlign="center“ fontFamily="Verdana" fontSize="20" fontWeight="bold" color="#ff0000"/> <mx:Button x="149" y="182" label="Goodbye" click="myPanel.visible=(false)"/> </mx:Panel> </mx:Application>

Visual Components – Data Slider (build from Scratch)
<?xml version="1.0" encoding="utf-8"?> <mx:ApolloApplication xmlns:mx="" layout="absolute" width="350" height="318" creationComplete="t rac e()" cornerRadius="13" backgroundGradientColors="[#ffffff, #c5ffa2]" alpha="0.27"> <mx:Script> <![CDATA[ priv ate fu nct ion t rac e():v oid { if (mySlider.value > 3){ myLabel.text="Mo re tha n 3 "; } e lse if (mySlider.value < 3) { myLabel.text="Le ss tha n 3 "; } } ]]> </mx:Script> <mx:HSlider id="mySlider" x="44" y="19" width="183" change="t rac e()"/> <mx:Text text="{mySlider.value}" x="128" y="55"/> <mx:Label x="44" y="55" text="Slider Trace:"/> <mx:Label x="44" y="106" text="Hello Nobody." width="199" height="54" fontSize="24" id="myLabel"/> </mx:ApolloApplication>

Visual Components – Charts (can build from Scratch)
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=""> <mx:Script> <![CDATA[ i mpo rt mx.collections.ArrayCollection; [Bin dab le ] p riv ate va r medalsAC:ArrayCollection = n ew ArrayCollection( [ { Country: "US A" , Beer: 3, hockey: 39, fun: 6 }, { Country: "Ca nad a" , Beer: 32, hockey: 17, fun: 14 }, { Country: "Ru ssi a" , Beer: 27, hockey:27, fun: 38 } ]); ]]> </mx:Script> <mx:Panel title="ColumnChart and BarChart Controls Example" height="100%" width="100%" layout="horizontal"> <mx:ColumnChart id="column" height="100%" width="45%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="Country"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries xField="Country" yField="Beer" displayName="Beer"/> <mx:ColumnSeries xField="Country" yField="hockey" displayName="Ice Hockey Played"/> <mx:ColumnSeries xField="Country" yField="fun" displayName="Fun Had!"/> </mx:series> </mx:ColumnChart> <mx:Legend dataProvider="{column}"/> </mx:Panel> </mx:Application>

Slide – (clicktest.mxml) Demo of using <mx:script> to include functionality
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="" layout="absolute"> <mx:Script> p ubl ic fun cti on copy():v oi d { destination.text=source.text; destination2.text=source.text; } </mx:Script> <mx:TextInput id="source" width="100" x="97" y="53" text="Copy me places"/> <mx:Button label="Copy" click="copy()" x="116" y="83"/> <mx:TextInput id="destination" width="100" x="97" y="113"/> <mx:TextInput id="destination2" text="" x="296" y="113"/> </mx:Application>

APOLLO – Browser in 4 lines: Cheat: JamesGovernorsBlogReader.mxml
<?xml version="1.0" encoding="utf-8"?> <!--line one. I am not goign to count the XML PI--> <mx:ApolloApplication xmlns:mx="" layout="vertical" cornerRadius="12" > <!-- line two --> <mx:Text text="Enter URL and hit enter" fontFamily="Arial" fontSize="16" fontWeight="bold"/> <!-- line three--> <mx:TextInput id="urlTxt" width="100%" enter="html.location=urlTxt.text;" text="" /> <!--line four --> <mx:HTML id="html" width="100%" height="100%" location="" /> <!--line five. Not really a line of code, just closing the root tag --> </mx:ApolloApplication>

e4x source code (Apollo Application)
<?xml version="1.0" encoding="utf-8"?> <mx:ApolloApplication xmlns:mx="" layout="absolute">

<!--(c) 2006 Duane Nickull ( - all rights reserved You are free to use this sample demonstrating how to manipulate XML data using the E4X component of ActionScript 3.0. This file is designed to be used in the Flex builder 2.01 M3 RC1. No warranties exist to the accuracy of this code and you agree to use it completely at your own risk and assume all responsibilities for such use. For more samples, check or the Adobe Labs website. --> <!--Alternative loading of XML from remote call <mx:HTTPService id="myGMLData" url="" resultFormat="e4x"> </mx:HTTPService> --> <mx:Script> <![CDATA[ pub li c v ar myGMLData:XML = <MultiLineString srsName="ht tp :/ /w ww .o pe ng is .n et/ gm l/ srs /e ps g. xm l"> <lineStringMember value="1"> <LineString> <coord> <X>56.1</X> <Y>0.45</Y> </coord> <coord> <X>67.23</X> <Y>0.98</Y> </coord> </LineString> </lineStringMember>

<lineStringMember value="2"> <LineString> <coord><X>46.71</X><Y>9.25</Y></coord> <coord><X>56.88</X><Y>10.44</Y></coord> </LineString> </lineStringMember> <lineStringMember value="3"> <LineString> <coord><X>324.1</X><Y>219.7</Y></coord> <coord><X>0.45</X><Y>4.56</Y></coord> </LineString> </lineStringMember> </MultiLineString>

]]> </mx:Script> <!--Note that I am very lazy and these are not actually executing, they are simply making pre-executed statements visible. I have not lost any sleep over this since it demonstrates the functions nicely. If you lose sleep, you can re-code ;-)--> <mx:TabNavigator x="12" y="10" width="544" height="565"> <mx:Canvas label="Statements 1" width="100%" height="632"> <mx:Label id="XCoordinate" visible="false" text="{myGMLData.lineStringMember[0].LineString.coord[1].X}" x="131" y="40" width="305" fontWeight="bold" color="#e82d1b"/> <mx:Button x="30" y="10" label="Execute" click="XCoordinate.visible=tru e"/> <mx:Label x="129" y="12" text="lineStringMember[0].LineString.coord[0].X" width="327.5"/> <mx:Text x="30" y="40" text="Result:" width="72" textAlign="right"/> <mx:HRule x="30" y="77" width="362"/> <mx:Label id="YCoordinate" visible="false" text="{myGMLData.lineStringMember[0].LineString.coord.Y[0]}" x="131" y="117" width="307" fontWeight="bold" color="#e82d1b"/> <mx:Button x="30" y="87" label="Execute" click="YCoordinate.visible=tru e"/> <mx:Label x="131" y="89" text="lineStringMember[0].LineString.coord.Y[0]" width="327.5"/> <mx:Text x="30" y="117" text="Result:" width="72"

textAlign="right"/> <mx:HRule x="30" y="156" width="362"/> <!--DOT::FRAGMENT: returns an XML Fragment--> <mx:Label id="FragmentReturned" visible="false" text="{myGMLData.lineStringMember[1]}" height="263" width="233" x="131" y="196" fontWeight="bold" color="#e8351c"/> <mx:Button x="30" y="166" label="Execute" click="FragmentReturned.visible=tru e"/> <mx:Label x="131" y="168" text="lineStringMember[1]" width="168"/> <mx:Text x="30" y="196" text="Result:" width="72" textAlign="right"/>

</mx:Canvas> <mx:Canvas label="Statements 2" width="100%" height="100%"> <!--PARENTHESIS: Filters the XML fragment based on X having an exact value of 324.1--> <mx:Label id="Parenthesis" visible="false" text="{myGMLData.lineStringMember.LineString.coord.(X == 324.1)}" height="68" width="233" x="111" y="50" fontWeight="bold" color="#e8371c"/> <mx:Button x="10" y="20" label="Execute" click="Parenthesis.visible=tru e"/> <mx:Text x="10" y="50" text="Result:" width="72" textAlign="right"/> <mx:Label x="111" y="22" text="lineStringMember.LineString.coord.(X == 324.1)"/> <mx:HRule x="10" y="126" width="362"/> <!--COMBINATION example. Note use of math operators which cast values to integers--> <mx:Label id="combination" visible="false" text="{myGMLData.lineStringMember..coord.(Y == 10.44)}" height="80" width="326" x="111" y="164" fontWeight="bold" color="#e9441c"/> <mx:Button x="10" y="138" label="Execute" click="combination.visible=tru e"/> <mx:Text x="10" y="168" text="Result:" width="72" textAlign="right"/> <mx:Label x="111" y="140" text="lineStringMember..coord.(Y == 10.44)"/> <mx:HRule x="10" y="243" width="362"/> <!--DESCENDENT: returns all instances of Y that are descendents of

lineStringMember--> <mx:Label id="Descendent" visible="false" text="{myGMLData.lineStringMember..Y}" height="87" width="235" x="111" y="281" fontWeight="bold" color="#e9471b"/> <mx:Button x="10" y="253" label="Execute" click="Descendent.visible=tru e"/> <mx:Text x="10" y="283" text="Result:" width="72" textAlign="right"/> <mx:Label x="111" y="255" text="lineStringMember..Y (all instances of Y)" width="247"/> <mx:HRule x="10" y="369" width="362"/> <!--ATTRIBUTE: returns the attribute--> <mx:Label id="Attribute" visible="false" text="{myGMLData.lineStringMember.(@value = 2)}" x="111" y="405" width="261" height="105" fontWeight="bold" color="#e9431b"/> <mx:Text x="10" y="405" text="Result:" width="72" textAlign="right"/> <mx:Button x="10" y="375" label="Execute" click="Attribute.visible=tru e"/> <mx:Label x="111" y="377" text="lineStringMember.(@value = 2)" width="272"/> </mx:Canvas> <mx:Canvas label="XML Data" width="100%" height="100%"> <!-- YEAH - this is really lame but I was sitting on a plane and wanted to make the XML look like it was formatted nicely. If anyone wants to redo, please be my guest. I hate entity references.... --> <mx:Text x="10" y="10" text="&lt;? xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;"/> <mx:Text x="26" y="23" text="&lt;MultiLineString srsName=&quot;;&gt;"/> <mx:Text x="44" y="36" text="&lt;lineStringMember value=&quot;1&quot;&gt;"/> <mx:Text x="60" y="49" text="&lt;lineStringMember value=&quot;1&quot;&gt;"/> <mx:Text x="60" y="166" text="&lt;lineStringMember value=&quot;2&quot;&gt;"/> <mx:Text x="60" y="283" text="&lt;/lineStringMember&gt;"/> <mx:Text x="60" y="296" text="&lt;lineStringMember value=&quot;3&quot;&gt;"/> <mx:Text x="60" y="416" text="&lt;/lineStringMember&gt;"/> <mx:Text x="26" y="426" text="&lt;/MultiLineString&gt;"/> <mx:Text x="77" y="62" text="&lt;LineString&gt;"/> <mx:Text x="73" y="309" text="&lt;LineString&gt;"/>

<mx:Text x="73" y="179" text="&lt;LineString&gt;"/> <mx:Text x="68" y="153" text="&lt;/LineString&gt;"/> <mx:Text x="73" y="270" text="&lt;/LineString&gt;"/> <mx:Text x="73" y="400" text="&lt;/LineString&gt;"/> <mx:Text x="98" y="75" text="&lt;coord&gt;"/> <mx:Text x="93" y="101" text="&lt;/coord&gt;"/> <mx:Text x="93" y="114" text="&lt;coord&gt;"/> <mx:Text x="93" y="140" text="&lt;/coord&gt;"/> <mx:Text x="93" y="192" text="&lt;coord&gt;"/> <mx:Text x="93" y="218" text="&lt;/coord&gt;"/> <mx:Text x="93" y="231" text="&lt;coord&gt;"/> <mx:Text x="93" y="257" text="&lt;/coord&gt;"/> <mx:Text x="93" y="322" text="&lt;coord&gt;"/> <mx:Text x="88" y="390" text="&lt;/coord&gt;"/> <mx:Text x="88" y="364" text="&lt;coord&gt;"/> <mx:Text x="88" y="348" text="&lt;/coord&gt;"/> <mx:Text x="107" y="88" text="&lt;X&gt;56.1&lt;/X&gt; &lt;Y&gt;0.45&lt;/Y&gt;"/> <mx:Text x="107" y="127" text="&lt;X&gt;62.73&lt;/X&gt; &lt;Y&gt;0.98&lt;/Y&gt;"/> <mx:Text x="107" y="205" text="&lt;X&gt;46.71&lt;/X&gt; &lt;Y&gt;9.25&lt;/Y&gt;"/> <mx:Text x="107" y="244" text="&lt;X&gt;56.88&lt;/X&gt; &lt;Y&gt;10.44&lt;/Y&gt;"/> <mx:Text x="107" y="335" text="&lt;X&gt;324.1&lt;/X&gt; &lt;Y&gt;219.7&lt;/Y&gt;"/> <mx:Text x="107" y="374" text="&lt;X&gt;0.45&lt;/X&gt; &lt;Y&gt;4.56&lt;/Y&gt;"/> </mx:Canvas> </mx:TabNavigator> </mx:ApolloApplication>

Apollo RSS Blog Reader (Not complete – I have not tested this finally yet).
<?xml version="1.0" encoding="utf-8"?> <mx:ApolloApplication xmlns:mx="" layout="absolute" width="900" height="550" horizontalAlign="center" verticalAlign="middle" applicationComplete="rawRSS.send()"> <mx:Script> <![CDATA[ pub li c f un ct io n getDetails():v oi d {[entries.s electedIndex].description;[entries.selected Index].link; } pub li c f un ct io n setURL():String { var term:String = "t er m. te xt "; var URL:String = "ht tp :/ /b lo gs ea rc h. go ogl e. co m/ bl og s ear ch _f ee ds ?h l= en &a mp ;ta b= wb &am p; q= " + term + " &a mp ;i e= ut f- 8&a mp ; num =1 0& am p; ou tp ut =r ss "; ret ur n URL; } ]]> </mx:Script> <!-- The hierarchy for the google RSS feed is as follows: <rss> <channel> <item> <title>foo</title> <link></link> <description>the string of text about foo</description> <dc:publisher>Randall Foo</dc:publisher> <dc:creator>god</dc:creator> <dc:date>2007-03-29T12:01:00Z</dc:date> </item>

URL::;tab=wb&amp ;q=flex&amp;ie=utf-8&amp;num=10&amp;output=rss --> <mx:HTTPService showBusyCursor="true" id="rawRSS" url=";tab=wb&amp ;q=flex&amp;ie=utf-8&amp;num=10&amp;output=rss" resultFormat="object" /> <mx:Panel width="100%" height="95%" layout="absolute" horizontalCenter="0" verticalCenter="-18.5" resizeEffect="Resize" title="Apollo RSS Blog Monitor" horizontalAlign="center" cornerRadius="15" borderColor="#210ef0" alpha="1.0" fontSize="14" color="#f0e60d"> <mx:DataGrid width="860" id="entries" dataProvider="{}" click="getDetails()" horizontalCenter="0" verticalCenter="-85.5" height="222" color="#3521f0" fontSize="11"> <mx:columns> <mx:DataGridColumn width="150" dataField="date" headerText="Date"/> <mx:DataGridColumn width="300" dataField="title" headerText="Title"/> <mx:DataGridColumn dataField="publisher" headerText="Blogger" /> </mx:columns> </mx:DataGrid> <mx:TextArea width="698" height="102" id="description" verticalCenter="114.5" horizontalCenter="0" cornerRadius="3" wordWrap="true" editable="false" text="Highlight a blog above to see the &lt;description&gt;" fontStyle="italic" color="#4e4e4e" fontSize="10"> <mx:filters> <flash.filters:DropShadowFilter xmlns:flash.filters="flash.filters.*" blurX="5" blurY="5" distance="3" angle="45" color="0x000000" alpha="0.4" /> </mx:filters> </mx:TextArea> <mx:TextInput id="term" verticalCenter="44.5" horizontalCenter="150" text="Flex" width="169" fontSize="10" color="#010101"/> <mx:Button label="Current Term" verticalCenter="44.5"

horizontalCenter="-297" enabled="true" fontSize="11" color="#464707" borderColor="#91f0cb" fillColors="[#3f25f0, #3f25f0]" click="setURL()"> <mx:filters> <flash.filters:DropShadowFilter xmlns:flash.filters="flash.filters.*" distance="3" angle="90" color="0x000000" alpha="0.4" /> </mx:filters> </mx:Button> <mx:TextArea id="link" x="91" y="412" width="698" height="25" text="Highlight a blog above to see the &lt;link&gt; here." color="#0000ff" fontSize="10" borderColor="#e4f0e2" fontWeight="bold"/> <mx:Button toolTip="Click to Refresh" label="Refresh RSS" click="rawRSS.send()" verticalCenter="44.5" horizontalCenter="128" enabled="true" fontSize="11" color="#464707" borderColor="#91f0cb" fillColors="[#3f25f0, #3f25f0]"> <mx:filters> <flash.filters:DropShadowFilter xmlns:flash.filters="flash.filters.*" distance="3" angle="90" color="0x000000" alpha="0.4" /> </mx:filters> </mx:Button>

</mx:Panel> </mx:ApolloApplication>