5 Componentes

(1)

Flex 4

(2)

Binding Expressions

• _{Una expresión enlazable permite mover datos}

de un objeto a otro en tiempo de ejecución sin necesidad de gestionar complejos eventos o escribir partes de código AS.

• _{Representan sólo una posibilidad para}

(3)

• _{<s:TextInput id=“origen” text=”cualquier}

dato”/>

• _{<s:Label id=”destino”/>}

• _{El valor de la propiedad texto del primer}

(4)

• _{Flex nos ofrece tres tipos de sintaxis para}

binding

– _{envolver la expresión enlazada en un atributo de}

una declaración MXML

– _{usando la etiqueta<fx:Binding>}

(5)

Binding 1

• _{Asignamos un id único al control origen}

• _{En el control destino, usamos una expresión As que}

hace referencia a la propiedad text del control origen con {}

– _{<s:TextInput id=”origen” text=”cualquier valor”/>} – _{<s:Label text=”{origen.text}”/>}

• _{En tiempo de ejecución, si la propiedad text del control}

(6)

enlazar dos componentes entre ellos

• _{En Flex 3:}

– _{<s:TextInput id=”input1” text=”{input2.text}”/>} – _{<s:TextInput id=”input2” text=”{input1.text}”/>}

• _{En Flex 4}

(7)

(8)

Binding 2 – fx:Binging

• _{En la etiqueta fx:Binding utilizamos sus}

propiedades source y destination

– _{<fx:Binding source=”sourceText.text”}

destination=”destinationText.text”/>

• _{Esta etiqueta se puede usar cuando el objeto}

(9)

Ejemplo

• _<fx:Script> • _<![CDATA[ • _[Bindable]

• _{private var myVar:String} • _]]>

• _</fx:Script>

• _{<fx:Binding source=”myInput.text” destination=”myVar”/>} • _{<s:TextInput id=”myInput”/>}

(10)

Crear expresiones bindable

• _{La mayoría de propiedades de los objetos en la} biblioteca de Flex son bindable

– _{significa que si el valor de la propiedad cambia en}

tiempo real, el nuevo valor es lanzado para actualizar el objeto de destino

• _{Si declaramos variables en AS, sus valores NO son} bindables por defecto.

– _{Debemos marcarlos como tal con la etiqueta}

(11)

Error

• _<fx:Script> • _<![CDATA[

• _{private var myVar:String=”hola”;}

• _]]>

• _</fx:Script>

• _{<s:Label id=”destinationLabel”}

(12)

Explicación

• _{la variable myVar comparte su valor con el}

control destinationLabel cuando la aplicación arranca, pero puesto que la variable no se ha marcado como bindable, cualquier cambio en tiempo real no será pasado al control.

• _{El compilar nos avisa de este problema y}

(13)

Solución

• _<fx:Script> • _<![CDATA[

• _[Bindable]

• _{private var myVar:String=”hola”;}

• _]]>

• _</fx:Script>

• _{<s:Label id=”destinationLabel”}

(14)

• _{la etiqueta de metadato [Bindable] debe}

colocarse justo antes de la variable que modifica.

• _{Tb se puede poner todo en una misma línea}

(15)

Arquitectura Model – View - Controller

• _{Una aplicación Flex puede tener muchas “vistas”}

– _{pantallas o representaciones visuales de datos que ejecutan}

funciones, recogen datos, o presenta la info del usuario.

– _{Si intentamos implementar todas esas vistas en un único fichero}

source, el resultado no es muy bueno.

• _{Igual, la aplicación puede necesitar hacer llamadas a}

servidores remotos para conseguir datos, implementar

estructuras de objetos que gestionan esos datos en tiempo real.

• _{En la clásica arquitectura MVC, las partes de la aplicación que}

hacen esas llamadas, y las clases que contienen o representan

(16)

• _{Controller es responsible de recibir y interpretar las}

entradas de usuario.

• _{En Flex, el controler es implementado como un}

mapping de los eventos de la aplicación.

• _{Podemos crear componentes view con MXML o As}

pero la mayoría de componentes MXML cumplen eficazmente esta función.

• _{Vamos ver cómo crear Vistas para la aplicación con}

(17)

Crear un nuevo componente MXML

• _{Se recomienda crear subcarpetas dentro del paquete root y}

nombrarlos en minus

– _{boton derecho en carpeta src del proyecto} – New – folder

– la llamamos components

– boton derecho en la nueva carpeta

– _{new – mxml component} • _{Nombre : Componente1} • Layout en VerticalLayout

• Based of Panel

• Finish

(18)

Componente1

<?xml version="1.0" encoding="utf-8"?>

<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> <s:layout>

<s:VerticalLayout/> </s:layout>

<fx:Declarations>

</fx:Declarations>

(19)

• _{Podemos borrar el elemento fx:Declarations y}

poner un título en vista Design al nuevo Panel

• _{Tb podemos “personalizar” la posición del}

componente con atributos padding dentro de VerticalLayout

• _{Puedes tb arrastrar otros componentes dentro}

(20)

Instanciar componentes MXML

• _{Si el componente personalizado MXML representa}

