Interfaces XML

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

Jose Alberto Benítez Andrades– jose@indipro.es - @indiproweb 1

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

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
01004010060000000026921013000000004327300100000000312480010000000001084400000
120000000000625000000000570000000004271700000000000000
04649000868610148I49001TEJIDO DE FILAMENTO CONTINUO DAE WON UNITECH-F 100
PCT. POLIESTER TENIDOS, SIN TEXTURIZAR TEJIDO DE TRAMA Y URDIMBRE
00000000000000000004385006E000000712611170000000000000
540761130000000427170007002230000000029900018000000178+0000000082270000000000
000 0000000000000000000000000 0000000000000000000000000 000000000000


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


 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


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


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


Cómo trabajar con XML
 Navegadores (Browsers)
 Editores XML
 Parsers XML
 Editores XSL


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


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


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


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


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


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


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.


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


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.

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>


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.


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


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.


XML – Parser en línea
 XParse de Jeremie


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.


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


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.


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>


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.


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.


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


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


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


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


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


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.


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 )


XAML – Entorno de desarrollo


XAML – Hola Mundo


XAML – Hola Mundo – Generando el proyecto


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>


XAML – Formas
 <Rectangle />
 <Ellipse />
 <Line />
 <Polygon />
 <PolyLine />
 <Path />


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


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


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


XAML – Layout
 Silverlight y WPF soporta 3 tipos de paneles:
 Canvas
 StackPanel
 Grid

 Otros paneles personalizables son por ejemplo:
 TilePanel
 RadialPanel
 Etc.


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>


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


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>


XAML – Transformaciones
 Todos los elementos aceptan las siguientes
transformaciones:
 <RotateTransform />
 <ScaleTransform />
 <SkewTransform />
 <TranslateTransform />
 Moves
 <MatrixTransform />
 Scale, Skew and Translate Combined


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


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/


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/


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.


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.


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.


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


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.


XUL – Rama de directorios en XUL


XUL – Herramientas que necesitamos
 https://addons.mozilla.org/es/firefox/addon/remote-xul-manager/
 http://ted.mielczarek.org/code/mozilla/xuledit/xuledit.xul


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


XUL – Elementos disponibles en XUL
 Widget Tools.
 Algunos elementos que se pueden crear con XUL
TextBox.
CheckBox.
Slippers.
Toolbars.
Menu bar.
Tabs...


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


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>


XUL – Button con javascript
<window
id="hello"
title="Button"
width="400"
height="300"

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


XUL – Button con función
<window
id="hello"
title="Button"
width="400"
height="300"

<script>
function clicking(txt)
{
alert(txt);
}
</script>

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


XUL – Button con evento
<window id="event" title="Event" width="400" height="300"

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


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>


XUL – Canvas
• Ver canvas.xul


XUL – Groupbox (1)
<window
id="hello"
title="Groupbox"
width="400"
height="300"

<groupbox >
<caption label="Search" style="background-color:white;" />
<vbox>
<hbox>
<label control="sea" value="Type the query:"/>
<textbox id="sea" flex="1"/>


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>


XUL – HTML


XUL – Posicionamiento de botones con Grid


XUL – Listas (1)


XUL – Listas (2)


XUL – Menú


XUL – Menú + eventos


XUL – Barra de progreso


XUL – Panel con pestañas


XUL – Árboles (ver ficheros tree.xul)


Exportación a XPI


 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


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


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.


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


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.


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>


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


 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

 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


 Estilos
-Atributo style embebido
<rect x ="10" y= "20" width="200" height="200"
style="fill:red;stroke:black">

-Bloque style en el propio documento
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://
www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<style type="text/css"><![CDATA[
.miestilo{ fill:red;stroke:black }
]]>
<rect class="miestilo" x ="10" y= "20" width="200" height="200">

</svg>


 Estilos
-Referencia a un documento CSS

<?xml-stylesheet type="text/css" href="misEstilos.css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://
www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<rect class="miestilo" x ="10" y= "20" width="200" height="200">

</svg>


 Efectos
- Gradientes

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

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


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


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"
<animate attributeName="width" attributeType="XML"
<animate attributeName="height" attributeType="XML"
</rect>


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


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


SVG – Perfiles
 SVG Full
o Orientado a dispositivos de escritorio
 SVG Basic
o Orientado a PDAs
 SVG Tiny
o Orientado a móviles


SVG – Perfiles (2)
 Aplicaciones SIG
Uso de AJAX
getURL() o XMLHTTPRequest()

 Representación estadística
Librería de gráficos SVG
Caracterí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…


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

Librería SVG
(PINTAIUS)

 Aplicaciones multidispositivo


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


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>


MXML
 Id

<Application>
</Application>


MXML
 Propiedades

<Application>
</Application>


MXML
 Eventos

<Application>
</Application>


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

MXML
 Contenedores

• Canvas
• ControlBar
• Form •ModuleLoader
• FormHeading •Panel
• Grid •Spacer
• HBox •Tile
• HDividedBox •TitleWindow
•VBox
•VDividedBox


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>

MXML – Ejemplos en acción
 http://ria212.com/ejemplos/


Interfaces XML

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Interfaces XML

Ähnlich wie Interfaces XML (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Interfaces XML