Funcionalidad básica de los controles

De MorfeoWiki

Introducción

En este capítulo se introducirá al desarrollador en el uso de los controles junto con los distintos estilos aplicables a cada uno de ellos, con lo que el programador poseerá una visión general de la aplicación de estilos sobre presentaciones. Además se explicará el uso del binding automático.

Tag Document

Representa el tag raíz de un documento de presentación en MyMobileWeb. En él se ha de definir el namespace de MyMobileWeb. (http://morfeo-project.org/mymobileweb). Debe contener dos etiquetas hijas head y body, y en este mismo orden de carácter obligatorio. Para conocer el uso de este tag, ver el ejemplo de presentación para cualquiera de los tags que a continuación se definen.
Para más información consultar el documento Referencia del lenguaje.

Tag Head

Permite especificar la cabecera del documento. Define varias características comunes a todo el documento. Puede contener tres etiquetas: style, title y head. Para más información documento Referencia del lenguaje.

Tag Meta

Realiza directamente en el meta de cabecera de un documento HTML, representa información del documento. Sus atributos son http-equiv, content, name y forua que se corresponden con los atributos de mismo nombre en las especificaciones HTML.
Para más información documento Referencia del lenguaje.

Tag Style

Define la hoja de estilo externa a aplicar al documento. No es obligatorio, y en caso de no especificarse, se aplicaría la hoja de estilo definida por defecto. Un ejemplo de uso de este tag se puede ver en Tag Title. Para definir un hoja de estilo externa, además de usar el tag style, se puede definir de la siguiente manera:

 <?xml version="1.0" encoding="UTF-8" ?> 
 <?xml-stylesheet href="style.css" type="text/css"?>

Esta instrucción debe ir siempre inmediatamente debajo de la cabecera que le precede en el ejemplo. En el caso de definir la hoja de estilo de ambas maneras toma preferencia ésta última.

Tag Title

Este tag forma parte de la cabecera head e indica el título de la página.
Para más información documento Referencia del lenguaje.

Presentación y estilos

En la siguiente presentación se mostrará un título con el nombre ‘Mi titulo’.

 <?xml version="1.0" encoding="UTF-8" ?> 
   <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head>
     <mymw:title>Mi título</mymw:title> 
     <mymw:style href="title.css"></mymw:style> 
   </mymw:head> 
   <mymw:body>  
     <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" href="OPs/Title/generic/example1.xml">
         Ver código fuente
       </mymw:link> 
     </mymw:p> 
     <mymw:include content="Hr/generic/example1/foot"/> 
   </mymw:body> 
 </mymw:document>

El siguiente estilo indica que el título es añadido al inicio de la página en aquellos dispositivos en los que el navegador no le muestre.

 title{ 
   include:true; 
 }

Figura 6-1: Title

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

En las capturas anteriores se ve como para la Pocket PC el título es incluido en la página que se visualiza, en cambio, en WML o OpenWave es el propio terminal el que muestra el título.

Tag Body

Este tag representa el cuerpo del documento. Tag obligatorio que define el contenido de la presentación. Se puede indicar que los datos que hagan referencia al contexto no recojan el valor del nuevo contexto. Tiene la opción además de definir un periodo de tiempo determinado desde que se carga la página para lanzar un evento ontimer sobre el propio control body. Dado que no todos los dispositivos soportan un timer, hay que indicar una etiqueta para el botón que termina simulando el timer (en los dispositivos sin timer aparecerá un botón para disparar la acción correspondiente) Para más información ver el documento Referencia del lenguaje. El tag body no puede contener texto, pero puede tener como tags hijos en cualquier orden:

• <p> 0 ó varias veces
• <include> 0 o varías veces
• <panel> 0 ó varias veces
• <hr> 0 ó varias veces
• <br> 0 ó varias veces Nota: En un documento no pueden existir tags panel junto a p (ó include) y viceversa, son excluyentes entre sí.
  

Para más información documento Referencia del lenguaje.

Control Br

Retorno de carro. Este tag estará vacío y sin atributos. Va siempre fuera de párrafos. Ver ejemplo de la sección Control Hr
Para más información documento Referencia del lenguaje.

Control Hr

Dibuja una línea que atraviese la pantalla del terminal. Va siempre fuera de párrafos.

Presentación y estilos

En la siguiente presentación se mostrará dos tags hr separados un retorno de carro.

 <?xml version="1.0" encoding="UTF-8" ?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head> 
     <mymw:title>Línea</mymw:title> 
     <mymw:style href="hr.css"></mymw:style> 
   </mymw:head> 
   <mymw:body> 
     <mymw:br/> 
       <mymw:hr class="dotted">
     </mymw:hr>
     <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}">
       <mymw:link id="code" resourceid="code" href="OPs/Hr/generic/example1.xml">
          Ver código fuente
       </mymw:link>
     </mymw:p>
     <mymw:p id="foot" class="left">
       <mymw:link id="lbackOP">Volver</mymw:link>
       <mymw:link id="lindex">Inicio</mymw:link>
     </mymw:p>
   </mymw:body>
 </mymw:document>

Para esta presentación la línea divisoria será punteada para aquellos dispositivos que lo permitan.

 hr.dotted{
   border-style:dotted;
 }

Figura 6-2: Hr

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Control Panel

Es una subpantalla dentro de la misma presentación. Dependiendo del dispositivo destino será representado de distintas formas. En WML se realiza mediante cards, mientras que en tecnologías tipo HTML se realiza mediante enlaces y anclas (anchor). Sólo podrá ser hijo de body y no es anidable. Mediante la propiedad display-panels-as de ‘body’ se controla como se visualizarán finalmente los paneles de un documento. Cada panel puede tener un título cuyo aspecto se controla mediante estilos ‘panel.title’.
Para más información documento Referencia del lenguaje.

Presentación y estilos

