Funcionalidad avanzada de los controles
De MorfeoWiki
Tabla de contenidos |
Control Body
Funcionalidad avanzada del control body.
Encadenamiento de paneles con timerchaining
- timerchaining: En el caso de que el cuerpo de la presentación contenga más de un panel, indica el tiempo (en décimas de segundo) que transcurrirá para realizar una navegación automática entre paneles acabando en el último de ellos. Se mide en décimas de segundo. El comportamiento ante la especificación de esta propiedad sólo está implementado en WML.
- panelchaining: (buttonbar/none) Especifica la forma de encadenar los posibles paneles bajo el body. Por defecto es buttonbar, que coloca una botonera (listado de acciones en WML), pero puede ser none, donde es el programador el que los especifica en los propios paneles.
<?xml version="1.0" encoding="UTF-8"?> <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> <mymw:head> <mymw:title>Pablo</mymw:title> </mymw:head> <mymw:body timerchaining="25" panelchaining="none"> <mymw:panel id="1" title="Pablo"> <mymw:p layout="vertical" align="center"> <mymw:label>Bienvenid@ Pablo</mymw:label> </mymw:p> </mymw:panel> <mymw:panel id="2" title="Pablo"> <mymw:p align="center"> <mymw:label>Página de inicio</mymw:label> </mymw:p> <mymw:p id="p3" align="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> <mymw:link id="code" resourceid="code" href="OPs/Panel/generic/example1.xml">Ver código fuente </mymw:link> </mymw:p> <mymw:include content="P/generic/example1/foot"/> </mymw:panel> </mymw:body> </mymw:document>
 XHTML-MP (OpenWave) |  I-MODE |
 WML |  HTML (Pocket PC) |
Control P
Funcionalidad avanzada de control p.
Paginación de párrafos y redefinición de layout
La paginación intenta ajustar el número de filas a mostrar por cada página a las capacidades del dispositivo. Dicha paginación es activable mediante el atributo paginate. La paginación automática incluye la visualización de controles ‘anterior’ y ‘siguiente’. La paginación, evidentemente, no afecta al título del párrafo, el cual aparece siempre, independientemente de la página que se esté visualizando. Una opción adicional de la paginación es definir imágenes para visualizar el enlace de ‘anterior’ y ’siguiente’, para ellos se han de definir dos recursos de imagen con el nombre: _MYMW_IMG_NEXT_PAR y _MYMW_IMG_PREVIOUS_PAR. Ambas constantes se definen en la clase org.morfeo.tidmobile.CmtConstants como IMG_NEXT_PAR y IMG_PREV_PAR respectivamente.
MyMobileWeb adopta el estándar CSS2 para definir los estilos de los Controles Visuales en las presentaciones. Una de las ventajas de separar las presentaciones de los estilos está en que es posible redefinir estilos por lenguaje de marcado destino o por familia de dispositivos.
Sobre las propiedades estándar CSS2 se añaden extensiones propietarias que permiten enriquecer las CSS para convertirlas en auténticos ficheros de definición de propiedades de los controles visuales. En todo momento los controles visuales heredan los estilos de sus padres. Es posible redefinir estilos a modo de overriding para una o más tecnologías o familias de dispositivos. Este overrding permite sobreescribir solo aquellas propiedades que se desea redefinir para una familia de terminales o tecnología). La redefinición de estilos para los controles es muy útil, ya que lo que puede ser conveniente para unos dispositivos , no es lo tanto para otros. Aquí, se introduce un ejemplo fácil para entender la redefinición de un estilo. Es posible que la disposición del contenido del párrafo del ejemplo en layout grid, de dos columnas, no se visualice muy bien para terminales con pantalla de dimensiones reducidas, por lo tanto la idea es definir un layout grid con dos columnas para tecnología HTML y uno vertical para el resto de tecnologías. A continuación se muestra un ejemplo de presentación que usa dos párrafos paginados y redefinición del layout de párrafo en css por tecnologías.
<?xml version="1.0" encoding="UTF-8" ?> <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> <mymw:head> <mymw:title>Párrafo paginado</mymw:title> <mymw:style href="p.css"></mymw:style> </mymw:head> <mymw:body newcontext="true"> <mymw:p id="p1" title="Datos personales" style="nowrap layout" paginate="true"> <mymw:label id="name">Nombre</mymw:label> <mymw:entryfield labelid="name" id="name" bind="${ name }" style="req" /> <mymw:label id="1sur">1º apellido</mymw:label> <mymw:entryfield labelid="1sur" id="first_surname" bind="${ 1_surname }" style="req" /> <mymw:label id="2sur">2º apellido</mymw:label> <mymw:entryfield labelid="2sur" id="second_surname" bind="${ 2_surname }" style="req" /> <mymw:label id="loc">Localidad</mymw:label> <mymw:entryfield labelid="loc" id="locality" bind="${ locality }" style="req" /> <mymw:label id="pc">C.P.</mymw:label> <mymw:entryfield labelid="pc" id="postalcode" bind="${ postalcode }" style="req"/> <mymw:label id="tel">Teléfono</mymw:label> <mymw:entryfield labelid="tel" id="telephone" bind="${ telephone }"/> </mymw:p> <mymw:p id="p2" align="center" paginate="true" layout="vertical"> <mymw:submit id="contract" value="Contratar"/> </mymw:p> <mymw:p id="p3" align="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> <mymw:link id="code" resourceid="code" href="OPs/P/generic/example1.xml">Ver código fuente </mymw:link> </mymw:p> <mymw:p id="foot" align="left"> <mymw:link id="lbackOP">Volver</mymw:link> <mymw:link id="lindex">Inicio</mymw:link> </mymw:p> </mymw:body> </mymw:document>
Estilos aplicados a la presentación no vistos en secciones anteriores:
p.layout{
layout:vertical;
}
p.layout{
layout:grid; cols:2;
}
En este momento, el ejemplo anterior da pie a introducir el control include.
 XHTML-MP (OpenWave) |  I-MODE |
 WML |  HTML (Pocket PC) |
