MIF Onsite I El paradigma Flex. Por Joan Garnet jgarnet@joangarnet.com

Tamaño: px

Comenzar la demostración a partir de la página:

Download "MIF Onsite I El paradigma Flex. Por Joan Garnet jgarnet@joangarnet.com"

Raúl Blázquez San Segundo
hace 8 años
Vistas:

1 MIF Onsite I El paradigma Flex Por Joan Garnet jgarnet@joangarnet.com

2 Qué es Flex? Es un conjunto de librerías y herramientas que permiten crear archivos.swf.

3 Swf Adobe Flash Player 9 Los archivos.swf se ejecutan en el Flash Player 9. El reproductor Flash Player 9: Potente máquina virtual AVM2 con compilación JIT (just in time) Está disponible para los principales navegadores de las principales plataformas Está instalado en el 95% de las máquinas conectadas a internet. Se mantiene compatibilidad con TODAS las versiones anteriores (AVM1).

Está disponible para los principales navegadores de las principales plataformas Está instalado

4 Flash player Actionscript 3 Lenguaje ActionScript 3 Lenguaje utilizado para generar el código intermedio (bytecode) que el Flash Player 9 interpreta. Basado en la especificación ECMAScript 3ª y 4ª edición. A destacar: Display List API ( EventDispatcher, DisplayObject, Sprite, addchild(), removechild() ) Expresiones regulares ( [A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4} ) E4X: ECMAScript for XML ( myxml.mif.( new RegExp( "pizza", "gi" ).test( charla.tostring() ) && precio == 0 ) ) Modelo de eventos de DOM3 ( capturing, targetting, bubbling ) Excepciones en tiempo de ejecución ( try catch finally throw ) Comprobación de tipo en tiempo de ejecución ( Runtime type checking ) Espacios de nombre (namespaces) personalizados ( más allá de public, private ) etc