En la siguiente presentación se mostrará tres paneles con el estilo tabs. Los paneles se subdividen en tabs, pestañas o cards dependiendo de la tecnología.

 <?xml version="1.0" encoding="UTF-8" ?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head> 
     <mymw:title>Pestañas</mymw:title> 
     <mymw:style href="panel.css"></mymw:style> 
   </mymw:head> 
   <mymw:body class="panelsTabs"> 
     <mymw:panel id="Panel1" title="Panel1"> 
       <mymw:p id="p1" class="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="Entryfield/generic/example1/foot"/> 
     </mymw:panel> 
     <mymw:panel id="Panel2" title="Panel2"> 
       <mymw:p id="p1" class="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="Entryfield/generic/example1/foot"
         display="${!_MYMW_DEV_BELONGS.PdaDevice}"/> 
     </mymw:panel> 
     <mymw:panel id="Panel3" title="Panel3"> 
       <mymw:p id="p1" class="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="Entryfield/generic/example1/foot"
         display="${!_MYMW_DEV_BELONGS.PdaDevice}"/> 
     </mymw:panel> 
   </mymw:body> 
 </mymw:document>  

En cuanto a los estilos aplicados:

• display-panels-as:tabs. Los paneles se subdividen en tabs, pestañas o cards dependiendo de la tecnología.
• panel-tab-selected: color de pestaña actual.
• panel-tab-not-selected: color de pestañas no seleccionadas.
• panel-link-selected: color de enlace actual dentro de la pestaña.
• panel-link-not-selected: color de enlaces no actuales.

 body.panelsTabs{ 
   display-panels-as:tabs; 
   panel-tab-selected-color:#E0EEEE;  
   panel-tab-not-selected-color:blue; 
   panel-link-selected-color:black; 
   panel-link-not-selected-color:white;
 }

Figura 6-3: Panel (1)

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Presentación y estilos (2)

Esta presentación es la misma que la anterior, tan sólo difiere en el estilo de mostrar los paneles. En este caso el estilo es: client-tabs: Los paneles se distribuyen uno por uno a lo largo de la página, al igual que para el estilo plain-flow con la salvedad de que el primer panel, contendrá una lista de enlaces a los distintos paneles de la página y a su vez, los demás paneles tendrán un enlace para volver al panel principal.

 <?xml version="1.0" encoding="UTF-8" ?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example2"> 
   <mymw:head> 
     <mymw:title>Enlaces</mymw:title> 
     <mymw:style href="panel.css"></mymw:style> 
   </mymw:head> 
   <mymw:body class="panelsClientTabs"> 
     <mymw:panel id="Panel1" title="Panel1"> 
       <mymw:p id="p1" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
         <mymw:link id="code" resourceid="code"
           href="OPs/Panel/generic/example2.xml">Ver código fuente
         </mymw:link>
       </mymw:p> 
       <mymw:include content="Entryfield/generic/example1/foot"/> 
     </mymw:panel> 
     <mymw:panel id="Panel2" title="Panel2"> 
       <mymw:p id="p2" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
         <mymw:link id="code" resourceid="code"
           href="OPs/Panel/generic/example2.xml">Ver código fuente
         </mymw:link> 
       </mymw:p> 
       <mymw:include content="Entryfield/generic/example1/foot"
         display="${!_MYMW_DEV_BELONGS.PdaDevice}"/> 
      </mymw:panel> 
      <mymw:panel id="Panel3" title="Panel3"> 
        <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
          <mymw:link id="code" resourceid="code"
            href="OPs/Panel/generic/example2.xml">Ver código fuente
          </mymw:link> 
       </mymw:p> 
       <mymw:include content="Entryfield/generic/example1/foot"
          display="${!_MYMW_DEV_BELONGS.PdaDevice}"/> 
      </mymw:panel> 
   </mymw:body> 
 </mymw:document>

En cuanto a los estilos aplicados:

• display-panels-as: client-tabs. Los paneles se distribuyen uno por uno a lo largo de la página, el primer panel, contendrá una lista de enlaces a los distintos paneles de la página y a su vez, los demás paneles tendrán un enlace para volver al panel principal.
• show-panel-separator:true.Una línea divisoria separará los paneles entre sí (tag hr).

 body.panelesClientTabs{ 
   display-panels-as:client-tabs;  
   show-panel-separator:true; 
 }

Figura 6-4: Panel (2)

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Control P

Permite agrupar un conjunto de controles visuales los cuales tendrán una misma alineación, layout y fondo. Para conocer el funcionamiento de este tag consultar la sección Control Label. Para más información documento Referencia del lenguaje.

Control Label

En este ejemplo se definirá una presentación que proporcionará conocimientos en el manejo del control label y p. Otro ejemplo de estilos aplicables al tag label se explica en la sección Control Link. Representa un control visual tipo “etiqueta” estática (sin posibilidad de modificación por parte del usuario). El control puede mostrar un texto de forma estática o el contenido de una variable de contexto.
Para más información documento Referencia del lenguaje.

Presentación y estilos (1)

En la siguiente presentación se va a usar un layout grid de dos columnas para el párrafo y el contenido que represente a las distintas labels se encontrará escrito en la propia presentación (forma estática). Para la segunda presentación se opta por un layout vertical donde las etiquetas tomarán su texto de variables de contexto. A esto último es lo que recibe el nombre de binding automático.

 <?xml version="1.0" encoding="UTF-8" ?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head>  
     <mymw:title>Ejemplo 1</mymw:title> 
     <mymw:style href="label.css"></mymw:style>  
   </mymw:head> 
   <mymw:body> 
     <mymw:p id="p1" class="grid2center">
       <mymw:label class="bold red">Pepe</mymw:label> 
       <mymw:label class="italic">Jose</mymw:label> 
       <mymw:label class="bold red">Luis</mymw:label> 
       <mymw:label class="italic">Cris</mymw:label>
     </mymw:p> 
     <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" 
         href="OPs/Label/generic/example1.xml">Ver código fuente
       </mymw:link> 
     </mymw:p> 
     <mymw:include content="Entryfield/generic/example1/foot"/> 
   </mymw:body> 
 </mymw:document>

Los siguientes estilos indican letra resaltada, letra cursiva y color rojo respectivamente. Indicar en este punto que el atributo layout y cols podrían aparecer en la CSS como estilo y no como atributo del tag p como es en este caso. El alineamiento del párrafo es centrado.

 label.bold{ 
   font-weight:bold; 
 } 
 label.italic{ 
   font-style:italic; 
 } 
 label.red{ 
   color:red;
 }

