Desenvolupament de Rich Internet Applications amb Adobe Flex

Santiago Lizardosantiago@nobainfo.net

Noba Informàticahttp://www.nobainfo.com

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

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

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.

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

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

Adobe Flex Builder

Sistemes operatius suportats:●MS Windows●Mac OS●GNU/Linux (parcialment)

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

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.

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>

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;

}}

}

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.

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>

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)

Adobe Flex

Components bàsics

Rich TextEditor: Editor amb possibilitats de de donar format (estils) al textNumericStepper: Comptador Grid: Taula de dadesRepeater: Iteració

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)

Adobe FlexComponents bàsics - Image

Utilitzar Embed implica:●Temps de carrega més elevats●Recompilació cada cop que es canvia la imatge

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>

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

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.

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

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.

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

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

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>

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.

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ó.

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" />

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" />

Aplicació d'exemple

Lector de noticies RSS utilitzant la clase HTTPService

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

Moltes gràcies!

Contacteu amb Noba Informàtica per ael vostre pròxim projecte RIA

http://www.nobainfo.com