Generación de Interfaces a partir de XML

1

Desarrollo de interfaces:

2.Interfaces a partir de XML (Lenguajes descriptivos XAML, XUL,

UIML, controles, eventos, etc…)

Jose Alberto Benítez [email protected]

@indiproweb

Jose Alberto Benítez Andrades– [email protected] - @indiproweb

mailto:[email protected]

http://www.indipro.es/

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– [email protected] - @jabenitez88

3

Aplicaciones basadas en XML

Ejemplo Real de Método Antiguo Transmisión de información

0148I49A052209020622052002090206VANADU ADUANA EX JORGE CABE 02649000868610148I49N1506062002GEORGINA OLAVARRIA Y CIA.LTDA.AV.NUEVA COSTANERA 3730, VITACURA1313203788508204JORGE OLAVARRIA ROMUSSI 024845591BRU TEXTILES NV ZANDVOORSTRAAT 12 D B-2800 MECHELEN 51400000000000000000000000000000000000000000000000000000000514BELGICA 514BELGICA 04AMSTERDAM T621AEROP.A.M.BENIT992RAEROSAN S.A. (SA101805200200000000012205200200000000 22052002 2205200200000000000000000003649000868610148I49MARTINAIR HOLLAND 51596674490148110090000432 180520021922376 17052002ABX LOGISTICS 7996876070000000000000000000000000000000GENERAL 01004010060000000026921013000000004327300100000000312480010000000001084400000120000000000625000000000570000000004271700000000000000 04649000868610148I49001TEJIDO DE FILAMENTO CONTINUO DAE WON UNITECH-F 100 PCT. POLIESTER TENIDOS, SIN TEXTURIZAR TEJIDO DE TRAMA Y URDIMBRE 00000000000000000004385006E000000712611170000000000000 540761130000000427170007002230000000029900018000000178+0000000082270000000000000 0000000000000000000000000 0000000000000000000000000 000000000000


4


• 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 X 0,80MM., PARA MAQUINA

PARA TRABAJAR LA MADERA</DescripcionDeclarada><FechaCargaAduana>2002-08-14 16:27:58.0</FechaCargaAduana><RESPUESTAS>

<respuesta>ACEPTADO

</respuesta></RESPUESTAS>

</DSC>


5


Personalización de la WEB (lenguaje propio)Cada usuario (o grupo de usuarios) puede crear su propio

lenguaje para el formato de datos y documentos, su propio vocabulario, según sus necesidades, siguiendo las reglas de XML.

Aplicaciones XML para el comercio electrónico (intercambio)Aunque inicialmente XML se definió para separar

contenido de presentación, ha resultado esencial para el intercambio de información estructurada a través de Internet


6


Gestión de la información / conocimiento (visual)Si etiquetamos la información y a cada usuario se le

proporciona una serie de etiquetas de interés, se podría resaltar la información que le es interesante, frente a la que no es relevante.

Descargar trabajo en el Servidor (desaturación)Por medio del Modelo de Objetos de Documentos (DOM

), podemos evitarle trabajo al servidor, espera al cliente y no saturar tanto la red.


7


Buscador WEB (velocidad en búsquedas)Si disponemos de un sitio donde toda la información se

encuentre etiquetada en documentos XML, las búsquedas serían mucho más efectivas, ya que se conjuga la potencia de la búsqueda indexada junto la búsqueda semántica.

Intercambio de información (seguridad, velocidad gestiones)Si contratamos a una empresa y nos facilitan la estructura

de los datos que vamos a recibir (DTD/Schema), sabremos en todo momento qué tipos de documentos XML estamos recibiendo, y podremos tratarlos de la forma que deseemos.


8

Cómo trabajar con XML

Navegadores (Browsers) Editores XML Parsers XML Editores XSL


9


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.


10


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& & < <> >' ' " "


11


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 nocunda el pánico</aviso>


12


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 que Patxi y Josu van paseando... </chiste>


13


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.


14


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ón

Ej. <!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– [email protected] - @jabenitez88

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.


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"/>


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.


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>


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.


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


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.


22

XML – Parser en línea

XParse de Jeremie


http://www.jeremie.com/Dev/XML/test/index.html



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.


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


25

XML - DTD

Un ejemplo de un muy simple DTD de XML para describir un lista de personas es dado a continuación:

<!ELEMENT people_list (person*)> <!ELEMENT person (name, birthdate?, gender?, socialsecuritynumber?)> <!ELEMENT name (#PCDATA) > <!ELEMENT birthdate (#PCDATA) > <!ELEMENT gender (#PCDATA) > <!ELEMENT socialsecuritynumber (#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.


26

XML - DTD

Un 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>


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.


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.


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 para Internet"><META NAME="keyworks" CONTENT="XML, Internet, ebusiness">


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


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


32


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/


http://www.scriptol.com/xaml/

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. RIA


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.


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 )


http://www.microsoft.com/visualstudio/eng/downloads



http://www.microsoft.com/getsilverlight/get-started/install/default.aspx

http://www.microsoft.com/es-es/download/details.aspx?id=28358

36

XAML – Entorno de desarrollo


37



38



39



40

XAML – Hola Mundo


41

XAML – Hola Mundo – Generando el proyecto


42



43



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>


46

XAML – Formas

<Rectangle /> <Ellipse /> <Line /> <Polygon /> <PolyLine /> <Path />


47

XAML – Controles

Formas• TextBox• Button• Toggle/Repeat

Button• CheckBox• RadioButton• ListBox

Layouts• StackPanel• Grid / GridSplitter• Canvas


Básicos:• Border• Image• MediaElement• MultiScaleImage• ToolTip• ScrollViewer

Navegación:• HyperlinkButton• Popup

De alto nivel:• Calendar• DataGrid• Slider• DateTimePicker

Formas:• Ellipse• Rectangle• Line• TextBlock• Path

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“/>


49

XAML – Controles

Elementos de interfaz de usuario ( UI ) reutilizables <Button x:Name=“MyButton” Content=“Pulsame” Width=“150” Height=“50” />


50

XAML – Layout

Silverlight y WPF soporta 3 tipos de paneles: Canvas StackPanel Grid

Otros paneles personalizables son por ejemplo: TilePanel RadialPanel Etc.


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>


52

XAML –StackPanel

<StackPanel Orientation="Vertical"><Button>Button 1</Button><Button>Button 2</Button>

</StackPanel>


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>


54

XAML – Transformaciones

Todos los elementos aceptan las siguientes transformaciones: <RotateTransform /> <ScaleTransform /> <SkewTransform /> <TranslateTransform />

Moves <MatrixTransform />

Scale, Skew and Translate Combined


55

XAML – Transformaciones

<TextBlock Text="Hello World"> <TextBlock.RenderTransform> <RotateTransform Angle="45" /> </TextBlock.RenderTransform></TextBlock>


Hello

World

Hello

World

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/


http://www.xamlsource.net/xamlcheatsheet

http://www.xamlsource.net/xamlcheatsheet

http://blog.blueboxes.co.uk/wp-content/uploads/2009/02/wpfcheatsheet.pdf

http://blog.blueboxes.co.uk/wp-content/uploads/2009/02/wpfcheatsheet.pdf

http://silverlight.codeplex.com/

http://silverlight.codeplex.com/

http://www.rdiazconcha.com/

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/runtimes/




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.


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.


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.


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


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.


63

XUL – Rama de directorios en XUL


64

XUL – Herramientas que necesitamos

https://addons.mozilla.org/es/firefox/addon/remote-xul-manager/ http://ted.mielczarek.org/code/mozilla/xuledit/xuledit.xul


https://addons.mozilla.org/es/firefox/addon/remote-xul-manager/

https://addons.mozilla.org/es/firefox/addon/remote-xul-manager/

http://ted.mielczarek.org/code/mozilla/xuledit/xuledit.xul

http://ted.mielczarek.org/code/mozilla/xuledit/xuledit.xul

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 />


66

XUL – Elementos disponibles en XUL

Widget Tools. Algunos elementos que se pueden crear con XUL

TextBox.CheckBox.Slippers.Toolbars.Menu bar.Tabs...


67

XUL – Widgets disponibles en XUL

Widget Tools. Layout Button Grids Imágenes Labels Lists Menubar


Tabs Popus Progressmeters Radiobuttons Scrollings Splitters Textboxes Tree view

Simples, Nested

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>


69

XUL – Button con javascript


<box><button label=" Open" image="open.gif" oncommand="alert('click');" /></box></window>


70

XUL – Button con función


<script>function clicking(txt){

alert(txt);}</script>

<box><button label=" Save" image="save.gif" oncommand="clicking('click');" />

</box></window>


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>


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>


73

XUL – Canvas

• Ver canvas.xul


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"/>


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>


76

XUL – HTML


77

XUL – Posicionamiento de botones con Grid


78

XUL – Listas (1)


79

XUL – Listas (2)


80

XUL – Menú


81

XUL – Menú + eventos


82

XUL – Barra de progreso


83

XUL – Panel con pestañas


84

XUL – Árboles (ver ficheros tree.xul)


85

Exportación a XPI


86


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 HTML


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.html




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.


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).


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.