Figura 6-5: Label (1)

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Presentación y estilos (2)

 <?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="label.css"></mymw:style> 
   </mymw:head> 
   <mymw:body> 
     <mymw:p id="p1" class="vertical"> 
       <mymw:label class="bold green">${label1}</mymw:label> 
       <mymw:label class="italic">${label2}</mymw:label> 
       <mymw:label class="bold big">${label3}</mymw:label> 
       <mymw:label class="italic red">${label4}</mymw:label> 
     </mymw:p> 
     <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" 
         href="OPs/Label/generic/example2.xml">Ver código fuente
       </mymw:link>
     </mymw:p> 
     <mymw:include content="Entryfield/generic/example1/foot"/> 
   </mymw:body> 
 </mymw:document>

Los siguientes estilos indican letra más grande que la de por defecto y color verde respectivamente. El layout para este caso es vertical y el alineamiento a la izquierda (por defecto left).

Los anteriores definidos más:

 label.big{ 
   font-index:3; 
 } 
 label.green{ 
   color:green; 
 }

En este ejemplo, el texto de los labels se obtiene de una variable de contexto. Las variables en las presentaciones, se indican de la siguiente manera ${nombre_variable}. En el ejemplo anterior ${label1} .. ${label4} Para dar valor a estas variables se hace de la siguiente manera:

 the_context.setElement(“label1”,”Pepe”); 
 the_context.setElement(“label2”,”Jose”); 
 the_context.setElement(“label3”,”Luis”); 
 the_context.setElement(“label4”,”Cris”);

Esto es lo que en el anterior capítulo se llamaba binding automático.

Figura 6-6: Label (2)

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Control Image

Incluye una imagen en el documento. La imagen se especifica mediante un atributo ‘resourceid’ el cual tendrá que quedar especificado en el catalogo de contenidos o bien mediante el atributo src, donde se indicará la dirección de la imagen.
Para más información documento Referencia del lenguaje.

Presentación y estilos

En la siguiente presentación se mostrará como insertar una imagen en un documento.

 <?xml version="1.0" encoding="UTF-8" ?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head> 
     <mymw:title>Logo Movistar</mymw:title>
     <mymw:style href="label.css"></mymw:style> 
   </mymw:head>  
   <mymw:body> 
     <mymw:p id="p1" class="center"> 
       <mymw:image id="img1" alt="Movistar" resourceid="movistar"/> 
     </mymw:p> 
     <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" 
         href="OPs/Image/generic/example1.xml">Ver código fuente
       </mymw:link> 
     </mymw:p> 
     <mymw:include content="Hr/generic/example1/foot"/> 
   </mymw:body> 
 </mymw:document>

Figura 6-7: Image

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

En esta presentación se ha optado por insertar una imagen definiendo un recurso con el nombre de movistar. Dentro de éste, se definen dos instancias del recurso, una en formato wbmp para algunos dispositivos WML y otra en formato jpeg esta ya en color.

Control Link

El control produce un enlace simple que puede llevar asociada una imagen. Representa un elemento por pantalla (un texto, una imagen, o una combinación de los dos) que al recibir la acción del usuario provoca el evento correspondiente a mapear en controlador de flujo. Como tal por tanto es un “receptor” del evento onclick, que enviará dicho evento (junto con su propio identificador) al controlador de flujo para que actúe en consecuencia. El lanzamiento del evento a través de componentes link no actualiza el contexto de datos, por lo que los posibles datos introducidos por el usuario no serán actualizados en dicho contexto de datos al ser enviada la combinación control/evento en el servidor. Es posible no asociar el link a un control y evento que gestione el gestor de flujo, y hacer que navegue directamente a la URL especificada por el usuario, utilizando para ello el atributo href.

Presentación y estilos

En la siguiente presentación se mostrarán tres enlaces, en todos ellos se indicará un resourceid, es decir, se les va a asociar una imagen. Para el primero de ellos la imagen hará de enlace, para el segundo aparecerá tanto el texto como la imagen y para el último el texto únicamente sin imagen. El estilo que controla este comportamiento es el img-display. Se define la correspondiente presentación. Además de los enlaces se introduce al programado en el uso del estilo marquee para el tag label.

 <?xml version="1.0" encoding="UTF-8" ?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head> 
      <mymw:title>Enlace</mymw:title> 
      <mymw:style href="link.css"></mymw:style> 
   </mymw:head> 
   <mymw:body> 
     <mymw:p class="vertical"> 
       <mymw:label id="lab1" class="marquee">Enlace tipo both</mymw:label> 
       <mymw:link id="lnk_1" resourceid="spain" class="both">Español</mymw:link> 
       <mymw:label id="lab2" class="marquee">Enlace tipo imagen</mymw:label> 
       <mymw:link id="lnk_2" resourceid="spain" class="only">Español</mymw:link> 
       <mymw:label id="lab3" class="marquee">Enlace tipo texto</mymw:label> 
       <mymw:link id="lnk_3" resourceid="spain" class="text">Español</mymw:link> 
     </mymw:p> 
     <mymw:p id="p3" class="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="Hr/generic/example1/foot"/> 
   </mymw:body> 
 </mymw:document>

Estilos aplicados:

• img-display:only: Sólo aparece la imagen, cuando el dispositivo así lo permite (en caso contrario aparecerá sólo el texto)
• img-display:both: Aparece tanto la imagen como el texto del link (siempre y cuando el dispositivo lo soporte)
• img-display:none: Sólo aparece el texto del link
• text-decoration:marquee. Este estilo hace que el texto en el dispositivo tenga un determinado movimiento. La dirección, estilo y número de repeticiones vienen definidos por los estilos marquee-dir, marquee-style y marquee-loop respectivamente.

 link.text { 
   img-display:none;
 } 
 link.both{ 
   img-display:both; 
 } 
 link.only { 
   img-display:only; 
 } 
 label.marquee{ 
   text-decoration:marquee; 
   marquee-style:scroll; 
   marquee-loop:16; 
   marquee-dir:right;
 }

Figura 6-8: Link

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Control Anchor

Enlace que implica un salto a un párrafo (tag p). Éste debe pertenecer a la misma presentación y se indica asignando al atributo id del anchor el identificador del párrafo. Para ello, el párrafo al que se desea saltar, debe tener su atributo anchor a valor true.

