Successfully reported this slideshow.

Adobe Flex builder by elmagnif

591 views

Published on

Introduction to flex programming

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Adobe Flex builder by elmagnif

  1. 1. Mbaye CAMARA - Adobe Developer<br />
  2. 2. MBAYE CAMARA<br />Ingénieur en Téléinformatique<br /> Développeur Flash/Flex (adobe)<br />MspTechnology (Microsoft StudentPartners) <br /> @elmagnif<br />Mbaye CAMARA - Adobe Developer<br />
  3. 3. Mbaye CAMARA - Adobe Developer<br />
  4. 4. Rich Internet Applications:<br />v3<br />Adobe Flex & AIR<br />Sun Java FX<br />Firefox 3<br />Microsoft Siverlight<br />Flash & Flex<br />Mbaye CAMARA - Adobe Developer<br />
  5. 5. NAVIGATEURS WEB<br />Mbaye CAMARA - Adobe Developer<br />
  6. 6. FLEX<br />“Adobe® Flex™ 2 is a complete, powerful application<br />development solution for creating and delivering cross-<br />platform rich Internet applications (RIAs) within the<br />enterprise and across the web. It enables the creation of<br />expressive and interactive web applications that can reach<br />virtually anyone on any platform. ”<br />3<br />Mbaye CAMARA - Adobe Developer<br />
  7. 7. More succinctly:<br />“Flex is a way to develop Flash applications by programming”<br />4<br />Mbaye CAMARA - Adobe Developer<br />
  8. 8. How is Flex different from Flash?<br />Flash<br />Flex<br />ActionScript<br /> MXML<br /> HTML/CSS<br />Javascript<br /> Drawing Tools<br /> Library<br /> Layout Engine<br />Animation Timeline<br /> Layers<br />Yes<br /> No<br /> Yes<br />Limited<br />Yes<br /> Yes<br /> Yes<br /> Yes<br /> Yes<br />Yes<br />Yes<br />Yes<br />Yes<br />No<br />No<br />Yes<br />No<br />No<br />5<br />Mbaye CAMARA - Adobe Developer<br />
  9. 9. EMCA standardized, like<br />Javascript, yet object-<br />orientedlike java<br />Flash<br />Flex<br />ActionScript<br /> MXML<br /> HTML/CSS<br /> Javascript<br /> Drawing Tools<br /> Library<br /> Layout Engine<br />Animation Timeline<br /> Layers<br />Yes<br /> No<br /> Yes<br />Limited<br />Yes<br /> Yes<br /> Yes<br /> Yes<br /> Yes<br />Yes<br />Yes<br />Yes<br />Yes<br />No<br />No<br />Yes<br />No<br />No<br />5<br />Mbaye CAMARA - Adobe Developer<br />
  10. 10. EMCA standardized, like<br />Javascript, yet object-<br />orientedlike java<br />Flash<br />Flex<br />ActionScript<br /> MXML<br />Yes<br />Yes<br />Yes<br />Declaritive XML<br />-<br />HTML/CSS<br />Yes<br />LIke XUL<br />Yes<br /> Yes<br /> Yes<br /> Yes<br /> Yes<br />Javascript<br /> Drawing Tools<br /> Library<br /> Layout Engine<br />Animation Timeline<br /> Layers<br />Yes<br />No<br />No<br />Yes<br />No<br />No<br />5<br />Mbaye CAMARA - Adobe Developer<br />
  11. 11. ActionScript<br /> Timeline<br />Layers<br />Canvas<br />Movie<br />clips<br />Stage<br />6<br />Mbaye CAMARA - Adobe Developer<br />
  12. 12. Flash documents (.FLA) are binary files created in<br /> the Adobe Flash authoring environment.<br />Interface elements are “drawn”manipulated<br /> over a timeline using tweens, key frames, and<br /> layers (or programmatically).<br /> A .FLA file is compiled into a .SWF file and<br /> embedded into an HTML page.<br />Mbaye CAMARA - Adobe Developer<br />
  13. 13. 8<br />Mbaye CAMARA - Adobe Developer<br />
  14. 14. Drawingtools<br />9<br />Mbaye CAMARA - Adobe Developer<br />
  15. 15. Timeline<br />10<br />Mbaye CAMARA - Adobe Developer<br />
  16. 16. Stage<br />11<br />Mbaye CAMARA - Adobe Developer<br />
  17. 17. Library & components<br />12<br />Mbaye CAMARA - Adobe Developer<br />
  18. 18. Actionscript<br /> editor<br />13<br />Mbaye CAMARA - Adobe Developer<br />
  19. 19. ActionScript<br />Data<br />services<br /> MXML<br />Tags<br />Source<br />View<br /> Html &<br /> Css<br /> Perspectives<br />14<br />Mbaye CAMARA - Adobe Developer<br />
  20. 20. Flex documents (.MXML) are text files authored in Adobe<br />FlexBuilder (based on Eclipse). Alternatively, Eclipse RCP can<br /> be used with a free FlexBuilder plug-in.<br />In Flex, interface elements and components are created using<br />declaritive XML-like tags.<br />15<br />Mbaye CAMARA - Adobe Developer<br />
  21. 21. privatefunctionrequestPhotos():void{<br />photoService.cancel();<br /> var params:Object = new Object();<br />params.format = 'rss_200_enc';<br />params.tags = searchTerms.text;<br />photoService.send(params);<br /> }<br />privatefunctionphotoHandler(event:ResultEvent):void{<br />photoFeed = event.result.rss.channel.item as ArrayCollection;<br /> }<br /> ]]><br /> </mx:Script><br /> <mx:HTTPService id="photoService"<br /> url="http://api.flickr.com/services/feeds/photos_public.gne" result="photoHandler(event)"/><br /> <mx:HBoxwidth="391"><br /> <mx:TextInput id="searchTerms" /><br /> <mx:Button label="Button" click="requestPhotos()"/><br /> </mx:HBox><br /><mx:TileListwidth="100%" height="100%"<br />dataProvider="{photoFeed}"><br /> <mx:itemRenderer><br /> <mx:Component><br /> <mx:VBoxwidth="125" height="125"<br />paddingBottom="5"<br />paddingLeft="5"<br />paddingTop="5"<br />paddingRight="5"><br /> <mx:Imagewidth="75" height="75"<br /> source="{data.thumbnail.url}"/><br /> <mx:Texttext="{data.credit}"/><br /> </mx:VBox><br /> </mx:Component><br /> </mx:itemRenderer><br /></mx:TileList><br /></mx:WindowedApplication><br />16<br />Mbaye CAMARA - Adobe Developer<br />
  22. 22. FLEXBUILDER<br />17<br />Mbaye CAMARA - Adobe Developer<br />
  23. 23. ECLIPSE PLUGIN<br />18<br />Mbaye CAMARA - Adobe Developer<br />
  24. 24. Can Flex can be a companion to<br />your existing technology stack?<br />Q<br />19<br />Mbaye CAMARA - Adobe Developer<br />
  25. 25. Probably.<br />20<br />Mbaye CAMARA - Adobe Developer<br />
  26. 26. EXAMPLE<br />Base donnée<br />Bo y Baldé<br />CLASS FILE<br />SWF<br />Benson<br />Web Server<br />M Séne<br />FlexBuilder<br />Eclipse<br />Moi-même (:p)<br />21<br />Mbaye CAMARA - Adobe Developer<br />
  27. 27. Mbaye CAMARA - Adobe Developer<br />Execution Time<br />
  28. 28. Do we you any special technology<br />to run and deploy Flex apps?<br />Q<br />27<br />Mbaye CAMARA - Adobe Developer<br />
  29. 29. (:p)<br />YES<br />28<br />Mbaye CAMARA - Adobe Developer<br />
  30. 30. Flex Data Services 2<br />“A powerful solution for creating data-intensive rich applications”<br />• Deployed as standard J2EE application<br />• Real-time data push and pub/sub messaging<br />• Allows for occasionally connected applications<br />20.OOO fcfa /CPU <br />Read More:<br />http://www.adobe.com/products/flex/dataservices/<br />Mbaye CAMARA - Adobe Developer<br />
  31. 31. WebORB for Java<br />“WebORB for Java is server-side technology enabling connectivity between Flash Remoting and<br />AJAX clients and Java applications.”<br />500.000 fcfa/CPU<br />Mbaye CAMARA - Adobe Developer<br />
  32. 32. Mbaye CAMARA - Adobe Developer<br />
  33. 33. Do users need anything special to<br />run Flex applications?<br />Q<br />32<br />Mbaye CAMARA - Adobe Developer<br />
  34. 34. Yes.<br />33<br />Mbaye CAMARA - Adobe Developer<br />
  35. 35. 96% of PC’s have what they need to run<br /> a Flex application.<br />34<br />Mbaye CAMARA - Adobe Developer<br />
  36. 36. AIR<br />“Adobe® AIR™ lets developers use their existing web<br /> development skills in HTML, AJAX, Flash and Flex to<br /> build and deploy rich Internet applications to the<br /> desktop.”<br />47<br />Mbaye CAMARA - Adobe Developer<br />
  37. 37. ?<br />Application.air<br />Java Applet<br />Flash Content<br />Web Content<br />Flex Content<br />AIR RUNTIME<br />WebKit<br />Browser<br />Flash<br />Player<br />SQLite<br />Database<br />PDF<br />Support<br />OS integration via:<br />File System I/O System Drag & Drop<br />Online/Offline Full Network Stack<br />Windowing Clipboard Sync<br />Windows 2000<br /> Windows XP<br /> Mac OSX<br /> Linux BETA<br />Native Menu API<br />Right-click support<br />48<br />Mbaye CAMARA - Adobe Developer<br />
  38. 38. FinetuneDeskop<br />}<br />}<br />Music streaming from<br />Internet source<br />+<br />Music from my local<br />iTunes library<br />49<br />Mbaye CAMARA - Adobe Developer<br />
  39. 39. DEEZER<br />20<br />Mbaye CAMARA - Adobe Developer<br />
  40. 40. Pownce<br />Mbaye CAMARA - Adobe Developer<br />
  41. 41. ebay Desktop<br />53<br />Mbaye CAMARA - Adobe Developer<br />
  42. 42. Multiple window support<br />55<br />Mbaye CAMARA - Adobe Developer<br />
  43. 43. Live updating<br />56<br />Mbaye CAMARA - Adobe Developer<br />
  44. 44. Mbaye CAMARA - Adobe Developer<br />
  45. 45. FINALLY<br />62<br />Mbaye CAMARA - Adobe Developer<br />
  46. 46. 62<br />Mbaye CAMARA - Adobe Developer<br />RICH INTERNET APPLICATION <br />Is the future<br />
  47. 47. 62<br />Mbaye CAMARA - Adobe Developer<br />THANKS FOR WATCHING<br />

×