Download - Formació Flex, Noba Informatica
![Page 1: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/1.jpg)
Desenvolupament de Rich Internet Applications amb Adobe Flex
Santiago [email protected]
Noba Informàticahttp://www.nobainfo.com
![Page 2: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/2.jpg)
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
![Page 3: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/3.jpg)
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
![Page 4: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/4.jpg)
Adobe Flex
Flex és una tecnologia d'Adobe per la generació d'aplicacions multimèdiaHa nascut per la Web, però amb Adobe AIR és possible executar aplicacions Flex al escriptori.
![Page 5: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/5.jpg)
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
![Page 6: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/6.jpg)
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
![Page 7: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/7.jpg)
Adobe Flex Builder
Sistemes operatius suportats:●MS Windows●Mac OS●GNU/Linux (parcialment)
![Page 8: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/8.jpg)
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
![Page 9: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/9.jpg)
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.
![Page 10: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/10.jpg)
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íniapublic var status : String;/** * Comentari de codi */public function fooBar() : Boolean {
return (5 + 10 == 15);}
]]></mx:Script>
![Page 11: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/11.jpg)
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;
}}
}
![Page 12: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/12.jpg)
Adobe Flex
MXML
Descriu la aparença del componentPot 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.
![Page 13: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/13.jpg)
Adobe Flex
MXML
Te definit un namespace per defectePodem 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>
![Page 14: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/14.jpg)
Adobe Flex
Components bàsics
Label: Mostra un text estàticTextInput: Permet al usuari introduir dades● Es pot restringir per tipus de dades (solo nombres, dates, etc)
![Page 15: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/15.jpg)
Adobe Flex
Components bàsics
Rich TextEditor: Editor amb possibilitats de de donar format (estils) al textNumericStepper: Comptador Grid: Taula de dadesRepeater: Iteració
![Page 16: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/16.jpg)
Adobe FlexComponents 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 URLTambé es pot fe referència a una imatge incrustada en el SWF amb metadatas(@Embed)
![Page 17: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/17.jpg)
Adobe FlexComponents bàsics - Image
Utilitzar Embed implica:●Temps de carrega més elevats●Recompilació cada cop que es canvia la imatge
![Page 18: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/18.jpg)
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>
![Page 19: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/19.jpg)
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
![Page 20: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/20.jpg)
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.
![Page 21: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/21.jpg)
Adobe FlexCreació 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
![Page 22: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/22.jpg)
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.
![Page 23: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/23.jpg)
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
![Page 24: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/24.jpg)
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
![Page 25: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/25.jpg)
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>
![Page 26: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/26.jpg)
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.
![Page 27: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/27.jpg)
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ó.
![Page 28: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/28.jpg)
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" />
![Page 29: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/29.jpg)
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" />
![Page 30: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/30.jpg)
Aplicació d'exemple
Lector de noticies RSS utilitzant la clase HTTPService
![Page 31: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/31.jpg)
Enllaços
Flex components explorerhttp://www.adobe.com/go/flex_explorer_app
Flex styles explorerhttp://www.adobe.com/go/flex_styles_explorer_app
ASDochttp://www.adobe.com/go/flex3_apiref
LiveDocshttp://livedocs.adobe.com/flex/3/html/index.html
![Page 32: Formació Flex, Noba Informatica](https://reader034.vdocuments.co/reader034/viewer/2022051610/54941089b47959474d8b49fe/html5/thumbnails/32.jpg)
Moltes gràcies!
Contacteu amb Noba Informàtica per ael vostre pròxim projecte RIA
http://www.nobainfo.com