PHP Québec 2008 - Introduction à Flex

1,352 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,352
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

PHP Québec 2008 - Introduction à Flex

  1. 1. Introduction à Flex PHP Québec - 3 avril 2008 Thursday, January 14, 2010
  2. 2. Plan Qu’est-ce que Flex? Exemples (Amazon, PHP) Moteurs de recherche Thursday, January 14, 2010
  3. 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. 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. 5. Thursday, January 14, 2010
  6. 6. Data Binding mise à jour de la variable Binding élément élément visuel élément visuel visuel Thursday, January 14, 2010
  7. 7. Sources de données Array/Object Fichiers XML REST / SOAP Data Services (BlazeDS) Thursday, January 14, 2010
  8. 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. 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. 10. Thursday, January 14, 2010
  11. 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. 12. Thursday, January 14, 2010
  13. 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. 14. Thursday, January 14, 2010
  15. 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. 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. 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. 18. Thursday, January 14, 2010
  19. 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. 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. 21. Thursday, January 14, 2010
  22. 22. Avantages Puissant et Flash Flash Flash Flash Player 6 Player 7 Player 8 Player 9 flexible US/ 99.0% 99.0% 98.5% 96.8% Canada Populaire Europe2 98.1% 98.1% 97.6% 94.3% selon Adobe SDK et compilateur MXML gratuits “AIR” donne accès au disque dur Thursday, January 14, 2010
  23. 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

×