Generació d'interfícies a partir de documents XML
Per dissenyar i desenvolupar una interfície gràfica d’usuari es poden escollir entre moltes opcions d’entorns de desenvolupament i entre molts llenguatges de programació. Si s’escull un llenguatge de quarta generació i un entorn integrat de desenvolupament, es podrà disposar de moltes més eines i elements que facilitaran aquesta feina.
La primera decisió que cal establir pel que fa al disseny d’una aplicació que tindrà diverses interfícies d’usuari és l’entorn d’execució, si serà local o en un entorn client-servidor, si serà per a WinForms o per a un entorn web, si RichClient o ThinClient… Aquesta decisió influirà en el llenguatge de programació de l’aplicació i de les interfícies, per decidir, a posteriori, quin entorn de desenvolupament caldrà escollir.
Introducció a XML
Què és XML? Es veurà amb més detall als apartats següents, però bàsicament és un llenguatge amb una funció principal: descriure dades per mitjà d’etiquetes, sense preocupar-nos com es tractaran aquestes dades ni com es mostraran. Què té de positiu? Aquest llenguatge pot ser desenvolupat pels programadors o dissenyadors de programari des de molts altres llenguatges com Java, C#, .NET, etc.
W3C
W3C és el World Wide Web Consortium. Es tracta d’una comunitat internacional que desenvolupa estàndards, criteris i recomanacions referents a les tecnologies web que assegurin, a llarg termini, el creixement d’Internet.
Per què parlem d’XML en un tema que tracta de la generació d’interfícies gràfiques d’usuari? Un arxiu en XML no permet dissenyar ni configurar una interfícia gràfica, només oferirà les dades necessàries per ser mostrades o manipulades. A partir d’altres llenguatges de programació que fan servir les característiques d’XML es poden desenvolupar interfícies de manera molt senzilla, per a aplicacions especialment pensades per a un entorn Web i acomplint els estàndards, criteris i recomanacions definides pel W3C.
Què és l’XML?
XML (eXtensible Markup Language) té com a funció principal la de descriure dades per mitjà d’etiquetes i no es preocupa de la manera de tractar-les o mostrar-les.
XML és un metallenguatge extensible d’etiquetes, és a dir, que a partir de la definició de dades per mitjà d’etiquetes i certes regles serveix com a base per definir altres llenguatges de marques. Alguns exemples de llenguatges definits sobre XML són:
- XHTML
- RSS (Really Simple Sindication)
- SVG (Scalable Vector Graphics)
- MathML
- GraphML
- MusicXML
Les etiquetes són un conjunt de caràcters alfanumèrics que quedaran escrits entre els símbols > i <. Aquest conjunt de caràcters, el substantiu que representen, serà l’identificador de l’etiqueta. Per exemple, <nom> és una etiqueta amb l’identificador “nom”.
Com més va més aplicacions són capaces de definir el seu propi llenguatge específic basat en l’ús d’etiquetes XML. Aquest fet fa que el llenguatge XML sigui com més va més utilitzat i més popular entre els desenvolupadors d’aplicacions i d’interfícies. Tot això és gràcies al seu enfocament genèric, extensible i molt senzill, basat en molts pocs elements bàsics i unes regles de format molt estrictes. A partir de fitxers XML, i algunes eines o llenguatges més, es podran desenvolupar tot tipus d’arxius i formats, com els representants a la figura.
Per entendre millor el funcionament de l’XML es mostra a continuació un exemple de les seves característiques i del seu codi:
La X d’XML significa eXtensible, és a dir, ampliable. Ser ampliable vol dir que pot definir qualsevol conjunt d’etiquetes addicionals sense que bloquegi l’aplicació. Per exemple, a continuació tenim una part de codi implementat en XML. Per a una assignatura, n’indicarem el nom i les hores que durarà la impartició.
En aquest codi les etiquetes són: assignatura, nom i hores.
Ara es voldrà fer més extens aquest exemple amb més informacions, és a dir, ampliar-lo. A més de les dades descrites es vol afegir el nom del professor, però també afegir un nivell més a aquestes dades (un fill més), que són els noms dels alumnes. Per aconseguir això haurem de modificar l’arxiu XML perquè tingui aquest nou aspecte:
L’aplicació que llegeixi aquest document XML podrà saber, a més, quins alumnes cursen l’assignatura.
Una arxiu XML és un arxiu que conté a la vegada les dades i la seva estructura en el mateix document. Aquesta és una característica molt important dels fitxers XML. El fet que siguin autodescriptius simplifica molt el treball amb aquest tipus de fitxers, ja que són molt senzills d’entendre i de manipular. Aquest fet és molt important tant per al desenvolupament de programes que els utilitzin, com per usar-los amb configuracions o enviament de dades entre diferents entorns o plataformes.
Àmbit d’aplicació
Els documents XML són fitxers de text normal que es poden obrir des de qualsevol editor de text, per molt senzill que sigui. No són com altres tipus d’arxius que necessiten un programari de propietat específic per interpretar-los, com passa amb la majoria dels arxius binaris. Això vol dir que es pot utilitzar un editor tan senzill com el Vi en Linux o el Bloc de notes de Windows per obrir i editar un fitxer XML.
Una de les conseqüències més importants d’aquest fet és la portabilitat que ofereix l’XML. El format d’arxius de tipus text i el fet de ser autodescriptius fan que es puguin manipular i entendre des de qualsevol plataforma.
Cal comentar també altres àmbits d’aplicació de l’XML:
- Quan es necessita intercanviar informació a través de diverses plataformes (compatibles o incompatibles) de maquinari o de programari, o de diverses aplicacions, XML pot ser l’elecció més encertada. Aquest és el cas d’aplicacions d’XML en l’àmbit de tecnologies de la comunicació com, per exemple, el popular WML (llenguatge de format sense fils) i WAP (protocol d’aplicacions sense fils).
WML
WML és un llenguatge basat en XML que s’utilitza per donar format a aplicacions d’Internet per a dispositius de mà, com telèfons o PDA.
- En aplicacions de comerç electrònic entre empreses (B2B), en què les empreses necessiten intercanviar una gran quantitat d’informació financera de manera independent de la plataforma, l’XML també serà una bona elecció. Diverses aplicacions utilitzen SOAP (Protocol senzill d’accés a objectes), un protocol molt popular basat en XML, per intercanviar aquest tipus d’informació a través d’Internet. Aquestes aplicacions basades en XML que s’utilitzen per compartir informació s’anomenen serveis web.
B2B: Business to Business
En el cas de desenvolupadors que fan servir llenguatges com HTML i CSS per dissenyar les interfícies i la presentació de les dades, fent servir XML per transferir-les es reduirà el risc d’incloure contingut redundant. Si hi ha canvis pel que fa a les interfícies o en la configuració de la presentació, això no afectarà les dades, que s’emmagatzemen per separat en un arxiu XML.
Com a exemple per a aquest darrer cas es pot plantejar un sistema de gestió de continguts. Aquest sistema pot generar documents per a usuaris finals en diversos formats, com poden ser HTML, PDF, etc. No obstant això, no té sentit emmagatzemar múltiples versions (una a cada format) d’un mateix document amb les mateixes dades. El contingut es duplicaria i ocuparia un valuós espai en el disc, la qual cosa ompliria el CMS d’informació redundant i en faria més lent l’ús. Si s’utilitza un motor basat en XML, el contingut es pot emmagatzemar una sola vegada per extreure’l i mostrar-lo posteriorment en el format demanat. Si XML separa el contingut de la presentació, què s’haurà d’utilitzar per presentar les meves dades? Hi ha altres llenguatges basats en els documents XML, que es treballaran en els apartats següents.
En resum, alguns dels àmbits d’aplicació de l’XML podrien ser:
- En aplicacions que manegen gran quantitat de dades i, alhora, necessiten ser flexibles i ampliables. Per exemple, llocs web, llistes d’ofertes de feina o aplicacions financeres.
- En aplicacions en què la presència de continguts redundants sigui un perill, com en sistemes d’administració de contingut, biblioteques de documents o sistemes de seguiment de llocs web.
- En aplicacions en què cal intercanviar gran quantitat de dades a través de diferents plataformes, com les aplicacions B2B, clients de correu electrònic compatibles amb servidors de notícies o dispositius mòbils.
- En aquelles situacions en què la informació ha d’estar disponible per a un gran nombre de clients. Per exemple, titulars de notícies, comunicats de premsa d’empreses, avisos i anuncis importants, marcadors, llistes de reproducció, calendaris d’esdeveniments o llistes de correu.
SGBD: sistemes gestors de bases de dades.
Actualment, XML s’utilitza habitualment per transferir dades entre diferents aplicacions de bases de dades. La majoria dels SGBD, incloent-hi Microsoft Access i Oracle, permeten exportar taules de bases de dades com a fitxers XML.
Estructura d’un document XML: etiquetes, atributs i valors
Un fitxer XML és un arxiu en format text, que conté etiquetes per identificar els elements i dades que componen el document. El primer que cal tenir en compte a l’hora de definir un fitxer XML és que la primera línia del fitxer ha de ser la següent:
La resta del document XML s’escriurà amb etiquetes, i sempre cal obrir-les i tancar-les:
El conjunt format per les etiquetes (obertura i finalització) i el contingut es coneix com a element o node (en el cas de fer una representació jeràrquica de les dades). Per exemple, el conjunt <nom>Pere</nom> és un element o node, amb l’etiqueta “nom” i el contingut “Pere”.
Es pot donar el cas que el contingut d’un element contingui altres elements en comptes de les dades en format de text, però no podrà contenir les dues coses: els altres elements i dades en format de text.
Els comentaris en XML s’escriuran d’aquesta manera:
Aquest tipus d’estructura de document amb les etiquetes i els atributs demana tenir molta cura de la manera d’emmagatzemar la informació, estructurant molt bé el document i ordenant adequadament les informacions.
Un document XML té una estructura imbricada de manera jeràrquica. És obligatori tancar totes les etiquetes, i si un element té vinculats altres elements (fills), és a dir, altres elements que en descendeixen, s’han de tancar les etiquetes dels fills abans de poder tancar l’etiqueta del pare.
Un document XML es troba ben format si disposa d’una estructura sintàcticament correcta.
Per aconseguir això caldrà que l’estructura jeràrquica s’acompleixi de manera estricta pel que fa a les etiquetes que es fan servir al document. És a dir, totes les etiquetes obertes han d’haver estat tancades en l’ordre adequat. Els valors de les dades o continguts dels nodes es troben entre el text que indica l’obertura de l’etiqueta i el que n’indica el tancament.
Etiquetes
Totes les etiquetes han d’estar correctament tancades, és a dir, amb una etiqueta de tancament que es correspongui amb la d’obertura.
Les etiquetes han d’estar sempre tancades.
Un exemple incorrecte seria:
En canvi, vegeu-ne ara una versió correcta:
Les etiquetes buides (és a dir, sense contingut) tenen una sintaxi especial:
Atributs
Els elements poden tenir atributs, que són una manera d’incorporar característiques o propietats als elements d’un document.
La manera de representar aquesta informació serà a partir d’afegir a l’etiqueta d’obertura del node els atributs (tant el nom com els valors) que volem.
Els valors dels atributs dels elements sempre han d’estar marcats amb les cometes dobles (”) o simples (‘).
Com es pot veure a la figura, en el cas del treballador de nom “Joaquim Casanoves” s’ha afegit l’atribut país per indicar la seva nacionalitat, i s’indica a més el valor d’aquest atribut.
El nom de l’etiqueta d’un element, atribut, entitat… comença per una lletra, i continua amb lletres, dígits, guionets, ratlles, punt o dos punts.
El text XML (o xml o xMl, etc.) no es pot utilitzar com a caràcters inicials d’un nom d’element, atribut, entitat, etc.
XML és case-sensitive (sensible a la caixa, l’ús de majúscula o minúscula), és a dir, no és el mateix <autor>; que <Autor>;.
Un exemple d’XML complet i ben format seria:
D’aquesta manera l’estructura jeràrquica de l’XML serà la que es mostra a la figura, amb el node de Matriculats al primer nivell, els alumnes i les assignatures al segon nivell, el nom i curs de les assignatures al tercer nivell i les dades de l’alumne com a tercer nivell dels alumnes. El nivell quart, només assolit per la branca de l’Alumne, ens indica les dades d’aquest (nom, cognoms, matrícula i identificador).
Consultes XPath
XPath o XML Path Language és un llenguatge de consultes per accedir a un document XML o per referir-se a parts d’un document XML. Amb les consultes XPath podrem accedir, per exemple, a la informació d’un node.
XSLT
Estàndard de l’organització W3C que presenta una manera de transformar documents XML en altres formats.
XPath, definit pel W3C, es pot utilitzar sota diversos entorns, per exemple amb fitxers XSLT, a partir del llenguatge de programació PHP, a partir de Java, etc.
Per veure un exemple, es farà servir l’eina Visual XPath. Amb aquesta eina es pot veure un exemple senzill de com s’executa una consulta i quins serien els resultats.
Si s’agafa l’exemple en XML anterior i s’obre fent servir el programa Visual XPath, s’obté el resultat representat a la figura.
Per exemple, si executem la consulta: Matriculats / Alumnes / Alumne en l’XML anterior, el resultat serà un XML que conté tots els nodes d’alumne.
És a dir, la solució seria Joan, Garcia Castellejos, 060000, 4060000, Albert, Lucas Martinez, 05000, 306000H.
En el cas de Visual XPath, executar una consulta implica escriure-la en el seu espai corresponent i fer servir el botó “Execute”.
Executant la mateixa consulta amb XPath, s’obté el resultat mostrat a la figura.
Es pot observar com la consulta XPath indica els nodes que cal anar recorrent per arribar al node final. Aquestes consultes tenen en compte la diferència entre majúscules i minúscules, és a dir, no és el mateix matriculats / Alumnes que Matriculats / Alumnes; la primera no tornaria cap resultat, mentre que la segona sí que tornaria resultats.
Edició d’un document XML
HTML
HTML són les sigles d’Hyper Text Markup Language, és a dir, ‘llenguatge de marques d’hipertext’).
Un document XML és un document de text ASCII, com molts altres tipus de documents que es desenvolupen a partir de diferents llenguatges de programació (per exemple, l’HTML). Aquest llenguatge és interpretat per altres llenguatges o programes específics, però per editar-lo no cal cap eina especial.
Una aplicació tan senzilla com un Edit en MSDOS o un Bloc de notes en un entorn Windows permeten la visualització i edició del document XML.
A la figura és pot veure com podem editar el codi de l’exemple tractat anteriorment amb una eina d’edició com l’Ultraedit.
Ultraedit
L’Ultraedit és una eina de propietat d’edició de codi no integrada amb cap entorn de desenvolupament però que permet el reconeixement de molts llenguatges de programació, com l’XML. Per a Windows i per a Linux.
Altres eines permeten el reconeixement de les etiquetes que es fan servir, encara que sigui el desenvolupador el que en decideixi el nom, cosa que permet un desenvolupament més senzill i agradable. Alguns entorns integrats de desenvolupament permetran aquest reconeixement a més de permetre indicar si la sintaxi és la correcta o mostrar com queda el resultat del codi una vegada interpretat o executat, en funció del llenguatge de programació utilitzat.
Però, d’altres vegades, interessa fer servir un editor de codi genèric que ofereixi algunes funcionalitats més que les que oferirà un bloc de notes, sense arribar a necessitar un IDE o, senzillament, perquè no existeix per a un llenguatge de programació determinat. Aquestes funcionalitats poden ser el reconeixement de llenguatges de programació o la possibilitat d’escriure en format de columnes.
Una altra característica que permet un tractament millor del codi, tant pel que fa l’edició com a la comprensió, és el fet de sagnar cap a la dreta aquelles etiquetes que formen part d’un mateix nivell jeràrquic. El fet de poder-les agrupar ajudarà molt a la comprensió del codi.
A la figura es pot veure l’edició de l’exemple amb l’editor UltraEdit, amb el reconeixement de les etiquetes i la sagnia del codi.
Hi ha moltes altres eines específiques per l’edició de XML. Algunes d’elles són:
- Syntext Serna. Editor per a Windows, Linux i Mac, eina amb una versió lliure que permet l’edició de text, l’edició gràfica i l’edició de tipus WYSIWYG.
- XML Studio. Editor per a Windows, eina de propietat que permet l’edició de text, l’edició gràfica i l’edició de tipus WYSIWYG.
- Oxygen XML Editor. Editor per a Windows, MAC i Linux, eina de propietat que permet l’edició de text, l’edició gràfica i l’edició de tipus WYSIWYG.
- XML Notepad 2007. Editor per a Windows, amb llicència pública de Microsoft, que permet l’edició de text, l’edició gràfica i l’edició de tipus WYSIWYG.
A la figura es pot veure un exemple de l’eina Syntext Serna.
Una altra alternativa per editar documents XML és fer-ho a partir de codi generat per eines específiques, com, per exemple MonoDevelop o Glade.
Glade és una eina lliure que ajuda a la creació d’interfícies gràfiques d’usuari. Una vegada dissenyada la interfície, es pot generar el codi corresponent en XML, i aquest es podrà editar per aconseguir modificacions.
A la figura se’n pot veure un exemple.
Llenguatges de descripció d’interfícies basats en XML
L’XML és un llenguatge que, per si mateix, no oferirà el disseny d’una interfície gràfica d’usuari. Necessitarà altres llenguatges que aprofitin les seves característiques per oferir el desenvolupament d’una GUI.
És a dir, hi ha llenguatges basats en l’estàndard XML que permeten descriure com ha de ser tractada la informació que conté un document XML per presentar-la en un mitjà com pot ser una pàgina web (HTML) o qualsevol altre document estructurat.
En aquest apartat és durà a terme una descripció dels llenguatges de programació basats en XML:
- XSLT (eXtensible Style Language Transformation)
- XUL (eXtensible User interface Language)
- XIML (eXtensible Interface Markup Language)
XSLT (eXtensible Style Language Transformation)
XSLT (o XSL Transformations) és un estàndard de l’organització W3C que presenta una manera de transformar documents XML en altres tipus de documents, fins i tot en formats que no són XML.
A la figura es pot veure la manera de funcionar de l’estàndard XSLT. Els fulls d’estil XSLT fan la transformació del document utilitzant una o diverses regles de plantilla unides al document font que cal transformar.
XSLT està obtenint, actualment, molt reconeixement en l’edició web, i genera pàgines HTML o XHTML. La unió d’XML i XSLT ajudarà a l’augment de la productivitat pel fet de permetre la separació de contingut i presentació gràfica.
D’aquesta manera es pot observar a la figura que, a partir d’un mateix XML, aplicant diferents fulls XSLT, es pot representar la informació amb diferents formats. A la figura s’observen dues interfícies diferents, amb les dades de diversos treballadors, que tindran el mateix origen, un únic document XML.
Per entendre millor el funcionament de l’XSLT es planteja l’exemple següent:
Disposem d’un XML que tracta d’una agrupació de persones:
Aquest document XML conté les dades (nom, DNI i nota mitjana) de tres alumnes, seguint una estructura jeràrquica amb Alumnes/Alumne/Nom-DNI-notaMitjana.
El document XSL de transformació que s’utilitzarà és:
Un document XML es compon d’informació estructurada en nodes en forma d’arbre. Si es té en compte que un XSLT ha de recórrer un document XML, entendrem que la sintaxi bàsica per al desenvolupament d’XSLT són recorreguts, bucles i condicions que naveguen per l’estructura de l’XML. En aquest exemple, es farà un recorregut pel document XML recollint les dades dels alumnes referent als noms i a la nota mitjana, deixant de banda la informació referent al DNI.
La capçalera per a tots els documents serà:
En què s’indica un full d’estil XSL mitjançant l’etiqueta stylesheet per a tots els documents que fem. Indiquem la versió 1 del full d’estil amb l’atribut version. En el cas de complir les recomanacions del W3C s’especificarà amb xmlns=http://www.w3.org/1999/xhtml i finalment el seu namespace (criteri i restriccions de les recomanacions sobre l’estructura de tipus d’element i noms de l’atribut), amb xmlns i xmlns:xsl.
En l’exemple s’està transformant el document XML en un HTML compost per una taula amb dues columnes: el nom de l’alumne i la seva nota mitjana.
El resultat de la transformació serà un document HTML com el següent:
A la figura es pot veure quin és el resultat d’aquest document HTML si l’obrim amb un navegador. Obtindrem una taula amb 4 files i dues columnes; la primera de les files conté la capçalera i la resta de les files el nom dels alumnes i la seva nota mitjana.
XUL (eXtensible User interface Language)
XUL és l’acrònim d’eXtensible User interface Language; traduït de l’anglès significa ‘llenguatge d’interfície d’usuari extensible’. Aquest llenguatge ha estat desenvolupat per crear interfícies d’usuari a partir de documents XML per als entorns Netscape i Mozilla.
XUL fa servir els elements d’un llenguatge de marques per crear interfícies gràfiques d’usuari, com ho fa un altre llenguatge com l’HTML. Es podrà definir l’aparença d’aquesta interfície amb fulls d’estil CSS i usar JavaScript per manipular-ne el comportament. A més, XUL té un conjunt extens de components gràfics usats per crear menús, barres d’eines, caixes de text, entre molts altres components. Aquest darrer punt el diferencia del llenguatge HTML.
XUL, a més de ser un llenguatge amb el qual és possible crear interfícies de manera fàcil, senzilla i ràpida, està disponible per a totes les versions de Windows, Mac, Linux i UNIX. Cal dir que, actualment, encara no és compatible al 100% amb el programari de Microsoft Internet Explorer, cosa que en dificulta l’extensió. A la figura es fa una mostra dels diferents elements amb els quals pot interactuar un document desenvolupat en XUL, com són l’XML, el CSS, el JavaScript, l’HTML i l’RDF.
A continuació es desenvolupa un exemple en XUL que implementarà una interfície molt senzilla. Es tracta d’un petit formulari preparat per mostrar les dades contingudes en un document XML.
Per fer això, cal crear un arxiu anomenat exempleXUL.xul (amb un editor de text com podria ser el Notepad, l’Ultraedit…) al qual s’afegeix el codi següent:
Posteriorment s’obrirà el navegador Mozilla i arrossegarem el fitxer exempleXUL.xul cap al navegador, i veurem el formulari que es mostra a la figura.
Arribats a aquest punt, anem a analitzar el codi. Qualsevol arxiu XML, independentment de la seva funció, ha de tenir algunes línies al principi que indiquen la versió d’XML, i un full d’estil si és oportú. En el nostre exemple tenim les dues línies següents:
Com es pot observar, tenim una línia de versió que indica que la versió XML és la 1.0. La segona línia indica que el nostre full d’estil està en la ruta “chrome”. La ruta “chrome” conté algunes utilitats internes de Mozilla que gestionen habitualment les interfícies d’usuari de Mozilla. Les línies següents contenen les nostres primeres etiquetes:
Cada pàgina XUL que es crea necessita una etiqueta de tipus <window> o <dialog>, entre altres, que puguin ser usades per contenir els components que formen la interfície que volem desenvolupar. Dins d’aquesta etiqueta s’han fet servir 3 atributs.
- El primer id (identificador) és una referència única que apunta a aquesta etiqueta en XML. L’atribut id és essencial per ser capaços de comunicar-nos amb etiquetes i actualitzar amb canvis i informació.
- La segona etiqueta, title (títol), conté una sèrie de caràcters llegibles per humans que es mostra a la barra de títol quan llancem l’arxiu XUL a la finestra oportuna.
- L’últim atribut és la part xmlns. Aquest atribut especifica el namespace (espai de noms) de l’etiqueta <window>, <dialog>… en les quals es basaran totes les etiquetes que contingui.
Namespace
Un namespace és com un grup especial que podem especificar per determinar d’on ve una etiqueta. Això ajuda en situacions en què es tingui una etiqueta <window> d’un altre llenguatge XML i una etiqueta <window> del llenguatge XUL: el namespace les diferencia.
Ara es podrà omplir amb dades el formulari desenvolupat abans. En el nostre exemple hem creat un petit formulari: Creem un <label> (etiqueta) amb el valor “Nom”, en què l’usuari podrà escriure’l dins del camp <textbox> (quadre de text)
De la mateixa manera l’usuari podrà indicar l’adreça electrònica i la data de naixement.
D’altra banda es crea un <groupbox> (agrupació de caselles) per indicar el sexe.
Els esdeveniments
Moltes vegades, és necessari associar esdeveniments a elements del formulari que s’està desenvolupant. En aquest exemple es farà servir JavaScript per afegir funcionalitat als components. Això es fa d’una manera molt similar a la de l’HTML. En l’HTML, un conductor d’esdeveniments s’associa amb un element i es fa alguna acció quan s’activa el conductor. La majoria dels conductors d’HTML també es troben en XUL, i n’hi ha alguns més que només es troben en XUL.
En la secció Activitats del web del mòdul podreu trobar més exemples de funcionament de XUL i també altres dades d’interés.
Es pot afegir codi dins de l’arxiu de XUL, però una manera més eficient és fer-ho en un arxiu separat. Això permet que la càrrega de la interfície es faci més ràpidament.
Un exemple senzill del JavaScript associat al nostre exemple seria:
<script languaje= "JavaScript" >
function doOK(){ alert("Desa el dialeg"); }
function doCancel(){ alert("Tanca el dialeg"); }
</script>
XIML (eXtensible Interface Markup Language)
Un altre exemple de llenguatge per a la creació d’interfícies a partir de documents XML és l’XIML. És un acrònim d’eXtensible Interface Markup Language (‘llenguatge de marques per a la creació d’interfícies extensible’). Aquest llenguatge és independent de la plataforma en la qual es farà servir, i s’hi fa un èmfasi especial a desacoblar la representació gràfica de les dades de la interacció amb l’usuari.
A la figura es pot veure quina serà l’estructura del llenguatge XIML.
Aquesta estructura està composta per components, relacions i atributs. Els components agruparan els elements de les interfícies. Les relacions definiran les interaccions entre diferents elements i els atributs disposaran de valors que definiran els elements. Cal remarcar la importància de l’estructura jerarquitzada de l’XIML.
Components de l’XIML
El llenguatge XIML està compost per un conjunt d’elements d’interfície d’usuari organitzats que es troben classificats en un o diversos components d’interfícies principals. El llenguatge XIML no limita el nombre i el tipus de components que podran ser definits en un document.
Es defineixen cinc tipus de components d’interfície en la primera versió del llenguatge XIML: presentació, domini, tasca, diàleg i usuari.
- Presentació. El component d’interfície presentació serveix per definir una jerarquia d’elements. Aquests seran els components que es mostraran a l’usuari. En aquest component no s’especificarà l’aspecte i les propietats que hauran de tenir aquests elements.
- Domini. El component domini representa un conjunt d’instàncies i classes. Aquest conjunt estarà organitzat en una jerarquia. Aquesta jerarquia és conceptualment com una ontologia però molt més senzilla: hi haurà una definició dels objectes a partir d’atributs i els seus valors. Els objectes, que podran ser simples o complexos, només es consideraran objectes si l’usuari els ha visualitzat o modificat.
- Tasca. Aquest component representa els processos de negoci en els quals intervé un usuari juntament amb les accions que podrà desenvolupar aquest usuari en la seva interacció. Un component tasca defineix una descomposició jeràrquica de tasques i subtasques que defineixen el flux de treball d’aquestes tasques i les dades que utilitzen.
- Diàleg. Aquest component defineix una col·lecció estructurada d’elements que determinen les accions d’interacció que pot fer l’usuari. Aquest component representarà la implementació de les tasques i les seves accions, i també la navegació de l’usuari per l’aplicació.
- Usuari. El component usuari representa la jerarquia d’usuaris que haurà de tenir en compte l’XIML. Els elements d’aquest component seran nodes que podran identificar un únic usuari que navegarà per les interfícies de l’aplicació, o diversos usuaris (un grup d’usuaris relacionat, amb característiques comunes).
El llenguatge XIML ofereix la possibilitat d’afegir nous elements i components a la seva estructura. En estar compost per una estructura jeràrquica, està preparat per suportar afegir aquests nous elements.
Relacions
Les relacions en el llenguatge de programació XIML són una definició que vincularan dos o més elements XIML que es trobin dintre un mateix component o distribuïts entre diferents components.
Els elements i els components són molt importants en XIML, ja que ofereixen una informació o coneixement bàsic referent a les interfícies d’usuari. Però les relacions entre els elements també són, en si mateixes, una informació o coneixement també igual de bàsic que el que ofereixen els elements.
Els tipus de relacions que conté XIML són:
- de tipus definició, és a dir, relacions que especifiquen la forma canònica de la relació.
- de tipus declaració, és a dir, relacions que especifiquen la instància actual de la relació.
Atributs
Dins el llenguatge de programació XIML, els atributs són uns valors que es podran assignar a alguns elements. El significat dels atributs vinculats als elements n’indicaran les propietats o característiques.
En XIML els valors que es poden assignar als atributs podran ser de dos tipus:
- Valors de tipus bàsics de dades (enters, caràcters, cadenes de caràcters…)
- Instàncies a altres elements existents en el mateix component o en altres components.
Altres característiques d’XIML
A continuació es presenten altres característiques importants del llenguatge de programació XIML per tenir en compte:
- El llenguatge XIML permet mostrar un mateix element o un component de moltes formes diferents, de tal manera que l’usuari podrà escollir les propietats i l’aspecte més convenient.
- Una altra característica interessant és la possibilitat de modificar l’aspecte de les interfícies d’usuari de manera dinàmica, i llavors dóna la possibilitat d’adaptar-se als canvis que hi pugui haver en els dispositius de visualització. Aquesta és una característica que també es pot trobar en els XForms; això sí, limitats a tres estats. Amb el llenguatge XIML no hi ha límit d’estats per definir. Un exemple per a aquesta característica és la possibilitat d’adaptar les interfícies a un canvi de dimensions de visualització.
- El llenguatge XIML permet la creació de presentacions, una o diverses. Cada presentació és pot vincular a un tipus de dispositiu amb característiques diferents (PC de sobretaula, portàtils de poques polzades, dispositius mòbils, telèfons…). Això s’aconsegueix gràcies a la possibilitat de desvincular completament la definició de les interfícies de la visualització. Cada presentació és farà servir (s’activarà) en el moment que el sistema detecti el dispositiu en el qual es faci servir l’aplicació.
- Una altra característica és la possibilitat de fer servir les múltiples visualitzacions que ofereixen les empreses externes, i que podran fer servir els usuaris de les interfícies sense cap necessitat d’instal·lacions ni descàrregues.
Altres llenguatges
Hi ha altres llenguatges no tan habituals, però també basats en l’estàndard XML, que permeten descriure com ha de ser tractada la informació que conté un document XML.
En aquest apartat es descriuran breument altres llenguatges de programació basats en XML:
- XAML (Extensible Application Markup Language)
- XForms (neXt genration web Forms)
- AUIML (Abstract User Interface Markup Language)
- UIML (User Interface Markup Language)
XAML (Extensible Application Markup Language)
En la secció Activitats del web del mòdul podreu trobar més referències d’aquests llenguatges o d’altres, i també altres dades d’interès.
XAML (Extensible Application Markup Language) és un llenguatge de programació el nom del qual, traduït, vol dir ‘llenguatge de marques ampliable per a aplicacions’. De fet, la A inicialment significava Avalon. És a dir, Extensible Avalon Markup Language. Avalon és la manera antiga de denominar WPF (Windows Presentation Foundation), un subsistema gràfic per renderitzar interfícies basades en sistemes Windows.
XAML ha estat desenvolupat per Microsoft. Permet la construcció d’interfícies mitjançant la creació d’una jerarquia d’objectes juntament amb un conjunt de propietats.
XAML està relacionat amb el subsistema de presentació Avalon, i troba actualment al més alt nivell dins de la plataforma .NET (de fet, un document escrit en XAML es compila en classes .NET, normalment en C #).
Hi ha una relació entre cada element XAML i una classe de la plataforma .NET. Els elements de la interfície s’organitzen en forma d’arbre, i l’organització d’aquest arbre és la que determina la visualització i el comportament posteriors de la interfície.
Adobe Flash
Aplicació multimèdia que ofereix a les pàgines web la possibilitat de tenir animació, vídeo i altres eines interactives. Molt utilitzada pels desenvolupadors web.
Si es parla de XAML cal també fer referència a Microsoft Silverlight. La primera versió va néixer el setembre de l’any 2007, és a dir, és una tecnologia relativament nova que fa la competència a Adobe Flash pel que fa a reproducció de vídeos, animacions i altres recursos interactius.
La base de programació de Microsoft SilverLight és el llenguatge XAML, amb un accés als objectes mitjançant els llenguatges de programació C# i VisualBasic, i és desenvolupat mitjançant l’eina integrada de desenvolupament Microsoft Expression Blend.
XForms (the next generation of web forms)
XForms és un model per a formularis en entorns web per a les especificacions de dades i les interfícies d’usuari desenvolupades en UML
Es tracta d’una proposta del consorci W3C per a l’especificació de formularis per al Web que puguin ser usats en una àmplia varietat de plataformes.
XForms sorgeix com a alternativa per millorar els actuals formularis web que es poden obtenir a partir del llenguatge HTML. Això fa que ofereixi uns components visuals més complets i atractius per aconseguir formar interfícies més usables, agradables i útils. A més, s’aconsegueix fer una diferenciació entre les especificacions de les dades i el seu propòsit i la representació d’aquestes als formularis.
Precisament, la característica més important que proporciona XForms és que, a diferència dels formularis web habituals en HTML, les especificacions del disseny de la interfície es defineixen per separat de la funcionalitat.
D’aquesta manera el comportament dels formularis no es veu alterat en canviar de plataforma, mentre que l’aspecte de les finestres es determinarà pels recursos de la plataforma on es vulguin mostrar.
AUIML (Abstract User Interface Markup Language)
El llenguatge de programació AUIML és un dialecte de l’XML. AUIML significa Abstract User Interface Markup Language, és a dir, ‘llenguatge de marcatge per a interfícies d’usuari abstractes’. És un llenguatge desenvolupat per IBM i dissenyat per facilitar la definició semàntica de la interacció entre l’usuari i les interfícies.
AUIML permet una representació de planells, assistents, fulls d’estils, etc. Es tracta d’un llenguatge capaç d’interpretar la informació de posicionament dels elements de les GUI i delegar la construcció de la seva interfície a una plataforma específica. Tota la informació es codifica una sola vegada i es tradueix utilitzant una traducció dependent del dispositiu final. Ha estat dissenyat per ser independent de la plataforma, del llenguatge de programació final i de la tecnologia de desenvolupament.
UIML (User Interface Markup Language)
UIML és un acrònim per a User Interface Markup Language, que vol dir ‘llenguatge de marques per a interfícies d’usuari’.
El llenguatge de programació UIML és un metallenguatge que té com a principal objectiu oferir una representació canònica d’una interfície.
El llenguatge UIML és independent de qualsevol altre llenguatge o dispositiu. Una vegada desenvolupat un document en UIML hi ha la possibilitat de convertir-lo a un altre llenguatge de desenvolupament que sigui utilitzat per aquell dispositiu que es farà servir per a la visualització.
UIML proporciona una DTD o XML Schema, en la qual es defineixen les etiquetes permeses (independents de la metàfora d’interfície) i les seves combinacions per a la creació de documents UIML vàlids.
La definició de la interfície es fa en una sèrie de blocs:
- parts que componen la interfície,
- presentació o visualització d’aquestes parts,
- contingut de cadascuna,
- comportament de la interfície,
- conversió de les parts als elements corresponents del llenguatge d’implementació triat,
- connexió amb la lògica d’aplicació.
Aquests blocs faciliten la separació entre els elements que componen la interfície, i es distingeix entre el modelatge estructural, la visualització i el modelatge del comportament.
El llenguatge UIML permet obtenir definicions declaratives d’interfícies d’usuari independents del següent:
- la plataforma,
- el tipus d’interacció, i
- el llenguatge de programació.
Per escriure una interfície en UIML s’ha de fer, d’una banda, una definició de la interfície genèrica, i d’altra banda, un document UIML que representa l’estil de presentació apropiat per al dispositiu en el qual s’arrenca la interfície. D’aquesta manera, una mateixa aplicació només necessitarà un document UIML d’especificació per a qualsevol dispositiu i un document d’estil per a cada dispositiu.
Casos d’ús: generació d’interfícies a partir de documents XML per a diferents plataformes
Històricament el disseny i desenvolupament d’interfícies gràfiques d’usuari (GUI) són tasques que els dissenyadors i els desenvolupadors de programari han generat de manera estàtica. És a dir, es crea el contingut visual, el disseny de la interfície gràfica, a partir de formularis que contindran controls i components, com poden ser els DataGrids, els PictureBox o altres controls ActiveX. És el que es coneix com a disseny estàtic d’una interfície gràfica, que, una vegada lliurat a l’usuari, tindrà el mateix aspecte que el que s’havia dissenyat.
El disseny dinàmic d’una interfície gràfica d’usuari consisteix a dissenyar (crear) les interfícies en temps d’execució i no en temps de disseny, de tal manera que la preocupació es trobi més a quadrar la lògica del programari i no tant el disseny estàtic de les interfícies.
Aquest disseny dinàmic és podrà desenvolupar en el servidor o a partir de documents XML que s’hagin transferit al client, implementant el disseny dinàmic al mateix client en temps d’execució.
A continuació es proposen alguns casos pràctics que intenten mostrar les diferències entres aquestes alternatives.
Cas d’ús: disseny estàtic d’una interfície gràfica
La creació d’aquest disseny gràfic es genera mitjançant l’ús dels coneguts entorns de desenvolupament integrats (IDE) que els diferents fabricants llancen al mercat, com ara el Visual Studio.NET de Microsoft o el JBuilder de Borland, entre altres. Per dissenyar i construir aquestes GUI simplement ens cal arrossegar i deixar anar els diferents controls que volem en l’ordre i col·locació que necessitem per completar la interfície segons com la vulguem dissenyar.
A partir d’aquí només cal modificar les propietats dels elements en funció de les necessitats o els gustos del dissenyador i vincular alguns d’aquests elements a esdeveniments planificant les funcionalitats que s’hauran d’executar en cada acció.
Aquest disseny estàtic generat mitjançant un entorn de desenvolupament visual, des del punt de vista pràctic està molt bé, però, què passa si el nostre projecte té, per exemple, 200 formularis i 20 o 30 elements a cada formulari? Doncs que el desenvolupador haurà de dedicar força temps a arrossegar i deixar anar controls per acabar el disseny dels formularis.
La gran pregunta, llavors, és: com podem escurçar aquest temps? La resposta no és tan simple, però tractarem de proposar algunes solucions.
Cas d’ús: disseny dinàmic d’una interfície gràfica en codi de servidor
Per què, en lloc de generar aquestes interfícies d’usuari en temps de disseny, no es creen en temps d’execució? Amb això només cal preocupar-nos de la lògica del nostre sistema, i no hauríem d’estar dibuixant la interfície abans que el formulari s’executi i es visualitzi.
Per aconseguir això hi ha diverses tècniques.
La primera i més simple consistirà en utilitzar la col·lecció de controls que tenen els formularis i que ens permeten, en temps d’execució, mitjançant mètodes com afegir o eliminar, afegir o treure controls de tal manera que sense necessitat de pintar res en el disseny, quan el nostre formulari es carregui en memòria, executarà la càrrega o descàrrega de cada un dels objectes que afegiran qualsevol instant a la col·lecció “Controls”.
En l’exemple següent, a la figura, es crea de manera dinàmica un plafó amb les propietats definides per l’usuari.
En fer clic en el botó “Crear control”, es crearà un plafó en la posició 350,75 de color negre, com es pot observar a la figura.
El codi de l’exemple seria:
Private Sub Button1_Click(ByVal sender As System.Object,
ByVal e As System.EventArgs) Handles Button1.Click
'Creació del control dinàmic - un panell
CrearPicture()
End Sub
Private Sub Form_Load()
'Definició dels valors per defecte.
TextBox_X.Text = 350
TextBox_Y.Text = 75
TextBox_ColorR.Text = 0
TextBox_ColorG.Text = 0
TextBox_ColorB.Text = 0
End Sub
'Procediment que crea el panell en temps d'execució
Private Sub CrearPicture()
Dim miPanel As Panel = New Panel()
'Li establim les propietats del nou panell
With miPanel
'Característiques predefinides
.Visible = True
.Width = 100
.Height = 100
'Característiques definides per l’usuari
.Location = New Point(TextBox_X.Text, TextBox_Y.Text)
.BackColor = Color.FromArgb(TextBox_ColorR.Text,
TextBox_ColorG.Text, TextBox_ColorB.Text)
End With
'Incorporem el nou control en el formulari
Me.Controls.Add(miPanel)
End Sub
Amb aquesta tècnica es pot generar la interfície d’usuari dinàmicament, en temps d’execució, que és del que es tracta. Però, per què no podem anar més enllà? A més, caldrà també preguntar-nos on s’haurà de dur a terme la creació del formulari, en el servidor que rep la petició i té les dades, o en el client? I si és fa una petita modificació en la sol·licitud de les dades o s’activa alguna funcionalitat del formulari, cal tornar a generar tot el formulari de nou o només enviar les modificacions?
Cas d’ús: disseny dinàmica d’una interfície gràfica a partir de XML
L’objectiu de la generació d’interfícies fent ús d’XML se centra en les dades que interessen del sistema com a contingut i no en el seu aspecte visual. A més, es vol utilitzar aquesta informació afegida com a part principal del desenvolupament i sobre la qual la nostra aplicació s’anirà generant.
Aquesta tècnica de crear aplicacions orientada a les dades i basant-se en l’estructura d’aquestes dades es coneix com a data driven i és precisament el que es fa a partir d’un document XML. Les passes que cal seguir són les següents:
- Establir una relació entre la GUI que es vol desenvolupar, que mostrarà les informacions que ens interessen, i l’estructura de les dades que tenim emmagatzemades al servidor de base de dades.
- Transformar aquesta informació en controls gràfics perquè siguin carregats i visualitzats per l’aplicació o al navegador.
- Una vegada que la interfície d’usuari estigui visible, tenir la possibilitat d’interactuar amb aquests controls i enviar la informació introduïda des del navegador a la base de dades o on sigui necessari.
Per fer possible tot això, el primer que s’ha d’obtenir és el document XML que recull la informació que volem, i que servirà com a base per a la creació de la interfície. Aquesta informació es pot obtenir de diverses maneres.
Per explicar el mecanisme de generació d’interfícies a partir d’un document XML ens recolzarem amb l’exemple següent, que es pot observar a la figura, i que genera de manera automàtica el formulari de matricula per als cicles formatius de la IOC en entorn web.
En l’exemple, es parteix directament d’un document XML que descriu els controls que tindrà la interfície que es vol desenvolupar; en aquest cas es tracta d’un formulari per a la matrícula d’un cicle formatiu.
<inscripcion nomIntern="Interficie dinamica">
<control nomIntern="PrimerCognom" nomExtern="Primer Cognom:"
requerit="si" tipus="texto"></control>
<control nomIntern="SegonCognom" nomExtern="Segon Cognom:" tipus="texto" />
<control nomIntern="Nom" nomExtern="Nom:" requerit="si" tipus="texto" />
<control nomIntern="DocumentIdentificatiu" nomExtern="Document Identificatiu:"
tipus="lista" >
<valores valor="DNI (amb lletra)"></valores>
<valores valor="NIE (estrangers)"></valores>
<valores valor="Passaport"></valores>
<valores valor="Altres"></valores>
</control>
<control nomIntern="NumDocument" nomExtern="Num. Document:" requerit="si"
tipus="texto" />
<control nomIntern="email" nomExtern="email:" requerit="si" tipus="texto" />
</inscripcion>
Una vegada obtingut el document XML que posseeix l’estructura i la informació que es vol utilitzar per generar la GUI, el que es farà ara serà aplicar un full d’estils transformat, XSLT, de manera que la transformació farà possible que aquestes metadades XML es converteixin en controls web ASP.NET.
L’XSLT utilitzat en l’exemple és el que es mostra a continuació.
El que fa el full d’estils XSLT és rastrejar el document XML i, a mesura que va localitzant les diferents etiquetes que fan referència a les metadades descrites, les transforma en els controls web ASP.NET corresponents.
El codi necessari perquè la nostra pàgina ASP.NET carregui i visualitzi el document XML ja transformat estarà dins d’un mètode anomenat Cargarformulario (), que s’utilitza des de l’esdeveniment Page_Init del WebForm, i que utilitza els diferents namespaces relacionats amb XML, que s’importaran des del principi del codi i es col·locaran abans de la declaració de la classe. El codi de l’exemple seria:
Imports System.Xml.XPath
Imports System.Xml.Xsl
Imports System.IO
Public Class WebForm1
Inherits System.Web.UI.Page
#Region " Código generado por el Diseñador de Web Forms "
<System.Diagnostics.DebuggerStepThrough()>
Private Sub InitializeComponent()
End Sub
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs)
Handles MyBase.Init
InitializeComponent()
CargarFormulario()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
Handles MyBase.Load
End Sub
Private Sub CargarFormulario()
'Carreguem la informació
Dim docInscripcion As New XPathDocument(Server.MapPath("inscripcion.xml"))
'Transformem la informació a web controls mitjançant xslt
Dim transformacion As New XslTransform()
transformacion.Load(Server.MapPath("transf-controles.xslt"))
'Obtenim els resultats de la transformació
Dim sw As New StringWriter()
'Convertim de l’objecte XML en un string per poder-lo manipular.
transformacion.Transform(docInscripcion, Nothing, sw)
'Obtenim el resultat en un string
Dim resultado As String
resultado = sw.ToString
'Traiem el namespace asp...
resultado = resultado.Replace("xmlns:asp=""remove""", "")
'Afegim els web controls al formulari
Dim controles As New Control()
controles = Page.ParseControl(resultado)
Me.FindControl("Form1").Controls.Add(controles)
End Sub
End Class
A la figura es pot veure la interfície amb el resultat final.