Control include Tag include.
Descripción
Permite especificar la inclusión de fragmentos de documentos XML en las presentaciones. Los fragmentos llegan a nivel de párrafo. De esta forma se evitará tener que repetir contenido por cabeceras o pies de las presentaciones. Un ejemplo de su uso se ha visto en las dos presentaciones anteriores.
<mymw:p id="foot" align="left"> <mymw:link id="lbackOP">Volver</mymw:link> <mymw:link id="lindex">Inicio</mymw:link> </mymw:p>
Para incluir este párrafo en otra presentación se hace de la siguiente manera:
<mymw:include content="P/generic/example1/foot"/>
Donde cada elemento de la ruta especificada como valor del atributo content: es:
- panel: OP.
- generic: Familia.
- example1: Nombre de la presentación.
- inicio: Identificador del párrafo.
Control link
Funcionalidad avanzada del control link
Link con imagen asociada y accesskey
En esta sección se muestra como se asocia una imagen con un enlace en MyMobileWeb. Para ello se debe especificar el atributo resourceid y el estilo img-display, el cual indica como debe aparecer la imagen junto al propio anchor. Los valores para este último son:
- only: Sólo aparece la imagen, cuando el dispositivo así lo permite (en caso contrario aparecerá sólo el texto)
- both: Aparece tanto la imagen como el texto del link (siempre y cuando el dispositivo lo soporte)
- none: Sólo aparece el texto del link Además de esto, existe la posibilidad de asociar la imagen con una disponible en la librería de recursos del dispositivo según el estándar dado. Es posible por tanto especificar, para aquellos dispositivos que disponen de una colección local de imágenes, el identificador de dicha imagen. Esta propiedad se define mediante el estilo localsrc. A este link se le va a asociar una tecla de acceso rápido. Para hacer esto, se puede optar por definir el atributo accesskey o bien el estilo wap-accesskey. En ambos casos los valores posibles son del número 0 al
- En caso de definir de las dos maneras, la especificación por atributo es prioritaria.
<?xml version="1.0" encoding="UTF-8" ?> <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="contract"> <mymw:head> <mymw:title>Enlace</mymw:title> <mymw:style href="enlace.css"></mymw:style> </mymw:head> <mymw:body> <mymw:p id="p1"> <mymw:link id="fav" resourceid="favorite" style="star one">Añademe a favoritos</mymw:link> </mymw:p> <mymw:p id="p2" align="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> <mymw:link id="code" resourceid="code" href="OPs/Link/generic/example1.xml">Ver código fuente </mymw:link> </mymw:p> <mymw:include content="P/generic/example1/foot"/> </mymw:body> </mymw:document>
Estilos aplicados a la presentación no vistos en secciones anteriores:
link.one{
wap-accesskey:1;
}
link.star{
localsrc:star2;
}
 XHTML-MP (OpenWave) |  I-MODE |
 WML |  HTML (Pocket PC) |
Control Submit
Funcionalidad avanzada del control submit.
Submit con imagen asociada
En esta sección se muestra como se asocia una imagen con un botón submit en MyMobileWeb. Para ello se debe especificar el atributo resourceid y el estilo img-display, el cual indica como debe aparecer la imagen junto al propio botón. Los valores para este último son:
- only: Sólo aparece la imagen, cuando el dispositivo así lo permite (en caso contrario aparecerá sólo el texto o botón)
- both: Aparece tanto la imagen como el control (siempre y cuando el dispositivo lo soporte)
- none: Sólo aparece el control Además de este estilo se introduce el img-position que indica la posición de la imagen respecto al botón.
<?xml version="1.0" encoding="UTF-8" ?> <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> <mymw:head> <mymw:title>Botón submit</mymw:title> <mymw:style href="submit.css"></mymw:style> </mymw:head> <mymw:body style="expand"> <mymw:p id="p1" title="Imagen"> <mymw:submit id="acep1" value="OK" resourceid="button" style="only local"/> </mymw:p> <mymw:p id="p2" title="Imagen + Botón"> <mymw:submit id="acep2" value="Enviar" resourceid="button" style="both local"/> </mymw:p> <mymw:p id="p3" title="Botón + Imagen"> <mymw:submit id="acep3" value="Enviar" resourceid="button" style="both right local"/> </mymw:p> <mymw:p id="p4" align="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> <mymw:link id="code" resourceid="code" href="OPs/Submit/generic/example1.xml">Ver código fuente </mymw:link> </mymw:p> <mymw:include content="P/generic/example1/foot"/> </mymw:body> </mymw:document>
Estilos aplicados a la presentación no vistos en secciones anteriores:
submit.none {
img-display:only;
}
submit.both {
img-display:both;
}
submit.right {
img-position:right;
}
submit.local {
localsrc:accept;
}
submit.local {
localsrc:accept;
}
 XHTML-MP (OpenWave) |  I-MODE |
 WML |  HTML (Pocket PC) |
