Formació Flex, Noba Informatica
-
Upload
santiago-lizardo -
Category
Technology
-
view
699 -
download
0
description
Transcript of Formació Flex, Noba Informatica
Desenvolupament de Rich Internet Applications amb Adobe Flex
Santiago [email protected]
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