Desenvolupament d'aplicacions RIA amb Adobe Flex

1. Desenvolupament de Rich Internet Applications amb Adobe Flex Santiago Lizardo santiago@nobainfo.net Noba Informàtica http://www.nobainfo.com
2. Contingut de la presentació • Breu introducció a RIA i Adobe Flex • Presentació del Adobe Flex Builder (IDE) • Fonaments de la programació amb Flex • Creació d'una aplicació d'exemple
3. Rich Internet Applications Una nova generació d'aplicacions Web amb característiques semblants a aplicacions d'escriptori. Experiència d'usuari més enriquidora... ... pel nombre de controls ... usabilitat i estètica
4. Adobe Flex Flex és una tecnologia d'Adobe per la generació d'aplicacions multimèdia Ha nascut per la Web, però amb Adobe AIR és possible executar aplicacions Flex al escriptori.
5. Adobe Flex El compilador de Flex és de codi lliure. El compilador (mxmlc) transforma codi .mxml i codi .as (ActionScript) a .swf que pot ser reproduït per qualsevol navegador (>99%) ActionScript MXMLC SWF MXML
6. Adobe Flex Builder L'entorn integrat de desenvolupament per a Flex ➔ És de pagament ➔ Construït com plugin d'Eclipse Compte amb: • Editor de codi (syntax highlighting + autocomplete) • Dissenyador d'interfície gràfica (GUI) • Debugger • Profiling
7. Adobe Flex Builder Sistemes operatius suportats: • MS Windows • Mac OS • GNU/Linux (parcialment)
8. Adobe Flex Builder Instal·lació del Flex Builder • All-in-one: Un executable instal·la Eclipse més el plugin de Flex • Plugin: Per a afegir el plugin de Flex a una instal·lació d'Eclipse ja existent En qualsevol dels dos cassos s'instal·la automàticament el compilador de Flex
9. Adobe Flex Builder Depuració d'aplicacions Flex Builder instal·la una versió del Flash Player que pot integrar-se amb el IDE per a depurar aplicacions Flash/Flex. Es poden definir breakpoints en qualsevol lloc on hagi codi ActionScript. És freqüent utilitzar la funció trace() per deixar traces de la execució del programari.
10. Adobe Flex ActionScript És un llenguatge orientat a objectes, molt semblant a JavaScript i que s'utilitza en Flash/Flex per a codificar la lògica de la aplicació. <mx:Script> <![CDATA[ // Comentari de línia public var status : String; /** * Comentari de codi */ public function fooBar() : Boolean { return (5 + 10 == 15); } ]]> </mx:Script>
11. Adobe Flex package nobainfo { public class UserCredential { private var userName : String; private var password : String; public function UserCredential() { } public function getUserName() : String { return userName; } public function setUserName(userName : String) : void { this.userName = userName; } } }
12. Adobe Flex MXML Descriu la aparença del component Pot contenir lògica però no és recomanable Es tracte de codi XML; per tant es compleixen les mateixes regles per a: etiquetes, comentaris, caràcters especials, etc.
13. Adobe Flex MXML Te definit un namespace per defecte Podem definir els nostres propis namespaces <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:nobainfo="nobainfo.*"> <mx:Button label="Hello Flex" /> <nobainfo:SpecialButton/> </mx:Application>
14. Adobe Flex Components bàsics Label: Mostra un text estàtic TextInput: Permet al usuari introduir dades • Es pot restringir per tipus de dades (solo nombres, dates, etc)
15. Adobe Flex Components bàsics Rich TextEditor: Editor amb possibilitats de de donar format (estils) al text NumericStepper: Comptador Grid: Taula de dades Repeater: Iteració
16. Adobe Flex Components bàsics Image: Carrega i mostra una imatge. • Suporte la majoria de formats: jpeg, gif, png • També suporta parcialment: carrega de altres swf i de imatges vectorials svg La imatge pot referenciar a una URL També es pot fe referència a una imatge incrustada en el SWF amb metadatas (@Embed)
17. Adobe Flex Components bàsics - Image Utilitzar Embed implica: • Temps de carrega més elevats • Recompilació cada cop que es canvia la imatge
18. Adobe Flex Propietats dels components - Com atribut - Com una etiqueta niada <mx:Button label="Hello Flex" /> <mx:Button> <mx:label>Good bye Flex</mx:label> </mx:Button>
19. Adobe Flex Estils i temes de la aplicació - Estils: Per a personalitzar els colors, grandària de la lletra, bordes, alineació, etc - Skins (temes): Permeten canviar l'aparença completa d'un component. (barres de desplaçament) - Els estils amb CSS (cascades d'estils) - NO són compatibles amb l'estàndard CSS però són molt semblants
20. Adobe Flex Estils i temes de la aplicació Els estils es poden definir com atributs d'un element o dins d'un fitxer especial amb totes les propietats gràfiques. (com succeeix amb HTML) Flex valida que els estils estiguin ben formats durant el moment de compilació. S'utilitza la etiqueta <mx:Style /> per a la inclusió de codi d'estils.
21. Adobe Flex Creació de components propis Convenient • Per a la re-utilització de codi • Per a no tenir un únic tros de codi Es pot utilitzar MXML o ActionScript
22. Adobe Flex Cadascun dels components creats són en realitat una classe ActionScript que hereda de UIComponent - Sprite Un cop creats, es poden utilitzar com qualsevol altre component.
23. Adobe Flex Layouts: Defineixen la distribució dels components • Absolute: posicions fixes • Horizontal: un component a la dreta d'altre • Component HBox • Vertical: un component sota altre • Component VBox
24. Adobe Flex Absolute: posicions (x,y) fixes • Component Canvas • Ràpid • No és re-dimensiona Permet la superposició de components Es pot treballar amb referencies. Exemple: 10 pixels a la dreta del component X
25. Adobe Flex Enllaçant components (binding) Amb Flex és possible alimentar un component amb les dades d'un altre, i els canvis del segon es reflecteixen immediatament en el primer. <mx:NumericStepper id="testSize"> <mx:maximum>40</mx:maximum> <mx:minimum>10</mx:minimum> <mx:value>15</mx:value> </mx:NumericStepper> <mx:Label fontSize="{testSize.value}"> <mx:text>This is a test</mx:text> </mx:Label>
26. Adobe Flex Enllaçant components (binding) Formes d'ús: • Amb claus {} • Utilitzant la etiqueta <mx:Binding /> <mx:TextInput id="test" /> <mx:TextInput id="testDest" /> <mx:Binding source="test.text" destination="testDest.text" /> Solament les propietats marcades amb [Bindable] poden ser utilitzades.
27. Adobe Flex Utilització d'esdeveniments Els esdeveniments poden ser del sistema (ex: quan s'acabi de carregar un component) o de l'usuari (ex: quan clica sobre un boto) S'hi poden gestionar en línia o cridant a una funció.
28. Adobe Flex Utilització d'esdeveniments Funciona també un mecanisme de Listeners <mx:creationComplete> <![CDATA[ button.addEventListener(MouseEvent.CLICK, function(e : MouseEvent) : void { mx.controls.Alert.show("Hello you!"); } ); ]]> </mx:creationComplete> <mx:Button id="button" label="Waiting for you" />
29. Adobe Flex Efectes especials Els esdeveniments de la aplicació poden estar associats a efectes gràfics Existeixen etiquetes que representen aquests efectes i poden iniciar-se i aturar-se durant esdeveniments de la aplicació. <mx:Zoom id="testEffect" zoomWidthFrom="0" zoomWidthTo="3" zoomHeightFrom="0" zoomHeightTo="3" /> <mx:Fade id="fadeEffect" effectStart="1" effectEnd="0" duration="4000" /> <mx:Button mouseDownEffect="testEffect" label="Zoom"/> <mx:Button mouseDownEffect="fadeEffect" fontSize="30" label="Fade" />
30. Aplicació d'exemple Lector de noticies RSS utilitzant la clase HTTPService
31. Enllaços Flex components explorer http://www.adobe.com/go/flex_explorer_app Flex styles explorer http://www.adobe.com/go/flex_styles_explorer_app ASDoc http://www.adobe.com/go/flex3_apiref LiveDocs http://livedocs.adobe.com/flex/3/html/index.html
32. Moltes gràcies! Contacteu amb Noba Informàtica per a el vostre pròxim projecte RIA http://www.nobainfo.com