Control Entryfield
Funcionalidad avanzada del control entryfield.
Valores mapeados en un Bean
En este ejemplo, se muestra como mapear los datos introducidos en los controles entryfield como atributos de un bean. Además se usará el atributo validationtype para validar aquellos campos que son numéricos (int).
<?xml version="1.0" encoding="UTF-8" ?> <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> <mymw:head> <mymw:title>Campos de texto</mymw:title> <mymw:style href="entryfield.css"></mymw:style> </mymw:head> <mymw:body> <mymw:p id="p1" title="Dirección" paginate="true" layout="grid" cols="2" style="nowrap"> <mymw:label id="street">Calle:</mymw:label> <mymw:entryfield labelid="street" id="ca" bind="${ myAd.street }" style="req street" beantype="org.morfeo.tidmobile.advanced.bean.AddressBean"/> <mymw:label id="mdoor">Portal:</mymw:label> <mymw:entryfield labelid="mdoor" id="po" bind="${ myAd.maindoor }" style="req maindoor" beantype="org.morfeo.tidmobile.advanced.bean.AddressBean" validationtype="int" bindingtype="String"/> <mymw:label id="flat">Piso:</mymw:label> <mymw:entryfield labelid="flat" id="pi" bind="${ myAd.flat }" style="req flat" beantype="org.morfeo.tidmobile.advanced.bean.AddressBean" validationtype="int" bindingtype="String"/> <mymw:label id="letter">Letra:</mymw:label> <mymw:entryfield labelid="letter" id="le" bind="${ myAd.letter }" style="letter" beantype="org.morfeo.tidmobile.advanced.bean.AddressBean"/> <mymw:label id="pcod">C.P:</mymw:label> <mymw:entryfield labelid="pcod" id="cp" bind="${ myAd.pc }" style="req pc" beantype="org.morfeo.tidmobile.advanced.bean.AddressBean" validationtype="int"/> <mymw:label id="date">Fecha de construcción:</mymw:label> <mymw:entryfield labelid="date" id="fe" bind="${ myAd.date }" style="req date" beantype="org.morfeo.tidmobile.advanced.bean.AddressBean" validationtype="java.util.Date"/> </mymw:p> <mymw:p id="p2" paginate="true" align="center"> <mymw:submit id="accept" value="Aceptar" principal="true"/> </mymw:p> <mymw:p id="p3" align="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> <mymw:link id="code" resourceid="code" href="OPs/Entryfield/generic/example1.xml">Ver código fuente </mymw:link> </mymw:p> <mymw:include content="P/generic/example1/foot"/> </mymw:body> </mymw:document>
entryfield.street{
size:12;
maxlength:12;
input-format:"\*M";
}
entryfield.req{
required:true;
}
entryfield.date{
size:10;
maxlength:10;
java-date-mask:dd-MM-yyyy;
}
entryfield.letter{
size:1;
maxlength:1;
input-format:"M";
}
p.nowrap{
white-space:nowrap;
}
entryfield.flat{
size:2;
maxlength:2;
input-format:"\*N";
}
entryfield.pc{
size:6;
maxlength:6;
input-format:"\*N";
}
entryfield.maindoor {
size:3;
maxlength:3;
input-format:"\*N";
}
La especificación del atributo beantype posibilita que MyMobileWeb sea capaz de crear un objeto (myAd) en el que depositar el dato introducido por el usuario (en este caso un objeto de la clase org.morfeo.tidmobile.advanced.bean.AddressBean) sin que sea necesario que exista previamente en el contexto. A si mismo, mediante validationtype se puede especificar el tipo contra el que se valida el valor introducido en el componente. Este por tanto puede ser diferente al bindingtype(clase en la que al final es guardado el valor). En este caso, se validarán campos como entero y su valor será mapeado como String. La validación de datos se complementa con estilos que permiten especificar longitudes (maxlength), valores de tamaño (size), máscaras (input-format o java-date-mask), etc.
public class AddressBean {
private String street;
private String maindoor;
private String flat;
private String letter;
private int pc;
private Date date;
public Date getDate() {
return date;
}
public void setDate(Date date) {
this.date = date;
}
public String getFlat() {
return flat;
}
public void setFlat(String flat) {
this.flat = flat;
}
public String getLetter() {
return letter;
}
public void setLetter(String letter) {
this.letter = letter;
}
public String getMaindoor() {
return maindoor;
}
public void setMaindoor(String maindoor) {
this.maindoor = maindoor;
}
public int getPc() {
return pc;
}
public void setPc(int pc) {
this.pc = pc;
}
public String getStreet() {
return street;
}
public void setStreet(String street) {
this.street = street;
}
}
 XHTML-MP (OpenWave) |  I-MODE |
 WML |  HTML (Pocket PC) |
