Applicaciones en XUL Primeros Pasos. por Mariano Cuenze

Transcripción

1 Applicaciones en XUL Primeros Pasos por

2 Poniéndonos el calzado... Bajarlo de mozilla.org Facilidad de tenerlo ya disponible en todas las plataformas y pudiendo elegir cualquier versión Compilar el código fuente Obtener xulrunner Sólo cuando debas usar características no incluidas por default Ideal como entorno para desarrollar/extender mozilla en c++ (componentes xpcom en c++)

3 Poniéndonos el calzado... XulRunner Ofrece: XPCOM Obtener xulrunner Networking Gecko (el motor de renderizado) Cryptografía XUL XHTML SVG XSLT JS DOM - XBL (a futuro XBL2) XML Extras (XMLHttpRequest, DOMParser, etc.) Servicios Webs (SOAP) Soporte de Accesibilidad Storage/sqlite interfaces y mucho, pero mucho más

4 Primer Paso Se encuentra en el directorio raíz de la aplicación Archivo de texto plano Formato de un.ini de w32 [Heading] indica inicio de sección key=value para establecer parámetros ; y # para comentar application.ini

5 [App] Vendor=Mozilla Argentina Name=xul-FirstSteps Version=0.1 BuildID= Primer Paso application.ini El único atributo opcional aquí listado ;) para los demás ver: XUL Application Packaging en MDC Los valores de version y de BuildID son de gran utilidad. Cuando el runtime encuentra nuevos valores desde la vez pasada, chequea por nuevos módulos xpcom entre otras inicializaciones. Único por aplicación, puede ser un uuid pero se aconsejan cadenas del estilo producto@fabricante [Gecko] MinVersion=1.9 Define la version mínimas que nuestra aplicación necesita para ejecutarse. Puede usarse junto con MaxVersion. Si no se cumple este requisito, xulrunner termina con un mensaje de error.

6 Segundo Paso defaults/preferences/prefs.js Todo.js en la carpeta defaults/preferences será leido cada vez que se ejecute la aplicación. No es javascript real, sino un 'parser sencillo' espera cierto formato pautado (no corre en un contexto 'normal', no se puede hacer window.close o Math.sin() ) Sirven para establecer : preferencias que necesita/lee xulrunner nuestras propias preferencias de aplicación preferencias de usuario (iniciadas con valores por defecto)

7 Formato: Segundo Paso pref ( key, value ); defaults/preferences/prefs.js Las claves siguen la convención 'separar namespaces' con puntos para evitar coiliciones miapp.comp1.prop1 (es buena práctica persé, aparte del eventual que parte de la applicación pueda usarse en una extensión de otro producto) La propiedad vital usada por xulruner es: toolkit.defaultchromeuri indica qué.xul será el cargado como ventana principal (como se muestra toolkit es un 'namespace' usado por xulrunner, no usarlo para preferencias propias)

8 Segundo Paso defaults/preferences/prefs.js pref("toolkit.defaultchromeuri", "chrome://mozar/content/main/main.xul"); En principio este archivo sólo contiene un renglón el valor de toolkit.defaultchromeuri es la url del archivo.xul podría ser o file:// pero chrome es 'el directorio especial' de aplicación (ahora veremos cómo y dónde se crea)

9 Tercer Paso Mapea las rutas del protocolo chrome:// a archivos o directorios reales Archivo de texto formato por línea Sólo veremos la línea content Para más info: Comentarios con # hasta fin de línea chrome/chrome.manifest

10 Formato para content: Tercer Paso chrome/chrome.manifest content nombrefantasia ruta/a/directorio/ vincula ruta/a/directorio/ a chrome://nombrefantasia/content/ como sinónimos notar el content/ como 'estético', viene en la conversión nombrefantasia suele ser el nombre de la appliación o la extensión

11 content mozar content/ Tercer Paso chrome/chrome.manifest Teníamos de antes: chrome://mozar/content/main/main.xul Con lo cual: se vincula a app/chrome/content/ app/chrome/ es el 'directorio base' content/ es el indicado por chrome.manifest (y el content ficticio de la url, termina emparejado con una carpeta content real)