Presentación y estilos

En la siguiente presentación se mostrará un ancla que enlaza al primero de los párrafos. Se define la correspondiente presentación.

 <?xml version="1.0" encoding="UTF-8" ?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head> 
     <mymw:title>Anchor</mymw:title> </mymw:head>
   <mymw:body> 
     <mymw:p id="p1" title="Párrafo 1" class="vertical" anchor="true"> 
       <mymw:label>Línea 1</mymw:label> 
       <mymw:label>Línea 2</mymw:label> 
       <mymw:label>Línea 3</mymw:label>           
       <mymw:label>Línea 4</mymw:label> 
       <mymw:label>Línea 5</mymw:label> 
       <mymw:label>Línea 6</mymw:label> 
       <mymw:label>Línea 7</mymw:label> 
     </mymw:p> 
     <mymw:p id="p2" title="Párrafo 2" class="vertical"> 
       <mymw:label>Línea 8</mymw:label> <mymw:label>Línea 9</mymw:label> 
       <mymw:label>Línea 10</mymw:label> <mymw:label>Línea 11</mymw:label>                     
       <mymw:label>Línea 12</mymw:label> <mymw:label>Línea 13</mymw:label> 
       <mymw:label>Línea 14</mymw:label> 
     </mymw:p> 
     <mymw:p id="p3" class="left"> 
       <mymw:anchor id="p1">Párrafo 1</mymw:anchor> 
     </mymw:p> 
     <mymw:p id="p4" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" 
         href="OPs/Anchor/generic/example1.xml">Ver código fuente
       </mymw:link> 
     </mymw:p> 
     <mymw:include content="Entryfield/generic/example1/foot"/> 
   </mymw:body> 
 </mymw:document>

Es importante tener en cuenta como el párrafo primero tiene el atributo anchor con valor true. De no ser así, el tag anchor no tendría funcionalidad alguna.

Figura 6-9: Anchor

XHTML-MP (OpenWave)	I-MODE
Imagen:No disponible WML	HTML (Pocket PC)

Control Submit

Especifica el control que al ser pulsado por el usuario, ocasiona la actualización del contexto en el servidor con los datos introducidos por el usuario y ocasiona la ejecución de acciones en el lado servidor que culminarán con el envío de la siguiente presentación al usuario. El control submit puede tener opcionalmente una imagen asociada la cual puede aparecer sola o junto a un botón. Para ver ejemplos de uso del mismo, consultar sección Control Entryfield en adelante.
Para más información documento Referencia del lenguaje

Control Entryfield

Permite especificar la aparición en la presentación de un control para la introducción de datos de forma manual. Este control habitualmente estará ligado a un dato del contexto, de tal manera que lo que se muestre inicialmente en el campo será dicho dato del contexto, y viceversa, el contenido de dicho campo será automáticamente actualizado en el contexto. Esto último ocurrirá cuando el usuario pulse sobre un control “submit” en la presentación. Es posible especificar mediante atributos el tipo de dato que deberá introducirse (validationtype), así como la clase a la que pertenece el objeto directamente depositado en contexto, tanto el contenedor (beantype) como el contenido (bindingtype). Esto último será tratado en profundidad en la sección de Funcionalidad avanzada de los controles. En las siguientes presentaciones se tratará con tres controles entryfield, cada uno de ellos con distintos estilos, para así introducir al desarrollador en el uso de esta etiqueta. Además, se indicará como asociar el valor del tag con el contexto, a partir de la definición del atributo bind. Para enviar los datos introducidos en los campos de texto se ha de insertar un tag submit.

Presentación y estilos (1)

Entryfield deshabilitado.

 <?xml version="1.0" encoding="UTF-8" ?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head> 
     <mymw:title>Deshabilitado</mymw:title> 
     <mymw:style href="entryfield.css"></mymw:style> 
   </mymw:head>
   <mymw:body newcontext="true"> 
     <mymw:p id="p1" cols="2" class="GridleftNowrap">
       <mymw:label>Dpto:</mymw:label> 
       <mymw:entryfield id="Dpto" bind="${ department }" class="dis" /> 
     </mymw:p> <mymw:p id="p3" class="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:p id="foot" class="left"> 
       <mymw:link id="lback">Volver</mymw:link> 
       <mymw:link id="lindex">Inicio</mymw:link> 
     </mymw:p> 
   </mymw:body> 
 </mymw:document>

La presentación actual muestra el funcionamiento de un campo de texto no editable o lo que es lo mismo deshabilitado.

• Estilo disabled. Esto quiere decir que no será posible ninguna modificación de su contenido por el usuario. Si el dispositivo soporta controles disabled, el control se visualizará de esta manera, en cambio, para browsers que no lo soporten, la entrada de texto se simulará con una tabla, puesto que el estilo display-as se le ha dado el valor de simulated-disabled.

 entryfield.dis { 
   disabled:true; 
   display-as:simulated-disabled; 
 }

Para dar valor a la variable de contexto, se hace de la siguiente manera:

 the_context.setElement(“department”,”Medicina”);

Figura 6-10: Entryfield deshabilitado

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Presentación y estilos (2)

Campos de texto editable, uno de tipo text y el otro tipo password.

 <?xml version="1.0" encoding="UTF-8" ?>
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head> 
     <mymw:title>Editable</mymw:title> 
     <mymw:style href="entryfield.css"></mymw:style> 
   </mymw:head> 
   <mymw:body newcontext="true"> 
     <mymw:p id="p1" cols="2" class="GridleftNowrap">
       <mymw:label id="labusu">Usu:</mymw:label> 
       <mymw:entryfield labelid="labusu" id="Usu" bind="${ user }" class="login req" /> 
       <mymw:label id="labcla">Psw:</mymw:label> 
       <mymw:entryfield labelid="labcla" id="Cla" bind="${ pass }" class="password req" /> 
     </mymw:p> 
     <mymw:p id="p2" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" 
         href="OPs/Entryfield/generic/example2.xml">Ver código fuente
       </mymw:link> 
     </mymw:p> 
     <mymw:include content="Entryfield/generic/example1/foot"/> 
   </mymw:body> 
 </mymw:document>

La presentación actual muestra el funcionamiento de los campos de texto editables.

