Introduction à Flex

Transcript

1. Introduction à Flex PHP Québec - 3 avril 2008 Thursday, January 14, 2010
2. Plan Qu’est-ce que Flex? Exemples (Amazon, PHP) Moteurs de recherche Thursday, January 14, 2010
3. Qu’est-ce que Flex? Un Framework basé sur Flash ActionScript 3.0 MXML Parfait pour les données Thursday, January 14, 2010
4. Hello World <mx:Model id="movies" source="disneymovies.xml" /> <mx:List dataProvider="{movies.movie}" labelField="title" /> <catalog> <movie title="Aladdin"></movie> <movie title="Balto"></movie> [...] </catalog> Thursday, January 14, 2010
5. Thursday, January 14, 2010
6. Data Binding mise à jour de la variable Binding élément visuel élément visuel élément visuel Thursday, January 14, 2010
7. Sources de données Array/Object Fichiers XML REST / SOAP Data Services (BlazeDS) Thursday, January 14, 2010
8. Exemple Amazon <mx:HTTPService id="search" url="http://ecs.amazonaws.com/onca/xml" /> private function init():void { var params:Object = { Service: "AWSECommerceService", AWSAccessKeyId: "07AJHV55CZA8XD0JPN82", Operation: "ItemSearch", SearchIndex: "Books", Title: "PHP" } search.send(params); } Thursday, January 14, 2010
9. Exemple Amazon <mx:List dataProvider=" {search.lastResult.ItemSearchResponse.Items.Item}" labelFunction="booklabel" /> private function booklabel(item:Object):String { return item.ItemAttributes.Title + " - " + item.ItemAttributes.Author; } Thursday, January 14, 2010
10. Thursday, January 14, 2010
11. Visuel [Bindable] private var mergedResult:ArrayCollection = new ArrayCollection; <mx:TileList dataProvider="{mergedResult}" itemRenderer="renderer" /> <mx:VBox> <mx:Image source="{data.imgSrcMedium}"/> <mx:Text text="{data.title}" fontSize="12" fontWeight="bold" /> <mx:Text text="{data.author}" /> </mx:VBox> Thursday, January 14, 2010
12. Thursday, January 14, 2010
13. Drag & Drop <mx:TileList dataProvider="{mergedResult}" itemRenderer="renderer1" dragEnabled="true" /> <mx:List dropEnabled="true" itemRenderer="renderer2" /> <mx:VBox> <mx:Image source="{data.imgSrcSmall}" /> <mx:Text text="{data.title}" /> </mx:VBox> Thursday, January 14, 2010
14. Thursday, January 14, 2010
15. Communiquer avec PHP $xml = ''; $sql = 'SELECT * FROM gps'; $result = mysql_query($sql); while ($gps = mysql_fetch_assoc($result)) { $xml .= "<item manufacturer=\"{$gps['manufacturer']}\" model=\"{$gps['model']}\" bluetooth=\"{$gps['bluetooth']}\" touchscreen=\"{$gps['touchscreen']}\" audioguide=\"{$gps['audioguide']}\" lcdw=\"{$gps['lcdw']}\" lcdh=\"{$gps['lcdh']}\" />"; } echo "<gps>{$xml}</gps>"; Thursday, January 14, 2010
16. Communiquer avec PHP private function init():void { xml.send(); } <mx:HTTPService id="xml" url="http://localhost:8888/FlexIntro/ example05.php" /> <mx:List id="list" dataProvider="{xml.lastResult.gps.item}" labelField="model"/> Thursday, January 14, 2010
17. Communiquer avec PHP <mx:Form> <mx:FormItem label="Manufacturer"> <mx:ComboBox dataProvider="{manufacturers}" selectedIndex="{int(list.selectedItem.manufacturer)}"/> </mx:FormItem> <mx:FormItem label="Model"> <mx:TextInput text="{list.selectedItem.model}"/> </mx:FormItem> <mx:FormItem label="Features"> <mx:CheckBox label="Bluetooth Data Connection" selected="{list.selectedItem.bluetooth == 1}"/> [...] </mx:FormItem> <mx:FormItem label="LCD Resolution"> <mx:HBox> <mx:NumericStepper value="{list.selectedItem.lcdw}"/> [...] </mx:HBox> </mx:FormItem> </mx:Form> Thursday, January 14, 2010
18. Thursday, January 14, 2010
19. Sauvegarder dans BD $sql = "UPDATE gps SET manufacturer=\"{$_POST['manufacturer']}\", model=\"{$_POST['model']}\", bluetooth=\"{$_POST['bluetooth']}\", touchscreen=\"{$_POST['touchscreen']}\", audioguide=\"{$_POST['audioguide']}\", lcdw=\"{$_POST['lcdw']}\", lcdh=\"{$_POST['lcdh']}\" WHERE id=\"{$_POST['id']}\" "; $response = mysql_query($sql) ? 'ok' : 'error'; echo "<response>{$response}</response>"; Thursday, January 14, 2010
20. Sauvegarder dans BD <mx:HTTPService id="saveScript" url="http://localhost:8888/FlexIntro/ example06.php" /> <mx:Button label="Save" click="save()"/> private function save():void { list.selectedItem.manufacturer = cboManufacturer.selectedIndex; list.selectedItem.model = txtModel.text; [...] var params:Object = { id: list.selectedItem.id, manufacturer: list.selectedItem.manufacturer, [...] }; saveScript.method = "POST"; saveScript.send(params); } Thursday, January 14, 2010
21. Thursday, January 14, 2010
22. Avantages Puissant et flexible Populaire SDK et compilateur MXML gratuits “AIR” donne accès au disque dur Flash Player 6 Flash Player 7 Flash Player 8 Flash Player 9 US/ Canada 99.0% 99.0% 98.5% 96.8% Europe2 98.1% 98.1% 97.6% 94.3% selon Adobe Thursday, January 14, 2010
23. Ressources Documentation - http://www.adobe.com/ support/documentation/en/flex/ Tutoriels - http://labs.adobe.com/ technologies/flexbuilder2/tutorials/ Blog - http://annafilina.com Thursday, January 14, 2010