un objeto visual tnato un contenedor como un control, lo más habitual es instanciarlo usando código MXML.

• _{Debemos declarar un namespace personalizado que}

asocia con la carpeta que almacenada el fichero fuente mxml del componente

• _{Podemos indicar la carpeta con todos los}

(21)

• _{<s:Application}

xmlns:fx=”http://ns.adobe.com/mxml/2009”

• _{xmlns:s=”library://ns.adobe.com/flex/spark”}

• _{xmlns:mx=”library://ns.adobe.com/flex/mx”}

• _{xmlns:components=”components.*”>}

•

(22)

añadir el componente a un fichero MXML

• _{Creamos un nuevo fichero MXML}

• _{colocas el curso después de Application pero}

no dentro de Declarations

• _{escribes <nombre componente}

• _{lo cierras con />}

• _{en la etiqueta Application nos añade el}

namespace necesario

(23)

Solución – UseComponent.mxml

<?xml version=”1.0” encoding=”utf-8”?>

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:mx=”library://ns.adobe.com/flex/mx” xmlns:components=”components.*”>

<s:layout>

<s:VerticalLayout horizontalAlign=”center” paddingTop=”20”/> </s:layout>

(24)

• _{Tb lo puedes hacer desde vista Design}

• _{Debemos arrastrar el componente}

personalizado desde el panel Components

– _{si el namespace no ha sido creado, Flash Builder}

(25)

Instanciar componente personalizado con AS -

UseComponentWithAS.mxml

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:mx=”library://ns.adobe.com/flex/mx” creationComplete=”app_creationCompleteHandler(event)”> <fx:Script> <![CDATA[ import components.MyComponent_Complete; import mx.events.FlexEvent;

protected var comp:MyComponent_Complete;

protected function app_creationCompleteHandler(event:FlexEvent):void {

comp = new MyComponent_Complete(); comp.x = 100;

comp.y = 100;

this.contentGroup.addElement(comp); }

]]>

(26)

(27)

Objetos miembro

• _{Los componentes y las clases pueden tener objetos miembro.}

• _{Un objeto miembro es un elemento predeclarado que está}

instanciado en la clase.

• _{Las clases de AS soportan los objetos miembro:}

– _Properties.

• _{tiene valores dinámicos} – _Constants.

• _{tienen valores fijos} – _Methods.

• _{ejecutan acciones} – _Events.

• _{envian mensajes a otras partes de la aplicación} – _Styles.

(28)

Declarar una propiedad

• _{la sintaxis para declarar una propiedad es:}

– _{[access modifier] var [variable name]:[data type];}

• _{Una propiedad llamada propiedad1 con un}

tipo de dato String sería:

– _{public var propiedad1:String;}

• _{Podemos establecer una valor inicial a la}

propiedad:

(29)

Propiedades static

• _{Una propiedad static es un valor a la que podemos}

hacer referencia desde cualquier parte de la aplicación desde la definición de clase

• _{Para hacer una propiedad static, añadimos static}

delante o detrás del modificador de acceso – _{public static var myStaticVar:String;}

• _{para referirnos a la propiedad, usamos el nombre de}

clase com prefijo

(30)

Propiedad bindable

• _{Las propiedades son bindable solo si}

explícitamente las hemos marcado con la etiqueta [Bindable]

• _{Siempre comunica los cambios en su value a}

todos los objetos dentro del componente.

• _{Si la propiedad es public, comunica los}

(31)

Ejemplo propiedad bindable

• _{Creamos un componente personalizado}

basado en un Group

• _{Este componente puede ser una Label que}

(32)

Solución - CompWithBindableProp

<s:Group xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:mx=”library://ns.adobe.com/flex/mx” width=”400” height=”300”> <fx:Script> <![CDATA[ [Bindable]

public var valueToDisplay:String; ]]>

</fx:Script>

(33)

Declarar propiedades con MXML

• _{<fx:String id=”valueToDisplay”/>}

• _{Cualquier propiedad declarada por esta vía,}

implícitamente está marcada como public y bindable .

• _{Al declarar una propiedad usando MXML,}

debemos envolverla dentro de <fx:Declarations> .

(34)

<s:Group xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark”>

<fx:Declarations>

<fx:String id=”mxmlVar”/> </fx:Declarations>

(35)

Pasar datos a una propiedad

• _{Podemos pasar datos a una propiedad tanto}

declarada con As como MXML.

• _{Para pasar datos usando una declaración MXML:}

– _{declaramos la propiedad como un atributo XML del}

objeto y ponemos su valor con un valor literal o con una binding expression

• _{con literal}

– _{<components:MyComponent valueToDisplay=”hola”/>}

• _{con binding expression}

(36)

Constantes

• _{Una constante es una propiedad cuyo valor}

está establecido cuando se declara y nunca cambia.

– _{private const ALLPRODUCTS:String=”All Products”;} – _{public static const SELECTED:String=”selected”;}

(37)

• _{Puesto que el valor de la constante nunca}

cambia, no tiene sentido marcarla como bindable.

• _{Si se marca con la etiqueta [Bindable] el}

