Introduction to flex programming

1. Mbaye CAMARA - Adobe Developer

2. MBAYE CAMARA Ingénieur en Téléinformatique Développeur Flash/Flex (adobe) MspTechnology (Microsoft StudentPartners) @elmagnif Mbaye CAMARA - Adobe Developer

3. Mbaye CAMARA - Adobe Developer

4. Rich Internet Applications: v3 Adobe Flex & AIR Sun Java FX Firefox 3 Microsoft Siverlight Flash & Flex Mbaye CAMARA - Adobe Developer

5. NAVIGATEURS WEB Mbaye CAMARA - Adobe Developer

6. FLEX “Adobe® Flex™ 2 is a complete, powerful application development solution for creating and delivering cross- platform rich Internet applications (RIAs) within the enterprise and across the web. It enables the creation of expressive and interactive web applications that can reach virtually anyone on any platform. ” 3 Mbaye CAMARA - Adobe Developer

7. More succinctly: “Flex is a way to develop Flash applications by programming” 4 Mbaye CAMARA - Adobe Developer

8. How is Flex different from Flash? Flash Flex ActionScript MXML HTML/CSS Javascript Drawing Tools Library Layout Engine Animation Timeline Layers Yes No Yes Limited Yes Yes Yes Yes Yes Yes Yes Yes Yes No No Yes No No 5 Mbaye CAMARA - Adobe Developer

9. EMCA standardized, like Javascript, yet object- orientedlike java Flash Flex ActionScript MXML HTML/CSS Javascript Drawing Tools Library Layout Engine Animation Timeline Layers Yes No Yes Limited Yes Yes Yes Yes Yes Yes Yes Yes Yes No No Yes No No 5 Mbaye CAMARA - Adobe Developer

10. EMCA standardized, like Javascript, yet object- orientedlike java Flash Flex ActionScript MXML Yes Yes Yes Declaritive XML - HTML/CSS Yes LIke XUL Yes Yes Yes Yes Yes Javascript Drawing Tools Library Layout Engine Animation Timeline Layers Yes No No Yes No No 5 Mbaye CAMARA - Adobe Developer

11. ActionScript Timeline Layers Canvas Movie clips Stage 6 Mbaye CAMARA - Adobe Developer

12. Flash documents (.FLA) are binary files created in the Adobe Flash authoring environment. Interface elements are “drawn”manipulated over a timeline using tweens, key frames, and layers (or programmatically). A .FLA file is compiled into a .SWF file and embedded into an HTML page. Mbaye CAMARA - Adobe Developer

13. 8 Mbaye CAMARA - Adobe Developer

14. Drawingtools 9 Mbaye CAMARA - Adobe Developer

15. Timeline 10 Mbaye CAMARA - Adobe Developer

16. Stage 11 Mbaye CAMARA - Adobe Developer

17. Library & components 12 Mbaye CAMARA - Adobe Developer

18. Actionscript editor 13 Mbaye CAMARA - Adobe Developer

19. ActionScript Data services MXML Tags Source View Html & Css Perspectives 14 Mbaye CAMARA - Adobe Developer

20. Flex documents (.MXML) are text files authored in Adobe FlexBuilder (based on Eclipse). Alternatively, Eclipse RCP can be used with a free FlexBuilder plug-in. In Flex, interface elements and components are created using declaritive XML-like tags. 15 Mbaye CAMARA - Adobe Developer