• Estos campos son de estilo requerido, es decir, de obligado cumplimentado. En este momento esta característica es introducida para que el desarrollador la conozca, pero se explicará exhaustivamente en el capítulo de Funcionalidad avanzada de los controles.

Para que aparezca una marca que indique que el control es requerido, se ha de definir el atributo labelid en el tag entryfield, que se corresponda con el identificador del tag label correspondiente. Además se indica que el tamaño de los campos de usuario y clave han de ser de valor 6 y que el campo clave será de tipo password. Por defecto el tipo es text, como es el caso del campo usuario. Además de los tags entryfield se ha añadido el tag submit. Al pulsar éste control, los datos serán enviados al contexto previa validación aplicada sobre los valores introducidos en los campos de texto. El atributo principal indica que este submit es el principal del documento en este caso. Si se define sobre un panel, indicaría que es el principal dentro del panel. El atributo value indica el texto que aparecerá como contenido del botón.

 entryfield.password{
   type:password; 
   size:6; 
 } 
 entryfield.login{
   size:6; 
 } 
 entryfield.req { 
   required:true; 
 }

Como ya ha sido mencionado, la forma de relacionar el valor del control entryfield con una variable de contexto es mediante la definición del atributo bind. Para recoger del valor de la variable alojado en contexto, se ha de escribir lo siguiente (una vez pulsado el control submit):

 String user = the_context.getElement(“user”); 
 String pass = the_context.getElement(“pass”);

Figura 6-11: Entryfield editable

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Presentación y estilos (3)

Campos de texto de solo lectura.

 <?xml version="1.0" encoding="UTF-8" ?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head> <mymw:title>Sólo lectura</mymw:title> 
     <mymw:style href="entryfield.css"></mymw:style> 
   </mymw:head> 
   <mymw:body newcontext="true"> 
     <mymw:p id="p1" cols="2" class="GridleftNowrap">
       <mymw:label>Dpto:</mymw:label> 
       <mymw:entryfield id="Dpto" bind="${ department }" class="readonly" /> 
     </mymw:p> 
     <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" 
         href="OPs/Entryfield/generic/example3.xml">Ver código fuente
       </mymw:link>
     </mymw:p> <mymw:include content="Entryfield/generic/example1/foot"/> 
   </mymw:body> 
 </mymw:document>

La presentación actual muestra el funcionamiento de un campo de texto de solo lectura.

• Estilo readonly. Si este estilo toma el valor true el campo de texto se visualizará como una label, es decir, texto llano..

 entryfield.readonly { 
   readonly:true; 
 }

Para dar valor a la variable de contexto, se hace de la misma manera que en la sección Presentación y estilos (1)

Figura 6-12: Entryfield de solo lectura

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Control Datefield

Permite especificar la aparición en la presentación de un control para la introducción de fechas. Este control estará ligado a un dato del contexto, de tal manera que lo que se muestre inicialmente en el control será dicho dato del contexto, y viceversa, el contenido de dicho campo será automáticamente actualizado en el contexto. Esto último ocurrirá cuando el usuario pulse sobre un control submit en la presentación. El dato introducido será validado como un objeto java.sql.Date y se permitirá indicar el tipo de clase del objeto al que directamente se depositará en contexto a través del atributo bindingtype. Las tres presentaciones que a continuación se introducen son las correspondientes a los tres modos de visualización del control.

Presentación y estilos (1)

Datefield visualizado como tres campos de texto, uno para el día, otro para el mes y el último para el año.

 <?xml version="1.0" encoding="UTF-8" ?> 
 <?xml-stylesheet href="datefield.css" type="text/css"?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head> 
     <mymw:title>Campos fecha</mymw:title> 
   </mymw:head> 
   <mymw:body newcontext="true"> 
     <mymw:p id="p1"  class="verticalCenterNowrap"> 
       <mymw:label id="date">Fecha:</mymw:label> 
       <mymw:datefield class="independent" labelid="date" id="date" bind="${ date }" /> 
     </mymw:p> 
     <mymw:p id="p2" class="center"> 
       <mymw:submit id="submit" value="Aceptar" principal="true"/> 
     </mymw:p> 
     <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" 
         href="OPs/Datefield/generic/example1.xml">Ver código fuente
       </mymw:link> 
     </mymw:p> 
     <mymw:p id="foot" class="left"> 
       <mymw:link id="lback">Volver</mymw:link> 
       <mymw:link id="lindex">Inicio</mymw:link> 
     </mymw:p> 
   </mymw:body> 
 </mymw:document>

La presentación actual muestra el funcionamiento de un campo fecha cuyo valor de visualización es independent-boxes.

• display-as: independent-boxes. Campos divididos.
• cols: Indica el número de columnas. Si el valor es 3, en la primera fila se mostrará día, mes y año y en la segunda los campos de texto de cada uno de ellos. Si el valor es 2, se visualizará el literal junto con su campo de texto y finalmente si es 1 se intercala literal y campo de texto en distintas filas.
• label-color. Color de los literals día, mes y año.

 datefield.independent {
   display-as:independent-boxes;
 }

Figura 6-13: Datefield independent boxes

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Presentación y estilos (2)

Datefield visualizado como tres campos encadenados.La elección del día dependerá del mes y año seleccionados anteriormente.

 <?xml version="1.0" encoding="UTF-8" ?>
 <?xml-stylesheet href="datefield.css" type="text/css"?>
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example2"> 
   <mymw:head> 
     <mymw:title>Campo fecha</mymw:title> 
   </mymw:head> 
   <mymw:body> 
     <mymw:p id="p1" class="verticalCenterNowrap"> 
       <mymw:label id="date">Fecha:</mymw:label> 
        <mymw:datefield class="chained" labelid="date" id="date" bind="${ date }" /> 
     </mymw:p> 
     <mymw:p id="p2" class="center"> 
       <mymw:submit id="submit" value="Aceptar" principal="true"/> 
     </mymw:p> 
     <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" 
         href="OPs/Datefield/generic/example2.xml">Ver código fuente
       </mymw:link> 
     </mymw:p> 
     <mymw:p id="foot" class="left"> 
       <mymw:link id="lback">Volver</mymw:link> 
       <mymw:link id="lindex">Inicio</mymw:link>
    </mymw:p> 
   </mymw:body>
 </mymw:document>

