Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PHP Québec 2008 - Introduction à Flex

1,431 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×