(38)

Métodos

• _{Se trata de una función que pertenece a una}

clase o a un componente.

• _{En el contexto de las definiciones de clase, un}

método define cómo una clase puede realizar una tarea concreta

• _{Tb se puede considerar un método como una}

función o una subrutina.

• _{De hecho, en AS los métodos se marcan con la}

(39)

Definir un método

– _{[access modifier] function [methodName](} – _{[argument declarations] ):[data type]}

– _{ – _}

• _{Un ejemplo de método podría ser}

– _{public function getValue():String} – _{

(40)

Modificadores de acceso en los métodos

• _{Al igual que las propiedades, los métodos son}

marcados con uno de los cuatro modificadores de acceso : public, private, protected y

internal.

• _{Si no incluimos un modificador, el acceso por}

(41)

Ejemplo

• _{Crear un componente con}

– _{dos propiedades públicas para el nombre y}

apellido

• _{deben ser bindables?}

– _{un método getFullName() que devuelva la cadena}

concatenada

(42)

Solución - CompWithPublicMethod

<?xml version="1.0" encoding="utf-8"?>

<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="150">

<s:layout>

<s:VerticalLayout paddingLeft="10" paddingTop="10"/> </s:layout>

<fx:Script> <![CDATA[ [Bindable]

public var firstName:String;

[Bindable]

public var lastName:String

public function getFullName():String

{

return firstName + " " + lastName;

} ]]>

</fx:Script>

(43)

Ejemplo

• _{Ahora debemos llamar a los métodos del}

componente

• _{Lo podemos hacer con sentencias AS o con}

(44)

Aplicación que llama al método del componente con una binding expression

UseComponentWithMethod.mxml

<s:layout>

<s:VerticalLayout horizontalAlign=”center” paddingTop=”20” gap=”20”/> </s:layout>

<components:CompWithPublicMethod id=”myComp”

firstName=”juan” lastName=”lopez”/>

(45)

• _{Cuando llamas a un método del componente}

sin argumentos en una binding expression, se ejecuta sólo en la construcción inicial del

objeto (cuando la aplicación arranca).

• _{Esta sintaxis no tiene un sistema para decirle a}

Flex que el método podría llamarse otra vez

– _{<s:Label text=”{myComp.getFullName()}”/>}

(46)

• _{los valores de la propiedad del componente se}

pasan con expresiones que enlazan con controles visuales en la aplicación y la

(47)

Llamar a un método de componente con AS -

CallComponentMethodWithAS

<s:layout>

<s:VerticalLayout horizontalAlign=”center” paddingTop=”20”/> </s:layout> <components:CompWithPublicMethod id=”myComp” firstName=”{firstNameInput.text}” lastName=”{lastNameInput.text}”/> <s:TextInput id=”firstNameInput”/> <s:TextInput id=”lastNameInput”/> <s:Label id=”fullNameOutput”/> <s:Button label=”Get Full Name”

(48)

Librerías de componentes

(49)

• _{Un component library es un fichero en}

formato ZIP que tiene una extensión .swc

• _{Son compatibles con aplicación Flex creadas}

con:

– _{Flash CS3 o CS4}

– _{Flex SDK en línea de comandos}

– _{Un proyecto Flex Library creado y gestionado en}

(50)

Crear library project

• _{File - New -Flex Library Project} • _{En el asistente}

– _{ponemos un nombre}

– _{indicamos su ubicación}

– _{si vamos a incluir las librerías para Adobe AIR}

• _{en la siguiente ventana}

– _{si debemos incluir alguna imagen o algún fichero XML lo}

indicamos en la ficha Assets

• _{se pueden añadir después desde Propiedades del proyecto}

(51)

Crear componente en la librería

• _{La carpeta raíz es src}

• _{Aquí podemos crear un paquete}

– _{boton derecho en src – new – package}

• _{Dentro del paquete podemos crear un MXML} component

• _{una vez construido el componente}

– _{project – build}

(52)

• _{El fichero swc es un fichero comprimido en}

formato ZIP

• _{Contiene un fichero SWF con los componentes}

y clases en código compilado y un fichero en formato XML catalog.xml que lista los

(53)

fxp y fxpl

• _{Al exportar un Flex Project library en el nuevo}

(54)

Usar componentes de librerías

• _{Podemos incorporar componentes de librería}

en nuestra aplicación Flex de dos maneras:

– _{Añadir la librería al source path del Flex Project}

(55)

Añadir librería al path

• _{Cada Flex Project tiene una build path que consiste}

en una lista de carpentas y librerías de componentes que muestras las clases y componentes disponibles para el proyecto.

• _{La build path incluye una source path de carpetas en}

donde el código fuente As y MXML se almacena y una library path que indica las librerias de

componentes compilados

• _{El build path se establece en las propiedades del}

(56)

• _{Seleccionamos el Flex Project}

• _{Project – Properties – Build Path – click en}

Library path

– _{hay varías vías para incluir la librería}

– _{debemos asegurarnos que el proyecto de librería}

está abierto

– _{Tb podríamos copiar el fichero swc en la carpeta}

(57)