Your SlideShare is downloading. ×
Generación de Interfaces a partir de XML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Generación de Interfaces a partir de XML

3,190
views

Published on

Published in: Technology

1 Comment
1 Like
Statistics
Notes
  • Sin saber nada de programación, solo lo basico de HTML, cual sería tus recomendaciones para alguien que quiere especializarse en realizar interfaces 2 way XML ? cuales son principales conocimientos que tengo que comenzar a aprender para poder emprender estas tareas, me gustaria conocer tus comentarios.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,190
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
178
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Desarrollo de interfaces: 2.Interfaces a partir de XML (Lenguajes descriptivos XAML, XUL, UIML, controles, eventos, et c…) Jose Alberto Benítez Andrades jose@indipro.es www.indipro.es @indiprowebJose Alberto Benítez Andrades– jose@indipro.es - @indiproweb 1
  • 2. XML XML (Extensible Markup Language) es un subconjunto del SGML (Standard Generalized Markup Language). XML es un metalenguaje con el que se pueden definir otros lenguajes de etiquetas. Los documentos XML tienen formato de texto. Desde febrero de 1998 es una recomendación del W3C (World Wide Web Consortium). Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 2
  • 3. Aplicaciones basadas en XML Ejemplo Real de Método Antiguo Transmisión de información0148I49A052209020622052002090206VANADU ADUANA EX JORGE CABE02649000868610148I49N1506062002GEORGINA OLAVARRIA Y CIA.LTDA.AV.NUEVA COSTANERA3730, VITACURA1313203788508204JORGE OLAVARRIA ROMUSSI 024845591BRU TEXTILES NVZANDVOORSTRAAT 12 D B-2800 MECHELEN51400000000000000000000000000000000000000000000000000000000514BELGICA514BELGICA 04AMSTERDAM T621AEROP.A.M.BENIT992RAEROSAN S.A.(SA101805200200000000012205200200000000 220520022205200200000000000000000003649000868610148I49MARTINAIR HOLLAND51596674490148110090000432 180520021922376 17052002ABX LOGISTICS7996876070000000000000000000000000000000GENERAL01004010060000000026921013000000004327300100000000312480010000000001084400000120000000000625000000000570000000004271700000000000000 04649000868610148I49001TEJIDO DE FILAMENTO CONTINUO DAE WON UNITECH-F 100PCT. POLIESTER TENIDOS, SIN TEXTURIZAR TEJIDO DE TRAMA Y URDIMBRE00000000000000000004385006E000000712611170000000000000540761130000000427170007002230000000029900018000000178+0000000082270000000000000 0000000000000000000000000 0000000000000000000000000 000000000000 Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 3
  • 4. Aplicaciones basadas en XML• Ejemplo real actual<DSC> <codproducto>YNUA00385</codproducto> <FechaCreacionUsuario>2002-07-15 00:00:00.0</FechaCreacionUsuario> <VersionProducto>2</VersionProducto> <despachador>A54</despachador> <RutCliente>86223700</RutCliente> <DigitoVerificador>5</DigitoVerificador> <DescripcionDeclarada> ; SIERRA ALTERNATIVA; ALBER; KERF GANGSAW; DE 420MM X 13MM X 40MM X0,80MM., PARA MAQUINA PARA TRABAJAR LA MADERA </DescripcionDeclarada> <FechaCargaAduana>2002-08-14 16:27:58.0</FechaCargaAduana> <RESPUESTAS> <respuesta> ACEPTADO </respuesta> </RESPUESTAS></DSC> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 4
  • 5. Aplicaciones basadas en XML Personalización de la WEB (lenguaje propio) Cada usuario (o grupo de usuarios) puede crear su propiolenguaje para el formato de datos y documentos, su propiovocabulario, según sus necesidades, siguiendo las reglas de XML. Aplicaciones XML para el comercio electrónico (intercambio) Aunque inicialmente XML se definió para separarcontenido de presentación, ha resultado esencial para elintercambio de información estructurada a través de Internet Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 5
  • 6. Aplicaciones basadas en XML Gestión de la información / conocimiento (visual) Si etiquetamos la información y a cada usuario se leproporciona una serie de etiquetas de interés, se podría resaltarla información que le es interesante, frente a la que no esrelevante. Descargar trabajo en el Servidor (desaturación) Por medio del Modelo de Objetos de Documentos(DOM), podemos evitarle trabajo al servidor, espera al cliente yno saturar tanto la red. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 6
  • 7. Aplicaciones basadas en XML Buscador WEB (velocidad en búsquedas) Si disponemos de un sitio donde toda la información seencuentre etiquetada en documentos XML, las búsquedas seríanmucho más efectivas, ya que se conjuga la potencia de labúsqueda indexada junto la búsqueda semántica. Intercambio de información (seguridad, velocidad gestiones) Si contratamos a una empresa y nos facilitan la estructurade los datos que vamos a recibir (DTD/Schema), sabremos entodo momento qué tipos de documentos XML estamosrecibiendo, y podremos tratarlos de la forma que deseemos. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 7
  • 8. Cómo trabajar con XML Navegadores (Browsers) Editores XML Parsers XML Editores XSL Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 8
  • 9. Cómo trabajar con XML Un documento XML tiene dos estructuras, una lógica y otra física.  Físicamente, un documento XML puede consistir en una o más unidades de almacenamiento, llamadas entidades.  Las entidades tienen contenido y están identificadas por un nombre.  Cada documento XML contiene una entidad, llamada entidad documento, que sirve como punto de partida para el procesador XML y que puede contener el documento completo. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 9
  • 10. Cómo trabajar con XML Entidades Predefinidas En XML 1.0, se definen cinco entidades para representar caracteres especiales y que no se interpreten como marcado en el procesador XML. Es decir, por ejemplo, así podemos usar el carácter "<" sin que se interprete como el comienzo de una etiqueta XML. Entidad Carácter &amp; & &lt; < &gt; > &apos; &quot; " Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 10
  • 11. Cómo trabajar con XML Lógicamente, esta estructurado en forma de árbol, con una raíz a partir de la cual se organiza la información. El documento está compuesto de declaraciones, elementos, comentarios, referencias a caracteres e instrucciones de procesamiento, todos los cuales están indicados por una marca explícita. Ej. <aviso tipo="emergencia" gravedad="mortal">Que no cunda el pánico</aviso> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 11
  • 12. Cómo trabajar con XML Los elementos pueden tener atributos, que son una manera de incorporar características o propiedades a los elementos de un documento. Ej. un elemento "chiste" puede tener un atributo "tipo" y un atributo "calidad", con valores "vascos" y "bueno" respectivamente.<chiste tipo="vascos" calidad="bueno"> Esto es un día quePatxi y Josu van paseando... </chiste> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 12
  • 13. Cómo trabajar con XML Cada documento XML contiene uno o más elementos, cuyos limites están delimitados por etiquetas de comienzo y de final o, en el caso de elementos vacíos, por una etiqueta de elemento vacío. Cada elemento tiene un tipo, identificado por un nombre, denominado identificador genérico, y puede tener un conjunto de especificaciones de atributos. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 13
  • 14. Cómo trabajar con XML La "declaración de tipo de documento" define qué tipo de documento estamos creando para ser procesado. Es decir, definimos que declaración de tipo de documento (DTD) valida y define los datos que contiene nuestro documento XML. Un identificador público (PUBLIC): que hace referencia a dicha DTD. El tipo de documento Identificador universal de recursos (URI): precedido de la palabra SYSTEM. Dónde encontrar la información sobre su DefiniciónEj. <!DOCTYPE MESAJE SYSTEM "mesaje.dtd"><!DOCTYPE HTML PUBLIC "-/ /W3C/ /DTD HTML 3.2 Final/ /EN"><!DOCTYPE LABEL SYSTEM “http://azuaje.ulpgc.es/dtds/label.dtd"> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 14
  • 15. Estructura de XML Un documento bien formado es aquel documento que cumple con la especificación de XML 1.0, es decir que sea sintácticamente correcto. Un documento XML bien formado debe seguir algunas reglas básicas: Debe contener uno o más elementos. Debería comenzar con una declaración XML. Ej. <?xml version="1.0"standalone="yes"?> (explicación) Sólo puede haber un elemento raíz. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 15
  • 16. Estructura de XML Cumple todas las restricciones que proporciona su especificación a través del DTD. Toda etiqueta abierta hay que cerrarla. Para cada etiqueta de inicio debe existir una etiqueta de termino. Las únicas etiquetas que van solas son las etiquetas vacías.Ej. < Nombre> Rodrigo </Nombre> <xsd:attribute name="xxx" type="yyy"/> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 16
  • 17. Estructura de XML Es sensible a mayúsculas y minúsculas, las etiquetas de inicio y de termino se tienen que escribir igual. No se pueden intercalar etiquetas. Ej. <li>HTML <b> permite <i> esto </b> </i>. <li>En XML la <b> estructura <i> es </i> jerárquica </b>.</li> Una etiqueta puede tener atributos cerrados entre comillas. Ej. <xsd:attribute name=“idioma"/> El nombre de las etiquetas empiezan con una letra, o con uno o más signos de puntuación. Los comentarios van encerrados. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 17
  • 18. Estructura de XML Un ejemplo de un documento XML bien formado:<?xml version="1.0" standalone="yes"?><biblioteca> <libro call_no="PZ3.S8195Gr6"> <cover href="grapes.gif" alt="Grapes of Wrath"/> <titulo>The Grapes of Wrath</titulo> <autor> <apellido>Steinbeck</apellido> <nombre>John</nombre> </autor> <publicación>Viking Press</publicación> <año_pub>1939</año_pub> </libro></biblioteca> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 18
  • 19. XML - XERCES Xercer es un parser XML, es decir, un analizador del archivo XML, que establece si éste es válido. Xercer es desarrollado y mantenido por la organización apache. Es multiplataforma. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 19
  • 20. XML - XERCES Xerces2 Java Parser 2.6.2, apoya los siguientes estándares y APIs:  eXtensible Markup Language (XML) 1.0 Third Edition Recommendation  Namespaces in XML Recommendation  eXtensible Markup Language (XML) 1.1 First Edition Recommendation  Namespaces in XML 1.1 Recommendation  Document Object Model (DOM) Level 2 Core, Events, and Traversal and Range Recommendations  Simple API for XML (SAX) 2.0.1 Core, and Extensions  Java APIs for XML Processing (JAXP) 1.2  XML Schema 1.0 Structures and Datatypes Recommendations Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 20
  • 21. XML - XERCES La mayor parte de los Parser pueden trabajar de dos formas:  de forma independiente.  usándolos como librerías desde lenguajes de programación. Xercer-J no es la excepción:  se puede usar stand-alone.  o como una librería xerces.jar, cuyos objetos se pueden instanciar desde los programas. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 21
  • 22. XML – Parser en línea XParse de Jeremie Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 22
  • 23. XML - Conclusiones Perspectivas futuras de XML .  Existen herranmientas que apoyan el desarrollo y la implementación de XML, entre ellas se encuentra Xercer, el cual esta implementado para ser usado con Java.  XML tiene un muy amplio campo de aplicaciones, que le permite seguir creciendo como ayuda a los usuarios de internet .  XML, a pesar de su rápido desarrollo, tiene un largo camino hacia su total madurez. Esta parte explora desde el punto de vista técnico y político el futuro de XML y estándares asociados tanto dentro de W3C como fuera de ella. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 23
  • 24. XML - DTD Un "Document type definition“, DTD, es una declaración en un documento de SGML o de XML que especifiqua apremios en la estructura del documento. Puede ser incluido dentro del archivo de documento, pero se almacena normalmente en un archivo separado de ASCII-text. La sintaxis del DTD de SGML y de DTD de XML son muy similares, pero no idénticos Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 24
  • 25. XML - DTDUn ejemplo de un muy simple DTD de XML para describir un lista de personas es dado acontinuación:<!ELEMENT people_list (person*)> <!ELEMENT person(name, birthdate?, gender?, socialsecuritynumber?)> <!ELEMENT name (#PCDATA) ><!ELEMENT birthdate (#PCDATA) > <!ELEMENT gender (#PCDATA) > <!ELEMENTsocialsecuritynumber (#PCDATA) >Tomando esto línea por línea, dice: Una "people_list" es un elemento que contiene muchos elemetos "person". El "*" denota que pueden haber 0, 1 o muchos elementos "person". Un elemento "person" contiene los elementos "name", "birthdate", "gender" y "socialsecuritynumber". El "?" indica que un elemento es opcional. El elemento "name" no tiene "?", entonces "person" debe contener un elemento"name". Un elemento "name" contiene información. Un elemento "birthdate" contiene información. Un elemento "gender" contiene información. Un elemento "socialsecuritynumber" contiene información. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 25
  • 26. XML - DTDUn ejemplo de un archivo XML, el cual usa el DTD<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE people_list SYSTEM “example.dtd"><people_list> <person> <name>Fred Bloggs</name> <birthdate>27/11/2008</birthdate> <gender>Male</gender> </person></people list> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 26
  • 27. XML - DOM ¿Cómo funciona XML DOM? Los archivos _XML, son enviados a la máquina cliente, en la cual, gracias a DOM, se pueden realizar las operaciones pedidas por los clientes. Una vez, que el cliente termina sus requerimientos, la información es reenviada, al servidor. Gracias a DOM, no hay pérdida, ni desorden en los datos enviados. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 27
  • 28. XML – Metadatos Metadatos: información sobre los datos. Proporcionan descriptores, propiedades, información acerca de otros objetos (textos, contenidos multimedia, manuales, programas, personas, etc.) para simplificar su uso y su gestión o facilitar su localización. En las bibliotecas existen desde tiempos inmemoriales en forma de fichas de catálogo, que facilitan la localización de los documentos. En Internet esto no es tan fácil: los metadatos deben ser adecuados para la interpretación tanto por parte de las personas como por los robots de búsqueda. Además deben ser tan fáciles de crear que cualquier autor pueda describir el contenido de sus páginas: accesibilidad y utilidad. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 28
  • 29. XML - Metadatos La etiqueta META del HTML. Ej: se usa “keyworks” para indexar y devuelve description en lugar de las dos primeras líneas del documento.<META NAME="description" CONTENT="XML, formatos paraInternet"><META NAME="keyworks"CONTENT="XML, Internet, ebusiness"> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 29
  • 30. XML – Declaración version: Indica la versión de XML usada en el documento. Es obligatorio ponerlo, a no ser que sea un documento externo a otro que ya lo incluía. encoding: La forma en que se ha codificado el documento. Se puede poner cualquiera, y depende del parser el entender o no la codificación. Por defecto es UTF-8, aunque podrían ponerse otras, como UTF-16, US-ASCII, ISO-8859-1, etc. No es obligatorio salvo que sea un documento externo a otro principal. standalone: Indica si el documento va acompañado de un DTD ("no"), o no lo necesita ("yes"); en principio no hay porqué ponerlo, porque luego se indica el DTD si se necesita Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 30
  • 31. LENGUAJES DE DESCRIPCIÓN DE INTERFACES BASADOS EN XML Definición de interfaces de usuario utilizando lenguajes declarativos, ventajas:  Fácil aprendizaje  Definir interfaz de forma independiente de la lógica y contenido de la aplicación Lenguajes basados en XML: candidatos a soportar especificaciones gracias a versatilidad, extensión y capacidades de refinamiento XML => modelo de interfaz abstracto Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 31
  • 32. LENGUAJES DE DESCRIPCIÓN DE INTERFACES BASADOS EN XML Tipos: XAML, XUL, UIML, SVG, MXML (entre otros). XAML: “Xtensible Application Markup Language“  Microsoft  L.D. Basado en XML que define objetos y sus propiedades.  Sintaxis  definir la UI para la “Windows Presentation Foundation" (WPF)  Independencia del código de la aplicación.  Tutoriales: http://www.scriptol.com/xaml/ Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 32
  • 33. XAML XAML: “Xtensible Application Markup Language“  Microsoft  L.D. Basado en XML que define objetos y sus propiedades.  Sintaxis  denir la UI para la “Windows Presentation Foundation" (WPF)  Independencia del código de la aplicación.  RIAJose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 33
  • 34. XAML RIA (Rich Internet Applications)  Aplicaciones web con características de aplicaciones de escritorio.  Se ejecutan en navegador web.  Mediante MV se agregan las distintas características  En aplicaciones web normales, hay una recarga continua cuando usuario pulsa y tráfico alto entre cliente y servidor.  En RIA no se producen recargas de página.  Recarga desde un inicio toda la aplicación. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 34
  • 35. XAML Edición de proyectos en XAML con Silverlight  Descargar Visual Web Developer 2010 Express  Descargar Silverlight  Descargar Silverlight Tools ( versión 5 para Visual Studio 2010 ) Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 35
  • 36. XAML – Entorno de desarrollo Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 36
  • 37. XAML – Entorno de desarrollo Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 37
  • 38. XAML – Entorno de desarrollo Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 38
  • 39. XAML – Entorno de desarrollo Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 39
  • 40. XAML – Hola Mundo Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 40
  • 41. XAML – Hola Mundo – Generando el proyecto Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 41
  • 42. XAML – Hola Mundo – Generando el proyecto Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 42
  • 43. XAML – Hola Mundo – Generando el proyecto Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 43
  • 44. XAML – Hola Mundo – Generando el proyecto Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 44
  • 45. XAML – Propiedades de un TextBlock <TextBlock>Hello</TextBlock> <TextBlock FontSize="18">Hello</TextBlock> <TextBlock FontFamily="Courier New">Hello</TextBlock> <TextBlock TextWrapping="Wrap" Width="100"> Hello there, how are you? </TextBlock> <TextBlock> Hello there,<LineBreak/>how are you? </TextBlock> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 45
  • 46. XAML – Formas <Rectangle /> <Ellipse /> <Line /> <Polygon /> <PolyLine /> <Path /> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 46
  • 47. XAML – Controles Formas  Básicos:  De alto nivel: • TextBox • Border • Calendar • Button • Image • DataGrid • Toggle/Repeat • Slider Button • MediaElement • MultiScaleImage • DateTimePicker • CheckBox • RadioButton • ToolTip • ListBox  Formas: • ScrollViewer • Ellipse Layouts • Rectangle  Navegación: • Line • StackPanel • HyperlinkButton • TextBlock • Grid / GridSplitter • Canvas • Popup • Path Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 47
  • 48. XAML –Elementos Para nombrar los elementos, siempre se utiliza la misma nomenclatura  <Button x:Name=“Miboton”/> Los eventos en XAML se declaran de la siguiente forma:  <Button x:Name=“Miboton” Content=“Púlsame” Click=“Miboton_Click“/> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 48
  • 49. XAML – Controles Elementos de interfaz de usuario ( UI ) reutilizables <Button x:Name=“MyButton” Content=“Pulsame” Width=“150” Height=“50” /> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 49
  • 50. XAML – Layout Silverlight y WPF soporta 3 tipos de paneles:  Canvas  StackPanel  Grid Otros paneles personalizables son por ejemplo:  TilePanel  RadialPanel  Etc. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 50
  • 51. XAML – Canvas Al igual que en JAVA, es una superficie para dibujar. <Canvas Width="250" Height="200"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Yellow" /> </Canvas> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 51
  • 52. XAML –StackPanel<StackPanel Orientation="Vertical"> <Button>Button 1</Button> <Button>Button 2</Button></StackPanel> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 52
  • 53. XAML –StackPanel<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="100"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="75"/> <RowDefinition Height="*"/> <RowDefinition Height="85"/> </Grid.RowDefinitions> <Button Grid.Column="1" Grid.Row="1" Content=“Button 1" Margin="8,8,8,8"/> <Button Grid.Column="1" Grid.Row="2" Content=“Button 2" Margin="8,8,8,8"/></Grid> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 53
  • 54. XAML – Transformaciones Todos los elementos aceptan las siguientes transformaciones:  <RotateTransform />  <ScaleTransform />  <SkewTransform />  <TranslateTransform />  Moves  <MatrixTransform />  Scale, Skew and Translate Combined Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 54
  • 55. XAML – Transformaciones<TextBlock Text="Hello World"> <TextBlock.RenderTransform> <RotateTransform Angle="45" /> </TextBlock.RenderTransform></TextBlock> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 55
  • 56. XAML – Enlaces interesantes http://www.xamlsource.net/xamlcheatsheet http://blog.blueboxes.co.uk/wp-content/uploads/2009/02/wpfcheatsheet.pdf http://silverlight.codeplex.com/ http://www.rdiazconcha.com/ Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 56
  • 57. XUL XUL: “User Interface Language"  Creación de interfaces dinámicas.  Conjunto de eltos + amplio que HTML (menús, barras de herramientas, pestañas, árboles..)  Portabilidad multisistema  Depende del motor GECKO para poder funcionar.  XUL es el lenguaje que se utiliza para crear la interfaz y Gecko es el componente que permite que el navegador sea capaz de “interpretar” los documentos XUL.  http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/16.0b4/run times/ Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 57
  • 58. XUL XUL fue construido para el desarrollo de Mozilla Browser. - Para su facilidad y rapidez. Nos permite ahorrar dinero y tiempo en el desarrollo de aplicaciones para multiplatafoma. XUL es un lenguaje diseñado para hacer interfaces de usuario portables. XUL lleva la ventaja de otros lenguajes XML. Principalmente fue para el desarrollo de aplicaciones deinterfaz de usuario fuera rápido y expedito. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 58
  • 59. XUL Nos permite el uso del navegador como estación de trabajo para probar y ejecutar nuestra interfaz de usuario. Nos da la posibilidad de poder ocupar Extensiones para el Desarrollo de Aplicaciones en XUL(!). Desarrollar en Extensiones. Desarrollar en Temas. Utilizar el Systema de Chrome. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 59
  • 60. XUL - Que es el Chrome (Mozilla System Chrome). Es un árbol de directorio donde guardamos nuestra extensión en XUL. Hace una referencia de un archivo xul. Crea un vinculo con el Mozilla System chrome. Permite que nuestro navegador pueda encontrar nuestro programa. Posee una orientación jerárquica de directorios. Creación de enlaces por medio de chrome a nuestro archivo.xul entre otros. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 60
  • 61. XUL – Estructura de directorios XUL Para tener nuestro directorio CHROME Estandar, primero debemos crear un directorio (De nuestro proyecto) con el nombre de nuestro programa, luego crear un subdirectorio llamado chrome. Dentro de ese subdirectorio chrome, podemos tener otros subdirectorios los cuales pueden ser.  Content  Skin  Locale Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 61
  • 62. XUL – Descripción de directorios XUL Cada subdirectorio necesita una referencia la cual la damos con un archivo llamado content.rdf. Subdirectorio Content.  Contiene los Script de la ventana.  Los Archivos con Extension .XUL  Archivos con Estención JS o JavaScript. Subdirectorio Skin.  Contiene las imágenes que se utilizan  Algún archivo de Temas especifico. Subdirectorio Locate.  Losarchivos de localización para el Idioma. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 62
  • 63. XUL – Rama de directorios en XUL Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 63
  • 64. XUL – Herramientas que necesitamos https://addons.mozilla.org/es/firefox/addon/remote-xul-manager/ http://ted.mielczarek.org/code/mozilla/xuledit/xuledit.xul Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 64
  • 65. XUL – Herramientas que necesitamos Toda cabecera de un archivo con extensión .xul necesita los namespace para comenzar, según en xul necesitamos la mismas cabecera de un archivo XML. Todos los widget que se encuentren en el tab de <window> los cuales Heredan Gran parte de los atributos jerarquizados de los widget superiores. La mayoría de los widget terminan con el tab /> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 65
  • 66. XUL – Elementos disponibles en XUL Widget Tools. Algunos elementos que se pueden crear con XUL TextBox. CheckBox. Slippers. Toolbars. Menu bar. Tabs... Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 66
  • 67. XUL – Widgets disponibles en XUL Widget Tools.  Tabs Layout  Popus Button  Progressmeters Grids  Radiobuttons Imágenes  Scrollings  Splitters Labels  Textboxes Lists  Tree view Menubar Simples, Nested Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 67
  • 68. XUL – Button<?xml version=1.0?><window id="hello" title="Button" width="400" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ><box> <button> <description value="Submit" /> </button></box></window> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 68
  • 69. XUL – Button con javascript<?xml version=1.0?><window id="hello" title="Button" width="400" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ><box><button label=" Open" image="open.gif" oncommand="alert(click);" /></box></window> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 69
  • 70. XUL – Button con función<?xml version=1.0?><window id="hello" title="Button" width="400" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ><script>function clicking(txt){ alert(txt);}</script><box> <button label=" Save" image="save.gif" oncommand="clicking(click);" /></box></window> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 70
  • 71. XUL – Button con evento<?xml version=1.0?><window id="event" title="Event" width="400" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ><box> <button id="bx" label="Location" /></box><script>function myfunction(event){ alert("Coo " + event.clientX + " " + event.clientY );}var x = document.getElementById("bx");x.addEventListener("click", myfunction, true);</script></window> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 71
  • 72. XUL – Cajas horizontales y verticales<box> <hbox> <box> <description value="Left panel" /> </box> <vbox> <box> <description value=" Top right panel" /> </box> <box> <description value=" Bottom right panel" /> </box> </vbox> </hbox></box> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 72
  • 73. XUL – Canvas• Ver canvas.xul Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 73
  • 74. XUL – Groupbox (1)<?xml version=1.0?><window id="hello" title="Groupbox" width="400" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ><groupbox > <caption label="Search" style="background-color:white;" /> <vbox> <hbox> <label control="sea" value="Type the query:"/> <textbox id="sea" flex="1"/> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 74
  • 75. XUL – Groupbox (2) </hbox> <hbox> <button label="Searching" width="120" oncommand="searching();"/> </hbox> </vbox></groupbox><script> function searching() { var obj = document.getElementById("sea"); alert("Searching " + obj.value); }</script></window> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 75
  • 76. XUL – HTML Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 76
  • 77. XUL – Posicionamiento de botones con Grid Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 77
  • 78. XUL – Listas (1) Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 78
  • 79. XUL – Listas (2) Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 79
  • 80. XUL – Menú Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 80
  • 81. XUL – Menú + eventos Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 81
  • 82. XUL – Barra de progreso Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 82
  • 83. XUL – Panel con pestañas Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 83
  • 84. XUL – Árboles (ver ficheros tree.xul) Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 84
  • 85. Exportación a XPI Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 85
  • 86. LENGUAJES DE DESCRIPCIÓN DE INTERFACES BASADOS EN XML UIML: “User Interface Markup Language”  Objetivo  expresar UIs para múltiples plataformas de software en diferentes dispositivos y para múltiples aplicaciones.  Soporte para UIs multimodales y dinámicas  Permite crear y visualizar interfaces para plataformas Java estándar, J2ME y HTMLJose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 86
  • 87. SVG SVG  Expresa gráficos 2D de forma textual.  El SVG permite tres tipos de objetos gráficos: • Elementos geométricos vectoriales (p.e. caminos consistentes en rectas y curvas, y áreas limitadas por ellos) • Imágenes de mapa de bits /digitales • Texto  http://www.svgbasics.com/shapes.htmlJose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 87
  • 88. SVG SVG Objetos gráficos  Agrupados, transformados y compuestos en objetos previamente renderizados  Estilo común  Dibujado  dinámico e interactivo.  Document Object Model (DOM)  animaciones de gráficos vectoriales ECMAScript o SMIL.  Manejadores de eventos como "onMouseOver" y "onClick",  SVG puede salvarse comprimidas con gzip  SVGZ. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 88
  • 89. SVG Tiene todas las cualidades asociadas a un formato vectorial: es escalable, compacto, con formas editables mediante curvas Bézier, con contornos suavizados, transparencias y capaz de incluir mapas de bits. El tamaño de los ficheros SVG es muy compacto. El texto es editable, admitiendo las fuentes escalables más comunes, como TrueType o Type 1. La calidad de colores es excelente. El color del gráfico se puede calibrar con los sistemas estándar de gestión de color. El fichero SVG no es binario: se trata de un fichero de texto normal y corriente. Esto significa que se puede editar con cualquier procesador de textos y sus contenidos se pueden indexar, buscar,… Es compatible con los estándares actuales de la web. Incluye soporte para hojas de estilo CSS (Cascading Style Sheets). Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 89
  • 90. SVG Puede incluir código para modificar el gráfico dinámicamente. SVG es XML, y XML es un formato extensible. Los fabricantes de software empiezan a adoptarlo como formato nativo para sus aplicaciones. Admite efectos de sonido, visuales, eventos asociados al ratón, etiquetas informativas, etc. Puede generarse dinámicamente en un servidor web como respuesta a instrucciones de Java, JSP, JavaScript, Perl, PLSQL, ASP, XSLT… Un fichero SVG tiene un tamaño menor que sus equivalentes codificados en mapa de bits como ficheros gif o jpg. Los gráficos SVG son independientes de la resolución, de modo que su tamaño puede ser aumentado o reducido mediante el zoom sin que la calidad de la imagen resulte deteriorada. Por la misma razón, los objetos gráficos o sus componentes pueden ser enlaces a partes de la misma imagen, otras imágenes, páginas web, etc. Con SVG se pueden realizar animaciones con cualquier grado de complejidad. Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 90
  • 91. SVG – Características Básicas Estructura de un documento SVG <?xml version="1.0" encoding="iso-8859-1" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/ 2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg id="main" xmlns=http://www.w3.org/2000/svg> […] </svg>- Naturaleza XML- Modelo de renderizado- Reutilización de código mediante <defs/> y <use> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 91
  • 92. SVG – Características Básicas Sistemas de coordenadas- Unidades: px,pt,in,com,mm,en,em,%- Importancia del atributo viewBox <svg id="main" width="400" height="400"xmlns=http://www.w3.org/2000/svg viewBox="0 0 10 5"> […] </svg> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 92
  • 93. SVG – Características Básicas Transformaciones- Atributo transform- Escalado, translación, rotación y skew- Utilización de etiqueta <g/> <g id="grupo" grupo transform="scale(2,1.5) "> <!-- código SVG al que se aplica el escalado-> </g>-Posibilidad de aplicar una matriz de transformación <g id="grupo" grupo transform="matrix(a,b,c,d,e,f) "> <!-- código SVG al que se aplica el escalado-> </g>-Más complejo-Las nuevas coordenadas se calculan como x1 =ax0 +cy0+e y1=bx0+dy0+f Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 93
  • 94. SVG – Características Básicas Elementos geométricos- <line/>- <circle/>- <rect/>- <ellipse/>- <polyline/>- <polygon/>- <path/>. Curvas de bezier cuadráticas, cúbicas, arcos elípticos… Elementos de texto- <text/> Estilos- Posibilidad de aplicar estilos CSS a SVG- Atributos importantes: fill y stroke Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 94
  • 95. SVG – Características Básicas Estilos-Atributo style embebido <rect x ="10" y= "20" width="200" height="200" style="fill:red;stroke:black">-Bloque style en el propio documento <?xml version="1.0" encoding="iso-8859-1" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http:// www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg id="main" xmlns=http://www.w3.org/2000/svg> <style type="text/css"><![CDATA[ .miestilo{ fill:red;stroke:black } ]]> <rect class="miestilo" x ="10" y= "20" width="200" height="200"> </svg> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 95
  • 96. SVG – Características Básicas Estilos-Referencia a un documento CSS <?xml-stylesheet type="text/css" href="misEstilos.css"?> <?xml version="1.0" encoding="iso-8859-1" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http:// www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg id="main" xmlns=http://www.w3.org/2000/svg> <rect class="miestilo" x ="10" y= "20" width="200" height="200"> </svg> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 96
  • 97. SVG – Características Básicas Efectos- Gradientes- Para los atributos fill y stroke- <linearGradient/> <radialGradient/>- Filtros-<filter/>-Efectos de brillo, color, iluminación, efectos morfológicos… Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 97
  • 98. SVG – Características Avanzadas Interactividad• Javascript• Tipos: o Eventos a través del ratón: onmouseout, onmouseover,onmousemove,onclick… o Eventos de interfaz: onfocusin, onfocusout, activate o Eventos de teclado: onkeydown,onkeyup,onkeypress o Eventos de estado: onSVGLoad,onSVGUnload,onSVGError• Scripts embebidos o externos:• Ejemplo Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 98
  • 99. SVG – Características Avanzadas (Animación)• SMIL• Tipos: o Animación de transformaciones (escalado, rotación..): <animateTransform/> o Animación de color:<animateColor/> o Animación a través de un Path:<animateMotion/> o Animación de valores numéricos (<animate/>) y no numéricos <set/> o Atributos destacables:begin,end,from,to,dur,calcMode,fill,repeatDur…• Ejemplo <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="8cm" height="3cm" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example anim01 - demonstrate animation elements</desc> <rect x="1" y="1" width="798" height="298" fill="none" stroke="blue" stroke-width="2" /> <animate attributeName="x" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="0" /> <animate attributeName="y" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="0" /> <animate attributeName="width" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="800" /> <animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="300" /> </rect> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 99
  • 100. SVG – Características Avanzadas Accesibilidad - Etiquetas <title/> y <desc/> <svg id="main" width="400" height="400"xmlns=http://www.w3.org/ 2000/svg <title>An example of a computer network</title> [...] <g id="ComputerA"> <title>Computer A</title> <desc>A common desktop PC</desc> </g> <g id="ComputerB"> <title>Computer B</title> <desc>A common desktop PC</desc> </g></svg> Hiperenlaces - XLINK <a xlink:href="http://www.w3.org"> <ellipse cx="2.5" cy="1.5" rx="2" ry="1" fill="red" /> </a> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 100
  • 101. SVG – Características Avanzadas Metadatos- Etiquetas <metadata/>- Importancia en la búsqueda semántica <metadata>- Basados en RDF o DublinCore <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:dc ="http://purl.org/dc/ elements/1.1/"> <rdf:Description rdf:about=""> <foaf:Image rdf:about=""> <foaf:maker rdf:resource="http://www.fundacionctic.org"/> </foaf:Image> <dc:title>Exportaciones</dc:title> <dc:subject>Exportaciones en algunos países</dc:subject> <dc:creator>Abel </dc:creator> <dc:publisher>Abel </dc:publisher> <dc:description>SVG Statistical Chart</dc:description> <dc:date>12/11/2006</dc:date> <dc:language>en</dc:language> <dc:rights></dc:rights> <dc:contributor></dc:contributor> <dc:coverage></dc:coverage> <dc:type></dc:type> <dc:format></dc:format> <dc:identifier></dc:identifier> <dc:source></dc:source> <dc:relation></dc:relation> </rdf:Description> </rdf:RDF> </metadata> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 101
  • 102. SVG – Perfiles SVG Full o Orientado a dispositivos de escritorio SVG Basic o Orientado a PDAs SVG Tiny o Orientado a móviles Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 102
  • 103. SVG – Perfiles (2) Aplicaciones SIGUso de AJAXgetURL() o XMLHTTPRequest() Representación estadísticaLibrería de gráficos SVGCaracterísticas: Varios tipos de gráficos: barras, líneas,sectorial,dispersión.. Generación en diversos perfiles y exportación a otros formatos Opciones de interactividad ,Animación,Scroll y Zoom Configuración de la presentación: disposición de elementos ,opciones de ejes, rejilla… Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 103
  • 104. SVG – Perfiles (2) Representación estadística Datos entrada Librería SVG (PINTAIUS)  Aplicaciones multidispositivo Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 104
  • 105. MXML MXML es un lenguaje descriptivo desarrollado inicialmente por Macromedia hasta el 2005 para la plataforma FLEX de Adobe. MXML se basa en XML y su acrónimo "Macromedia eXtensible Markup Language" Lenguaje que describe interfaces de usuario, crea modelos de datos y tiene acceso a los recursos del servidor, del tipo RIA (Rich Internet Application). MXML tiene una mayor estructura en base a etiquetas, similar a HTML, pero con una sintaxis menos ambigua, proporciona una gran variedad e inclusive permite extender etiquetas y crear sus propios componentes. Una vez compilado genera ficheros .swf Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 105
  • 106. 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> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 106
  • 107. MXML Id <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> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 107
  • 108. 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> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 108
  • 109. 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> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 109
  • 110. 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> Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 110
  • 111. MXML • Button Controles • CheckBox • ColorPicker •NumericStepper • ComboBox •PopUpButton • DataGrid •PopUpMenuButton • DateChooser •ProgressBar • DateField •RadioButton • HSlider •RichTextEditor • HorizontalList •Text • Image •TextArea • Label •TextInput • LinkButton •TileList • List •Tree •VSlider •VideoDisplay Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 111
  • 112. MXML Contenedores • Canvas • ControlBar • Form •ModuleLoader • FormHeading •Panel • Grid •Spacer • HBox •Tile • HDividedBox •TitleWindow •VBox •VDividedBox Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 112
  • 113. mx:Application mx:Button mx:Panel <?xml version="1.0" ?> mx:Button <mx:Application> <mx:Button width=”100” height=”50”/> mx:DataGrid <mx:Panel width=”100%” height=”100%”> <mx:Button width=”100%”/> <mx:DataGrid width=”100%” height=”100%”/> </mx:Panel> </mx:Application>
  • 114. MXML – Ejemplos en acción http://ria212.com/ejemplos/ Jose Alberto Benítez Andrades– jose@indipro.es - @jabenitez88 114