Control List
Funcionalidad avanzada del control list.
Lista alojada en gestor de contenidos (CMS)
Para construit un list con contenido alojado en un CMS, se asociará mediante el atributo optionsbind. Este atributo definirá una URL que apuntará a un determinado nodo cuyos hijos serán los ítems de la lista. Se deberán especificarse atributos de tipo ‘member’ para mapear los atributos del list con las propiedades de los nodos. Los valores por defecto de estos atributos son:
- textmember: pcmt:label, asociado con la constante PCMT_LABEL.
- imgmember: pcmt:image, asociado con la constante PCMT_IMAGE. Todas las constantes anteriormente mencionadas están definidas en la clase: org.morfeo.tidmobile.PCMTConstants.
<?xml version="1.0" encoding="UTF-8" ?> <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="lista"> <mymw:head> <mymw:title>Lista en CMS</mymw:title> </mymw:head> <mymw:body> <mymw:p id="p1" style="nowrap expand" layout="vertical"> <mymw:list id="l1" optionsbind="cmspath:/DemoRFI/Listas/Limpio" paginate="true"/> </mymw:p> <mymw:p id="p2" align="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> <mymw:link id="code" resourceid="code" href="OPs/List/generic/example1.xml">Ver código fuente </mymw:link> </mymw:p> <mymw:include content="P/generic/example1/foot"/> </mymw:body> </mymw:document>
Como texto de los items de la lista se tomarán los valores de la propiedad pmct:label de los nodos hijos de /DemoRFI/Listas/Limpio.
 XHTML-MP (OpenWave) |  I-MODE |
 WML |  HTML (Pocket PC) |
Control Menu
Funcionalidad avanzada del control menu.
Menu alojado en gestor de contenidos (CMS)
Mediante el atributo optionsbind del control menu, se puede asociar contenido alojado en un CMS a las distintas opciones del mismo. La dirección a la que debe apuntar dicho atributo puede ser:
- Un nodo del tipo cmt:Menu, es decir, un menú dado de alta en el gestor de contenidos.
- Un determinado nodo cuyos hijos serán los ítems del menú. Para el ejemplo tratado en esta sección, se opta por referenciar un nodo de tipo cmt:Menu.La definición de este tipo de nodos se muestra en la siguiente figura:
Para mapear los atributos del menú con las propiedades de los nodos, se han de definir una serie de atributos de tipo ‘member’. Estos deben figurar o bien como atributos del control link (cabecera) o del control menu. Los atributos definidos sobre éste último toman preferencia sobre los del menu. Si alguno de éstos no está definido en la presentación, se tomará su valor por defecto. La lista de atributos de tipo ‘member’ junto a sus valores por defecto son los siguientes.
- keymember: Si no se indica, se tomará la propiedad name del nodo.
- textmember: pcmt:label, asociado con la constante PCMT_LABEL.
- imgmember: pcmt:image, asociado con la constante PCMT_IMAGE.
- srcmember: pcmt:src, asociado con la constante PCMT_SRC.
- titlemember: pcmt:title, asociado con la constante PCMT_TITLE.
- longtitlemember: pcmt:longtitle, asociado con la constante PCMT_LONGTITLE.
- hrefmember: pcmt:href, asociado con la constante PCMT_HREF.
Las constantes antes citadas están definidas en la clase org.morfeo.tidmobile.PCMTConstants. A continuación se muestra un ejemplo de un menú alojado en un gestor de contenidos.
<?xml version="1.0" encoding="UTF-8" ?> <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> <mymw:head> <mymw:title>Menú en CMS</mymw:title> <mymw:style href="menu.css"></mymw:style> </mymw:head> <mymw:body> <mymw:p id="p1" style="nowrap expand" layout="vertical"> <mymw:label style="bold">cmspath:/Demo/Labels/Ejemplo</mymw:label> <mymw:menu id="m1" style="browser" bind="${option}" optionsbind="cmspath:/DemoRFI/Menus/MenuInitial" cacheContent="true" paginate="true"> <mymw:link id="header" imgmember="pcmt:image"/> </mymw:menu> </mymw:p> <mymw:p id="p3" align="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> <mymw:link id="code" resourceid="code" href="OPs/Menu/generic/example1.xml">Ver código fuente </mymw:link> </mymw:p> <mymw:include content="P/generic/example1/foot"/> </mymw:body> </mymw:document>
Como se ve en la presentación anterior, el atributo optionsbind del control menu apunta al nodo: cmspath:/DemoRFI/Menus/MenuInitial. Por lo tanto, dicho nodo se encuentra ubicado en el repositorio de contenidos definido por defecto en el fichero MyMobileWeb.Global.xml y a su vez en el workspace por defecto. A continuación se muestra una imageneque define el menu cargado en el gestor de contenidos, el cual conformará el menú m1 de la presentación.
El nodo MenuInitial de tipo cmt:Menu tiene seis nodos hijos de tipo cmt:MenuItem, los cuales serán las opciones del menu m1.Se ve como cada uno de ellos define 4 atributos:
- pcmt:image. Identificador de nodo del que cuelgan distintas instancias de una misma imagen, cada una de ellas pueden ser de distintos tamaños, colores e incluso de formato. La plataforma se encargará de seleccionar aquel recurso que mejor se ajuste al dispositivo destino. Este nodo es del tipo cmt:resource y debe definir tres propieadades:
- cmt:size: tamaño en bytes.
- jcr:data: binario del recurso.
- jcr:mimeType: tipo mime. Ej: image/vnd.wap.wbmp, image/gif, etc. Por ejemplo el nodo ayun referencia en su propiedad pcmt:image a /DemoRFI/Images/ayun.
- pcmt:label.Texto de la opción.
- pcmt:longtitle. Texto explicativo que se adjunta a la opción.
- pcmt:title. Valor de la propiedad title de los controles link que finalmente serán la opciones del menú.
El lector de este documento debe observar que no se ha declarado keymember, por lo tanto se tomará como clave para las distitnas opciones los nombres de los nodos, en este caso: ayun, ser, ocio, not, cam y ciu. A su vez, menu declara un atributo cacheContent con el valor a true, lo que indica que se cacheará el menu obtenido del CMS y así en los posteriores accesos no se conectará al gestor de contenidos ya que sólo es obtenido una única vez. A parte del control menu, tambien se introduce el control label y su integración con CMS. Este control es muy sencillo y tan solo hay que poner como contenido del tag una URL que apunte a un nodo del gestor de contenidos o bien a una de sus propiedades. Si se opta por referenciar un nodo, se mostrará el contenido del primary item.
 XHTML-MP (OpenWave) |  I-MODE |
 WML |  HTML (Pocket PC) |
