Mòduls. Especificacions tècniques

Els mòduls de la UOC segueixen les especificacions dels ginys d'iGoogle. Es pot consultar aquesta especificació en l'URL següent: http://code.google.com/intl/es/apis/gadgets/docs/dev_guide.html.

Un mòdul és format per diversos elements. Un fitxer XML que defineix les propietats del mòdul, unes etiquetes d'idioma i un contingut web.

Definició del mòdul

El fitxer que defineix un mòdul consisteix en un fitxer XML, el qual tindria unes tres seccions. A continuació explicarem unes parts que pensem que és important conèixer per tal de poder fer servir els mòduls a la UOC.

L'esquelet d'un mòdul seria el següent:


				<?xml version="1.0" encoding="UTF-8"?>
				<Module>
				<ModulePrefs>
				</ModulePrefs>
				<Content type="url" href=""/>
				</Module>

En la secció "ModulePrefs" es defineixen una sèrie de propietats del mòdul. En el cas de la UOC fem servir les següents:

title:: es correspon amb el nom del mòdul mostrat a la pàgina d'inici.
directory_title:: representa el nom del mòdul mostrat en la secció "Afegeix informació".
description:: hi ha una breu descripció del que és aquest mòdul. Es mostra en la secció "Afegeix informació".
screenshot:: imatge que es mostra en la secció "Afegeix informació".
height:: altura del mòdul per defecte. Es pot fer servir per a evitar barres de desplaçament (scrolls).
category:: tindrà el valor extern o Campus. Indica si es mostra en la categoria Campus o extern.

Paràmetres

A continuació hi ha una sèrie de paràmetres que indiquen al gestor de mòduls quins recursos demana la nostra aplicació:


			<Require feature="setprefs"/>

Amb la línia anterior indiquem que es necessita un javascript que ens permet accedir a variables de configuració en el nostre codi HTML. Consulta la documentació d'iGoogle per a obtenir-ne més detalls (http://code.google.com/intl/es/apis/gadgets/docs/ui.html#Dyn_Height).


			<Require feature="dynamic-height"/>

Si el mòdul és dinàmic, pot passar que en fer visible algun contingut apareguin barres de desplaçament. Per a evitar això, es pot fer servir el recurs anterior. Amb això, en el nostre codi HTML podrem afegir una línia de l'estil:


			<body class="notes_agenda" onload="_IG_AdjustIFrameHeight()">

És a dir, es fa una crida a la funció javascript "_IG_AdjustIFrameHeight()" que canvia la mida del marc incorporat perquè no apareguin barres de desplaçament. Aquesta funció es pot utilitzar sempre que es faci una acció de mostrar o ocultar informació; així evitem barres de desplaçament.

Finalment, en aquesta secció també es pot declarar on es localitzen les etiquetes d'idioma:


			<Locale messages="lang/ALL_ALL.xml"

Declara un fitxer d'etiquetes d'idioma. Vés a l'apartat següent.

Seguint l'esquema de l'XML de definició d'un mòdul, podem declarar variables d'usuari. Amb aquestes variables podem aconseguir que l'usuari modifiqui alguna propietat del mòdul. Per exemple, si vol una bústia nova, que s'obri en finestra nova, que seleccioni el nombre de missatges, etc.


			<UserPref
			name="title"  datatype="hidden"
			display_name="titol" required="false"
			default_value="Aules"/>

Per exemple, amb la línea anterior declarem una variable de nom "title". Per a veure les diferents opcions, consulta la documentació d'iGoogle en l'apartat Refèrencia d'XML.

Localització del codi HTML

Per acabar, la definició de mòdul ens indica on es localitza el codi HTML del mòdul. Aquest pot ser de tipus HTML o URL. En la declaració següent,


			<Content type="url" href=""/>

declarem un mòdul de tipus URL, on HREF hauria de tenir l'URL del mòdul, i amb l'estructura següent:


			<Content type="html">
			<![CDATA[
			<p>Hola món!</p>
			]]>
			</Content>

Tindríem un mòdul autocontingut que mostraria a la pantalla "Hola món!".

En resum, l'XML podria quedar de la manera següent:


			<?xml version="1.0" encoding="UTF-8"?>
			<Module>
			<ModulePrefs
			        title="__MSG_title_Avisos__"
			       directory_title="__MSG_title_Avisos__"
			        title_url="http://cv.uoc.edu/"
			        description="__MSG_description_Avisos__"
			        author="Universitat Oberta de Catalunya"
			        author_affiliation="UOC"
			        screenshot="img/avisos.gif"
			        height="100"
			        scrolling="true"
			        render_inline="optional"
			        category="campus"
			>
			<Require feature="setprefs"/>
			<Require feature="dynamic-height"/>
			<Locale messages="lang/ALL_ALL.xml"/>
			<Locale lang="es" messages="lang/es_ALL.xml"/>
			<Locale lang="ca" messages="lang/ca_ALL.xml"/>
			<Locale lang="en" messages="lang/en_ALL.xml"/>
			</ModulePrefs>
			<UserPref
			name="title"  datatype="hidden"
			display_name="titol" required="false"
			default_value="Widget Autocontenido"/>
			<Content type="html">
			<![CDATA[
			<p>Hola món!</p>
			]]>
			</Content>
			</Module>

Definició d'etiquetes d'idioma

Tal com hem indicat anteriorment, es pot definir on es localitza el fitxer amb etiquetes d'idioma. En el nostre exemple a:


			lang/ALL_ALL.xml

El fitxer d'etiquetes d'idioma tindrà una estructura similar a la següent:


			<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
			<messagebundle>
			<msg name="title_Avisos">
			Alertes
			</msg>
			<msg name="description_Avisos">
			Ens mostra alertes urgents
			</msg>
			</messagebundle>

Es defineixen dues etiquetes, que, si mirem el fitxer XML que hem comentat anteriorment, corresponen a les següents:

			title="__MSG_title_Avisos__"
			description="__MSG_description_Avisos__"l

És a dir, en el fitxer XML se substitueix la variable declarada amb el patró següent:


			__MSG_variable__

pel valor que trobem en el fitxer d'etiquetes d'idioma amb name="variable".

Consulta l'apartat internacionalització del manual de ginys d'iGoogle per a més informació sobre etiquetes d'idioma.