La presentación actual muestra el funcionamiento de un campo fecha cuyo valor de visualización es chained-boxes.

• display-as: chained-boxes. Campos encadenados.
• years-range: rango de años que se mostrarán en la combo o menu según el dispositivo. Por ejemplo, por defecto para tecnologías html su valor es 1960,2050.

 datefield.chained { 
   display-as:chained-boxes; 
 }

Figura 6-14: Datefield chained boxes

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Presentación y estilos (3)

Datefield visualizado como calendario.

 <?xml version="1.0" encoding="UTF-8" ?>
 <?xml-stylesheet href="datefield.css" type="text/css"?>
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example3"> 
   <mymw:head> 
     <mymw:title>Calendario</mymw:title> 
   </mymw:head> <mymw:body> 
     <mymw:p id="p1" class="verticalCenterNowrap"> 
       <mymw:label id="date">Fecha:</mymw:label> 
       <mymw:datefield class="calendar" labelid="date" id="date" bind="${ date }" /> 
     </mymw:p> 
     <mymw:p id="p2" class="center"> 
       <mymw:submit id="submit" value="Aceptar" principal="true"/> 
     </mymw:p> 
     <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" 
         href="OPs/Datefield/generic/example3.xml">Ver código fuente
       </mymw:link> 
     </mymw:p> 
     <mymw:p id="foot" class="left"> 
       <mymw:link id="lback">Volver</mymw:link> 
       <mymw:link id="lindex">Inicio</mymw:link> 
     </mymw:p> 
   </mymw:body>
 </mymw:document>

La presentación actual muestra el funcionamiento de un campo fecha cuyo valor de visualización es calendar. Los estilos aplicados para este tipo de visualización son los siguientes, que a su vez son los de por defecto.