Control Table
Funcionalidad avanzada del control table.
Tabla alojada en gestor de contenidos (CMS)
Si se quiere construir una tabla con contenido alojado en un CMS, se asociará mediante el atributo optionsbind. Este atributo definirá una URL que apuntará a un determinado nodo del gestor de contenidos. A su vez, éste nodo contendrá una serie de nodos hijos que serán tomados como las filas de la tabla. Las columnas serán los items (nodos o propiedades) de cada una de las filas. Se deberán especificarse atributos ‘member’ para mapear el contenido de cada columna con los ítems de los nodos que representan cada fila. Los atributos son:
- keymember: Si no se especifica se tomará como clave la propiedad name del nodo.
- stylemember: Si no se especifica se tomará como valor pcmt:style, la cual esta definida en la constante org.morfeo.tidmobile.PCMTConstants.PCMT_STYLE.
<?xml version="1.0" encoding="UTF-8" ?> <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> <mymw:head> <mymw:title>Tabla en CMS</mymw:title> <mymw:style href="table.css"></mymw:style> </mymw:head> <mymw:body> <mymw:br display="${_MYMW_DEV_BELONGS.PdaDevice}"/> <mymw:p id="p1" layout="vertical" align="center"> <mymw:table id="myTable" optionsbind="cmspath:/DemoRFI/Tablas/Museos" bind="${fileChoose}" keymember="museo/pcmt:label" style="myTable selFirstCol"> <mymw:th style="header2"> <mymw:td>Museo</mymw:td> <mymw:td>Horario</mymw:td> </mymw:th> <mymw:tr style="body"> <mymw:td member="museo/pcmt:label"/> <mymw:td member="horario/pcmt:label"/> </mymw:tr> </mymw:table> </mymw:p> <mymw:p id="p3" align="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> <mymw:link id="code" resourceid="code" href="OPs/Table/generic/example1.xml">Ver código fuente </mymw:link> </mymw:p> <mymw:include content="Table/generic/example2/foot"/> </mymw:body> </mymw:document>
Como se ve en la presentación anterior, el atributo optionsbind del control table apunta al nodo: cmspath:/DemoRFI/Tablas/Museos. Por lo tanto, dicho nodo se encuentra ubicado en el repositorio de contenidos definido por defecto en el fichero MyMobileWeb.Global.xml y a su vez en el workspace por defecto. A continuación se muestra una imagen de la tabla cargada en el gestor de contenidos, el cual conformará la tabla museos de la presentación.
En este caso, el keymember es la propiedad pcmt:label del nodo museo y los member que definen cada celda son las propiedades pcmt:label de los nodos museos y horarios.
 XHTML-MP (OpenWave) |  I-MODE |
 WML |  HTML (Pocket PC) |