$_%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4} ) E4X: ECMAScript for XML ( myxml.mif.( new RegExp( "pizza", "gi" ).test( charla.$

5 RAD Flex permite el desarrollo rápido de aplicaciones

6 MXML Lenguaje basado en XML. Permite declarar interfaces y otra lógica de aplicación de forma sencilla. <mx:application xmlns:mx=" <mx:label text= Hola mundo Flex /> <mx:button id= boton label= Botón click= trace( Hola Mundo Flex! ) /> </mx:application>

sencilla. <mx:application xmlns:mx="http://www.adobe.

7 lector de RSS creado con MXML 1 <?xml version="1.0" encoding="utf-8"?> 2 <mx:application xmlns:mx=" 3 <mx:script> 4 <![CDATA[ 5 import flash.net.navigatetourl; 6 ]]> 7 </mx:script> 8 <mx:httpservice id="rss" showbusycursor="true" url="{ bloguri.text }" /> 9 <mx:panel width="700" height="500" title="{ rss.lastresult.rss.channel.title }"> 10 <mx:hbox width="100%"> 11 <mx:textinput id="bloguri" width="100%" text=" /> 12 <mx:button label="rss!" click="rss.send()"/> 13 </mx:hbox> 14 <mx:datagrid id="blogdatagrid" width="100%" height="100%" dataprovider="{ rss.lastresult.rss.channel.item }"> 15 <mx:columns> 16 <mx:datagridcolumn headertext="título" datafield="title"/> 17 <mx:datagridcolumn headertext="fecha" datafield="pubdate" width="250"/> 18 <mx:datagridcolumn headertext="link" width="40"> 19 <mx:itemrenderer> 20 <mx:component> 21 <mx:hbox horizontalalign="center"> 22 <mx:image source="@embed('browser.png')" click="navigatetourl(new URLRequest(data.link),'_blank')"/> 23 </mx:hbox> 24 </mx:component> 25 </mx:itemrenderer> 26 </mx:datagridcolumn> 27 </mx:columns> 28 </mx:datagrid> 29 <mx:textarea width="100%" height="150" htmltext="{ blogdatagrid.selecteditem.description }"/> 30 </mx:panel> 31 </mx:application>

title }"> 10 <mx:hbox width="100%"> 11 <mx:textinput id="bloguri" width="100%" text="http://www.madeinflex.com/feed/" /> 12 <mx:button label="rss!" click="rss.

8 mxml: componentes <Application> <WebService id= ws wsdl= catalog.wsdl /> <Button label= Get Data click= ws.getproducts() /> <DataGrid dataprovider= {ws.getproducts.result} /> <LineChart dataprovider= {ws.getproducts.result} /> </Application>

getproducts() /> <DataGrid dataprovider= {ws.getproducts.result} /> <LineChart dataprovider= {ws.

9 mxml: identificadores <Application> <WebService id= ws wsdl= catalog.wsdl /> <Button label= Get Data click= ws.getproducts() /> <DataGrid dataprovider= {ws.getproducts.result} /> <LineChart dataprovider= {ws.getproducts.result} /> </Application>

10 mxml: propiedades <Application> <WebService id= ws wsdl= catalog.wsdl /> <Button label= Get Data click= ws.getproducts() /> <DataGrid dataprovider= {ws.getproducts.result} /> <LineChart dataprovider= {ws.getproducts.result} /> </Application>

11 mxml: eventos <Application> <WebService id= ws wsdl= catalog.wsdl /> <Button label= Get Data click= ws.getproducts() /> <DataGrid dataprovider= {ws.getproducts.result} /> <LineChart dataprovider= {ws.getproducts.result} /> </Application>

12 mxml: data binding <Application> <WebService id= ws wsdl= catalog.wsdl /> <Button label= Get Data click= ws.getproducts() /> <DataGrid dataprovider= {ws.getproducts.result} /> <LineChart dataprovider= {ws.getproducts.result} /> </Application>

13 mxml: css <Application> <mx:style> Application { backgroundgradientalphas: 1.0, 1.0; backgroundgradientcolors: #999999, #000000; } global { color: #000000; } </mx:style>... </Application>

14 Paquete mx.controls.* Controles NumericStepper PopUpButton PopUpMenuButton ProgressBar RadioButton RichTextEditor Text TextArea TextInput TileList Tree VSlider VideoDisplay Button CheckBox ColorPicker ComboBox DataGrid DateChooser DateField HSlider HorizontalList Image Label LinkButton List

RadioButton RichTextEditor Text TextArea TextInput TileList Tree VSlider

15 Contenedores y navegadores Paquete mx.containers.* Canvas ControlBar Form FormHeading Grid HBox HDividedBox ModuleLoader Panel Spacer Tile TitleWindow VBox VDividedBox Accordion ButtonBar LinkBar MenuBar TabBar TabNavigator ToggleButtonBar ViewStack

ModuleLoader Panel Spacer Tile TitleWindow VBox VDividedBox

16 Otros El framework está hecho para ser utilizado, pero también para ser extendido fácilmente. Flexlib Flex Exchange FlexBox

17 Descomposición de una aplicación Flex MXML CSS ActionScript 3 Recursos Otros.swf, imágenes, vídeos, fuentes, sonido

18 Composición de una aplicación Flex MXML MXMLC ActionScript 3 CSS MXMLC ActionScript 3 ActionScript 3 MXMLC bytecode Recursos + bytecode MXMLC SWF

19 Flex SDK Flex SDK Ahora gratuito, para la versión 3.0 Open Source (MPL). Incluye: Librería: cerca de líneas de código ActionScript 3 y mxml utilizables y extendibles. Compilador MXMLC: compilador especial que compila ActionScript y mxml indistintamente. Debugger Depurador de primera clase.

000 líneas de código ActionScript 3 y mxml utilizables y extendibles.

20 Flex Builder Flex Builder Entorno de desarrollo integrado multiplataforma (Win/Mac/Lin) para creación de aplicaciones Flex. Construido sobre la plataforma de desarrollo Eclipse. Coloreado / completado (inteligente) de código. Editor visual.

Flex. Construido sobre la plataforma de desarrollo Eclipse.

21 Flex Builder Incluye el SDK (librería, mxmlc y debugger). Soporte para creación de aplicaciones AIR. Soporte para múltiples SDK s y en la versión 3 algunas novedades

22 Flex Builder 3 JavaScript/Ajax wrappers: Para dar acceso a componentes o micro aplicaciones Flex desde JavaScript.

23 Flex Builder 3 Profiler: Monitorización del estado de la aplicación ( memoria y procesos ) en tiempo de ejecución: Live Objets, Filters, Memory snapshot, Allocation Trace, Performance snapshot, etc

24 Flex Builder 3 Data Wizards: Autogenerado de código necesario para realizar operaciones CRUD con varios lenguajes de servidor ( PHP, CFML, ASP.NET y Java ).

25 Flex Builder 3 Skinning import wizards: Importación de artwork desde los productos de la suite CS3+ para su posterior utilización como skins para cualquier componente.

26 Flex Builder 3 Editor visual para CSS: Vista diseño para los archivos CSS.

27 Flex Builder 3 Refactorización: Find all references (de cualquier tipo, variable, función, metadata, etc ) Move (mueve cualquier tipo en el sistema de archivos y actualiza automáticamente todas sus referencias) Rename (renombra cualquier identificador y actualiza automáticamente todas sus referencias)

28 Flex Builder 3 Soporte para múltiples SDK s:

29 Flex Builder 3 Framework caching: El Flash Player cachea el framework de Flex de forma parecida a la que los navegadores cachean las páginas web. Una vez cacheado el framework, el player solo descarga la porción de la aplicación que el desarrollador ha creado. Esto implica un aumento significativo en la velocidad de descarga de las aplicaciones y por consiguiente una mejora en la experiencia final del usuario.

30 Enlaces Flex adobe.com/flex Todo acerca de Flex y la plataforma Flash en general. labs.adobe.com Descarga del SDK de Flex y todas las alphas, betas de Flex Builder. madeinflex.com Comunidad de desarrolladores Flex en España. Flex Adobe User Group España. joangarnet.com/blog Mi blog personal. Recursos y artículos acerca de la plataforma Flash y otras tecnologías. formacion.carlosrovira.com Cursos de formación Adobe Flex. Cursos impartidos por especialistas españoles a cargo de Carlos Rovira, uno de los principales expertos españoles en Adobe Flex y la plataforma Flash en general.

Documentos relacionados

Adobe Flex 3 - curso online

Adobe Flex 3 - curso online Índice Bienvenido Presentación de la formación y el formador. Lo más básico Fundamentos de uso de Flex: su entorno, el MXML y el AS3. Control de los proyectos Descripción de