91

SVG – Características Básicas

Estructura de un documento SVG

- Naturaleza XML- Modelo de renderizado- Reutilización de código mediante <defs/> y <use>


<?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>

92


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>

93


Transformaciones- Atributo transform- Escalado, translación, rotación y skew- Utilización de etiqueta <g/>

-Posibilidad de aplicar una matriz de transformación

-Más complejo-Las nuevas coordenadas se calculan como


<g id="grupo" grupo transform="scale(2,1.5) "><!-- código SVG al que se aplica el escalado-></g>

<g id="grupo" grupo transform="matrix(a,b,c,d,e,f) "><!-- código SVG al que se aplica el escalado-></g>

x1 =ax0 +cy0+e

y1=bx0+dy0+f

94


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


95


Estilos-Atributo style embebido

-Bloque style en el propio documento


<rect x ="10" y= "20" width="200" height="200" style="fill:red;stroke:black">

<?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>

96


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>

97


Efectos- Gradientes

- Para los atributos fill y stroke- <linearGradient/> <radialGradient/>- Filtros

-<filter/>-Efectos de brillo, color, iluminación, efectos morfológicos…


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, activateo Eventos de teclado: onkeydown,onkeyup,onkeypresso Eventos de estado: onSVGLoad,onSVGUnload,onSVGError

