Upload
juan-carlos-giraldo-cardozo
View
3.498
Download
5
Tags:
Embed Size (px)
DESCRIPTION
Presentación de las tecnologías propuestas hasta el 2006 para el desarrollo de RIA's. Y exposición de las posibilidades de XUL
Citation preview
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 1
XUL (XML User‐interface
Language)
Juan Carlos Giraldo CardozoJuan Carlos Giraldo CardozoJorge HernJorge Hernaacuteaacuten Soto Osorion Soto Osorio
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 2
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 3
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 4
Rich Internet Application
bull Remote Scripting Microsoft 1998bull X Internet Forrester Research 2000
bull Rich (Web) Clientsbull Rich Web Applicationbull Rich Internet Application Macromedia 2002
Thin client ndash Fat clientMainframe ndash Client-Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 5
Rich Internet Application RIA (I)
bull Interfaces de usuario enriquecidas (Rich)
bull Habilidad para alcanzar la interfaz de usuario (Reach)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 6
Macromedia RIA
bull ldquorsquorich clientrsquo environment for Internet content andapplications that will radically improve the quality ofend‐user applications making the Internet more relevant and useful to businesses and consumersrdquo 2002 (flash player)
bull ldquoRich 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 maacutes efectiva experiencia al usuariordquo 2005(flex)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 7
Rich Internet Application RIA (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 8
Ventajes de RIA
bull Aprovecha la CPU del clientebull Interfaz de Usuario en tiempo real
bull Componentes para aplicaciones Web basadas en browsers
bull Balance en las cargas del cliente y el servidor
bull Reduccioacuten del traacutefico de redbull No requiere instalacioacuten
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 9
Restricciones de RIAbull Acceso a los recursos del sistema
ndash Xul usa el protocolo Chrome
bull Se requiere JavaScript frecuentementebull Desempentildeo del lado del clientebull Traslado de loacutegica del servidor al
clientebull Estaacutendares (Browserrsquos)bull Herramientas de desarrollobull Adaptacioacuten de los usuarios (Botoacuten
Back)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 10
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 11
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 12
Alternativas RIA
bull Macromedia Flash (pluging)ndash Flash
bull ActionScriptndash Flex
bull Java en el clientendash Appletndash Web start
bull Dinamic HTLM ndash ldquoAJAXrdquondash Ajax Asynchronous
JavaScript and XMLndash HTMLndash JavaScript
bull Mozillandash XULndash JavaScriptndash Mono
bull Microsoft Expressionndash JScriptndash ActiveXndash XAMLndash Netndash Cndash Avalon
bull Lazlondash LZXndash OpenLazlo Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 13
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 Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 2
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 3
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 4
Rich Internet Application
bull Remote Scripting Microsoft 1998bull X Internet Forrester Research 2000
bull Rich (Web) Clientsbull Rich Web Applicationbull Rich Internet Application Macromedia 2002
Thin client ndash Fat clientMainframe ndash Client-Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 5
Rich Internet Application RIA (I)
bull Interfaces de usuario enriquecidas (Rich)
bull Habilidad para alcanzar la interfaz de usuario (Reach)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 6
Macromedia RIA
bull ldquorsquorich clientrsquo environment for Internet content andapplications that will radically improve the quality ofend‐user applications making the Internet more relevant and useful to businesses and consumersrdquo 2002 (flash player)
bull ldquoRich 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 maacutes efectiva experiencia al usuariordquo 2005(flex)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 7
Rich Internet Application RIA (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 8
Ventajes de RIA
bull Aprovecha la CPU del clientebull Interfaz de Usuario en tiempo real
bull Componentes para aplicaciones Web basadas en browsers
bull Balance en las cargas del cliente y el servidor
bull Reduccioacuten del traacutefico de redbull No requiere instalacioacuten
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 9
Restricciones de RIAbull Acceso a los recursos del sistema
ndash Xul usa el protocolo Chrome
bull Se requiere JavaScript frecuentementebull Desempentildeo del lado del clientebull Traslado de loacutegica del servidor al
clientebull Estaacutendares (Browserrsquos)bull Herramientas de desarrollobull Adaptacioacuten de los usuarios (Botoacuten
Back)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 10
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 11
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 12
Alternativas RIA
bull Macromedia Flash (pluging)ndash Flash
bull ActionScriptndash Flex
bull Java en el clientendash Appletndash Web start
bull Dinamic HTLM ndash ldquoAJAXrdquondash Ajax Asynchronous
JavaScript and XMLndash HTMLndash JavaScript
bull Mozillandash XULndash JavaScriptndash Mono
bull Microsoft Expressionndash JScriptndash ActiveXndash XAMLndash Netndash Cndash Avalon
bull Lazlondash LZXndash OpenLazlo Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 13
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 Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 3
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 4
Rich Internet Application
bull Remote Scripting Microsoft 1998bull X Internet Forrester Research 2000
bull Rich (Web) Clientsbull Rich Web Applicationbull Rich Internet Application Macromedia 2002
Thin client ndash Fat clientMainframe ndash Client-Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 5
Rich Internet Application RIA (I)
bull Interfaces de usuario enriquecidas (Rich)
bull Habilidad para alcanzar la interfaz de usuario (Reach)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 6
Macromedia RIA
bull ldquorsquorich clientrsquo environment for Internet content andapplications that will radically improve the quality ofend‐user applications making the Internet more relevant and useful to businesses and consumersrdquo 2002 (flash player)
bull ldquoRich 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 maacutes efectiva experiencia al usuariordquo 2005(flex)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 7
Rich Internet Application RIA (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 8
Ventajes de RIA
bull Aprovecha la CPU del clientebull Interfaz de Usuario en tiempo real
bull Componentes para aplicaciones Web basadas en browsers
bull Balance en las cargas del cliente y el servidor
bull Reduccioacuten del traacutefico de redbull No requiere instalacioacuten
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 9
Restricciones de RIAbull Acceso a los recursos del sistema
ndash Xul usa el protocolo Chrome
bull Se requiere JavaScript frecuentementebull Desempentildeo del lado del clientebull Traslado de loacutegica del servidor al
clientebull Estaacutendares (Browserrsquos)bull Herramientas de desarrollobull Adaptacioacuten de los usuarios (Botoacuten
Back)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 10
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 11
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 12
Alternativas RIA
bull Macromedia Flash (pluging)ndash Flash
bull ActionScriptndash Flex
bull Java en el clientendash Appletndash Web start
bull Dinamic HTLM ndash ldquoAJAXrdquondash Ajax Asynchronous
JavaScript and XMLndash HTMLndash JavaScript
bull Mozillandash XULndash JavaScriptndash Mono
bull Microsoft Expressionndash JScriptndash ActiveXndash XAMLndash Netndash Cndash Avalon
bull Lazlondash LZXndash OpenLazlo Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 13
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 Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 4
Rich Internet Application
bull Remote Scripting Microsoft 1998bull X Internet Forrester Research 2000
bull Rich (Web) Clientsbull Rich Web Applicationbull Rich Internet Application Macromedia 2002
Thin client ndash Fat clientMainframe ndash Client-Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 5
Rich Internet Application RIA (I)
bull Interfaces de usuario enriquecidas (Rich)
bull Habilidad para alcanzar la interfaz de usuario (Reach)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 6
Macromedia RIA
bull ldquorsquorich clientrsquo environment for Internet content andapplications that will radically improve the quality ofend‐user applications making the Internet more relevant and useful to businesses and consumersrdquo 2002 (flash player)
bull ldquoRich 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 maacutes efectiva experiencia al usuariordquo 2005(flex)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 7
Rich Internet Application RIA (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 8
Ventajes de RIA
bull Aprovecha la CPU del clientebull Interfaz de Usuario en tiempo real
bull Componentes para aplicaciones Web basadas en browsers
bull Balance en las cargas del cliente y el servidor
bull Reduccioacuten del traacutefico de redbull No requiere instalacioacuten
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 9
Restricciones de RIAbull Acceso a los recursos del sistema
ndash Xul usa el protocolo Chrome
bull Se requiere JavaScript frecuentementebull Desempentildeo del lado del clientebull Traslado de loacutegica del servidor al
clientebull Estaacutendares (Browserrsquos)bull Herramientas de desarrollobull Adaptacioacuten de los usuarios (Botoacuten
Back)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 10
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 11
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 12
Alternativas RIA
bull Macromedia Flash (pluging)ndash Flash
bull ActionScriptndash Flex
bull Java en el clientendash Appletndash Web start
bull Dinamic HTLM ndash ldquoAJAXrdquondash Ajax Asynchronous
JavaScript and XMLndash HTMLndash JavaScript
bull Mozillandash XULndash JavaScriptndash Mono
bull Microsoft Expressionndash JScriptndash ActiveXndash XAMLndash Netndash Cndash Avalon
bull Lazlondash LZXndash OpenLazlo Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 13
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 Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 5
Rich Internet Application RIA (I)
bull Interfaces de usuario enriquecidas (Rich)
bull Habilidad para alcanzar la interfaz de usuario (Reach)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 6
Macromedia RIA
bull ldquorsquorich clientrsquo environment for Internet content andapplications that will radically improve the quality ofend‐user applications making the Internet more relevant and useful to businesses and consumersrdquo 2002 (flash player)
bull ldquoRich 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 maacutes efectiva experiencia al usuariordquo 2005(flex)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 7
Rich Internet Application RIA (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 8
Ventajes de RIA
bull Aprovecha la CPU del clientebull Interfaz de Usuario en tiempo real
bull Componentes para aplicaciones Web basadas en browsers
bull Balance en las cargas del cliente y el servidor
bull Reduccioacuten del traacutefico de redbull No requiere instalacioacuten
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 9
Restricciones de RIAbull Acceso a los recursos del sistema
ndash Xul usa el protocolo Chrome
bull Se requiere JavaScript frecuentementebull Desempentildeo del lado del clientebull Traslado de loacutegica del servidor al
clientebull Estaacutendares (Browserrsquos)bull Herramientas de desarrollobull Adaptacioacuten de los usuarios (Botoacuten
Back)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 10
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 11
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 12
Alternativas RIA
bull Macromedia Flash (pluging)ndash Flash
bull ActionScriptndash Flex
bull Java en el clientendash Appletndash Web start
bull Dinamic HTLM ndash ldquoAJAXrdquondash Ajax Asynchronous
JavaScript and XMLndash HTMLndash JavaScript
bull Mozillandash XULndash JavaScriptndash Mono
bull Microsoft Expressionndash JScriptndash ActiveXndash XAMLndash Netndash Cndash Avalon
bull Lazlondash LZXndash OpenLazlo Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 13
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 Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 6
Macromedia RIA
bull ldquorsquorich clientrsquo environment for Internet content andapplications that will radically improve the quality ofend‐user applications making the Internet more relevant and useful to businesses and consumersrdquo 2002 (flash player)
bull ldquoRich 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 maacutes efectiva experiencia al usuariordquo 2005(flex)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 7
Rich Internet Application RIA (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 8
Ventajes de RIA
bull Aprovecha la CPU del clientebull Interfaz de Usuario en tiempo real
bull Componentes para aplicaciones Web basadas en browsers
bull Balance en las cargas del cliente y el servidor
bull Reduccioacuten del traacutefico de redbull No requiere instalacioacuten
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 9
Restricciones de RIAbull Acceso a los recursos del sistema
ndash Xul usa el protocolo Chrome
bull Se requiere JavaScript frecuentementebull Desempentildeo del lado del clientebull Traslado de loacutegica del servidor al
clientebull Estaacutendares (Browserrsquos)bull Herramientas de desarrollobull Adaptacioacuten de los usuarios (Botoacuten
Back)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 10
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 11
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 12
Alternativas RIA
bull Macromedia Flash (pluging)ndash Flash
bull ActionScriptndash Flex
bull Java en el clientendash Appletndash Web start
bull Dinamic HTLM ndash ldquoAJAXrdquondash Ajax Asynchronous
JavaScript and XMLndash HTMLndash JavaScript
bull Mozillandash XULndash JavaScriptndash Mono
bull Microsoft Expressionndash JScriptndash ActiveXndash XAMLndash Netndash Cndash Avalon
bull Lazlondash LZXndash OpenLazlo Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 13
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 Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 7
Rich Internet Application RIA (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 8
Ventajes de RIA
bull Aprovecha la CPU del clientebull Interfaz de Usuario en tiempo real
bull Componentes para aplicaciones Web basadas en browsers
bull Balance en las cargas del cliente y el servidor
bull Reduccioacuten del traacutefico de redbull No requiere instalacioacuten
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 9
Restricciones de RIAbull Acceso a los recursos del sistema
ndash Xul usa el protocolo Chrome
bull Se requiere JavaScript frecuentementebull Desempentildeo del lado del clientebull Traslado de loacutegica del servidor al
clientebull Estaacutendares (Browserrsquos)bull Herramientas de desarrollobull Adaptacioacuten de los usuarios (Botoacuten
Back)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 10
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 11
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 12
Alternativas RIA
bull Macromedia Flash (pluging)ndash Flash
bull ActionScriptndash Flex
bull Java en el clientendash Appletndash Web start
bull Dinamic HTLM ndash ldquoAJAXrdquondash Ajax Asynchronous
JavaScript and XMLndash HTMLndash JavaScript
bull Mozillandash XULndash JavaScriptndash Mono
bull Microsoft Expressionndash JScriptndash ActiveXndash XAMLndash Netndash Cndash Avalon
bull Lazlondash LZXndash OpenLazlo Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 13
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 Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 8
Ventajes de RIA
bull Aprovecha la CPU del clientebull Interfaz de Usuario en tiempo real
bull Componentes para aplicaciones Web basadas en browsers
bull Balance en las cargas del cliente y el servidor
bull Reduccioacuten del traacutefico de redbull No requiere instalacioacuten
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 9
Restricciones de RIAbull Acceso a los recursos del sistema
ndash Xul usa el protocolo Chrome
bull Se requiere JavaScript frecuentementebull Desempentildeo del lado del clientebull Traslado de loacutegica del servidor al
clientebull Estaacutendares (Browserrsquos)bull Herramientas de desarrollobull Adaptacioacuten de los usuarios (Botoacuten
Back)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 10
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 11
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 12
Alternativas RIA
bull Macromedia Flash (pluging)ndash Flash
bull ActionScriptndash Flex
bull Java en el clientendash Appletndash Web start
bull Dinamic HTLM ndash ldquoAJAXrdquondash Ajax Asynchronous
JavaScript and XMLndash HTMLndash JavaScript
bull Mozillandash XULndash JavaScriptndash Mono
bull Microsoft Expressionndash JScriptndash ActiveXndash XAMLndash Netndash Cndash Avalon
bull Lazlondash LZXndash OpenLazlo Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 13
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 Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 9
Restricciones de RIAbull Acceso a los recursos del sistema
ndash Xul usa el protocolo Chrome
bull Se requiere JavaScript frecuentementebull Desempentildeo del lado del clientebull Traslado de loacutegica del servidor al
clientebull Estaacutendares (Browserrsquos)bull Herramientas de desarrollobull Adaptacioacuten de los usuarios (Botoacuten
Back)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 10
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 11
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 12
Alternativas RIA
bull Macromedia Flash (pluging)ndash Flash
bull ActionScriptndash Flex
bull Java en el clientendash Appletndash Web start
bull Dinamic HTLM ndash ldquoAJAXrdquondash Ajax Asynchronous
JavaScript and XMLndash HTMLndash JavaScript
bull Mozillandash XULndash JavaScriptndash Mono
bull Microsoft Expressionndash JScriptndash ActiveXndash XAMLndash Netndash Cndash Avalon
bull Lazlondash LZXndash OpenLazlo Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 13
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 Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 10
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 11
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 12
Alternativas RIA
bull Macromedia Flash (pluging)ndash Flash
bull ActionScriptndash Flex
bull Java en el clientendash Appletndash Web start
bull Dinamic HTLM ndash ldquoAJAXrdquondash Ajax Asynchronous
JavaScript and XMLndash HTMLndash JavaScript
bull Mozillandash XULndash JavaScriptndash Mono
bull Microsoft Expressionndash JScriptndash ActiveXndash XAMLndash Netndash Cndash Avalon
bull Lazlondash LZXndash OpenLazlo Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 13
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 Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 11
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 12
Alternativas RIA
bull Macromedia Flash (pluging)ndash Flash
bull ActionScriptndash Flex
bull Java en el clientendash Appletndash Web start
bull Dinamic HTLM ndash ldquoAJAXrdquondash Ajax Asynchronous
JavaScript and XMLndash HTMLndash JavaScript
bull Mozillandash XULndash JavaScriptndash Mono
bull Microsoft Expressionndash JScriptndash ActiveXndash XAMLndash Netndash Cndash Avalon
bull Lazlondash LZXndash OpenLazlo Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 13
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 Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 12
Alternativas RIA
bull Macromedia Flash (pluging)ndash Flash
bull ActionScriptndash Flex
bull Java en el clientendash Appletndash Web start
bull Dinamic HTLM ndash ldquoAJAXrdquondash Ajax Asynchronous
JavaScript and XMLndash HTMLndash JavaScript
bull Mozillandash XULndash JavaScriptndash Mono
bull Microsoft Expressionndash JScriptndash ActiveXndash XAMLndash Netndash Cndash Avalon
bull Lazlondash LZXndash OpenLazlo Server
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 13
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 Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 13
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 Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 14
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 15
Adobe (Macromedia)
bull Flash Player 9bull ActionScript 3bull MXMLbull Flex
ndash Builder ndash Data Servicesndash Charting ndash SDK ndash Flex Class Library
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 16
Framework Flex 20
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 17
Por supuesto
bull Microsoft Expressionndash Netndash ActiveXndash JScriptndash Internet Explorer
bull Oraclendash OracleFormsndash Integracioacuten otros productos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 18
Mozillabull XML User‐interface Language (XUL)bull JavaScriptbull XPCOM (Cross‐platform Component
Object Model)bull XMLHTTPRequestbull Chromebull CSSbull RDFbull XULRunner
Tabla comparativa de Frameworks
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 19
Estaacutendares W3C
bull W3C Rich Web Clientsbull Web Application Formats Working Groupndash XBL (XML Binding Language) ndash SVG (Scalable Vector Graphic)ndash SMIL (Synchronized Multimedia Integration Language)
ndash Xformndash EMAC (E4X)
bull XMLHTTPRequest (JavaScript 3)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 20
Programas RIAbull Google
ndash Google Mapsndash Gmailndash Gtalkrndash Writelyndash AjaxWrite (Editor de texto tipo Microsoft Word)
bull Otros Ejemplosndash httpwwwgeabioscomhtmlservicesmapsPu
blicMaphtmndash httpwwwgeabioscomservicesmeteowv211
wvhtmpicurl=imagesamppicext=jpgamppicset=wvintroampnocache
ndash httpprojectsbackbasecomRUIshophtmlndash httpwwwbackbasecomdemosRSS[0]
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 21
Para Elegir
bull Open source versus producto comercial
bull Funcionalidad Madura versus caracteriacutesticas de vanguardia
bull Componentes livianos versus UI enriquecida
bull Aplicaciones Media‐centric versus data‐centric
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 22
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 23
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 24
Lenguajes de marcado para interfaces de usuario
bull En Interaccioacuten 2004 con ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo Urtado Gonzaacutelez y Torres indican tres niveles de modelado de la interfaz y a partir de ellos realizan una clasificacioacuten de los Lenguajes de Marcado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 25
Comparativa (I)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 26
Lenguajes de marcado para interfaces de usuario
En Wikipedia encontramos
bull BXMLbull GladeXMLbull HTMLbull MXMLbull UIMLbull XAML and MyXamlbull XFDLbull XFormsbull XHTMLbull XULXBL
Javabull CookSwingbull SwiXMLbull SwixNGbull Thinletbull Ultridbull Vexibull XAMJbull XSWTbull ZUL
Flashbull MXMLbull Macromedia_Flexbull OpenLaszloOthersbull Gulbull XWTbull QuiXbull XML Sapiensbull Bindows
Mainstream Third‐party
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 27
Comparativa (II)
Creator First public releasedate
Latest stableversion
BXML Backbase December 2003 311
GladeXML GNOME April 1998 2100
Gul redsofa November 2005 10
OpenLaszlo Laszlo Systems July 2003 32
MXML Macromedia March 2004 15XAML Microsoft March 2005 Not applicable
XUL MozillaFoundation December 1998 10 ()
ZUL Potix November 2005 100
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 28
Comparativa (III)Development environment Runtime environment
BXML text editor or Eclipse or Visual Studio BPC AJAX
GladeXML Glade GTK+
Gul Not required (eg text editor) PHP-GTK
OpenLaszlo Not required (eg text editor Eclipse etc) Flash Player 5 +
MXML Flex Builder [1] Flash Player 7 +
XAML Microsoft Expression InteractiveDesigner WinFX
XUL Not required (eg text editor) Basadas en Gecko
ZUL Not required (eg text editor) ZK Ajax Framework
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 29
Comparativa (IV)Programming
language Treatment Web standard
BXML XML XSLT XPath JavaScript NET JSF Interpreted XML CSS XHTML XPath
GladeXML C C++ C Python Ada Pike Perl Eiffel Ruby
Interpreted Compiled XML
GUL PHP-GTK Interpreted XML CSS
OpenLaszlo XML ECMAScript Compiled XML ECMAScript CSS XPath
MXML ActionScript Compiled CSSXAML Microsoft NET Compiled XPath
XUL JavaScript Python C++
Interpreted Compiled
(C++)
XML CSS DTD RDF XPath XSLT DOM JavaScript
ZUL Java Vary XML CSS
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 30
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 31
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 32
iquestQueacute es XUL y iquestPor queacute fue creado
bull XUL (se pronuncia zool que rima con cool)
bull Fue creado para desarrollar faacutecil y raacutepido el browser Mozilla
bull Estaacute basado en XMLbull Hace maacutes raacutepido el desarrollo para
plataforma cruzadabull XUL fue disentildeado especiacuteficamente
para construir interfases de usuario portables
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 33
iquestQueacute interfases de usuario se pueden hacer con XUL
bull Cajas de texto Listas Checkboxes etcbull Barras de Herramientas bull Menuacutes (en barras de menuacute o pop up)bull Pestantildeas paneles etc bull Aacuterboles jeraacuterquicos o informacioacuten
tabularbull Accesos directos (Shortcuts) del
teclado bull Puede usar fuentes de datos (RDFrsquos)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 34
Creando una Interfaz
ltxml version=ʺ10ʺ encoding=ʺiso‐8859‐1ʺgtltxml‐stylesheet href=ʺchromeglobalskinʺ type=ʺtextcssʺgt ltwindow
id=ʺfindfile‐windowʺ title=ʺHola Estudiantes de Maestriacutealdquoorient=ʺhorizontalldquoxmlns=ʺhttpwwwmozillaorgkeymastergatekeeper
thereisonlyxulgt
ltwindowgt
bull Elementos Simples
bull Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 35
Adicionando Botones (I)bull Elemento button
Etiqueta ltbutton gt
ltbuttonid=ʺidentifierʺ class=ʺdialogʺ label=ʺOKʺ image=ʺimagesimagejpgʺ disabled=ʺtrueʺ accesskey=ʺtʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 36
Adicionando Botones (II)ltbutton
id=ʺfind‐buttonʺ label=ʺJugarʺ image=ʺimagenescontrolicoʺgt
ltbuttonid=ldquon‐buttonʺ label=ldquonintildeosʺ style=ʺlist‐style‐image
url(lsquoimagenesninoicoʹ)ldquodir=ldquoreverserdquogt
Ver Ejemplo Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 37
Adicionando Etiquetasltlabel
value=ldquoEste es un texto corto en una liacutenealdquogt
ltdescriptiongtEste sirve para realizar descripciones maacutes extensas que incluso pueden ocupar varias liacuteneas y por lo tanto requieren justificacioacuten
ltdescriptiongt
No debe ir texto por fuera de las etiquetas
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 38
Etiquetas asociadas a Controles
ltlabelvalue=ʺClick aquiacuteʺ control=ldquobotonAbrirʺgt
ltbuttonid=ʺ botonAbrirʺ label=ʺOpenʺgt
Adicionando Imaacutegenesltimage src=ʺimagenespuentejpgʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 39
Cajas de Textoltlabel
control=ʺuser‐nameʺ value=ʺNombre de Usuarioʺgt
lttextboxid=ʺuser‐nameʺgt
ltlabelcontrol=ʺsome‐passwordʺ value=ʺPasswordʺgt
lttextboxid=ʺsome‐passwordʺ type=ʺpasswordʺ maxlength=ʺ8ʺgt
lttextboxmultiline=ʺtrueʺvalue=ʺRecuerde que solo puede digitar un
maacuteximo de 8 caracteres en su passwordʺgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 40
Checkboxes and Radio Buttons
ltcheckboxid=ʺcase‐sensitiveʺ checked=ʺtrueʺ label=ʺSensible a Mayuacutesculasʺgt
ltradiogroupgtltradio id=ʺorangeʺ label=ʺNaranjaʺgtltradio id=ʺvioletʺ selected=ʺtrueʺ label=ʺVioletaʺgtltradio id=ʺyellowʺ label=ʺAmarilloʺgt
ltradiogroupgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 41
Listbox(I)
ltlistboxgtltlistitem label=ʺButter Pecanʺgt ltlistitem label=ʺChocolate Chipʺgt ltlistitem label=ʺRaspberry Rippleʺgt ltlistitem label=ʺSquash Swirlʺgt
ltlistboxgt
ltlistbox rows=ʺ3ʺgtltlistitem label=ʺButter Pecanʺ value=ʺbpecanʺgt ltlistitem label=ʺChocolate Chipʺ value=ʺchoccʺgt ltlistitem label=ʺRaspberry Rippleʺ value=ʺrasʺgt ltlistitem label=ʺSquash Swirlʺ value=ʺsquashʺgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 42
Multi‐Column List Boxesltlistboxgt
ltlistheadgtltlistheader label=ldquoNombreʺgtltlistheader label=ldquoTiacutetulo de pregradoʺgt
ltlistheadgtltlistcolsgt
ltlistcolgt ltlistcolgt
ltlistcolsgtltlistitemgt
ltlistcell label=ldquoRocio Segoviaʺgt ltlistcell label=ldquoIngeniera de Sistemasʺgt
ltlistitemgt ltlistitemgt
ltlistcell label=ldquoJuan Carlosʺgt ltlistcell label=ʺ Licenciado en Matemaacuteticas y
Computacioacuten ʺgt ltlistitemgt
ltlistboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 43
Drop‐down Listsltmenulist editable=ʺtrueʺgt
ltmenupopupgtltmenuitem label=ʺwwwmozillaorgʺgtltmenuitem label=ʺwwwxulplanetcomʺgtltmenuitem label=ʺwwwdmozorgʺgt
ltmenupopupgtltmenulistgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 44
Progress Metersltprogressmeter
id=ldquoBarra01ʺmode=ʺdeterminedʺvalue=ʺ50ʺgt
ltprogressmeterid=ldquoBarra02ʺmode=ʺundeterminedʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 45
Incluyendo HTML(Idealmente no hacerlo)
lthtmlimgsrc=ʺimagenesPuentejpgʺ alt=ʺimagen del puente sobre el riacuteo Sinuacuteʺgt
lthtmlinput type=ʺcheckboxʺ value=ʺtrueʺgtlthtmltable border=ldquo1rdquogtlthtmltrgt
lthtmltdgtUna tabla con una sola celda
lthtmltdgtlthtmltrgtlthtmltablegt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 46
Adding Spacersbull XUL usa un sistema de disentildeo llamado ldquoBox Modelrdquobull El elemento Window es una ldquoBoxrdquobull Elemento de disentildeo maacutes simple agrega espacios en blancondash ltspacer flex=ʺ1ʺgtndash ltspacer flex=ldquo2ʺgt
bull Se ajusta automaacuteticamente al tamantildeo de la ventanabull Los elementos marcados como flexibles dentro de una caja (box) no se modificaraacuten si la caja que los contiene no es flexible
Ver Ejemplo sin spacerVer Ejemplo con spacerVer Ejemplo sin align=startVer Ejemplo sin align=start y con flex=1 en el ultimo boton
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 47
Adding Spacersltwindow
id=ʺfindfile‐windowʺtitle=ʺEjemplo 01 Buscar Archivosʺorient=ʺhorizontalldquomlns=httpwwwmozillaorgkeymastergatekeeperthereisonlyxulalign=ʺstartʺgt
ltlabel value=ʺTexto a buscarʺ control=ʺfind‐textʺgtlttextbox id=ʺfind‐textʺ flex=ʺ1ʺgtltspacer flex=ʺ2ʺgtltbutton id=ʺfind‐buttonʺ label=ʺBuscarʺgt ltbutton id=ʺcancel‐buttonʺ label=ʺCancelarʺgt
ltwindowgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 48
The Box Model
bull ltvboxgt lthboxgt ltboxgt y ltbox orient=ldquoverticalrdquogt
ltvboxgt ltbutton id=ʺyesʺ label=ʺYesʺgt ltbutton id=ʺnoʺ label=ʺNoʺgt ltbutton id=ʺmaybeʺ label=ʺMaybeʺgt
ltvboxgt
Ver EjemploVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 49
Ejemploorient=ʺverticalʺxmlns=ʺhttpwwwmozillaorgkeymastergatekeeperthereisonlyxulldquoalign=ʺstartʺgtltvboxgt
lthboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgtlttextbox id=ʺloginʺgt lthboxgt
lthboxgt ltlabel control=ʺpassʺ value=ʺPasswordʺgtlttextbox id=ʺpassʺgt lthboxgt
ltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ1ʺgt
ltvboxgtlthboxgtltvboxgt ltlabel control=ʺloginʺ value=ʺLoginʺgt
ltlabel control=ʺpassʺ value=ʺPasswordʺgt ltvboxgt ltvboxgt
lttextbox id=ʺloginʺgtlttextbox id=ʺpassʺgt ltvboxgt
lthboxgtltbutton id=ʺokʺ label=ʺOKʺgtltbutton id=ʺcancelʺ label=ʺCancelʺgt
ltvboxgtltspacer flex=ʺ3ʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 50
Posicionando los ltboxgtbull Puede ubicar cajas anidadasbull Puedo asignar ancho y alto a las cajas
ndash width y heigthbull Puedo hacer las cajas flexibles
ndash flex (nuacutemero que indica la razoacuten)bull Se pueden definir tamantildeos miacutenimos y maacuteximos
en pixelesndash Minwidth minheigth maxwidth maxheigthndash En CSS min‐width min‐heigth max‐heigth
max‐heigth
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 51
Alineacioacuten de los ltboxgtbull Los elementos dentro de la caja se pueden organizar
horizontal y verticalmentendash orient=ʺverticalldquo orient=ldquohorizontalrdquondash La flexibilidad de los elementos anidados se
asume en direccioacuten de la ldquoorientrdquo del contenedor
bull La alineacioacuten controla el sentido opuesto a la orientacioacuten en los elementos hijosndash Aling=ldquostartrdquo aling=ldquocenterrdquo aling=ldquoendrdquo
aling=ldquobaselinerdquo y aling=ldquostretchrdquobull Se pueden distribuir los espacios entre los objetos
ndash Pack=ldquostartrdquo pack=ldquocenterrdquo y pack=ldquoendrdquobull Se pueden utilizar las propiedades de estilo
ndash ‐moz‐box‐pack y ndashmoz‐box‐aling
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 52
groupboxltgroupboxgt
ltcaption label=Answergtltdescription value=Bananagtltdescription value=Tangerinegtltdescription value=Phone Boothgtltdescription value=Kiwigt
ltgroupboxgt
ltgroupbox flex=1gtltcaptiongt
ltcheckbox label=Enable Backupsgtltcaptiongtlthboxgt
ltlabel control=dir value=Directorygtlttextbox id=dir flex=1gt
lthboxgtltcheckbox label=Compress archived filesgt
ltgroupboxgt
Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 53
Pilas y Cubiertasltstackgtltdescription value=ʺShadowedʺ style=ʺpadding‐left 1px
padding‐top 1px font‐size 15ptʺgtltdescription value=ʺShadowedʺ style=ʺcolor red font‐size
15ptʺgtltstackgt
Ver Ejemplo
ltstackgtltbutton label=ʺGoblinsʺ left=ʺ5ʺ top=ʺ5ʺgtltbutton label=ʺTrollsʺ left=ʺ60ʺ top=ʺ20ʺgtltbutton label=ʺVampiresʺ left=ʺ10ʺ top=ʺ60ʺgtltstackgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 54
TabBoxeslttabboxgtlttabsgtlttab label=ʺMailʺgtlttab label=ʺNewsʺgt
lttabsgtlttabpanelsgtlttabpanel id=ʺmailtabʺgt
ltcheckbox label=ʺAutomatically check for mailʺgtlttabpanelgtlttabpanel id=ʺnewstabʺgt
ltbutton label=ʺClear News Bufferʺgtlttabpanelgt
lttabpanelsgtlttabboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 55
Cubierta
ltdeck selectedIndex=2gtltdescription value=This is the first pagegtltbutton label=This is the second pagegtltboxgt
ltdescription value=This is the third pagegtltbutton label=This is also the third pagegt
ltboxgtltdeckgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 56
Gridltgrid flex=1gt
ltcolumnsgtltcolumngtltcolumn flex=1gt
ltcolumnsgtltrowsgt
ltrowgtltlabel control=doctitle value=Document Titlegtlttextbox id=doctitle flex=1gt
ltrowgtltrowgt
ltlabel control=docpath value=Pathgtlthbox flex=1gt
lttextbox id=docpath flex=1gtltbutton label=Browsegt
lthboxgt ltrowgt
ltrowsgtltgridgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 57
frames
ltiframe id=content-body src=httpwwwmozillaorg flex=1gt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 58
SplittersTener dos secciones de una ventana donde el usuario puede redimensionarlas ltsplitter resizeafter=ʺclosestʺgtResizeafter
growclosestfarthest
Ver Ejemplo Ver Ejemplo Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 59
Toolbarlttoolboxgtlttoolbar id=ʺnav‐toolbarʺgtlttoolbarbutton label=ʺBackʺgtlttoolbarbutton label=ʺForwardʺgtlttoolbargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 60
Barra Menuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgt
ltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenuitem label=ʺNewʺgtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgt
ltmenupopupgtltmenugt
ltmenu id=ʺedit‐menuʺ label=ʺEditʺgtltmenupopup id=ʺedit‐popupʺgtltmenuitem label=ʺUndoʺgtltmenuitem label=ʺRedoʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 61
SubMenuacutelttoolbox flex=ʺ1ʺgtltmenubar id=ʺsample‐menubarʺgtltmenu id=ʺfile‐menuʺ label=ʺFileʺgtltmenupopup id=ʺfile‐popupʺgtltmenu id=ʺnew‐menuʺ label=ʺNewʺgtltmenupopup id=ʺnew‐popupʺgtltmenuitem label=ʺWindowʺgtltmenuitem label=ʺMessageʺgtltmenupopupgtltmenugtltmenuitem label=ʺOpenʺgtltmenuitem label=ʺSaveʺgtltmenuseparatorgtltmenuitem label=ʺExitʺgtltmenupopupgtltmenugtltmenubargtlttoolboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 62
Menuacute Emergenteltpopupsetgtltpopup id=ʺclipmenuʺgtltmenuitem label=ʺCutʺgtltmenuitem label=ʺCopyʺgtltmenuitem label=ʺPasteʺgtltpopupgtltpopupsetgt
ltbox context=ʺclipmenuʺgtltdescription value=ʺContext click for menuʺgtltboxgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 63
Usando Scripts
Ubicarlo despueacutes de la etiqueta windows y antes de cualquier elemento
ltscript src=ʺfindfilejsʺgtltscript src=ʺchromefindfilescontenthelpjsʺgt
ltscript src=ʺhttpwwwexamplecomjsitemsjsʺgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 64
Eventos (I)Los script contendraacute coacutedigo los cuales responden a varios eventos ejecutados por el usuario u otras situaciones
Hay cerca de 30 o maacutes diferentes eventos que pueden ser controlados en diferentes formasXUL usa el mismo mecanismo de eventos DOM
DOMUn 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 Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 65
DOMNiveles y moacutedulosEl DOM se ha ido formulando progresivamente en niveles de
implementacioacuten y se ha dividido en moacutedulos a fin de concretar objetivos Actualmente las especificaciones disponibles son las siguientes
Nivel 1NuacutecleoHTML
Nivel 2NuacutecleoVistasEventosEstiloNavegacioacuten y RangoHTML (propuesta de recomendacioacuten)
Nivel 3Nuacutecleo (borrador)Cargar y guardar (borrador)Validacioacuten (borrador)Eventos (borrador)XPath (borrador)
El tercer nivel es todaviacutea un borrador y soacutelo debe tenerse en cuenta como algo que podraacute utilizarse en un futuro
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 66
DOMDocument Object Model (DOM) Level 2 Events
Specification ‐ Version 10W3C Recommendation 13 November 2000
This versionhttpwwww3orgTR2000REC‐DOM‐Level‐2‐Events‐
20001113
Previous versionhttpwwww3orgTR2000PR‐DOM‐Level‐2‐Events‐
20000927
bull 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 Level2 Core] y [DOM Level 2 Views] Revisados por miembros de la W3C
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 67
DOM EventosEl disentildeo de un modelo geneacuterico de registro y flujo de eventos es el
objetivo fundamental del moacutedulo
En el nivel actual se incluyenbull ademaacutes de los eventos geneacutericos de HTMLbull Los relacionados con la interfaz de usuario bull con el ratoacuten y bull tambieacuten los derivados del cambio en la estructura de un
documento (mutaciones)
Una potente herramienta pero no estaacute de maacutes tener en cuenta que cualquier nuevo contenido que se crea utilizando estas teacutecnicas estaacute supeditado a que el navegador soporte la implementacioacuten usada
La ʺcronologiacuteaʺ de un evento pasa por dos etapas1 Captura2 Burbujeo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 68
Document Object Model(DOM)
bull Puede ser utilizado con elementos XULndash Obtener informacioacuten de ellosndash Para modificarlos
bull Almacena el aacuterbol de nodos XULbull Es un API accesible por JavaScript
ndash El objeto global es la ventanabull Cada ventana tiene su propio documento DOM
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 69
Objeto Windows (global)bull Para cada archivo XUL
ndash Las funcioacuten de JavaScript son propiedades del objeto Window
bull Para recuperar elementosndash Usar el atributo id y el meacutetodo getElementByIdbull lttree id=ʺresultadosʺ hidden=ʺtrueʺ flex=ʺ1ʺgt
bull var resultados = documentgetElementById(resultadosʹ)
bull resultadoshidden = false
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 70
XUL Element DOMSe pueden manipular dinaacutemicamentebull Atributos
ndash Declarados en el archivo fuente XULndash getAttribute hasAttribute setAtribute
removeAtributebull Propiedades
ndash Estaacuten disponibles en JavaScriptndash elementopropiedad
bull Hijosndash Etiquetas hijos de los elementos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 71
Navegando el DOMbull Nodo raiacutez (window)bull Etiquetas del archivo Xul (fuente)bull Comentariosbull Textos
firstChild lastChild childNodes parentNode nextSibling previousSibling
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 72
getElementById (Identificador)(DOM Nuacutecleo Meacutetodo de Document) Devuelve el nodo Elemento cuyo id es Identificador
documentElement(DOM Nuacutecleo Atributo de Document) Devuelve el elemento raiacutez del documento
nodeName(DOM Nuacutecleo 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 Nuacutecleo 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 Nuacutecleo 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 Meacutetodo de DocumentEvent) Crea una interfaz Event del tipo especificado
addEventListener (Tipo Perceptor Captura)(DOM Eventos Meacutetodo de EventTarget) Inicia el registro de un evento de tipo Tipo a partir de la interfaz Perceptor y permitiendo la captura del evento
en funcioacuten del valor Captura dispatchEvent (Evento)
(DOM Eventos Meacutetodo de EventTarget) Enviacutea el Evento especificado al nodo objetivo al que se aplica stopPropagation ()
(DOM Eventos Meacutetodo de Event) Cancela la propagacioacuten 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 estaacute 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
Eventos (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 73
Eventos III
Hay varias formas de adjuntar un evento a un elemento
1 Usar la forma atributo2 Llamando el meacutetodo addEventListener del evento
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 74
Eventos (III)ltbutton label=ʺOKʺ oncommand=ʺalert(ʹButton was
pressedʹ)ʺgtVer Ejemplo
ltvbox oncommand=ʺalert(eventtargettagName)ʺgtltbutton label=ʺOKʺgtltcheckbox label=ʺShow imagesʺgtltvboxgtVer Ejemplo
ltvbox oncommand=ʺalert(eventcurrentTargettagName)ʺgt ltbutton label=ʺOKʺgt ltcheckbox label=ʺShow imagesʺgt
ltvboxgtVer Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 75
Eventos (IV)ltbutton id=ʺokbuttonʺ label=ʺOKʺgt
ltscriptgtfunction buttonPressed(event)
alert(ʹButton was pressedʹ)
var button = documentgetElementById(ʺokbuttonʺ)buttonaddEventListener(ʹcommandʹ buttonPressed true)
ltscriptgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 76
CommandPor medio de Command podemos invocar operacionesEl command es identificado por el id
ltcommand id=ʺcmd_openhelpʺ oncommand=ʺalert(ʹHelpʹ)ʺgt ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt Ver Ejemplo
ltbutton label=ʺHelpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺMore Helpʺ command=ʺcmd_openhelpʺgt ltbutton label=ʺDisableʺ
oncommand=ʺdocumentgetElementById(ʹcmd_openhelpʹ)setAttribute (ʹdisabledʹʹtrueʹ)ʺgt
Ver Ejemplo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 77
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 78
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 79
Hay varias formas de usar XUL
bull Como extensioacuten de Firefoxndash Barra de google
bull Aplicacioacuten independiente XULRunner ndash Como exe Flash‐Player
bull Paquete XULndash Solucioacuten intermedia swf de flash
bull Aplicacioacuten remota XULndash Desde el Web server (limitado)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 80
Firefox Extensions (XUL)bull Son pequentildeos paquetes de archivos
ndash XULndash Javascriptndash Style sheetsndash Imaacutegenes
bull Se conectan al browser en forma de overlay (Sobre impresioacuten) que lo combina con los XUL propios del bowser
bull Se acceden con un Chrome URL
Ver HerramientasExtensiones
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 81
Directorio ChromeMozilla
Mozilla FireFox
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 82
Aplicaciones Independientes XUL
bull La aplicacioacuten debe incluir el XULRunner
bull El coacutedigo XUL seraacute registrado en el sistema Chrome
Ver XULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 83
Paquete XUL
bull Son paquetes independientes que requieren de la presencia de XULRunner
bull No requieren instalacioacutenbull Usan el sistema Chrome por medio de XULRunner
Ver Reloj
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 84
Aplicacioacuten Remota XUL
bull Indispensable un navegador Mozilla (basado en Geko)
bull Utiliza el sistema Chrome del navegador
bull Se requieren certificados y autorizacioacuten del usuario
Ejemplos de las aplicaciones RIA
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 85
El Chrome URLbull URL que inicia con chrome
ndash http ndash file
bull A los recursos cargados con un chromeURL se le asignan los privilegios mencionados
bull El web server debe estar configurado para enviar archivos XUL ndash content type = ʹapplicationvndmozillaxul+xmlʹ
ndash Mozilla no usa la extensioacuten del archivo
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 86
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 87
Contenido
bull Rich Internet Application (RIA)ndash Frameworksndash Lenguajes de Marcado para IU
bull XML User Interface Language (XUL)ndash Componentesndash Interaccioacutenndash DOM
bull Sistema Chrome y XULRunnerndash Contentndash Skinndash Locate
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 88
Tipos de paquetes chrome (I)
bull Content (Windows and scripts)ndash Archivos XUL con infomacioacuten de las ventanas y los elementos que la componen
ndash El archivo XUL que define la ventana principal debe tener el mismo nombre del paquete
ndash Scripts son ubicados en archivos separados
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 89
Uso del Chrome URL (I)
bull ltpackage namegt es el nombre del paquete (messenger editor)
bull ltpartgt es ʹcontentʹ ʹskinʹ o ʹlocaleʹ dependiendo de la parte que usted requiere
bull ʹfilexulʹ es el nombre del archivo
Ejemplochromemessengercontentmessengerxul
chromeltpackage namegtltpartgtltfilexulgt
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 90
Uso del Chrome URL (II)Manifiesto
ndash El mapeo entre el chrome URL y el archivo JAR es especificado en el archivo manifestalmacenado en el directorio chrome
ndash Esto permite que los paquetes puedan estar almacenado en cualquier parte del disco o en la red
ndash Si se encuentran en un sitio remoto este sitio debe montarse en el sistema local de archivos
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 91
Uso del Chrome URL (III)
Sintaxis en el archivo Manifiesto
ndash ltpartgt ltpackagenamegt ltfilepathgtbull ltpartgt es la parte (content en este caso) bull ltpackagenamegt es el nombre del paquete
bull ltfilepathgt ruta del archivo (sin el nombre del archivo)
Ejemplocontent findfile fileDPruebasXUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 92
Uso del Chrome URL (IV)
Con archivos jar en ltfilepathgt es
ndash jarltfilenamejargtltpath_in_archivegtbull ltfilenamejargt nombre de archivo jarbull ltpath_in_archivegt ruta dentro del archivo jar
Ejemplondash content findfile jarfindfilejarcontent xpcnativewrappers=yes
bull Xpcnativewrappers indica que los scripts se ejecutan en un contexto privilegiado
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 93
bull Skin (Style sheets images y otros archivos de apariencia)ndash Style sheets describen la apariencia de una ventana
ndash Separalos de los archivos XUL facilita la modificacioacuten de la apariencia (theme)
ndash Cualquier imagen utilizada es almacenada aquiacute
Tipos de paquetes chrome (II)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 94
Utilizando CSSbull Se aplica una hoja de estilo por defecto a cada ventana Xul
ltxml‐stylesheethref=ʺchromeglobalskinʺ type=ʺtextcssʺgt
ndash Se asigna el archivo globalcss
bull Se pueden usar los atributos ndash alternate=ʺyesldquo (Hoja de estilo alternativa)ndash title=ldquoRojoldquo (Nombre de esa hoja de estilo)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 95
Uso del Chrome URL (IV)Para cuando ltpartgt es skin o locate se
agrega una referencia al content al que pertenecen (ltpackagenamegt)
bull ltpartgt ltpackagenamegt ltskinnamegt ltfilepathgtndash ltskinnamegt nombre con que se hace
referencia a la nueva piel
Ejemplondash skin browser classic10
jarclassicjarskinclassicbrowser ndash locale browser en‐US jaren‐
USjarlocalebrowser
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 96
bull Locale (Archivos locales especiacuteficos) ndash Todos los textos desplegados dentro de una ventana son almacenados separadamente
ndash Se facilita tener un conjunto de textos para cada idioma
Tipos de paquetes chrome (III)
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 97
Utilizando DTDrsquos
bull Se realiza un archivo DTD (DocumentType Declaration) con entidades para cada lenguajendash ltENTITY findLabel ʺFindʺgt
bull Se referencia el archivo XULndash ltDOCTYPE window SYSTEM ʺchromefindfilelocalefindfiledtdʺgt
bull Se utiliza en los elementos XULndash ltbutton label=ʺampfindLabelʺgt
bull Se nombran y comprimen los archivos ndash US English (en‐US) French (fr) ndash en‐USjar
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 98
Utilizando RDF
bull Resource Description Framework
ndash Permite la descripcioacuten de recursosbull Colecciones personalesbull Bibliotecas Catalogosbull Bookmarks and Historybull Sindicacioacuten y agregacioacuten de noticias software y contenido
bull Ontologias etc
Ver Ejemplo RDF
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 99
Lenguajes de la Web Semaacutentica
Ver Ejemplo Uso de RDF en XUL
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 100
Uso del Chrome URL (V)
bull content findfiles filefindfilescontent bull skin findfiles classic10 filefindfilesskin bull locale findfiles en‐US findfiles filefindfileslocale
Ejemplo de configuracioacuten de las tres partes
Ver Archivos manifest
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 101
Instalacioacuten de una aplicacioacuten
bull Para la instalacioacuten
ndash Se requiere un installrdfndash Se distribuyen en archivos XPI (XPInstall) es usado por Mozillapara instalar componentes
Ver FindFile
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 102
Rich Internet Application ndash Referenciasbull Allaire Jeremy ldquoMacromedia Flash MXmdashA next‐generation rich clientrdquo
Macromedia white paper March 2002bull Muumlller Bjoumlrn ldquoAJAX based Rich Internet Applicationsrdquo Software AG bull httpwwwbackbasecom Frameworkbull httpajaxiancom Sitio dedicado a Ajaxbull httpenwikipediaorgwikiRich_Internet_Applicationbull List of Rich Internet Applicationsbull The W3C Rich Web Clients Activitybull Rich Internet Apps AJAX amp Beyond whitepaperbull Hello World Rich Internet Application (RiA) Recipe Backgroundbull OʹRourke C ldquoA Look at Rich Internet Applicationsrdquo DEVELOPER
Trends bull McMullin J y Skinner G ldquoUsability Heuristics for Rich Internet Applicationsrdquo Published on 07152003
bull Macromedia Usability Topic Centerbull Microsoft Windows User Experiencebull Apple User Experience Documentation
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 103
Lenguajes de Marcado para Interfaces de Usuario
bull Hurtado N Gonzaacutelez J M y Torres J ldquoRevisioacuten de Lenguajes Declarativos para la Descripcioacuten de Interfaces de Usuario Independientes del Dispositivordquo en Interaccioacuten 2004 Lleida Espantildea 2004
bull Cofradiaorg ldquoXULMono vs XAMLNetrdquo Julio 2005 En httpcofradiaorgmodulesphpname=Newsampfile=printampsid=10371
bull Oscar J Baeza ldquoAjaxWrite XUL + AJAX se aventuran como una interesante plataforma de desarrolloldquo Marzo 2006 En httpwwwgenbetacomarchivos20060323‐ajaxwrite‐xul‐ajax‐se‐aventphp
bull ldquoPa xulo XULrdquo Enero 2006 En httpwwwgeekipollascomp=169
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner
01 Junio de 2006 Tendencias en Ingenieriacutea de Software 104
XULbull XUL en la Wikipedia [en]bull XULPlanet Documentacioacuten XULbull httpeswikipediaorgwikiXULbull httpwwwxulplanetcomtutorialsxultubull httpwwwxulplanetcomreferenceselemrefbull httpwwwmozillaorgprojectsxulbull httpxulsourceforgenetbull httpwwwmozillaorgxpfexulrefbull httpeswikibooksorgwikiXULbull httpdevelopermozillaorgendocsThe_Joy_of_XULFor more information about creating extensions seebull httpdevelopermozillaorgendocsExtensions For more information about XULRunner see
httpdevelopermozillaorgendocsXULRunner