12 Cuarto Paso chrome/content/main/main.xul Llegamos al archivo xul principal (al fin...) Recordar que con el manifest dejamos fijo chrome/content/ para las url's chrome://mozar/content/ y como en la preferencia pusimos: chrome://mozar/content/main/main.xul terminamos para este ejemplo con la ruta chrome/content/main/main.xul

13 <?xml version="1.0"?> Cuarto Paso chrome/content/main/main.xul declaramos es un xml <window id="main-window" orient="vertical" xmlns=" gatekeeper/there.is.only.xul" > <label value="hello XUL"/> </window> En el tag principal, declaramos el namespace por defecto, vital para que xulrunner reconozca los tags label inserta una leyenda donde se lo declara

14 Primer descanso Corriendo el ejemplo con el runtime Poner la carpeta xulrunner dentro de app De la carpeta xulrunner cortar el archivo xulrunner-stub Pegarlo en app/ (se le puede poner un nombre más bonito, miapp.run u otro) Disfrutar del ejemplo :)

15 Primer descanso Estructura básica de una aplicación xul application.ini /defaults /preferences prefs.js /chrome chrome.manifest /content /main main.xul 4 archivos sencillos, separados en: 3 archivos 'de setup' 1 archivo es 'la aplicación real'

16 Para continuar... Conceptos de xul (1/3) El 'concepto central' en XUL son las ventanas (la documentación mensiona <package> pero no está implementado)

17 Para continuar... Conceptos de xul (2/3) XUL organiza el contenido de una ventana en cajas, los tags más básicos y útiles son: vbox (organiza un elemento debajo de otro) hbox (organiza un elemento al lado de otro) separator (crea un pequeño espacio entre elementos) spacer ( se usa para ocupar el espacio restante, no es un elemento real, se usa con flex= 1 )

18 Para continuar... Conceptos de xul (3/3) No todo elemento (tag) XUL tiene un equivalente visual o es mostrado. Hay elementos cuya utilidad es funcional (tag script) y otros sólo organizativa (tag scripts).

19 <vbox> <hbox> Quinto Paso chrome/content/main/main.xul <image src="../img/ok.png" /> <image src="moz-icon://.ogg?size=16" /> <label value="file1.ogg" /> <label value="litle desc" /> </hbox> <more hboxes.../> </vbox> código

20 Quinto Paso chrome/content/main/main.xul hbox hbox hbox images label label esquema vbox

21 Sexto Paso chrome/content/main/main.xbl Hay un patrón evidente en el xul que 'clama' por ser tratado como unidad (hbox y su contenido) XBL nos permite 'encapsular' porciones de XUL (y adjuntarle su código)... como si fuera casi un objeto XBL se aplica sobre xul usando css como vinculante la versión 1.0 es la actual (la 2.0 se propuso para standar del w3c)

22 Sexto Paso chrome/content/main/main.xbl <?xml version="1.0"?> <bindings... > <binding id="diskitem">... </binding> </bindings> Esqueleto del xbl tal como lo usamos

23 <binding id="diskitem"> <content> <xul:tags /> </content> <implementation> <constructor> /* js code */ </constructor> </implementation> </binding> Sexto Paso chrome/content/main/main.xbl Content contiene Xul (casi como en el.xul) los tags se prefijan con un namespace de xul para que no caigan en el namespace de XBL Implemetation contempla las formas de adozarle js al xbl... en este caso el código dentro de constructor se ejecuta al aplicar el binding

24 <vbox> Sexto Paso chrome/content/main/main.xbl Archivo XUL gracias al uso del XBL <diskitem metaicon="ok" name="file1.ogg"... /> <diskitem metaicon="none" name="file2.odt".../> <diskitem metaicon="point" name="file3.odt"... /> </vbox> CSS vinculante diskitem { -moz-binding: url('main.xbl#diskitem'); }

25 Séptimo Paso chrome/content/main/main.js Vamos a listar archivos reales, con metadata real Primero supondremos que ya obtuvimos la información y operaremos con ella: La mostraremos La modificaremos (me tomo la licencia de refinar el.xul y.css agregando contenido que usaremos luego)

26 Séptimo Paso chrome/content/main/main.js Disponemos de interfaces DOM para mutar el archivo xul en runtime ( getelementbyid,...) Para asociar un archivo js usamos el tag <script> en el.xul El código será parseado y se ejecutará toda sentencia de ámbito global (fuera de una función) Por proligidad si hay más de un tag <script> se los encierran con un tag simbólico <scripts> (el runtime descargado de mozilla, no soporta python, sólo js para el scripting)