21. privatefunctionrequestPhotos():void{ photoService.cancel(); var params:Object = new Object(); params.format = 'rss_200_enc'; params.tags = searchTerms.text; photoService.send(params); } privatefunctionphotoHandler(event:ResultEvent):void{ photoFeed = event.result.rss.channel.item as ArrayCollection; } ]]> </mx:Script> <mx:HTTPService id="photoService" url="http://api.flickr.com/services/feeds/photos_public.gne" result="photoHandler(event)"/> <mx:HBoxwidth="391"> <mx:TextInput id="searchTerms" /> <mx:Button label="Button" click="requestPhotos()"/> </mx:HBox> <mx:TileListwidth="100%" height="100%" dataProvider="{photoFeed}"> <mx:itemRenderer> <mx:Component> <mx:VBoxwidth="125" height="125" paddingBottom="5" paddingLeft="5" paddingTop="5" paddingRight="5"> <mx:Imagewidth="75" height="75" source="{data.thumbnail.url}"/> <mx:Texttext="{data.credit}"/> </mx:VBox> </mx:Component> </mx:itemRenderer> </mx:TileList> </mx:WindowedApplication> 16 Mbaye CAMARA - Adobe Developer

22. FLEXBUILDER 17 Mbaye CAMARA - Adobe Developer

23. ECLIPSE PLUGIN 18 Mbaye CAMARA - Adobe Developer

24. Can Flex can be a companion to your existing technology stack? Q 19 Mbaye CAMARA - Adobe Developer

25. Probably. 20 Mbaye CAMARA - Adobe Developer

26. EXAMPLE Base donnée Bo y Baldé CLASS FILE SWF Benson Web Server M Séne FlexBuilder Eclipse Moi-même (:p) 21 Mbaye CAMARA - Adobe Developer

27. Mbaye CAMARA - Adobe Developer Execution Time

28. Do we you any special technology to run and deploy Flex apps? Q 27 Mbaye CAMARA - Adobe Developer

29. (:p) YES 28 Mbaye CAMARA - Adobe Developer

30. Flex Data Services 2 “A powerful solution for creating data-intensive rich applications” • Deployed as standard J2EE application • Real-time data push and pub/sub messaging • Allows for occasionally connected applications 20.OOO fcfa /CPU Read More: http://www.adobe.com/products/flex/dataservices/ Mbaye CAMARA - Adobe Developer

31. WebORB for Java “WebORB for Java is server-side technology enabling connectivity between Flash Remoting and AJAX clients and Java applications.” 500.000 fcfa/CPU Mbaye CAMARA - Adobe Developer

32. Mbaye CAMARA - Adobe Developer

33. Do users need anything special to run Flex applications? Q 32 Mbaye CAMARA - Adobe Developer

34. Yes. 33 Mbaye CAMARA - Adobe Developer

35. 96% of PC’s have what they need to run a Flex application. 34 Mbaye CAMARA - Adobe Developer

36. AIR “Adobe® AIR™ lets developers use their existing web development skills in HTML, AJAX, Flash and Flex to build and deploy rich Internet applications to the desktop.” 47 Mbaye CAMARA - Adobe Developer

37. ? Application.air Java Applet Flash Content Web Content Flex Content AIR RUNTIME WebKit Browser Flash Player SQLite Database PDF Support OS integration via: File System I/O System Drag & Drop Online/Offline Full Network Stack Windowing Clipboard Sync Windows 2000 Windows XP Mac OSX Linux BETA Native Menu API Right-click support 48 Mbaye CAMARA - Adobe Developer

38. FinetuneDeskop } } Music streaming from Internet source + Music from my local iTunes library 49 Mbaye CAMARA - Adobe Developer

39. DEEZER 20 Mbaye CAMARA - Adobe Developer

40. Pownce Mbaye CAMARA - Adobe Developer

41. ebay Desktop 53 Mbaye CAMARA - Adobe Developer

42. Multiple window support 55 Mbaye CAMARA - Adobe Developer

43. Live updating 56 Mbaye CAMARA - Adobe Developer

44. Mbaye CAMARA - Adobe Developer

45. FINALLY 62 Mbaye CAMARA - Adobe Developer

46. 62 Mbaye CAMARA - Adobe Developer RICH INTERNET APPLICATION Is the future

47. 62 Mbaye CAMARA - Adobe Developer THANKS FOR WATCHING