Tabla con cabecera de paginación
MyMobileWeb implementa para los controles table, menu y list una paginación tipo cabecera En ella se muestra información sobre la página actual que se está visualizando y sobre el total de ellas. Puede tomar los siguientes valores.
- rownumber Indica las filas que se están viendo sobre el total de filas del control.
- pagenumber.Indica la página actual sobre el total de ellas.
- linktoeachpage. Muestra una barra de navegación con una serie de enlaces directos a varias páginas, un enlace a la página anterior y otro a la siguiente. Además indica la página que actualmente se está visionando. El número de enlaces que se muestren en el dispositivo depende del valor de columnas que puedan ser visualizadas en pantalla. Además del estilo anterior page-label-type, para controlar la visualización de la cabecera existen una serie de estilos que a continuación se describen. page-control-type, dos posibles valores link e image. Este estilo indica si el enlace a página siguiente y anterior es simplemente una etiqueta de texto o bien un icono (recursos img-next e img-previous respectivamente). page-selected-color, indica el color de la etiqueta que representa el número de la página actual. page-controls, dos posible valores all y only-nextprepage, este último muestra únicamente dos enlaces a la página anterior y siguiente, y el primero además de estos enlaces visualiza un enlace a la primera y otro a la última página (recursos img-first e img-last respectivamente). page-link-range, dos posible valores, interval y sequential, el primero muestra una serie de enlaces directos a páginas anteriores y siguientes a la actual por igual número, y el segundo visualiza un rango de números de enlaces constante, es decir, su comportamiento es de avance por ventana de tamaño invariable page-display-total, indica si se quiere mostrar por debajo de la cabecera un etiqueta ‘Total:’ junto al número total de páginas. page-total-color, color del total páginas anterior. page-position, visualización por encima (top) o por debajo (bottom) del control.
<?xml version="1.0" encoding="UTF-8" ?> <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example2"> <mymw:head> <mymw:title>Ejemplo 2</mymw:title> <mymw:style href="table.css"></mymw:style> </mymw:head> <mymw:body> <mymw:p id="p1" align="center"> <mymw:table id="myTable" bind="${file}" optionsbind="${files}" keymember="code" paginate="true" style="body"> <mymw:th style="header"> <mymw:td>Cód.</mymw:td> <mymw:td>Nombre</mymw:td> </mymw:th> <mymw:tr> <mymw:td member="code" /> <mymw:td member="name" /> </mymw:tr> </mymw:table> </mymw:p> <mymw:p id="p3" align="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> <mymw:link id="code" resourceid="code" href="OPs/Table/generic/example2.xml">Ver código fuente </mymw:link> </mymw:p> <mymw:p id="foot" align="left"> <mymw:link id="lback">Volver</mymw:link> <mymw:link id="lindex">Inicio</mymw:link> </mymw:p> </mymw:body> </mymw:document>
table.body {
sel-column:0;
border-width:1;
font-family:helvetica;
width:90%; cellpadding:6;
cellspacing:0;
background-color:#FFFFC8;
border-color:#666666;
white-space:nowrap;
page-control-type:image;
}
tr.header {
background-color:Navy;
color:Yellow;
font-weight:bold;
}
Los valores elegidos para los estilos previamente citados son los de por defecto, excepto el tipo de enlace, que se ha optado por imagen y no por tipo enlace de texto.Además, para tecnologías html, se mostrarán los 4 enlaces: primera, anterior, siguiente y última página. Los valores por defecto son:
page-label-type:linktoeachpage; page-link-range:sequential; page-selected-color:red; page-control-type:link; page-controls:only-nextprepage; page-position:top; page-display-total:false; page-total-color:red;
 XHTML-MP (OpenWave) |  I-MODE |
 WML |  HTML (Pocket PC) |
Transcodificador de imágenes
Componente MobilityChannelTranscoder.
Introducción
MyMobileWeb dispone de un componente de transcodificación de imágenes denominado MobilityChannelTranscoder cuyas funciones son:
- Redimensión de imágenes respecto al tamaño de pantalla.
- Codificación de formato más adecuado para cada uno de los diferentes dispositivos destino.
Configuración
Para usar este componente, se deben añadir las siguientes librerías al classpath de la aplicación:
jai_codec.jar, jai_core.jar, mlibwrapper_jai.jar, WBMPMaster103.jar, mymw-transcoder.jar, jcr-1.0.jar, batik-transcoder.jar, batik-awt-util.jar, batik- bridge.jar, batik-dom.jar, batik-ext.jar, batik-extension.jar, batik-gui-util.jar, batik- gvt.jar, batik-parser.jar, batik-script.jar, batik-svg-dom.jar, batik-svggen.jar, batik- swing.jar, batik-xml.jar y js.jar.
La configuración del componente se hace a través de la definición de una sección en el fichero de configuración de la aplicación (MyMobileWeb.Global.xml) como el de la figura:
Propiedad URL_Trans_Img
Si la path definida en la propiedad anterior es absoluta, se ha de definir esta propiedad que indicará la URL que se pondrá en el atributo src de la imagen.
<property name=”URL_Trans_Img” value=”http://servlet?{0}”/>
Propiedad Plugin_Class
Indica la clase que implementa el plugin de transcodificación de imágenes. MyMobileWeb dispone el plugin org.morfeo.tidmobile.transcoder.TidImgTranscodingPlugin. Si el desarrollador opta por usar otro, en esta propiedad deberá indicarlo.
<property name=”Plugin_Class” value=”org.morfeo.tidmobile.transcoder.TidImgTranscodingPlugin”/>
Además se ha de configurar el fichero MyMobileWeb.ImageTranscoder.xml (Figura 7-17)
Propiedad Cache_Work_Directory
Indica la path donde se alojarán las imágenes transcodificadas. El componente almacena las imágenes transcodificadas en disco, para que cuando de nuevo se soliciten, no se vuelvan a realizar las pertinentes operaciones de transcodificación, ganando en eficiencia.
<property name=”Cache_Work_Directory” value=”temporal/imagenes”/>
Menú con transcodificación de imágenes
Para aplicar transcodificación sobre una imagen, se ha de especificar el estilo transcode con valor true. Además de este estilo, existen otro dos que indican la proporción en tamaño de la imagen respecto a las dimensiones de la pantalla del dispositivo. Para ésto, se tomán los estilos weight-width y weight-height, peso en anchura y en altura respectivamente.
<?xml version="1.0" encoding="UTF-8" ?> <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> <mymw:head> <mymw:title>Imágen transcoder</mymw:title> <mymw:style href="transcoder.css"></mymw:style> </mymw:head> <mymw:body> <mymw:p id="id1" align="center"> <mymw:menu id="m1" bind="${option}" layout="grid" cols="2" align="center"> <mymw:link src="resource/images/balls/tennis.gif" style="vertical image.transcode" id="a">Tenis </mymw:link> <mymw:link src="resource/images/balls/basket.gif" style="vertical image.transcode" id="b">Basket </mymw:link> <mymw:link src="resource/images/balls/soccer.gif" style="vertical image.transcode" id="c">Futbol </mymw:link> <mymw:link src="resource/images/balls/rugby.gif" style="vertical image.transcode" id="d">Rugby </mymw:link> </mymw:menu> </mymw:p> <mymw:p id="p3" align="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> <mymw:link id="code" resourceid="code" href="OPs/Transcoder/generic/example1.xml">Ver código fuente </mymw:link> </mymw:p> <mymw:include content="P/generic/example1/foot"/> </mymw:body> </mymw:document>
link.vertical{
img-position:top;
}
link.image.transcode{
transcode:true;
weight-width:15;
weight-height:12;
}
 XHTML-MP (OpenWave) |  I-MODE |
 WML |  HTML (Pocket PC) |
