1. 2. Flex Adobe 3.

Transcription

1 1. 2. Flex Adobe 3.

2 Flex Adobe Flex Flex Web Flex Flex Flex Adobe Flash Player 9 /rich Internet applications/ria Flex SWF Flash Player Flex 1. Flex framework Adobe Flex 2 framework RIA Flex framework SWC 2. MXML Flex MXML MXML XML Flex 3. ActionScript 3.0 ActionScript 3.0 ECMAScript JavaScript ActionScript MXML ActionScript MXML 4. CSS properties fontfamily (theme) CSS MXML 5. Flex 6. combo box data grid

3 XML Flex Flex Flex SWF Flash Player ActionScript Flex MXML ActionScript SWF SWF Flex Web HTML Flex Adobe Flex Data Services 2 Cold Fusion Flash Remoting Service Java J2EE Service B/S MXML MXML Flex MXML <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="absolute"> <mx:panel> <mx:textarea text="say hello to Flex!" /> <mx:button label="close" /> </mx:panel> </mx:application>

4 XML MXML Flex <mx:application> Say hello to Flex TextArea Button text label MXML mx Flex Flex Flex Adobe Flex Builder 2 MXML ActionScript Flex XML Flex HTTPService PHP XML Flex PHP 1. MySQL 2. PHP MySQL XML

5 ASP.NET JSP PHP XML HTTPService <mx:application xmlns:mx=" layout="absolute"> <mx:httpservice id="productsrequest" url=" />... HTTPService ID URL data-driven control HTTPService XML <mx:datagrid x="20" y="80" id="productgrid" width="400" dataprovider="{productrequest.lastresult.products.items}" > <mx:columns> <mx:datagridcolumn headertext="name" datafield="name" /> <mx:datagridcolumn headertext="price" datafield="price" /> </mx:columns> </mx:datagrid> dataprovider HTTPService ID lastresult XML XML <XML> <products> <item> <name>mobile Phone</name> <price>$199</price> </item> <item> <name>car Charger</name> <price>$34</price> </item>...

6 datafield name price Flex HTTPService URL <mx:application xmlns:mx=" layout="absolute" creationcomplete="productsrequest.send()" > creationcomplete HTTPService <mx:button x="50" y="8" label="get Data" click="productsrequest.send();" /> Flex Flash Player Flash Player 1. SWF 2. proxy SWF Adobe Flex Data Services Flex web ColdFusion JSP PHP ASP 3. crossdomain.xml /cross-domain policy Web crossdomain.xml SWF Flex Say Hello to Flex Flex <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="absolute"> <mx:panel layout="absolute" width="80%" height="80%"> <mx:textarea text="say hello to Flex!" top="10" bottom="70" left="10" right="30"/> <mx:button label="close" right="30" bottom="40"/> </mx:panel> </mx:application>

7 x y /Panel TextArea Button /style /theme Flex Halo <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="absolute"> <mx:style> TextArea { font-size: 36px; font-weight: bold; } </mx:style> <mx:panel layout="absolute" width="80%" height="80%" x="122" y="24"> <mx:textarea text="say hello to Flex!" top="10" bottom="70" left="10" right="30"/>

8 <mx:button label="close" right="30" bottom="40"/> </mx:panel> </mx:application> TextArea MXML <mx:style> CSS MXML <mx:style source="styles.css" /> HTML Flex /event-based ID <mx:panel id="mypanel" layout="absolute" width="80%" height="80%" x="122" y="24"> /behavior <mx:button label="close" right="30" bottom="40" click="mypanel.visible=false"/> false ActionScript ActionScript

9 <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="absolute"> <mx:style source="styles.css" /> <mx:script> <![CDATA[ public function close() : void { mypanel.visible = false; } ]]> </mx:script> <mx:panel id="mypanel" layout="absolute" width="80%" height="80%" x="122" y="24"> <mx:textarea text="say hello to Flex!" top="10" bottom="70" left="10" right="30" /> <mx:button label="close" right="30" bottom="40" click="close();" /> </mx:panel> </mx:application> ActionScript MXML <mx:script> ActionScript MXML ActionScript ActionScript MXML <mx:script source="myfunctions.as" /> Flex visible false hideeffect <mx:fade id="myfade"/> <mx:panel id="mypanel" layout="absolute" width="80%" height="80%" hideeffect="{myfade}" >

10 /transitions Flex ViewStack MXML ViewStack MXML Flex Flex Flex Flex Flex Builder /New Flex Project Wizard Flex File > New > Flex Project Flex Flex Builder Flex SDK MXML MXML Adobe Flex2 Language Reference

11 Flex 2 Flex Flex Flex Flex RIAs RIAs web Flex Adobe Flash Player 9 Flex Flex RIA 1. Adobe Flex 2 SDK 2. Adobe Flex Builder 2 3. Adobe Flex Data Services 2 4. Adobe Flex Charting 2 Flash Player 9 Flex Flash Player 9 Flash Player 9 ActionScript 3.0 Flash Player /presentation-tier Flash Player Flash Player 9 Flex JavaScript HTML Flex web Ajax JavaScript Flex Software Development Kit 2 Flex Flex Software Development Kit (SDK) Flex 2 SDK Flex Flex 2 SDK Flex Flex MXML ActionScript Flex SDK Flex Flex SDK Flex Builder Flex Data Services Flex MXML ActionScript MXML ActionScript Flash Player Flex Builder 2 Flex Builder Flex SDK Flex Data Services Flash Player IDE Flex Builder IDE

12 Flex Flex 2 SDK Flex Flex Flex Builder Flex Builder Eclipse Flex Builder Eclipse Eclipse Flex Builder MXML ActionScript CSS Flex Builder Flex Flex Builder Flex Builder

13 Flex Data Services 2 Flex Data Services Flex 2 SDK Flex Data Services Flex 2 SDK J2EE servlet Flex Data Services web Flex Data Services Flex Charting 2 Flex Flex

14 Flex Flex Flex Flex RPC HTTPService HTTP GET POST WebService SOAP

15 3. Flex Data Services Flex Data Services RPC AMF RemoteObjects Java JavaBeans EJBs POJOs Flex Data Services /proxy Flex Builder Flex Builder Window>Perspective>

16 Flex /Navigator view /Problems view Flex Builder / /Content Assist MXML ActionScript CSS Control+Space

17 Flex Builder Flex /Design mode Flex /design canvas /Components Flex /Properties views Flex

18 Flex Builder Flex ActionScript 3.0 SWF HTML