generación de interfaces a partir de xml
TRANSCRIPT
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
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
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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 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>
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
5
Aplicaciones basadas en XML
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
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
6
Aplicaciones basadas en XML
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.
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
7
Aplicaciones basadas en XML
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.
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
8
Cómo trabajar con XML
Navegadores (Browsers) Editores XML Parsers XML Editores XSL
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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& & < <> >' ' " "
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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 nocunda el pánico</aviso>
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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 que Patxi y Josu van paseando... </chiste>
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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ó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.
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
22
XML – Parser en línea
XParse de Jeremie
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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.
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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>
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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">
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
41
XAML – Hola Mundo – Generando el proyecto
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
42
XAML – Hola Mundo – Generando el proyecto
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
43
XAML – Hola Mundo – Generando el proyecto
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
44
XAML – Hola Mundo – Generando el proyecto
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
46
XAML – Formas
<Rectangle /> <Ellipse /> <Line /> <Polygon /> <PolyLine /> <Path />
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
47
XAML – Controles
Formas• TextBox• Button• Toggle/Repeat
Button• CheckBox• RadioButton• ListBox
Layouts• StackPanel• Grid / GridSplitter• Canvas
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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“/>
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
52
XAML –StackPanel
<StackPanel Orientation="Vertical"><Button>Button 1</Button><Button>Button 2</Button>
</StackPanel>
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
55
XAML – Transformaciones
<TextBlock Text="Hello World"> <TextBlock.RenderTransform> <RotateTransform Angle="45" /> </TextBlock.RenderTransform></TextBlock>
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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/
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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/
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
67
XUL – Widgets disponibles en XUL
Widget Tools. Layout Button Grids Imágenes Labels Lists Menubar
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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>
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
77
XUL – Posicionamiento de botones con Grid
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
84
XUL – Árboles (ver ficheros tree.xul)
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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 HTML
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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– [email protected] - @jabenitez88
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>
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
<?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
SVG – Características Básicas
Sistemas de coordenadas
- Unidades: px,pt,in,com,mm,en,em,%- Importancia del atributo viewBox
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
<svg id="main" width="400" height="400"xmlns=http://www.w3.org/2000/svg viewBox="0 0 10 5">[…]</svg>
93
SVG – Características Básicas
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
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
<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
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– [email protected] - @jabenitez88
95
SVG – Características Básicas
Estilos-Atributo style embebido
-Bloque style en el propio documento
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
<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
SVG – Características Básicas
Estilos-Referencia a un documento CSS
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
<?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
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– [email protected] - @jabenitez88
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
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
<?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
SVG – Características Avanzadas
Accesibilidad- Etiquetas <title/> y <desc/>
Hiperenlaces- XLINK
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
<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
SVG – Características Avanzadas
Metadatos- Etiquetas <metadata/>- Importancia en la búsqueda semántica- Basados en RDF o DublinCore
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
<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
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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…
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
104
SVG – Perfiles (2) Representación estadística
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
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
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
106
MXML
Componentes
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
<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
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
<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>
108
MXML
Propiedades
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
<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>
109
MXML
Eventos
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
<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>
110
MXML
Eventos
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
<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>
111
MXML
Controles
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
• 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
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88
• 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/
Jose Alberto Benítez Andrades– [email protected] - @jabenitez88