Estilos dinámicos y JSTL
En este ejemplo se inicia al desarrollador en el manejo de los estilos dinámicos junto con JSTL (conjunto de librerías de etiquetas simples y estándares que encapsulan la funcionalidad principal en la programación de páginas JSP).
Configuración JSTL
Para poder usar etiquetas JSTL en las presentaciones del canal de movilidad se han de realizar los siguientes pasos:
- Copiar librerías jstl.jar y standard.jar del estándar JSTL 1.1 en la carpeta WEB-INF/lib de la apliación web.
- Especificar el espacio de nombres ‘c’ (core de JSTL) en el tag document de aquellas presentaciones que hagan uso de esta extensión.
<mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" xmlns:c="http://java.sun.com/jsp/jstl/core" id="query">
Véase capítulo cuarto del manual ‘Lenguaje de Referencia’.
Configuración estilos dinámicos
Para trabajar con estilos dinámicos se ha de copiar el fichero de configuración del gestor de propiedades (MyMobileWeb.PropMgt.xml) en la carpeta de configuración de la aplicación web (config). El contenido de este fichero está comentado en la sección 4.2 de la guía ’Generador’.
Ejemplo
En este ejemplo se va a mostrar un cuestionario contruido con un tag c:forEach,en el cual se preguntará por la edad del cliente. Según sea éste mayor o menor de edad, una vez cumplimentado el cuestiario, se mostrará un mensaje indicando que el formulario ha sido finalizado con un color u otro, según la edad del usuario. La porción de código que construirá el formulario es la siguiente:
<c:forEach varStatus="status" begin="0" end="4" step="1">
<mymw:label>${question.${status}}</mymw:label>
<mymw:entryfield id="answer_${status}"/>
</c:forEach>
Cuando se itera con esta estructura de control y se aplica sobre controles que tienen un atributo id de carácter obligatorio, como es el caso del entryfield, se ha de especificar:
- El id del control como NombreVariable + _ + ${VariableEstado}.
- Y el atributo varStatus del tag forEach obligatoriamente. El valor de la VariableEstado y del atributo varStatus deben coincidir. Por consiguiente, los identificadores de los consecutivos campos de texto serán: answer_0, answer_1, answer_2 y answer_3. La siguiente porción de código elijirá un color u otro dependiendo del valor numérico introducido en el primer campo de texto.
<c:choose>
<c:when test="${answer_0_VAL le 18}">
<c:set var="style" value="color"/>
</c:when>
<c:otherwise>
<c:set var="style" value="color2"/>
</c:otherwise>
</c:choose>
<?xml version="1.0" encoding="UTF-8" ?> <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" xmlns:c="http://java.sun.com/jsp/jstl/core" id="opinion"> <mymw:head> <mymw:title style="include">Encuesta</mymw:title> <mymw:style href="estilos.css"></mymw:style> </mymw:head> <mymw:body> <mymw:p id="p1" layout="vertical" style="nowrap"> <c:forEach varStatus="status" begin="0" end="4" step="1"> <mymw:label>${question.${status}}</mymw:label> <mymw:entryfield id="answer_${status}"/> </c:forEach> </mymw:p> <mymw:p id="p2" align="center"> <mymw:submit id="send" value="Enviar" /> </mymw:p> <mymw:p id="p3" align="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> <mymw:link id="code" resourceid="code" href="OPs/Jstl/generic/opinion.xml">Ver código fuente </mymw:link> </mymw:p> <mymw:include content="P/generic/example1/foot"/> </mymw:body> </mymw:document>
<?xml version="1.0" encoding="UTF-8" ?> <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" xmlns:c="http://java.sun.com/jsp/jstl/core" id="complete"> <mymw:head> <mymw:title style="include">Encuesta</mymw:title> <mymw:style href="estilos.css"></mymw:style> </mymw:head> <mymw:body> <c:choose> <c:when test="${answer_0_VAL le 18}"> <c:set var="style" value="color"/> </c:when> <c:otherwise> <c:set var="style" value="color2"/> </c:otherwise> </c:choose> <mymw:p id="p1" layout="vertical" align="center" style="${style}"> <mymw:label id="name" style="bold">Completado cuestionario</mymw:label> <mymw:submit id="ok" value="Aceptar"/> </mymw:p> <mymw:p id="p3" align="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> <mymw:link id="code" resourceid="code" href="OPs/Jstl/generic/complete.xml">Ver código fuente </mymw:link> </mymw:p> </mymw:body> </mymw:document>
p.color {
background-color:#ADA96E;
align:center;
}
p.color2 {
background-color:#98AFC7;
align:center;
}
 XHTML-MP (OpenWave) |  I-MODE |
 WML |  HTML (Pocket PC) |
