• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Presentación RIA y XUL
 

Presentación RIA y XUL

on

  • 5,687 views

Presentación de las tecnologías propuestas hasta el 2006 para el desarrollo de RIA's. Y exposición de las posibilidades de XUL

Presentación de las tecnologías propuestas hasta el 2006 para el desarrollo de RIA's. Y exposición de las posibilidades de XUL

Statistics

Views

Total Views
5,687
Views on SlideShare
5,673
Embed Views
14

Actions

Likes
1
Downloads
97
Comments
0

2 Embeds 14

http://www.slideshare.net 13
http://moodle.www3.unicordoba.edu.co 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Presentación RIA y XUL Presentación RIA y XUL Presentation Transcript

    • XUL  (XML User‐interface Language)  Juan Carlos Giraldo Cardozo Jorge Hernán Soto Osorio 01 Junio de 2006 Tendencias en Ingeniería de Software 1
    • Contenido • Rich Internet Application (RIA) – Frameworks – Lenguajes de Marcado para IU • XML User Interface Language (XUL) – Componentes – Interacción – DOM • Sistema Chrome y XULRunner – Content – Skin – Locate 01 Junio de 2006 Tendencias en Ingeniería de Software 2
    • Contenido • Rich Internet Application (RIA) – Frameworks – Lenguajes de Marcado para IU • XML User Interface Language (XUL) – Componentes – Interacción – DOM • Sistema Chrome y XULRunner – Content – Skin – Locate 01 Junio de 2006 Tendencias en Ingeniería de Software 3
    • Rich Internet Application • Remote Scripting, Microsoft, 1998 • X Internet, Forrester Research,  2000 • Rich (Web) Clients, • Rich Web Application • Rich Internet Application,  Macromedia, 2002 Thin client – Fat client Mainframe – Client-Server 01 Junio de 2006 Tendencias en Ingeniería de Software 4
    • Rich Internet Application RIA (I) • Interfaces de  usuario  enriquecidas (Rich) • Habilidad para  alcanzar la interfaz  de usuario (Reach) 01 Junio de 2006 Tendencias en Ingeniería de Software 5
    • Macromedia RIA • “’rich client’ environment for Internet content and applications that will radically improve the quality of end‐user applications, making the Internet more  relevant and useful to businesses and consumers”. 2002.  (flash player) • “Rich Internet applications combina la capacidad de  respuesta y las interfaces de usuario enriquecidas de las  aplicaciones de escritorio con el amplio alcance de  aplicaciones Web para entregar una más efectiva  experiencia al usuario”. 2005.(flex) 01 Junio de 2006 Tendencias en Ingeniería de Software 6
    • Rich Internet Application RIA (II) 01 Junio de 2006 Tendencias en Ingeniería de Software 7
    • Ventajes de RIA • Aprovecha la CPU del cliente • Interfaz de Usuario en tiempo  real • Componentes para aplicaciones  Web basadas en browsers • Balance en las cargas del cliente y  el servidor • Reducción del tráfico de red • No requiere instalación 01 Junio de 2006 Tendencias en Ingeniería de Software 8
    • Restricciones de RIA • Acceso a los recursos del sistema – Xul usa el protocolo Chrome. • Se requiere JavaScript frecuentemente • Desempeño del lado del cliente • Traslado de lógica del servidor al  cliente • Estándares (Browser’s) • Herramientas de desarrollo • Adaptación de los usuarios (Botón  Back) 01 Junio de 2006 Tendencias en Ingeniería de Software 9
    • Contenido • Rich Internet Application (RIA) – Frameworks – Lenguajes de Marcado para IU • XML User Interface Language (XUL) – Componentes – Interacción – DOM • Sistema Chrome y XULRunner – Content – Skin – Locate 01 Junio de 2006 Tendencias en Ingeniería de Software 10
    • Contenido • Rich Internet Application (RIA) – Frameworks – Lenguajes de Marcado para IU • XML User Interface Language (XUL) – Componentes – Interacción – DOM • Sistema Chrome y XULRunner – Content – Skin – Locate 01 Junio de 2006 Tendencias en Ingeniería de Software 11
    • Alternativas RIA • Mozilla • Macromedia Flash (pluging) – XUL – Flash – JavaScript • ActionScript – Mono – Flex • Microsoft Expression • Java en el cliente – JScript – Applet – ActiveX – Web start – XAML – .Net • Dinamic HTLM – “AJAX” – C# – Ajax : Asynchronous – Avalon JavaScript and XML – HTML • Lazlo – JavaScript – LZX – OpenLazlo Server 01 Junio de 2006 Tendencias en Ingeniería de Software 12
    • AJAX 1. Engine del lado del cliente  como mediador entre la UI y el  servidor. 2. Engine responde a los  JavaScripts activados desde la  IU (no llegan al Servidor).  3. Datos en XML se transfieren  entre el Engine y el Servidor. Framework Backbase 01 Junio de 2006 Tendencias en Ingeniería de Software 13
    • 01 Junio de 2006 Tendencias en Ingeniería de Software 14
    • Adobe (Macromedia) • Flash Player 9 • ActionScript 3 • MXML • Flex:  – Builder,  – Data Services – Charting,  – SDK – Flex Class Library Framework Flex 2.0 01 Junio de 2006 Tendencias en Ingeniería de Software 15
    • Framework Flex 2.0 01 Junio de 2006 Tendencias en Ingeniería de Software 16
    • Por supuesto • Microsoft Expression – .Net – ActiveX – JScript – Internet Explorer • Oracle – OracleForms – Integración otros productos 01 Junio de 2006 Tendencias en Ingeniería de Software 17
    • Mozilla • XML User‐interface Language (XUL) • JavaScript • XPCOM (Cross‐platform Component Object Model) • XMLHTTPRequest • Chrome • CSS • RDF • XULRunner Tabla comparativa de Frameworks 01 Junio de 2006 Tendencias en Ingeniería de Software 18
    • Estándares W3C • W3C Rich Web Clients. • Web Application Formats  Working Group – XBL (XML Binding Language)  – SVG (Scalable Vector Graphic) – SMIL (Synchronized Multimedia  Integration Language) – Xform – EMAC (E4X) • XMLHTTPRequest (JavaScript 3) 01 Junio de 2006 Tendencias en Ingeniería de Software 19
    • Programas RIA • Google – Google Maps – Gmail – Gtalkr – Writely – AjaxWrite (Editor de texto tipo Microsoft Word) • Otros Ejemplos – http://www.geabios.com/html/services/maps/Pu blicMap.htm – http://www.geabios.com/services/meteo/wv2.11 /wv.htm?picurl=./images/&picext=.jpg&picset= wvintro&nocache – http://projects.backbase.com/RUI/shop.html – http://www.backbase.com/demos/RSS/#[0] 01 Junio de 2006 Tendencias en Ingeniería de Software 20
    • Para Elegir • Open source versus producto  comercial • Funcionalidad Madura versus  características de vanguardia • Componentes livianos versus UI  enriquecida • Aplicaciones Media‐centric  versus data‐centric 01 Junio de 2006 Tendencias en Ingeniería de Software 21
    • Contenido • Rich Internet Application (RIA) – Frameworks – Lenguajes de Marcado para IU • XML User Interface Language (XUL) – Componentes – Interacción – DOM • Sistema Chrome y XULRunner – Content – Skin – Locate 01 Junio de 2006 Tendencias en Ingeniería de Software 22
    • Contenido • Rich Internet Application (RIA) – Frameworks – Lenguajes de Marcado para IU • XML User Interface Language (XUL) – Componentes – Interacción – DOM • Sistema Chrome y XULRunner – Content – Skin – Locate 01 Junio de 2006 Tendencias en Ingeniería de Software 23
    • Lenguajes de marcado para  interfaces de usuario • En Interacción 2004, con “Revisión de Lenguajes Declarativos para  la Descripción de Interfaces de Usuario Independientes del  Dispositivo”, Urtado, González y Torres, indican tres niveles de  modelado de la interfaz y a partir de ellos realizan una clasificación  de los Lenguajes de Marcado. 01 Junio de 2006 Tendencias en Ingeniería de Software 24
    • Comparativa (I) 01 Junio de 2006 Tendencias en Ingeniería de Software 25
    • Lenguajes de marcado para interfaces  de usuario En Wikipedia encontramos: Mainstream Third‐party • BXML Java Flash • GladeXML • CookSwing • MXML • HTML • SwiXML • Macromedia_Flex • MXML • SwixNG • OpenLaszlo • UIML • Thinlet Others • XAML and MyXaml • Ultrid • Gul • XFDL • Vexi • XWT • XForms • XAMJ • QuiX • XHTML • XSWT • XML Sapiens • XUL/XBL • ZUL • Bindows 01 Junio de 2006 Tendencias en Ingeniería de Software 26
    • Comparativa (II) First public release Latest stable Creator date version BXML Backbase December 2003 3.1.1 GladeXML GNOME April 1998 2.10.0 Gul redsofa November 2005 1.0 OpenLaszlo Laszlo Systems July 2003 3.2 MXML Macromedia March 2004 1.5 XAML Microsoft March 2005 Not applicable Mozilla XUL December 1998 1.0 (?) Foundation ZUL Potix November 2005 1.0.0 01 Junio de 2006 Tendencias en Ingeniería de Software 27
    • Comparativa (III) Development environment Runtime environment BXML text editor or Eclipse or Visual Studio BPC AJAX GladeXML Glade GTK+ Gul Not required (e.g. text editor) PHP-GTK Not required (e.g. text editor, Eclipse, OpenLaszlo Flash Player 5 + etc) MXML Flex Builder [1] Flash Player 7 + Microsoft Expression Interactive XAML WinFX Designer XUL Not required (e.g. text editor) Basadas en Gecko ZUL Not required (e.g. text editor) ZK Ajax Framework 01 Junio de 2006 Tendencias en Ingeniería de Software 28
    • Comparativa (IV) Programming Treatment Web standard language XML, XSLT, XPath, BXML JavaScript, .NET, JSF Interpreted XML, CSS, XHTML, XPath C, C++, C#, Python, Ada, Interpreted, GladeXML Pike, Perl, Eiffel, Ruby XML Compiled GUL PHP-GTK Interpreted XML, CSS XML, ECMAScript, CSS, OpenLaszlo XML, ECMAScript Compiled XPath MXML ActionScript Compiled CSS XAML Microsoft .NET Compiled XPath Interpreted, JavaScript, Python, XML, CSS, DTD, RDF, XPath, XSLT, XUL Compiled DOM, JavaScript C++ (C++) ZUL Java Vary XML, CSS 01 Junio de 2006 Tendencias en Ingeniería de Software 29
    • Contenido • Rich Internet Application (RIA) – Frameworks – Lenguajes de Marcado para IU • XML User Interface Language (XUL) – Componentes – Interacción – DOM • Sistema Chrome y XULRunner – Content – Skin – Locate 01 Junio de 2006 Tendencias en Ingeniería de Software 30
    • Contenido • Rich Internet Application (RIA) – Frameworks – Lenguajes de Marcado para IU • XML User Interface Language (XUL) – Componentes – Interacción – DOM • Sistema Chrome y XULRunner – Content – Skin – Locate 01 Junio de 2006 Tendencias en Ingeniería de Software 31
    • ¿Qué es XUL? y  ¿Por qué fue creado? • XUL (se pronuncia zool que rima con  cool)  • Fue creado para desarrollar fácil y  rápido el browser Mozilla. • Está basado en XML • Hace más rápido el desarrollo para  plataforma cruzada. • XUL fue diseñado específicamente  para construir interfases de usuario  portables. 01 Junio de 2006 Tendencias en Ingeniería de Software 32
    • ¿Qué interfases de usuario se  pueden hacer con XUL? • Cajas de texto, Listas, Checkboxes, etc. • Barras de Herramientas  • Menús (en barras de menú o pop up) • Pestañas, paneles, etc.  • Árboles jerárquicos o información  tabular • Accesos directos (Shortcuts) del  teclado  • Puede usar fuentes de datos (RDF’s) 01 Junio de 2006 Tendencias en Ingeniería de Software 33
    • Creando una Interfaz • Elementos Simples <?xml version=ʺ1.0ʺ encoding=ʺiso‐8859‐1ʺ?> <?xml‐stylesheet href=ʺchrome://global/skin/ʺ type=ʺtext/cssʺ?>  <window id=ʺfindfile‐windowʺ  title=ʺHola Estudiantes de Maestría“ orient=ʺhorizontal“ xmlns=ʺhttp://www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul> ... </window> • Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 34
    • Adicionando Botones (I) • Elemento button Etiqueta <button .... /> <button id=ʺidentifierʺ  class=ʺdialogʺ  label=ʺOKʺ  image=ʺimages/image.jpgʺ  disabled=ʺtrueʺ  accesskey=ʺtʺ/> 01 Junio de 2006 Tendencias en Ingeniería de Software 35
    • Adicionando Botones (II) <button id=ʺfind‐buttonʺ  label=ʺJugarʺ  image=ʺimagenes/control.icoʺ/> <button id=“n‐buttonʺ  label=“niñosʺ  style=ʺlist‐style‐image:  url(‘imagenes/nino.icoʹ)“ dir=“reverse”/> Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver  Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 36
    • Adicionando Etiquetas <label value=“Este es un texto corto en una línea“/> <description> Este sirve para realizar descripciones más  extensas que incluso pueden ocupar varias  líneas y por lo tanto requieren justificación. </description>  No debe ir texto por fuera de las etiquetas Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 37
    • Etiquetas asociadas a  Controles <label value=ʺClick aquí:ʺ  control=“botonAbrirʺ/> <button id=ʺ botonAbrirʺ  label=ʺOpenʺ/> Adicionando Imágenes <image src=ʺimagenes/puente.jpgʺ/> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 38
    • Cajas de Texto <label control=ʺuser‐nameʺ  value=ʺNombre de Usuarioʺ/> <textbox id=ʺuser‐nameʺ/> <label control=ʺsome‐passwordʺ  value=ʺPasswordʺ/> <textbox id=ʺsome‐passwordʺ  type=ʺpasswordʺ  maxlength=ʺ8ʺ/> <textbox multiline=ʺtrueʺ value=ʺRecuerde que solo puede digitar un  máximo de 8 caracteres en su passwordʺ/> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 39
    • Checkboxes and Radio  Buttons <checkbox id=ʺcase‐sensitiveʺ  checked=ʺtrueʺ  label=ʺSensible a Mayúsculasʺ/> <radiogroup> <radio id=ʺorangeʺ label=ʺNaranjaʺ/> <radio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺ/> <radio id=ʺyellowʺ label=ʺAmarilloʺ/> </radiogroup> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 40
    • Listbox <listbox> (I) <listitem label=ʺButter Pecanʺ/>  <listitem label=ʺChocolate Chipʺ/>  <listitem label=ʺRaspberry Rippleʺ/>  <listitem label=ʺSquash Swirlʺ/>  </listbox> <listbox rows=ʺ3ʺ> <listitem label=ʺButter Pecanʺ value=ʺbpecanʺ/>  <listitem label=ʺChocolate Chipʺ value=ʺchoccʺ/>  <listitem label=ʺRaspberry Rippleʺ value=ʺrasʺ/>  <listitem label=ʺSquash Swirlʺ value=ʺsquashʺ/>  </listbox> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 41
    • Multi‐Column List Boxes <listbox>  <listhead> <listheader label=“Nombreʺ/> <listheader label=“Título de pregradoʺ/> </listhead> <listcols> <listcol/>  <listcol/>  </listcols> <listitem>  <listcell label=“Rocio Segoviaʺ/>  <listcell label=“Ingeniera de Sistemasʺ/>  </listitem>  <listitem>  <listcell label=“Juan Carlosʺ/>  <listcell label=ʺ Licenciado en Matemáticas y  Computación ʺ/>  </listitem>  </listbox> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 42
    • Drop‐down Lists <menulist editable=ʺtrueʺ> <menupopup> <menuitem label=ʺwww.mozilla.orgʺ/> <menuitem label=ʺwww.xulplanet.comʺ/> <menuitem label=ʺwww.dmoz.orgʺ/> </menupopup> </menulist> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 43
    • Progress Meters <progressmeter id=“Barra01ʺ mode=ʺdeterminedʺ value=ʺ50%ʺ/> <progressmeter id=“Barra02ʺ mode=ʺundeterminedʺ/> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 44
    • Incluyendo HTML (Idealmente no hacerlo) <html:img src=ʺimagenes/Puente.jpgʺ  alt=ʺimagen del puente sobre el río Sinúʺ/> <html:input type=ʺcheckboxʺ value=ʺtrueʺ/> <html:table border=“1”> <html:tr> <html:td> Una tabla con una sola celda </html:td> </html:tr> </html:table> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 45
    • Adding Spacers • XUL usa un sistema de diseño llamado “Box Model” • El elemento Window es una “Box” • Elemento de diseño más simple, agrega espacios en  blanco. – <spacer flex=ʺ1ʺ/> – <spacer flex=“2ʺ/> • Se ajusta automáticamente al tamaño de la ventana. • Los elementos marcados como flexibles dentro de una  caja (box) no se modificarán si la caja que los contiene  no es flexible. Ver Ejemplo sin spacer Ver Ejemplo con spacer Ver Ejemplo sin align=start Ver Ejemplo sin align=start y con flex=1 en el ultimo boton 01 Junio de 2006 Tendencias en Ingeniería de Software 46
    • Adding Spacers <window id=ʺfindfile‐windowʺ title=ʺEjemplo 01 Buscar Archivosʺ orient=ʺhorizontal“ mlns=http://www.mozilla.org/keymaster/gatekeepe r/there.is.only.xul align=ʺstartʺ> <label value=ʺTexto a buscar:ʺ control=ʺfind‐textʺ/> <textbox id=ʺfind‐textʺ flex=ʺ1ʺ/> <spacer flex=ʺ2ʺ/> <button id=ʺfind‐buttonʺ label=ʺBuscarʺ/>  <button id=ʺcancel‐buttonʺ label=ʺCancelarʺ/> </window> 01 Junio de 2006 Tendencias en Ingeniería de Software 47
    • The Box Model • <vbox>, <hbox>, <box> y <box orient=“vertical”> <vbox>  <button id=ʺyesʺ label=ʺYesʺ/>  <button id=ʺnoʺ label=ʺNoʺ/>  <button id=ʺmaybeʺ label=ʺMaybeʺ/> </vbox> Ver Ejemplo Ver Ejemplo  01 Junio de 2006 Tendencias en Ingeniería de Software 48
    • Ejemplo orient=ʺverticalʺ xmlns=ʺhttp://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul“ align=ʺstartʺ> <vbox> <hbox>  <label control=ʺloginʺ value=ʺLogin:ʺ/> <textbox id=ʺloginʺ/>    </hbox> <hbox> <label control=ʺpassʺ value=ʺPassword:ʺ/> <textbox id=ʺpassʺ/>   </hbox> <button id=ʺokʺ label=ʺOKʺ/> <button id=ʺcancelʺ label=ʺCancelʺ/> </vbox> <spacer flex=ʺ1ʺ/> <vbox> <hbox> <vbox>     <label control=ʺloginʺ value=ʺLogin:ʺ/> <label control=ʺpassʺ value=ʺPassword:ʺ/>    </vbox>  <vbox> <textbox id=ʺloginʺ/> <textbox id=ʺpassʺ/>    </vbox> </hbox> <button id=ʺokʺ label=ʺOKʺ/> <button id=ʺcancelʺ label=ʺCancelʺ/> </vbox> <spacer flex=ʺ3ʺ/> 01 Junio de 2006 Tendencias en Ingeniería de Software 49
    • Posicionando los <box> • Puede ubicar cajas anidadas • Puedo asignar ancho y alto a las cajas – width y heigth • Puedo hacer las cajas flexibles – flex (número que indica la razón) • Se pueden definir tamaños mínimos y máximos  en pixeles – Minwidth, minheigth, maxwidth, maxheigth – En CSS min‐width, min‐heigth, max‐heigth,  max‐heigth Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 50
    • Alineación de los <box> • Los elementos dentro de la caja se pueden organizar  horizontal y verticalmente – orient=ʺvertical“, orient=“horizontal” – La flexibilidad de los elementos anidados se  asume en dirección de la “orient” del  contenedor • La alineación controla el sentido opuesto a la  orientación en los elementos hijos – Aling=“start”, aling=“center”, aling=“end”,  aling=“baseline” y aling=“stretch” • Se pueden distribuir los espacios entre los objetos – Pack=“start”, pack=“center” y pack=“end” • Se pueden utilizar las propiedades de estilo – ‐moz‐box‐pack y –moz‐box‐aling Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 51
    • groupbox <groupbox> <caption label=quot;Answerquot;/> <description value=quot;Bananaquot;/> <description value=quot;Tangerinequot;/> <description value=quot;Phone Boothquot;/> <description value=quot;Kiwiquot;/> </groupbox> <groupbox flex=quot;1quot;> <caption> <checkbox label=quot;Enable Backupsquot;/> </caption> <hbox> <label control=quot;dirquot; value=quot;Directory:quot;/> <textbox id=quot;dirquot; flex=quot;1quot;/> </hbox> <checkbox label=quot;Compress archived filesquot;/> </groupbox> Ver Ejemplo Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 52
    • Pilas y Cubiertas <stack> <description value=ʺShadowedʺ style=ʺpadding‐left: 1px; padding‐top: 1px; font‐size: 15ptʺ/> <description value=ʺShadowedʺ style=ʺcolor: red; font‐size: 15pt;ʺ/> </stack> Ver Ejemplo <stack> <button label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺ/> <button label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺ/> <button label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺ/> </stack> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 53
    • TabBoxes <tabbox> <tabs> <tab label=ʺMailʺ/> <tab label=ʺNewsʺ/> </tabs> <tabpanels> <tabpanel id=ʺmailtabʺ> <checkbox label=ʺAutomatically check for mailʺ/> </tabpanel> <tabpanel id=ʺnewstabʺ> <button label=ʺClear News Bufferʺ/> </tabpanel> </tabpanels> </tabbox> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 54
    • Cubierta <deck selectedIndex=quot;2quot;> <description value=quot;This is the first pagequot;/> <button label=quot;This is the second pagequot;/> <box> <description value=quot;This is the third pagequot;/> <button label=quot;This is also the third pagequot;/> </box> </deck> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 55
    • Grid <grid flex=quot;1quot;> <columns> <column/> <column flex=quot;1quot;/> </columns> <rows> <row> <label control=quot;doctitlequot; value=quot;Document Title:quot;/> <textbox id=quot;doctitlequot; flex=quot;1quot;/> </row> <row> <label control=quot;docpathquot; value=quot;Path:quot;/> <hbox flex=quot;1quot;> <textbox id=quot;docpathquot; flex=quot;1quot;/> <button label=quot;Browse...quot;/> </hbox> </row> </rows> </grid> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 56
    • frames <iframe id=quot;content-bodyquot; src=quot;http://www.mozilla.orgquot; flex=quot;1quot;/> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 57
    • Splitters Tener dos secciones de una ventana  donde el usuario puede  redimensionarlas.  <splitter resizeafter=ʺclosestʺ/> Resizeafter: grow closest farthest Ver Ejemplo Ver Ejemplo Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 58
    • Toolbar <toolbox> <toolbar id=ʺnav‐toolbarʺ> <toolbarbutton label=ʺBackʺ/> <toolbarbutton label=ʺForwardʺ/> </toolbar> </toolbox> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 59
    • Barra Menú <toolbox flex=ʺ1ʺ> <menubar id=ʺsample‐menubarʺ> <menu id=ʺfile‐menuʺ label=ʺFileʺ> <menupopup id=ʺfile‐popupʺ> <menuitem label=ʺNewʺ/> <menuitem label=ʺOpenʺ/> <menuitem label=ʺSaveʺ/> <menuseparator/> <menuitem label=ʺExitʺ/> </menupopup> </menu> <menu id=ʺedit‐menuʺ label=ʺEditʺ> <menupopup id=ʺedit‐popupʺ> <menuitem label=ʺUndoʺ/> <menuitem label=ʺRedoʺ/> </menupopup> </menu> </menubar> </toolbox> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 60
    • SubMenú <toolbox flex=ʺ1ʺ> <menubar id=ʺsample‐menubarʺ> <menu id=ʺfile‐menuʺ label=ʺFileʺ> <menupopup id=ʺfile‐popupʺ> <menu id=ʺnew‐menuʺ label=ʺNewʺ> <menupopup id=ʺnew‐popupʺ> <menuitem label=ʺWindowʺ/> <menuitem label=ʺMessageʺ/> </menupopup> </menu> <menuitem label=ʺOpenʺ/> <menuitem label=ʺSaveʺ/> <menuseparator/> <menuitem label=ʺExitʺ/> </menupopup> </menu> </menubar> </toolbox> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 61
    • Menú Emergente <popupset> <popup id=ʺclipmenuʺ> <menuitem label=ʺCutʺ/> <menuitem label=ʺCopyʺ/> <menuitem label=ʺPasteʺ/> </popup> </popupset> <box context=ʺclipmenuʺ> <description value=ʺContext click for menuʺ/> </box> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 62
    • Usando Scripts Ubicarlo después de la etiqueta windows y  antes de cualquier elemento <script src=ʺfindfile.jsʺ/> <script src=ʺchrome://findfiles/content/help.jsʺ/> <script src=ʺhttp://www.example.com/js/items.jsʺ/> 01 Junio de 2006 Tendencias en Ingeniería de Software 63
    • Eventos (I) Los script contendrá código los cuales responden a  varios eventos ejecutados por el usuario u otras  situaciones. Hay cerca de 30 o más diferentes eventos que  pueden ser controlados en diferentes formas. XUL usa el mismo mecanismo de eventos DOM. DOM Un conjunto de interfaces mediante las cuales se  puede acceder a los diversos elementos de un  documento HTML o XML.  01 Junio de 2006 Tendencias en Ingeniería de Software 64
    • DOM Niveles y módulos El DOM se ha ido formulando progresivamente en niveles de  implementación, y se ha dividido en módulos a fin de  concretar objetivos. Actualmente las especificaciones  disponibles son las siguientes:  Nivel 1 Núcleo HTML Nivel 2 Núcleo Vistas Eventos Estilo Navegación y Rango HTML (propuesta de recomendación) Nivel 3 Núcleo (borrador) Cargar y guardar (borrador) Validación (borrador) Eventos (borrador) XPath (borrador) El tercer nivel es todavía un borrador, y sólo debe tenerse  en cuenta como algo que podrá utilizarse en un futuro  01 Junio de 2006 Tendencias en Ingeniería de Software 65
    • DOM Document Object Model (DOM) Level 2 Events Specification ‐ Version 1.0 W3C Recommendation 13 November, 2000 This version: http://www.w3.org/TR/2000/REC‐DOM‐Level‐2‐Events‐ 20001113 Previous version: http://www.w3.org/TR/2000/PR‐DOM‐Level‐2‐Events‐ 20000927 • Define un Document Object Model (DOM) Level 2  Events, una plataforma y una interface de lenguaje neutral  que da a los programas y script un sistema de eventos  generico. DOM esta construido sobre DOM [DOM Level 2 Core]  y [DOM Level 2 Views]. Revisados por  miembros de la W3C. 01 Junio de 2006 Tendencias en Ingeniería de Software 66
    • DOM Eventos El diseño de un modelo genérico de registro y flujo de eventos es el  objetivo fundamental del módulo.  En el nivel actual se incluyen: • además de los eventos genéricos de HTML. • Los relacionados con la interfaz de usuario,  • con el ratón, y  • también los derivados del cambio en la estructura de un  documento (mutaciones).  Una potente herramienta, pero no está de más tener en cuenta que  cualquier nuevo contenido que se crea utilizando estas técnicas,  está supeditado a que el navegador soporte la implementación  usada. La ʺcronologíaʺ de un evento pasa por dos etapas: 1. Captura 2. Burbujeo  01 Junio de 2006 Tendencias en Ingeniería de Software 67
    • Document Object Model (DOM) • Puede ser utilizado con elementos  XUL – Obtener información de ellos – Para modificarlos • Almacena el árbol de nodos XUL • Es un API accesible por JavaScript. – El objeto global es la ventana. • Cada ventana tiene su propio  documento DOM. 01 Junio de 2006 Tendencias en Ingeniería de Software 68
    • Objeto Windows (global) • Para cada archivo XUL – Las función de JavaScript son  propiedades del objeto Window • Para recuperar elementos – Usar el atributo id y el método  getElementById • <tree id=ʺresultadosʺ hidden=ʺtrueʺ  flex=ʺ1ʺ> • var resultados =  document.getElementById(resultadosʹ);  • resultados.hidden = false; 01 Junio de 2006 Tendencias en Ingeniería de Software 69
    • XUL Element DOM Se pueden manipular dinámicamente: • Atributos – Declarados en el archivo fuente XUL – getAttribute, hasAttribute, setAtribute,  removeAtribute. • Propiedades – Están disponibles en JavaScript – elemento.propiedad • Hijos – Etiquetas hijos de los elementos 01 Junio de 2006 Tendencias en Ingeniería de Software 70
    • Navegando el DOM • Nodo raíz (window) • Etiquetas del archivo Xul (fuente) • Comentarios • Textos firstChild, lastChild,  childNodes, parentNode,  nextSibling, previousSibling 01 Junio de 2006 Tendencias en Ingeniería de Software 71
    • Eventos (II) getElementById (Identificador) (DOM Núcleo: Método de Document) Devuelve el nodo Elemento cuyo id es Identificador. documentElement (DOM Núcleo: Atributo de Document) Devuelve el elemento raíz del documento. nodeName (DOM Núcleo: Propiedad de Node) El nombre del nodo. Dependiendo del tipo de nodo, esto tiene un sentido u otro (el nombre del atributo en nodos  Attr, el nombre de la etiqueta en los nodos Element, etc.). nodeValue (DOM Núcleo: Propiedad de Node) El valor del nodo, como el valor del atributo en nodos Attr, el texto de los nodos Text, null en los nodos Element,  etc.. firstChild (DOM Núcleo: Propiedad de Node) El primer hijo del nodo al que se aplica.  defaultView (DOM Vistas: Propiedad de DocumentView) La interfaz por defecto de la que derivan las posibles vistas. createEvent (Tipo) (DOM Eventos: Método de DocumentEvent) Crea una interfaz Event del tipo especificado.  addEventListener (Tipo, Perceptor, Captura) (DOM Eventos: Método de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor, y permitiendo la captura del evento  en función del valor Captura.  dispatchEvent (Evento) (DOM Eventos: Método de EventTarget) Envía el Evento especificado al nodo objetivo al que se aplica.  stopPropagation () (DOM Eventos: Método de Event) Cancela la propagación de un evento durante su flujo.  target (DOM Eventos: Propiedad de Event) Devuelve el nodo EventTarget objetivo inicial del evento.  currentTarget (DOM Eventos: Propiedad de Event) Devuelve el nodo EventTarget que se está procesando en este momento.  screenX (DOM Eventos: Propiedad de MouseEvent) Coordenada horizontal relativa al origen de la pantalla.  screenY (DOM Eventos: Propiedad de MouseEvent) Coordenada vertical relativa al origen de la pantalla.  01 Junio de 2006 Tendencias en Ingeniería de Software 72
    • Eventos III Hay varias formas de adjuntar un  evento a un elemento. 1. Usar la forma atributo. 2. Llamando el método  addEventListener del evento. 01 Junio de 2006 Tendencias en Ingeniería de Software 73
    • Eventos (III) <button label=ʺOKʺ oncommand=ʺalert(ʹButton was  pressed!ʹ);ʺ/> Ver Ejemplo <vbox oncommand=ʺalert(event.target.tagName);ʺ> <button label=ʺOKʺ/> <checkbox label=ʺShow imagesʺ/> </vbox> Ver Ejemplo <vbox oncommand=ʺalert(event.currentTarget.tagName);ʺ>  <button label=ʺOKʺ/>  <checkbox label=ʺShow imagesʺ/>  </vbox> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 74
    • Eventos (IV) <button id=ʺokbuttonʺ label=ʺOKʺ/> <script> function buttonPressed(event) { alert(ʹButton was pressed!ʹ); } var button = document.getElementById(ʺokbuttonʺ); button.addEventListener(ʹcommandʹ, buttonPressed,  true); </script> Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 75
    • Command Por medio de Command podemos invocar operaciones. El command es identificado por el id. <command id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelp!ʹ);ʺ/>  <button label=ʺHelpʺ command=ʺcmd_openhelpʺ/>  Ver Ejemplo <button label=ʺHelpʺ command=ʺcmd_openhelpʺ/>  <button label=ʺMore Helpʺ command=ʺcmd_openhelpʺ/>  <button label=ʺDisableʺ      oncommand=ʺdocument.getElementById(ʹcmd_openh elpʹ).setAttribute (ʹdisabledʹ,ʹtrueʹ);ʺ/>  Ver Ejemplo 01 Junio de 2006 Tendencias en Ingeniería de Software 76
    • Contenido • Rich Internet Application (RIA) – Frameworks – Lenguajes de Marcado para IU • XML User Interface Language (XUL) – Componentes – Interacción – DOM • Sistema Chrome y XULRunner – Content – Skin – Locate 01 Junio de 2006 Tendencias en Ingeniería de Software 77
    • Contenido • Rich Internet Application (RIA) – Frameworks – Lenguajes de Marcado para IU • XML User Interface Language (XUL) – Componentes – Interacción – DOM • Sistema Chrome y XULRunner – Content – Skin – Locate 01 Junio de 2006 Tendencias en Ingeniería de Software 78
    • Hay varias formas de usar  XUL • Como extensión de Firefox. – Barra de google • Aplicación independiente.  XULRunner.  – Como .exe Flash‐Player • Paquete XUL – Solución intermedia .swf de flash • Aplicación remota XUL – Desde el Web server (limitado) 01 Junio de 2006 Tendencias en Ingeniería de Software 79
    • Firefox Extensions (XUL) • Son pequeños paquetes de archivos – XUL – Javascript – Style sheets – Imágenes • Se conectan al browser en forma de  overlay (Sobre impresión) que lo  combina con los XUL propios del  bowser. • Se acceden con un Chrome URL Ver Herramientas/Extensiones 01 Junio de 2006 Tendencias en Ingeniería de Software 80
    • Directorio Chrome Mozilla Mozilla FireFox 01 Junio de 2006 Tendencias en Ingeniería de Software 81
    • Aplicaciones  Independientes XUL • La aplicación debe incluir el  XULRunner. • El código XUL será registrado en  el sistema Chrome. Ver XULRunner 01 Junio de 2006 Tendencias en Ingeniería de Software 82
    • Paquete XUL • Son paquetes independientes que  requieren de la presencia de  XULRunner. • No requieren instalación. • Usan el sistema Chrome por  medio de XULRunner. Ver Reloj 01 Junio de 2006 Tendencias en Ingeniería de Software 83
    • Aplicación Remota XUL • Indispensable un navegador  Mozilla (basado en Geko). • Utiliza el sistema Chrome del  navegador. • Se requieren certificados y  autorización del usuario. Ejemplos de las aplicaciones RIA 01 Junio de 2006 Tendencias en Ingeniería de Software 84
    • El Chrome URL • URL que inicia con chrome://   – http://  – file://  • A los recursos cargados con un chrome URL se le asignan los privilegios  mencionados. • El web server debe estar configurado  para enviar archivos XUL  – content type =  ʹapplication/vnd.mozilla.xul+xmlʹ. – Mozilla no usa la extensión del archivo.  01 Junio de 2006 Tendencias en Ingeniería de Software 85
    • Contenido • Rich Internet Application (RIA) – Frameworks – Lenguajes de Marcado para IU • XML User Interface Language (XUL) – Componentes – Interacción – DOM • Sistema Chrome y XULRunner – Content – Skin – Locate 01 Junio de 2006 Tendencias en Ingeniería de Software 86
    • Contenido • Rich Internet Application (RIA) – Frameworks – Lenguajes de Marcado para IU • XML User Interface Language (XUL) – Componentes – Interacción – DOM • Sistema Chrome y XULRunner – Content – Skin – Locate 01 Junio de 2006 Tendencias en Ingeniería de Software 87
    • Tipos de paquetes chrome (I) • Content (Windows and scripts) – Archivos XUL con infomación de  las ventanas y los elementos que la  componen. – El archivo XUL que define la  ventana principal debe tener el  mismo nombre del paquete. – Scripts son ubicados en archivos  separados. 01 Junio de 2006 Tendencias en Ingeniería de Software 88
    • Uso del Chrome URL (I) chrome://<package name>/<part>/<file.xul> • <package name> es el nombre del  paquete (messenger, editor).  • <part> es ʹcontentʹ, ʹskinʹ o ʹlocaleʹ  dependiendo de la parte que usted  requiere.  • ʹfile.xulʹ es el nombre del archivo.  Ejemplo: chrome://messenger/content/messenger.xul 01 Junio de 2006 Tendencias en Ingeniería de Software 89
    • Uso del Chrome URL (II) Manifiesto: – El mapeo entre el chrome URL y el archivo  JAR es especificado en el archivo manifest almacenado en el directorio chrome. – Esto permite que los paquetes puedan estar  almacenado en cualquier parte del disco o  en la red – Si se encuentran en un sitio remoto, este  sitio debe montarse en el sistema local de  archivos. 01 Junio de 2006 Tendencias en Ingeniería de Software 90
    • Uso del Chrome URL (III) Sintaxis en el archivo Manifiesto: – <part> <packagename> <filepath> • <part> es la parte (content en este caso)  • <packagename> es el nombre del  paquete • <filepath> ruta del archivo (sin el  nombre del archivo) Ejemplo: content findfile file://D:/PruebasXUL/ 01 Junio de 2006 Tendencias en Ingeniería de Software 91
    • Uso del Chrome URL (IV) Con archivos jar en <filepath> es: – jar:<filename.jar>!/<path_in_archive> • <filename.jar> nombre de archivo jar • <path_in_archive> ruta dentro del archivo jar Ejemplo: – content findfile jar:findfile.jar!/content/  xpcnativewrappers=yes • Xpcnativewrappers indica que los scripts se  ejecutan en un contexto privilegiado 01 Junio de 2006 Tendencias en Ingeniería de Software 92
    • Tipos de paquetes chrome (II) • Skin (Style sheets, images y  otros archivos de apariencia) – Style sheets describen la  apariencia de una ventana. – Separalos de los archivos XUL  facilita la modificación de la  apariencia (theme)  – Cualquier imagen utilizada es  almacenada aquí.  01 Junio de 2006 Tendencias en Ingeniería de Software 93
    • Utilizando CSS • Se aplica una hoja de estilo por defecto a cada  ventana Xul <?xml‐stylesheet href=ʺchrome://global/skin/ʺ  type=ʺtext/cssʺ?>  – Se asigna el archivo global.css • Se pueden usar los atributos  – alternate=ʺyes“ (Hoja de estilo alternativa) – title=“Rojo“ (Nombre de esa hoja de estilo) 01 Junio de 2006 Tendencias en Ingeniería de Software 94
    • Uso del Chrome URL (IV) Para cuando <part> es skin o locate se  agrega una referencia al content al que  pertenecen (<packagename>) • <part> <packagename> <skinname>  <filepath> – <skinname> nombre con que se hace  referencia a la nueva piel Ejemplo: – skin browser classic/1.0  jar:classic.jar!/skin/classic/browser/  – locale browser en‐US jar:en‐ US.jar!/locale/browser/  01 Junio de 2006 Tendencias en Ingeniería de Software 95
    • Tipos de paquetes chrome (III) • Locale (Archivos locales  específicos)  – Todos los textos desplegados  dentro de una ventana son  almacenados separadamente. – Se facilita tener un conjunto de  textos para cada idioma.  01 Junio de 2006 Tendencias en Ingeniería de Software 96
    • Utilizando DTD’s • Se realiza un archivo DTD (Document Type Declaration) con entidades para  cada lenguaje. – <!ENTITY findLabel ʺFindʺ>  • Se referencia el archivo XUL – <!DOCTYPE window SYSTEM  ʺchrome://findfile/locale/findfile.dtdʺ> • Se utiliza en los elementos XUL – <button label=ʺ&findLabel;ʺ/>  • Se nombran y comprimen los archivos  – US English (en‐US), French (fr)  – en‐US.jar 01 Junio de 2006 Tendencias en Ingeniería de Software 97
    • Utilizando RDF • Resource Description Framework – Permite la descripción de recursos • Colecciones personales • Bibliotecas, Catalogos • Bookmarks and History • Sindicación y agregación de noticias,  software y contenido • Ontologias, etc. Ver Ejemplo RDF 01 Junio de 2006 Tendencias en Ingeniería de Software 98
    • Lenguajes de la Web Semántica Ver Ejemplo Uso de RDF en XUL 01 Junio de 2006 Tendencias en Ingeniería de Software 99
    • Uso del Chrome URL (V) Ejemplo de configuración de las tres partes: • content findfiles file:///findfiles/content/  • skin findfiles classic/1.0 file:///findfiles/skin/  • locale findfiles en‐US findfiles file:///findfiles/locale/  Ver Archivos .manifest 01 Junio de 2006 Tendencias en Ingeniería de Software 100
    • Instalación de una  aplicación • Para la instalación – Se requiere un install.rdf – Se distribuyen en archivos XPI  (XPInstall) es usado por Mozilla para instalar componentes Ver FindFile 01 Junio de 2006 Tendencias en Ingeniería de Software 101
    • Rich Internet Application – Referencias • Allaire , Jeremy. “Macromedia Flash MX—A next‐generation rich client”.  Macromedia white paper. March 2002 • Müller, Björn. “AJAX based Rich Internet Applications”. Software AG.  • http://www.backbase.com/ Framework • http://ajaxian.com Sitio dedicado a Ajax • http://en.wikipedia.org/wiki/Rich_Internet_Application • List of Rich Internet Applications • The W3C Rich Web Clients Activity • Rich Internet Apps: AJAX & Beyond whitepaper • Hello World Rich Internet Application (RiA) Recipe Background • OʹRourke C. “A Look at Rich Internet Applications”. DEVELOPER:  Trends  • McMullin J. y Skinner G. “Usability Heuristics for Rich Internet  Applications”. Published on 07/15/2003 . • Macromedia Usability Topic Center • Microsoft Windows User Experience • Apple User Experience Documentation 01 Junio de 2006 Tendencias en Ingeniería de Software 102
    • Lenguajes de Marcado para Interfaces  de Usuario • Hurtado, N; González J. M. y Torres J. “Revisión de  Lenguajes Declarativos para la Descripción de Interfaces de  Usuario Independientes del Dispositivo” en Interacción  2004. Lleida, España. 2004. • Cofradia.org. “XUL/Mono vs XAML/.Net”. Julio 2005. En:  http://cofradia.org/modules.php?name=News&file=print&si d=10371 • Oscar J. Baeza. “AjaxWrite, XUL + AJAX se aventuran como  una interesante plataforma de desarrollo“. Marzo 2006. En:   http://www.genbeta.com/archivos/2006/03/23‐ajaxwrite‐xul‐ ajax‐se‐avent.php • “Pa xulo, XUL”. Enero 2006. En:  http://www.geekipollas.com/?p=169 01 Junio de 2006 Tendencias en Ingeniería de Software 103
    • XUL • XUL en la Wikipedia [en] • XULPlanet: Documentación XUL • http://es.wikipedia.org/wiki/XUL • http://www.xulplanet.com/tutorials/xultu/ • http://www.xulplanet.com/references/elemref/ • http://www.mozilla.org/projects/xul/ • http://xul.sourceforge.net/ • http://www.mozilla.org/xpfe/xulref/ • http://es.wikibooks.org/wiki/XUL • http://developer.mozilla.org/en/docs/The_Joy_of_XUL For more information about creating extensions, see • http://developer.mozilla.org/en/docs/Extensions.  For more information about XULRunner, see http://developer.mozilla.org/en/docs/XULRunner 01 Junio de 2006 Tendencias en Ingeniería de Software 104