27 Séptimo Paso chrome/content/main/main.js var avbox = document. getelementbyid ( "disitembox" );... while ( avbox. HasChildNodes ( ) )... avbox. removechild ( avbox. firstchild ); var adiskitem = document. createelement ( "diskitem" ); adiskitem. setattribute ( "name", i );... avbox. appendchild ( adiskitem ); Uso de dom para mutar el 'arbol de xul' Notar que el tag creado, cobra semántica a travez del binding (vía css) con xbl

28 /chrome Segundo descanso /content /main Xul, css, Js y xbl son la escencia (1/2) main.xul main.js main.css main.xbl Un <xul:grid> dispone los elementos en cuadrícula (a veces se puede agrupar por fila o columna). <xul:groupbox> agrupa estéticamente elementos <xul:statuspanel> aparecen dentro de <xul:statusbar> y forman el pie de la aplicación

29 Segundo descanso Xul, css, Js y xbl son la escencia (2/2) flex= ## si dentro de una caja visual, todos sus elementos hijos se muestran y aún así sobra espacio, ese espacio sobrante se distribuirá entre los elementos con flex, proporcionalmente al valor de flex que posean (flex= 1 con flex= 2, reparte un tercio y dos tercios respectivamente a cada elemento) CSS adjunta 'semántica visual' a un elemento, en el caso de este vbox: vbox#disitembox min-height: 20px; >> se le fija un alto mínimo overflow: auto; >> se le indica que muestre scroll si se necesita (tanto vertical como horizontal)

30 Para continuar... Conceptos de xpcom (1/3) No todo es xul en la vida... también existe xpcom. La mayor parte del código de Mozilla está escrito en C/C++ (en C el NSPR y el intérprete - o máquina virtual- de JS) Podremos usar su funcionalidad desde XUL y JS?...

31 Para continuar... Conceptos de xpcom (2/3) Si! Podemos comunicarnos con porciones de C++ desde XUL... Mediante XPCOM (gracias a Xpconnect) La idea es que una clase C++, un objeto al cumplir ciertos requisitos, es automáticamente expuesto o accesible, desde JS. La magia permite que los componentes Xpcom puedan ser escritos en otros lenguajes aparte de C++... (JS, Python,... )

32 Para continuar... Conceptos de xpcom (3/3) Las clases están en: Components. Classes Y se acceden vía interfaces (vistas parciales de sus métodos y propiedades ) que están en: Components. Interfaces Siempre, pero siempre: Trabajamos con interfaces Vemos al ojbeto a través de la ventana de la interfaz Agarramos o tomamos al objeto por la interfaz o manija.

33 Octavo Paso chrome/content/main/main.js Para listar los archivos reales, permitiremos que el usuario establezca un path en una caja de texto, ayudándolo con un diálogo para elegir la ruta.

34 Octavo Paso chrome/content/main/main.js var nsifilepicker = Components. interfaces. nsifilepicker; var fp = Components. classes [ "@mozilla.org/filepicker;1" ]. createinstance ( nsifilepicker ); fp. init ( window, "Select a File", nsifilepicker. modegetfolder); var res = fp.show(); if (res == nsifilepicker. returnok ) A partir de conocer el 'nombre de fantasía estilo url', podemos crear un objeto con createinstance y la interfaz con la que lo queremos manejar/ver/agarrar document. getelementbyid ( "path" ). value = fp. file. path; Luego sólo lo usamos, casi como un objeto más (el casi en este ejemplo no se nota, si en uno próximo)

35 Noveno Paso chrome/content/main/main.js Vamos a listar los archivos reales. Cuando el usuario cliquee en Aceptar,listaremos los archivos en el mismo.

36 ... Noveno Paso while ( entries. hasmoreelements ( ) ) { }... var entry = entries.getnext(); chrome/content/main/main.js entry.queryinterface(components.interfaces.nsifile); filelist [ entry. path] = { metaicon:"none", desc:"", longdesc:"" }; Notemos como la interfaz o manija que nos retorna getnext, no es la que queremos y por eso pedimos con QueryInterface, la interface que necesitamos: nsifile