Código JavaScript personalizado
Código JavaScript customizado por el desarrollador.
Validación en cliente para control select
Junto al proceso de generación, de forma paralela se genera automáticamente el código JavaScript necesario para validar datos introducidos en formularios para aquellas presentaciones que definan controles de interacción con el cliente, como por ejemplo campos de texto, selects, etc... La validación en el lado del cliente permite evitar peticiones innecesarias al servidor. Éste código sólo tendrá sentido para aquellos dispositivos que soporten JavaScript. El funcionamiento de esta generación consiste en la creación de dos ficheros con extensión js para cada una de las presentaciones que impliquen actualización en el contexto de datos, por cada uno de los idiomas especificados en el fichero de configuración. El primero de ellos, el cual no debe ser cambiado por el desarrollador, contendrá el código necesario para validar los datos de entrada. El segundo, implementa una función vacía donde el desarrollador podrá añadir su código JavaScript personalizado. Esta función será llamada una vez se pasen con éxito las validaciones generadas automáticamente.
A continuación se muestra una presentación junto a su código de validación customizado. La presentación en cuestión es la siguiente:
<?xml version="1.0" encoding="UTF-8" ?> <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="cinema"> <mymw:head> <mymw:title style="noinclude">Cine</mymw:title> <mymw:style href="script.css"></mymw:style> </mymw:head> <mymw:body> <mymw:p id="p1"> <mymw:label style="bold" id="date">Fecha:</mymw:label> <mymw:entryfield id="f" bind="${ date }" style="date disabled" validationtype="java.util.Date"/> </mymw:p> <mymw:p id="p2" title="Película 1" layout="vertical"> <mymw:select style="checkbox" id="film1" bind="${ film1 }" optionsbind="${ films1 }"/> </mymw:p> <mymw:p id="p3"> <mymw:label style="bold" id="md">Pases:</mymw:label> <mymw:select style="radio" id="sch1" bind="${ sch1 }" optionsbind="${ schs1 }"/> </mymw:p> <mymw:p id="p4" title="Película 2" layout="vertical"> <mymw:select style="checkbox" id="film2" bind="${ film2 }" optionsbind="${ films2 }"/> </mymw:p> <mymw:p id="p5"> <mymw:label style="bold" id="md">Pases:</mymw:label> <mymw:select style="radio" id="sch2" bind="${ sch2 }" optionsbind="${ schs2 }"/> </mymw:p> <mymw:p id="acep" align="center"> <mymw:submit id="accept" value="Aceptar" principal="true"/> </mymw:p> <mymw:p id="p6" align="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> <mymw:link id="code" resourceid="code" href="OPs/Script/generic/cinema.xml">Ver código fuente </mymw:link> </mymw:p> <mymw:include content="P/generic/example1/foot"/> </mymw:body> </mymw:document>
La validación que se quiere aplicar es controlar que sólo se elija una película únicamente junto con un pase de la misma. Seleccionar dos películas, ninguna, o no elegir un pase con película seleccianada producirá error.
El código que implementa la validación requerida es el siguiente:
function scheduleChoosed (radio) {
var i;
for (i=0;i<radio.length;i++){
if (radio[i].checked) {
return true;
}
}
return false;
}
function accept_onsubmit_validate() {
if (document.forms[0].film1_VAL[0].checked == false
&& document.forms[0].film2_VAL[0].checked == false){
alert('Seleccione una película'); return false;
} else if (document.forms[0].film1_VAL[0].checked == true
&& document.forms[0].film2_VAL[0].checked == true){
alert('Seleccione sólo una película');
return false;
} else if (document.forms[0].film1_VAL[0].checked == true
&& document.forms[0].film2_VAL[0].checked == false
&& !scheduleChoosed(document.forms[0].sch1_VAL)){
alert('Seleccione pase');
return false; }
else if (document.forms[0].film1_VAL[0].checked == false
&& document.forms[0].film2_VAL[0].checked == true
&& !scheduleChoosed(document.forms[0].sch2_VAL)){
alert('Seleccione pase');
return false;
}
return true;
}
La plataforma se encarga de llamar a la función de validación customizada automáticamente, haciendo esta parte transparente para el desarrollador de aplicaciones. Los estilos aplicados a la presentación anterior son los siguientes:
select.checkbox {
display-as:checkbox;
multiple:false; dummy-option:false;
}
select.radio {
layout:grid;
cols:2;
display-as:radiobutton;
dummy-option:false;
}
p.title{
color:white;
background-color:#336699;
align:center;
show-separator:false;
include:true;
}
entryfield.disabled{
disabled:true;
expand:false;
display-as:simulated-disabled;
}
entryfield.date {
size:10;
maxlength:10;
java-date-mask:dd-MM-yyyy;
}
Observando los estilos anteriores, reseñar como una select puede mostrarse además de cómo un combo, como radio o checkbox. Para ambos casos se ha omitido la opción dummy.
 XHTML-MP (OpenWave) |  I-MODE |
 WML |  HTML (Pocket PC) |
