104
01 Junio de 2006 Tendencias en Ingeniería de Software 1 XUL (XML Userinterface Language) Juan Carlos Giraldo Cardozo Juan Carlos Giraldo Cardozo Jorge Hern Jorge Hern á á n Soto Osorio n Soto Osorio

Presentación RIA y XUL

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

Page 1: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 2: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 3: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 4: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 5: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 6: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 7: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 8: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 9: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 10: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 11: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 12: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 13: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 14: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 15: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 16: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 17: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 18: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 19: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 20: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 21: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 22: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 23: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 24: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 25: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 26: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 27: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 28: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 29: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 30: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 31: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 32: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 33: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 34: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 35: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 36: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 37: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 38: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 39: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 40: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 41: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 42: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 43: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 44: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 45: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 46: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 47: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 48: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 49: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 50: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 51: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 52: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 53: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 54: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 55: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 56: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 57: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 58: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 59: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 60: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 61: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 62: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 63: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 64: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 65: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 66: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 67: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 68: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 69: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 70: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 71: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 72: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 73: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 74: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 75: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 76: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 77: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 78: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 79: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 80: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 81: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 82: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 83: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 84: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 85: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 86: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 87: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 88: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 89: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 90: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 91: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 92: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 93: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 94: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 95: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 96: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 97: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 98: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 99: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 100: Presentación RIA y 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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 101: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 102: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 103: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL
Page 104: Presentación RIA y XUL

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

  • XUL (XML User-interface Language)
  • Contenido
  • Contenido
  • Rich Internet Application
  • Rich Internet Application RIA (I)
  • Macromedia RIA
  • Rich Internet Application RIA (II)
  • Ventajes de RIA
  • Restricciones de RIA
  • Contenido
  • Contenido
  • Alternativas RIA
  • AJAX
  • Adobe (Macromedia)
  • Framework Flex 20
  • Por supuesto
  • Mozilla
  • Estaacutendares W3C
  • Programas RIA
  • Para Elegir
  • Contenido
  • Contenido
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (I)
  • Lenguajes de marcado para interfaces de usuario
  • Comparativa (II)
  • Comparativa (III)
  • Comparativa (IV)
  • Contenido
  • Contenido
  • iquestQueacute es XUL y iquestPor queacute fue creado
  • iquestQueacute interfases de usuario se pueden hacer con XUL
  • Creando una Interfaz
  • Adicionando Botones (I)
  • Adicionando Botones (II)
  • Adicionando Etiquetas
  • Etiquetas asociadas a Controles
  • Cajas de Texto
  • Checkboxes and Radio Buttons
  • Listbox (I)
  • Multi-Column List Boxes
  • Drop-down Lists
  • Progress Meters
  • Incluyendo HTML
  • Adding Spacers
  • Adding Spacers
  • The Box Model
  • Posicionando los ltboxgt
  • Alineacioacuten de los ltboxgt
  • Pilas y Cubiertas
  • TabBoxes
  • Cubierta
  • Grid
  • frames
  • Splitters
  • Toolbar
  • Barra Menuacute
  • SubMenuacute
  • Menuacute Emergente
  • Usando Scripts
  • Eventos (I)
  • DOM
  • DOM
  • DOM Eventos
  • Document Object Model (DOM)
  • Objeto Windows (global)
  • XUL Element DOM
  • Navegando el DOM
  • Eventos (II)
  • Eventos III
  • Eventos (III)
  • Eventos (IV)
  • Command
  • Contenido
  • Contenido
  • Hay varias formas de usar XUL
  • Firefox Extensions (XUL)
  • Directorio Chrome
  • Aplicaciones Independientes XUL
  • Paquete XUL
  • Aplicacioacuten Remota XUL
  • El Chrome URL
  • Contenido
  • Contenido
  • Tipos de paquetes chrome (I)
  • Uso del Chrome URL (I)
  • Uso del Chrome URL (II)
  • Uso del Chrome URL (III)
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (II)
  • Utilizando CSS
  • Uso del Chrome URL (IV)
  • Tipos de paquetes chrome (III)
  • Utilizando DTDrsquos
  • Utilizando RDF
  • Lenguajes de la Web Semaacutentica
  • Uso del Chrome URL (V)
  • Instalacioacuten de una aplicacioacuten
  • Rich Internet Application ndash Referencias
  • Lenguajes de Marcado para Interfaces de Usuario
  • XUL