37 Décimo Paso chrome/content/main/main.js Para permitir editar la metadata, cargamos las imágenes que usamos como meta íconos.

38 var disksvrc = Décimo Paso chrome/content/main/main.js Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties);... file. append ( "content" ); file. append ( "img" ); A diferencia de getinstance, getservice sólo crea y matiene una única instancia de un objeto que retornará siempre (patrón: singleton) Usamos el método append en vez de jugar con el texto del path para asegurar la portabilidad entre sistemas operativos

39 Undécimo Paso chrome/content/main/main.js Permitir elegir, editar y actualizar la metadata

40 Undécimo Paso cureditingfilename = name;... chrome/content/main/main.js Si bien son pocas variables globales, conienen contenerlas en un objeto global (o varios y pocos por módulo): uicontext = {var1, var2,...}; (no hecho en este ejemplo) document. getelementbyid ( "metaiconrgroup" ). selectedindex = metaiconlookup. nametoidx [ filelist [ name ]. metaicon ];... El contenedor de los tags radio, opera sobre ellos estableciendo y consultando cual es el elegido (es un contenedor funcional) document. getelementbyid ( "updateitembtn" ). disabled = false; notar como dom nos da una amplia libertad

41 Duodécimo Paso chrome/content/main/main.js Leyendo y guardando la metadata desde un archivo sqlite (oculto, creado por directorio) Sqlite permite: crear tablas, índices, funciones... Trabajar con sentencias SQL con parámetros Trabajar con transacciones

42 Duodécimo Paso var storageservice = chrome/content/main/main.js (1/3) Components. classes [ "@mozilla.org/storage/service;1" ]. getservice ( Components. interfaces. mozistorageservice );... var db = storageservice. opendatabase ( file ); if (! db. tableexists ( "meta" ) ) Si el archivo que será la base no existe, se crea como tal a medida que se va usando db. createtable ( "meta", "filename TEXT PRIMARY KEY, metaicon TEXT, metadesc TEXT, metalongdesc TEXT" ); db.close(); Para crear la tabla, se usa el nombre y por separado los pares nombrecolumna tipocolumna separados entre sí por coma.

43 Duodécimo Paso chrome/content/main/main.js (2/3) var statement = db. createstatement ( "SELECT * FROM meta;" );... while ( statement. executestep ( ) ) { } var key = statement. getstring ( 0 ); filelist [ key ]. metaicon = statement. GetString ( 1 statement. finalize ( ); Para un select, la rutina (con statement) es: createstatement while ( executestep) { getstring ( ) o getint32...} finalize

44 Duodécimo Paso chrome/content/main/main.js (3/3) statement = db. createstatement ( "INSERT INTO <table> (<field1, field2, field3,...>) VALUES ( val1, 'val2', val3,... )" ); statement.execute(); statement. finalize ( ); Para un insert into o para un update, se usa: createstatement execute finalize

45 Décimo Tercer Paso chrome/locale/main/main.dtd Para prolijar la aplicación, moveremos el texto en el.xul a una dtd Para manejar texto desde js también puede usarse archivos.properties (accesibles desde la facilidad <xul:stringbundle> )

46 Décimo Tercer Paso <!ENTITY label.path.label <!ENTITY button.browse.label <!ENTITY button.accept.label <!ENTITY label.metadata.label <!ENTITY label.micon.label chrome/locale/main/main.dtd xul Vinculante "Ruta"> "Examinar"> "Aceptar"> "Metadata"> "Meta icono"> <!DOCTYPE window SYSTEM "chrome://mozar/locale/main/main.dtd" > ejemplo de uso en el.xul <label value="&label.path.label;:" /> Se puede usar además para accesskey y demás atributos xul

47 Llegamos!!! Usamos: XUL CSS XBL JS XPCOM DTD

48 Preguntas?

49 Aplicaciones en XUL Url's

50 Aplicaciones en XUL Primeros pasos GRACIAS!!!

51 Applicaciones en XUL Primeros Pasos por Agradecimientos a: Augusto Daniele Andrea Lamas Mook (irc.mozilla.org) Para más información sobre esta presentación: Sobre la comunidad y como participar en ella: Jornadas Regionales de Software Libre 2008