Formació Flex, Noba Informatica

50 %
50 %
Information about Formació Flex, Noba Informatica
Technology

Published on February 27, 2009

Author: slizardo

Source: slideshare.net

Description

Introducció al desenvolupament de RIA amb la tecnologia de Adobe Flex.

Desenvolupament de Rich Internet Applications amb Adobe Flex Santiago Lizardo Noba Informàtica santiago@nobainfo.net http://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èdia Ha 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%) MXML MXMLC SWF ActionScript

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ínia public 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 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.

Adobe Flex MXML Te definit un namespace per defecte Podem definir els nostres propis namespaces <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <mx:Application xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot; layout=quot;verticalquot; xmlns:nobainfo=quot;nobainfo.*quot;> <mx:Button label=quot;Hello Flexquot; /> <nobainfo:SpecialButton/> </mx:Application>

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)

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ó

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)

Adobe Flex Components 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=quot;Hello Flexquot; /> <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 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

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=quot;testSizequot;> <mx:maximum>40</mx:maximum> <mx:minimum>10</mx:minimum> <mx:value>15</mx:value> </mx:NumericStepper> <mx:Label fontSize=quot;{testSize.value}quot;> <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=quot;testquot; /> <mx:TextInput id=quot;testDestquot; /> <mx:Binding source=quot;test.textquot; destination=quot;testDest.textquot; /> 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(quot;Hello you!quot;); } ); ]]> </mx:creationComplete> <mx:Button id=quot;buttonquot; label=quot;Waiting for youquot; />

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=quot;testEffectquot; zoomWidthFrom=quot;0quot; zoomWidthTo=quot;3quot; zoomHeightFrom=quot;0quot; zoomHeightTo=quot;3quot; /> <mx:Fade id=quot;fadeEffectquot; effectStart=quot;1quot; effectEnd=quot;0quot; duration=quot;4000quot; /> <mx:Button mouseDownEffect=quot;testEffectquot; label=quot;Zoomquot;/> <mx:Button mouseDownEffect=quot;fadeEffectquot; fontSize=quot;30quot; label=quot;Fadequot; />

Aplicació d'exemple Lector de noticies RSS utilitzant la clase HTTPService

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

Moltes gràcies! Contacteu amb Noba Informàtica per a el vostre pròxim projecte RIA http://www.nobainfo.com

Add a comment

Related presentations

Related pages

Cursos - INTA INFORMÀTICA S.L. - Pàgina principal - INTA ...

Academia de formacio Empresa informatica Asesoria informatica Consultoria empresas INTA Informatica
Read more

Xaloc Formació | Escola i Acadèmia de Formació a ...

Xaloc Formació ha impartit cursos de llengua rusa a molts establiments i comerços de la Costa Brava com Palafrugell, ... Nova plataforma i nous continguts.
Read more

Formació Continua | Fundació CIM

Demana una contrasenya nova × User Menu. User menu Carro de compra; Formació Continua Inici / Formació / Programa de Formació Contínua per a Joves .
Read more

Centre de Formació Ocupacional Nova Técnica S.L ...

Centre de Formació Ocupacional Nova Técnica S.L., academia o escuela de formación Informática en Tarragona academias.com. Todas las academias y escuelas
Read more

Invertir en Formació, una aposta segura. - CESI Alta ...

Academia de formació informàtica, empresarial i idiomes ... Moure’ns eficientment per aquesta nova realitat laboral vol dir conèixer, tanmateix, ...
Read more

Formació - Col·legi Oficial d'Enginyeria Informàtica de ...

Accés als cursos de formació de l’Associació de Tècnics en Informàtica (ATI) en eles mateixes condicions especials i descomptes que socis d’ATI.
Read more

CERTIFICACIO-ACTIC | Xaloc Formació

Control i Gestió d'Al·lergens Nova Reglamentació UE 1169 DE 2011. ... Xaloc Formació signa a l'Octubre de 2003 un acord de col·laboració amb CEINA, ...
Read more

Formació | Punttic

Nova convocatòria formativa de la titulació oficial en ... aquest 2016 continuarem amb la nostra formació a l'iniciació a les Tecnologies de ...
Read more

Sistemes CAD | Fundació CIM

Demana una contrasenya nova × User Menu. User menu Carro de compra; Sistemes CAD Inici / Formació / Programa en Sistemes CAD.
Read more