• Scripts embebidos o externos:• Ejemplo


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>

100


Accesibilidad- Etiquetas <title/> y <desc/>

Hiperenlaces- XLINK


<a xlink:href="http://www.w3.org"> <ellipse cx="2.5" cy="1.5" rx="2" ry="1" fill="red" /> </a>

<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>

101


Metadatos- Etiquetas <metadata/>- Importancia en la búsqueda semántica- Basados en RDF o DublinCore


<metadata><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>

102

SVG – Perfiles

SVG Fullo Orientado a dispositivos de escritorio

SVG Basic o Orientado a PDAs

SVG Tinyo Orientado a móviles


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 formatosOpciones de interactividad ,Animación,Scroll y ZoomConfiguración de la presentación: disposición de elementos ,opciones de ejes, rejilla…


104

SVG – Perfiles (2) Representación estadística


Datosentrada

Librería SVG(PINTAIUS)

Aplicaciones multidispositivo

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


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>

107

MXML

Id



108

MXML

Propiedades



109

MXML

Eventos



110

MXML

Eventos



111

MXML

Controles


• Button

• CheckBox

• ColorPicker

• ComboBox

• DataGrid

• DateChooser

• DateField

• HSlider

• HorizontalList

• Image

• Label

• LinkButton

• List

•NumericStepper

•PopUpButton

•PopUpMenuButton

•ProgressBar

•RadioButton

•RichTextEditor

•Text

•TextArea

•TextInput

•TileList

•Tree

•VSlider

•VideoDisplay

112

MXML

Contenedores


• Canvas

• ControlBar

• Form

• FormHeading

• Grid

• HBox

• HDividedBox

•ModuleLoader

•Panel

•Spacer

•Tile

•TitleWindow

•VBox

•VDividedBox

mx:Application

mx:Button

mx:Panel

mx:DataGrid

mx:Button

<?xml version="1.0" ?><mx:Application>

<mx:Button width=”100” height=”50”/>

<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/


Generación de Interfaces a partir de XML

Technology

Transcript of Generación de Interfaces a partir de XML