• display-as: calendar. Campo fecha calendario.
• colored, indica si el calendario se mostrará con diferentes colores de fondo alternados por cada una de sus semanas. De elegirse esta opción, el control se mostrará con una combinación de dos colores, o bien elegidos mediante los estilos background-color1 o background-color 2 o, en su defecto, escogidos entre los más apropiados al dispositivo. Sus valores posibles son true/false, siendo true por defecto.
• background-color1, primero de los colores a combinar en un estilo colored (#ECEDFF).
• background-color2, segundo de los colores a combinar en un estilo colored (#FFFFFF).
• label-color, color del literal “mes,año” (#C11B17).
• header-color, color de la fila que indica el día de la semana (#336699).
• outdate-color, color de fondo de aquellos días que no pertenecen al mes que se está visualizando actualmente (#6D7B8D).
• sunday-color, color para visualizar los enlaces de los domingos (#C11B17).

 datefield.calendar { 
   display-as:calendar;
 }

Figura 6-15: Datefield calendar

XHTML-MP (OpenWave)	Imagen:No disponible I-MODE
Imagen:No disponible WML	HTML (Pocket PC)

Control Timefield

Permite especificar la aparición en la presentación de un control para la introducción de horas. Este control estará ligado a un dato del contexto, de tal manera que lo que se muestre inicialmente en el control será dicho dato del contexto, y viceversa, el contenido de dicho campo será automáticamente actualizado en el contexto. Esto último ocurrirá cuando el usuario pulse sobre un control submit en la presentación. El dato introducido será validado como un objeto java.sql.Time y se permitirá indicar el tipo de clase del objeto al que directamente se depositará en contexto a través del atributo bindingtype. Las dos presentaciones que a continuación se introducen son las correspondientes a los dos modos de visualización del control.

Presentación y estilos (1)

Timefield visualizado como tres campos de texto, uno para la hora, otro para los minutos y el último para los segundos.

 <?xml version="1.0" encoding="UTF-8" ?> 
 <?xml-stylesheet href="timefield.css" type="text/css"?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head> 
     <mymw:title>Campos hora</mymw:title>
   </mymw:head> 
   <mymw:body> 
     <mymw:p id="p1" class="verticalCenterNoweap"> 
       <mymw:label id="hour">Hora:</mymw:label> 
       <mymw:timefield class="independent" labelid="hour" id="time" bind="${ time }" /> 
     </mymw:p> <mymw:p id="p2" class="center"> 
       <mymw:submit id="submit" value="Aceptar" principal="true"/> 
       </mymw:p> <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" 
         href="OPs/Datefield/generic/example1.xml">Ver código fuente
       </mymw:link> 
     </mymw:p> 
     <mymw:p id="foot" class="left"> 
       <mymw:link id="lback">Volver</mymw:link> 
       <mymw:link id="lindex">Inicio</mymw:link> 
     </mymw:p> 
   </mymw:body>
 </mymw:document>

La presentación actual muestra el funcionamiento de un campo hora cuyo valor de visualización es independent-boxes.

• display-as: independent-boxes. Campos divididos.
• cols: Indica el número de columnas. Si el valor es 3, en la primera fila se mostrará hora, minuto y segundo y en la segunda los campos de texto asociados. Si el valor es 2, se visualizará el literal junto con su campo de texto y finalmente si es 1 se intercala literal y campo de texto en distintas filas.
• label-color. Color de los literals hora, minuto y segundo.

 timefield.independent { 
   display-as:independent-boxes; 
 }

Figura 6-16: Timefield independent boxes

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Presentación y estilos (2)

Timefield visualizado como tres campos encadenados.

 <?xml version="1.0" encoding="UTF-8" ?>
 <?xml-stylesheet href="timefield.css" type="text/css"?>
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example2"> 
   <mymw:head> 
     <mymw:title>Campo hora</mymw:title> 
   </mymw:head> 
   <mymw:body newcontext="true"> 
     <mymw:p id="p1" class="verticaCenterNowrap"> 
       <mymw:label id="hour">Hora:</mymw:label> 
       <mymw:timefield class="chained" labelid="time" id="hour" bind="${ time }" /> 
     </mymw:p> 
     <mymw:p id="p2" class="center"> 
       <mymw:submit id="submit" value="Aceptar" principal="true"/> 
     </mymw:p> 
     <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" 
         href="OPs/Datefield/generic/example2.xml">Ver código fuente
       </mymw:link> 
     </mymw:p> <mymw:p id="foot" class="left"> 
       <mymw:link id="lback">Volver</mymw:link> 
       <mymw:link id="lindex">Inicio</mymw:link> 
     </mymw:p> 
   </mymw:body>
 </mymw:document>

La presentación actual muestra el funcionamiento de un campo hora cuyo valor de visualización es chained-boxes.

• display-as: chained-boxes. Campos encadenados.

 timefield.chained { 
   display-as:chained-boxes; 
 }

Figura 6-17: Timefield chained boxes

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Control Textarea

Control que permite la introducción de textos largos por pantalla. Cuando el dispositivo destino no tenga la capacidad de presentarlo, se generará un control de introducción de texto normal. Es posible asociar un texto directamente al control especificándole como cuerpo de la etiqueta. La otra posibilidad es asociar el contenido del textarea con el contexto mediante el atributo bind con un significado y comportamiento similar al especificado para el caso del control entryfield. El control puede aparecer como deshabilitado o ser de solo lectura. Si está deshabilitado se visualiza con su caja de texto alrededor, mientras que si es de solo lectura aparece el texto tal cual, como si se tratara de una etiqueta.

Presentación y estilos

En la siguiente presentación se introducirá al programador en el uso del control textarea. Además, se indicará como asociar el valor del tag con el contexto, a partir de la definición del atributo bind. Para actualizar los datos introducidos en el area de texto se ha de insertar un tag submit, en este caso se define un recurso tipo imagen para el botón submit.

 <?xml version="1.0" encoding="UTF-8" ?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head> <mymw:title>Editable</mymw:title> 
     <mymw:style href="textarea.css"></mymw:style> 
   </mymw:head> 
   <mymw:body newcontext="true"> 
     <mymw:p id="p1" class="vertical"> 
       <mymw:label id="write">Escriba aquí</mymw:label> 
       <mymw:textarea labelid="write" id="textarea1" bind="${ textarea }" class="myText" />       
     </mymw:p> 
     <mymw:p id="p2" class="center"> 
       <mymw:submit resourceid="acep" id="submit" value="Aceptar" principal="true" class="enter"/> 
     </mymw:p> 
     <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" 
         href="OPs/Textarea/generic/example1.xml">Ver código fuente
       </mymw:link> 
     </mymw:p> 
     <mymw:include content="Entryfield/generic/example1/foot"/> 
   </mymw:body>
 </mymw:document>

Como para el caso del tag entryfield del apartado anterior, para este control textarea se ha optado por aplicarle un estilo de requerido. Recordar que se ha definido el atributo labelid con el id del tag label asociado para que aparezca la marca de requerimiento a la izquierda de la etiqueta de texto por defecto. En este caso se ha definido un recurso de tipo imagen para el control submit y se ha dado el valor only para el estilo img-display. En este caso por lo tanto, el botón submit pasará a ser una imagen para todos aquellos dispositivos que soporten esta característica.

 textarea.myText { 
   required:true;
 }
 submit.enter{ 
   img-display:only; 
   border-width:0; 
 }

Como ya se ha mencionado en la descripción de este tag, la forma de relacionar el valor del control textarea con una variable de contexto es mediante la definición del atributo bind. Para dar valor a la variable de contexto, se hace de la siguiente manera: the_context.setElement(“textarea”,” Soy un control textarea que contengo texto”);

Por el contrario, para recoger del valor de la variable alojado en contexto, se ha de escribir lo siguiente (una vez pulsado el control submit): String textoarea = the_context.getElement(“textarea”);

Los atributos bindingtype y validationtype se explicarán en profundidad en el capítulo de Funcionalidad avanzada de los controles.

Figura 6-18: Textarea

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Control Textblock

Representa un bloque texto con un estilo propio, dentro de un área de texto. Siempre están contenidos en una textarea, sin posibilidad de ser tag hijo de otro control.

Presentación y estilos

En esta presentación se verá como crear una textarea de sólo lectura cuyo contenido son bloques de texto y enlaces.

 <?xml version="1.0" encoding="UTF-8" ?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example2"> 
   <mymw:head>
     <mymw:title>Sólo lectura</mymw:title> 
     <mymw:style href="textarea.css"></mymw:style> 
   </mymw:head>
   <mymw:body newcontext="true"> 
     <mymw:p id="p1" class="vertical"> 
       <mymw:label id="news" class="header">Noticia</mymw:label> 
       <mymw:textarea id="area" class="readonly"> 
         <mymw:textblock class="red">
           El Rey Juan Carlos representará a España 07:50. 
         </mymw:textblock>
         <mymw:textblock class="news">Mónaco acoge hoy, </mymw:textblock> 
         <mymw:link id="dead">el funeral del príncipe Rainiero.</mymw:link> 
       </mymw:textarea> 
     </mymw:p> 
     <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" 
         href="OPs/Textarea/generic/example2.xml">Ver código fuente
       </mymw:link> 
     </mymw:p> 
     <mymw:include content="Entryfield/generic/example1/foot"/> 
   </mymw:body> 
 </mymw:document>

En esta presentación se ha optado por una textarea de solo lectura, para lo cual se he dado el valor true al estilo readonly. Las textareas de solo lectura tiene una peculiaridad, pueden contener tres etiquetas: textblock, link y br. Las dos primeras con con un estilo definido. Gracias a esto, se puede definir unas áreas de texto enriquecidas visualmente, como es el caso del ejemplo que aquí se muestra.

 label.header{ 
   font-index:2; 
 } 
 textblock.red{ 
   color:red; 
 } 
 textblock.news{ 
   font-weight:bold; 
 } textarea.readonly{ 
   readonly:true; 
 }

Figura 6-19: Textarea de solo lectura

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Control Select

Representa un control que permite al usuario seleccionar de entre una lista de opciones para dar valor a un dato de un formulario. Las opciones pueden quedar representadas como selects unitarios, selects múltiples, checkboxes y radiobuttons (todo dependerá de las propiedades de estilo del control). Es posible asociar directamente opciones al control en la especificación de la presentación en XML (mediante tags option), o bien mediante binding automático hacia el contexto de datos. El select se asocia al contexto mediante atributos bind y optionsbind. El atributo bind indica mediante EL la variable que contendrá el código de la opción seleccionada por el usuario, mientras que el atributo optionsbind indica mediante EL cual es la variable de contexto que contiene el conjunto de opciones que se muestran en el control. El conjunto de opciones en el contexto ha de ser un objeto del que se pueda extraer información del identificador y texto de cada una de las opciones, utilizando para ello los atributos keymember y textmember. Este objeto puede ser: El bind direcciona el dato del contexto en el que se almacenará la selección del usuario sobre el control. Para indicar el tipo de dato sobre el que se almacena el control, es posible indicar los atributos beantype y bindingtype, con el mismo significado que el descrito en el caso del control entryfield. Los controles select incluyen por defecto una opción dummy de selección, pudiendo eliminar este comportamiento con el atributo dummyoption a false. En el caso de WML el control se realiza mediante enlaces y una card independiente.

Presentación y estilos (1)

En esta presentación se explica como usar el binding automático para el control select. La opción seleccionada por el usuario es almacenada en la variable de contexto referenciada por el atributo bind y la variable que almacena el total de las opciones de la select es referenciada por el atributo optionsbind Por otro lado, se explicarán los distintos tipos de elementos que puede ser apuntados por el optionsbind de una select..

 <?xml version="1.0" encoding="UTF-8" ?> 
 <mymw:document xmlns:mymw="http://morfeo-project.org/mymobileweb" id="example1"> 
   <mymw:head> 
     <mymw:title>Combo</mymw:title> 
     <mymw:style href="select.css"></mymw:style> 
   </mymw:head> 
   <mymw:body newcontext="true"> 
     <mymw:p id="p1" class="vertical"> 
       <mymw:label id="write">¿Qué edad tiene?</mymw:label> 
       <mymw:select id="sel" bind="${edad}" optionsbind="${ages}" 
         keymember="key" textmember="text"/>
     </mymw:p> 
     <mymw:p id="p2" class="center"> 
       <mymw:submit id="submit" value="Enviar" principal="true"/> 
     </mymw:p> 
     <mymw:p id="p3" class="left" display="${_MYMW_DEV_BELONGS.PcDevice}"> 
       <mymw:link id="code" resourceid="code" href="OPs/Select/generic/example1.xml">
         Ver código fuente
       </mymw:link> 
     </mymw:p> 
       <mymw:include content="Entryfield/generic/example1/foot"/> 
   </mymw:body> 
 </mymw:document>

• Binding de terminal a servidor Como se ha mencionado, se realiza a través del atributo bind.
  

bind="${age}"

Para obtener el valor recibido en dicha variable se ha de escribir:

String opcion_selecionada = the_context.getElement(“age”);

• Binding del servidor hacia el terminal En el caso del control select hay diversos tipos de elementos que pueden ser referenciados por el optionsbind.
  

optionsbind="${ages}"

Para este caso de binding, además de definir el atributo anterior, se han de definir el keymember y textmember.

• keymember: Para cada una de las opciones encontradas en el contexto en forma de bean, miembro de dicho bean en el que encontrar el identificador.
• textmember. Para cada una de las opciones encontradas en el contexto en forma de bean, miembro de dicho bean en el que encontrar el texto descriptivo de la opción. Distintos tipos de elementos:

• List de List Como una lista cuyos elementos son lista a su vez.

keymember="0" textmember="1"

 List aux = new ArrayList(); 
 String[] edades = new String[]{
   "Menor de 18","18 a 30","31 a 65","Mayor de 65"
 }; 
 for(int j = 0; j < edades.length; j++) { 
   List lista = new ArrayList(); 
   lista.add(Integer.toString(j)); 
   lista.add(edades[j]); 
   aux.add(lista);
 } 
 the_context.setElement("ages",aux);

• Array Java Array bidimensional Java keymember="0" textmember="1"

 String[][] aux = new String[4][2]; 
 aux[0][0] = "1"; aux[0][1] = "Menor de 18"; 
 aux[1][0] = "2"; aux[1][1] = "18 a 30"; 
 aux[2][0] = "3"; 
 aux[2][1] = "31 a 65"; 
 aux[3][0] = "4"; 
 aux[3][1] = "Mayor de 65"; 
 the_context.setElement("ages",aux);

• List de HashMap Como una lista Java cuyos elementos son HashMaps. keymember="Clave" textmember="Texto"

 List aux = new ArrayList(); 
 String[] edades = new String[]{
   "Menor de 18","18 a 30","31 a 65","Mayor de 65"
 }; 
 for(int j = 0; j < edades.length; j++) { 
   HashMap mapa = new HashMap(); 
   mapa.put("Clave",Integer.toString(j)); 
   mapa.put("Texto",edades[j]); aux.add(mapa); 
 } 
 the_context.setElement("ages",aux);

• Implementado interfaz org.morfeo.tidmobile.data.CollectionData keymember="Clave" textmember="Texto"

 public class DataSelect implements CollectionData { 
   List aux = new ArrayList(); 
   public DataSelect(String[] data, String key, String text) { 
     for (int j = 0; j < data.length; j++) {
       HashMap mapa = new HashMap(); 
       mapa.put(key, Integer.toString(j)); 
       mapa.put(text, data[j]);  
       aux.add(mapa); 
     } 
   } 
   public Object get(int i, String member) { 
     return ((HashMap) aux.get(i)).get(member); 
   } 
   public int size() { 
     return aux.size(); 
   } 
   public Object get(int i, int member) { 
     return null; 
   } 
   public Object get(int i) { return null; 
   } 
 }

 String[] edades = new String[]{
   "Menor de 18","18 a 30","31 a 65","Mayor de 65"
 }; 
 DataSelect aux = new DataSelect(edades,"key","text"); 
 the_context.setElement("ages",aux);

Figura 6-20: Select como combo

XHTML-MP (OpenWave)	I-MODE
WML	HTML (Pocket PC)

Presentación y estilos (2)

Este ejemplo es idéntico al anterior, con la salvedad de que el control select se mostrará como botones de radio en vez de tipo combo. Para ello, el estilo display-as toma el valor radiobutton. La disposición de los botones radio será de un layout grid con dos columnas para HTML.

 select.radio { 
   display-as:radiobutton; 
   dummy-option:false; 
 }

 select.radio { 
   layout: