Ejemplo 2

Componente Tabla

El ejemplo actual demuestra las características del componente Tabla de MyMobileWeb. La figura a continuación es la fuente inicial de archivo XML. Una particularidad de esta tabla es que tiene tres columnas, pero, el programador ha decidido que la tercera columna sólo va a ser mostrada cuando el dispositivo es un PDA (atributo display ). MyMobileWeb proporciona mecanismos para la definición de grupos de dispositivos. En este caso de uso concreto PDADevice es un conjunto de dispositivos que corresponde a los dispositivos de pantalla con las dimensiones típicas de una PDA. Con respecto a los datos obligatorios en la figura aparecen los siguientes atributos remarcables:

• El atributo bind que representa la variable del contexto (modelo) que se actualizará automáticamente con el identificador de la fila seleccionada por el usuario
• El atributo optionsbind que define la variable del modelo (contexto) que contendrá las filas que se muestran en la tabla
• Diferentes atributos member que definen el mapeo entre las columnas y las subpartes específicas de los datos.

En cuanto a la paginación, el atributo paginate esta a true, indicando a MyMobileWeb que pagine automáticamente las filas de la tabla, si es necesario. Por último cabe señalar que el ejemplo no cubre todos los detalles que tiene que ver con la gestión de eventos y la obtención de los datos de la tabla por medio de la ejecución de una OA.

La figura a continuación representa la CSS utilizada para especificar el aspecto de la tabla. Hay algunas propiedades que tienen que ver con la barra de paginación que se presentará automáticamente cuando sea necesario. En caso de que no se especifique ningún esquema de etiquetado, por defecto se utiliza un esquema “enlace directo a cada una de las páginas” .

La siguiente figura muestra cómo se presentará la tabla especificada. Se observa que en función de la anchura del dispositivo de destino aparecen más o menos enlaces directos a las diferentes páginas de la tabla. Asimismo, mediante el cambio de propiedades de la CSS, el desarrollador puede decidir colocar la barra de paginación en la parte superior o en la parte inferior de la tabla.

El siguiente ejemplo cambia el esquema de etiquetado de la paginación, mostrando sólo el número de páginas y por medio de la interacción se permite avanzar de forma secuencial a través del conjunto de páginas. Se observa cómo la tabla y la barra de paginación se muestran en navegador Nokia Serie 40.

Por último, la siguiente figura ilustra la manera en la que la tabla aparecerá en un dispositivo PDA, con tres columnas y enlaces directos a cada una de las páginas.