wml wireless markup languaje. wml cualquier editor de textos servidor de páginas wml configurar...

WML

Wireless Markup Languaje

WML

Cualquier editor de textos Servidor de páginas WML

Configurar los MIME TYPES

Case sensivite Conceptos que se

manejan: Carta Baraja

Contenido MIME type Extensión

Código WML text/vnd.wap.wml .wml

WMLScript text/vnd.wap.wmlscript .wmls

Imagen WBMP image/vnd.wap.wbmp .wbmp

WML Compilado application/vnd.wap.wmlc .wmlc

WMLScript Compilado application/vnd.wap.wmlscriptc .wmlsc

Cartas y Barajas

Cartas Pantallas con poca información

BarajasConjunto de cartas

Cabecera

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml"> ‘Abrir baraja<wml>

‘Abrir carta<card>

‘Cerrar carta</card>

‘Cerrar baraja</wml>

Etiquetas

Parámetros de etiquetas “ “ 2 tipos:

Simples <etiqueta/>

Pareadas o compuestas <etiqueta> … </etiqueta>

Cartas

<card> … </card> Parámetros

id = “identificador_carta” title = “titulo_carta”

Texto en cartas <p> … </p>

Parámetros align:

left right center

mode wrap: texto varias líneas nowrap: una línea

Ejemplo

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml>

<card id="carta1" title="El Clasico">

<p align="center"> Hola Mundo! </p>

</card>

</wml>

… comandos

Salto de línea<br/>

Formatos de texto

<em> ... </em> Texto enfatizado

<strong> ... </strong>

Texto fuerte

<i> ... </i> Texto en cursiva

<b> ... </b> Texto en negrita

<u> ... </u> Texto subrayado

<big> ... </big> Texto más grande

<small> ... </small> Texto más pequeño

< < > >

" " & &

$$ $ SPACE

á á é é

í í ó ó

ú ú ñ ñ

Ñ Ñ Á Á

É É Í Í

Ó Ó Ú Ú

Ejemplo

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml"> <wml>

<card id="c1" title="Formatos"> <p> Texto en <em>enfasis</em>, <i>cursiva</i>, <strong>fuerte</strong>,<u>subrayado</u>, <big>grande</big>, <small>pequeña</small> </p>

</card> </wml>

Tabla Las tablas son una colección de filas y columnas

Útiles para mostrar datos de forma ordenada. Directiva pareada:

<table> ... </table>. Esta directiva admite los siguientes parámetros:

columns, title, align, id.

El primero de estos parámetros es obligatorio: columns="n" siendo n un entero mayor o igual que 1, estamos diciendo cuántas columnas va a tener la tabla.

Los otros tres parámetros ya no son obligatorios. title=“Un titulo"

Especifica el título de la tabla align="XX...X" especifica la alineación de cada columna.

Cada X es una letra que puede ser una de estas tres: L, C, R; habrá tantas letras como columnas tenga la tabla. El significado de estas letras es: L = left (izquierda), C = center (centrado) y R = right (derecha).

id="ident" Es un identificador para la tabla.

Renglones y Celdas de la tabla, Etiqueta pareada <tr> ... </tr> y dentro de cada fila, Celdas con la directiva <td> ... </td>.

Uso de tablas Directiva

<table> … </table> Parámetros:

columns title align id

Etiquetas Delimitar renglones <tr> … </tr> Delimitar celda <td> … </td>

Ejemplo: <table id = “nombre de la tabla” column = “3” title =

“Tabla” align=“LCR”>

Ejemplo de tabla <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="carta1" title="Ejemplo Tabla"> <p> <table id="tabla1" columns="3" title="Tabla 1" align="LCR"> <tr> <td>Celda(1,1)</td> <td>Celda(1,2)</td> <td>Celda(1,3)</td> </tr> <tr> <td>Celda(2,1)</td> <td>Celda(2,2)</td> <td>Celda(2,3)</td> </tr> </table> Ejemplo de tabla

</p> </card> </wml>

Tareas

Especifica un proceso Realizado en respuesta a un evento Navegación entre cartas y barajas Etiqueta <do>

Acciones que el usuario puede hacer en una carta.

Nivel de baraja y de carta

Etiqueta <do>

Parámetros type: Acciones a ejecutar

accept. Acepta la acción asignada y se ejecuta prev. Ir hacía atrás en el historial help. Petición de ayuda reset. Limpia el estado options. Opciones u operaciones adicionales delete. Borra un elemento o una acción unknown. <do> genérico, cadena vacía

name. Id de <do> label. Texto que aparece en el navegador, botón es título

<do>

Tareas<go/><prev/>. Página anterior del historial<noop/>. Ninguna tarea<refresh/> Actualización del contexto

Ejemplo<?xml version="1.0"?>><!DOCTYPE wml PUBLIC "-//WAPFORUM DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml><card id="c1" title="Carta 1">

<p> En este ejemplo, vamos a ver como navegar entre distintas cartas y barajas. Esta es la primera carta de esta baraja. Para acceder a la segunda, tenemos esta opcion:

<do type="accept" label="Ir a c2"> <go href="#c2"/>

</do></p></card><card id="c2" title="Carta 2">

<p> Ahora estamos en la segunda carta. Podemos volver a la primera, o podemos visitar la tercera, segun lo que elijas:

<do type="accept" label="Ir a c1" name="c1"> <go href="#c1"/>

</do> <do type="accept" label="Ir a c3" name="c3">

<go href="#c3"/> </do></p>

</card><card id="c3" title="Carta 3">

<p> Y ahora estamos en la tercera carta. Podemos regresar a la anterior, o puedes ir a la segunda baraja, para ver como moverte entre barajas.

<do type="prev"> <prev/>

</do> <do type="accept" label="Baraja 2">

<go href="Ej_naveg2.wml"/> </do></p>

</card></wml>

<card id="c2" title="Carta 2"><p> Ahora estamos en la segunda carta.

Podemos volver a la primera, o podemos visitar la tercera, segun lo que elijas:

<do type="accept" label="Ir a c1" name="c1"> <go href="#c1"/>

</do> <do type="accept" label="Ir a c3" name="c3">

<go href="#c3"/> </do></p>

<go/>

Parámetroshreft. URL a visitar, obligatorio, en la misma

carta # Ejemplo: <go href=#carta”/>

method. Enviar datos al servidor GET POST

Enlaces

Etiquetas pareadas: <anchor> ... </anchor> y <a> ... </a>

La etiqueta <anchor> Delimita un enlace

Todo lo que vaya dentro de ella será lo que forme parte del enlace.

No se deben anidar enlaces dentro anchor El parámetro title. Texto el cual identificará al enlace

<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml"><wml>

<card id="b1c1" title="Ej enlace 1"><p>

En esta pagina el anchor engloba el texto

<anchor title="enl1"> Segunda carta de esta baraja. <go href="#b1c2"/>

</anchor></p>

</card><card id="b1c2" title="Ej enlace 1">

<p> Venimos del enlace de la carta anterior. <anchor title="enl2">

Carta anterior. <prev/>

</anchor> <br/> <anchor title="enl3">

Siguiente baraja <go href="Ej_enlace2.wml"/>

</anchor></p>

</card></wml>

<anchor title="Carta 2">Carta 2<go href = "#c2"/>

</anchor><anchor title="Carta 3">

Carta 3<go href = "#c3"/>

</anchor>

Etiqueta <a> … </a>

<a> ... </a> Texto descriptivo para dicho enlace.

Parámetroshref: contendrá el URL de la página. title: será una etiqueta para poder seleccionar

el enlace en algunos dispositivos. Es recomendable no exceder de 6

caracteres.

Ejemplo <a>

<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml"><wml>

<card id="b2c1" title="Ej enlace 2"><p> Similar con anchor y go, pero abreviando con a:

<a href="Ej_enlace1.wml#b1c2">Volver a la otra baraja, carta 2

</a></p>

</card></wml>

<a href="#c1">Carta 1 <br/>

</a><a href="#c3">

Carta3 <br/></a><a href="file://D:/Archivos de

programa/Openwave/SDK 5.1/samples/pr2.wml">Otra Baraja <br/>

</a>

<card id="c1" title="Carta 1"><p>

Carta 1 <br/><anchor title="Carta 2">

Carta 2 <br/><go href = "#c2"/>

</anchor><anchor title="Carta 3">

Carta 3 <br/><go href = "#c3"/>

</anchor></p>

</card><card id="c2" title="Carta 2">

<p>

Carta 2 <br/><a href="#c1">

Carta 1 <br/></a><a href="#c3">

Carta3 <br/></a><a href="file://D:/Archivos de programa/Openwave/SDK 5.1/samples/pr2.wml">

Otra Baraja <br/></a>

</p></card><card id="c3" title="Carta 3">

<p>

Carta 3</p>

</card></wml>

Plantilla

La opción de la plantilla se aplicará a todas las cartas de la baraja. Etiqueta <template> ... </template>

Esta etiqueta define una plantilla para las cartas de una baraja.

Los eventos especificados se aplicarán a todas las cartas de la baraja, como si se aplicaran una a una.

Una carta dada puede sobreescribir el comportamiento definido en la etiqueta <template>.

Ejemplo template<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"><wml>

<template><p>

Plantilla de ejemplo <br/> <do type="prev" name="atras">

<prev/> </do>

</p></template><card id="c1" title="c1">

<p>Carta 1 con plantilla, do con name="atras" sobreescrito, y do adicional. <do type="accept" name="atras">

<noop/> </do> <do type="accept" name="sig">

<go href="#c2"/> </do>

</p></card><card id="c2" title="c2">

<p>Carta 2 con plantilla y do adicional que no sobreescribe al do de la plantilla. <do type="accept" name="sig">

<go href="#c3"/> </do>

</p></card><card id="c3" title="c3">

<p>Carta 3 con plantilla

</p></card></wml>

Eventos Hay algunas etiquetas WML en las que podemos

especificar una acción a realizar cuando se produzca un determinado evento, Evento intrínseco.

Asignar una tarea para que esta sea ejecutada cuando se de ese evento.

Esta asignación puede hacer de dos formas. Directa, es decir, dentro de la etiqueta que admite al evento, añadirlo

como un parámetro más y, tras un igual, poner entre comillas la URL a la que queremos acceder cuando suceda este evento

<card onterforward="Un_URL"><p>...la carta...</p> </card> Etiqueta pareada <onevent>. Se trata de una "versión" expandida de la

anterior, que permite un mayor control sobre el comportamiento del navegador.

Una etiqueta <onevent> debe llevar como parámetro type el tipo de evento que va a tratar, y dentro de las etiquetas se ha de especificar el tratamiento completo del evento

Evento intrínsecoEvento

Afecta a la(s)

etiqueta(s)Descripción

ontimercard,

template

Este evento se da cuando finaliza un temporizador. Los temporizadores son especificados usando la etiqueta

<timer>

onenterforward

card, template

• Este evento se da cuando el usuario escoge ver una carta vía la tarea go o cualquier otro método que cause un efecto similar.

• Esto incluye entrar en una carta mediante un script o por un enlace.

• Puede especificarse tanto en una carta concreta como en una plantilla.

• Si es en una plantilla, el evento será aplicado a todas las cartas salvo en aquella(s) en la(s) que se sobreescriba.

onenterbackward

card, template

• Este evento se da cuando el usuario escoge ver una carta vía la tarea prev o cualquier otro método que cause un efecto similar.

onpick option• Este evento se da cuando el usuario selecciona o

deselecciona un cierto elemento de una lista

Ejemplo de eventos<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"><wml>

<card id="c1" title="c1">

<onevent type="onenterforward"> <go href="#c3"/> </onevent>

<p>En esta carta se define un evento en su version expandida, con la etiqueta <onevent>

<do type="accept" name="delante"> <go href="#c2"/> </do>

</p></card><card id="c2" title="c2" onenterbackward="#c2"><p>

Esta carta es posesiva y no dejara avanzar hacia atras en algun caso.</p></card><card id="c3" title="c3"><p>

Una tercera carta</p></card>

</wml>

Input

La etiqueta <input/>. Esta etiqueta permite la entrada de texto, que puede

tener un formato a especificar en uno de sus parámetros.

Si los datos introducidos no obedecen este patrón, el navegador debe avisarlo y dar la opción de volver a introducir los datos.

No se debe inicializar el valor de la etiqueta <input> con un dato que no obedezca al formato dado.

Parámetros

name Especifica un nombre de variable sobre el que se dará un valor; El valor será la entrada del usuario.

value Indica un valor por defecto para la variable usada en name. Si este valor no obedece al formato, será ignorado.

type Especifica el tipo de entrada de datos. Puede tomar uno de los dos valores siguientes: text, password; siendo text el

valor por defecto. format

Este parámetro especifica una máscara de entrada para los datos del usuario. La cadena consiste en una serie de caracteres de control que a continuación

explicamos. El formato por defecto es "*M".

Variables El WML posibilita la utilización de variables dentro del código. Las variables se sustituyen por su valor, en caso de tener alguno.

En el siguiente ejemplo, se ve como se inicializa una variable y las diferentes formas de que se puede referenciar.

<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card title="Variables 1" id="ejemplo"><onevent type="onenterforward"><refresh><setvar name="var1" value="valor var1"/></refresh></onevent><p>Variables:<br/>$var1<br/>$(var1)<br/>$(var1:e)</p></card></wml>

Cont… Variables Se pueden utilizar la misma variable en diferentes cartas, variando su valor.<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card title="Variables 2" id="c1">

<onevent type="onenterforward"><refresh>

<setvar name="var1" value="Carta 1"/></refresh>

</onevent><p>

Estamos en:<br/>$var1<br/>

<a title="Siguiente" href="#c2">Siguiente</a></p>

</card><card title="Variables 2" id="c2">

<onevent type="onenterforward"><refresh>

<setvar name="var1" value="Carta 2"/></refresh>

</onevent><p>

Estamos en:<br/>$var1<br/><a title="Siguiente" href="#c1">Siguiente</a>

</p></card></wml>

Imágenes En los dispositivos móviles se permite la visualización de imágenes, pero éstas deben estar en formato WBMP o

JPG, en lugar de las utilizadas en HTML que pueden ser gif, jpg o bmp. También hay que indicar que entre los terminales móviles existen diferencias en cuanto al tipo de imágenes que soportan, por lo que se recomienda conocer el tipo de imágenes soportadas por el móvil con el que se va a trabajar. En el caso de simuladores no existen graves problemas con imágenes. Hay que tener en cuenta el tamaño de la página tras insertar una imagen, ya que en un terminal real puede dar error, porque se ha sobrepasado el tamaño, y en el simulador puede visionarse perfectamente.

Hay distintos medios para producir una imagen WBMP, una de ellas es crear las propias imágenes, para ello se puede utilizar el programa Generador WBMP. Además este programa permite convertir de un formato no soportado como gif, etc... a tipo wbmp.

La forma de introducir imágenes es la siguiente:<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"><wml><card title="IMAGEN" id="ejemplo">

<p><img src="logo.wbmp" alt="logo" /></p>

</card></wml> El atributo alt es obligatorio, es un texto alternativo a la imagen, ya que si esta no se puede visualizar

correctamente o el navegador no permite su visualización, se imprimirá este texto.

INPUT<wml><card id="c1" title="Ej_input">

<p>Introduce tu datos: <br/>Nombre: <input type="text" name="nombre" value="Lola"/> <br/>Apellidos: <input type="text" name="apellidos" value="Cardenas"/> <br/>Edad: <input type="text" name="edad" format="*N" maxlength="3"/> <br/>DNI: <input type="text" name="DNI" format="9N" emptyok="true"/></p>

</card></wml>

FormatosA Permite cualquier carácter alfabético (en mayúsculas) o de puntuación a Permite cualquier carácter alfabético (en minúsculas) o de puntuación N Carácter numérico X Carácter en mayúsculas x Carácter en minúsculas M Cualquier carácter. El navegador puede suponer, por simplicidad, que serán mayúsculas, pero

permitirá la entrada de cualquier carácter. m Cualquier carácter. El navegador puede suponer, por simplicidad, que serán minúsculas, pero

permitirá la entrada de cualquier carácter. *f Cualquier número de caracteres, donde f es uno de los formatos vistos anteriormente. Este formato

sólo puede aplicarse una vez y debe aparecer al final de la cadena de formatos.

Select

El elemento select permite al usuario escoger de una lista de opciones.

Cada opción está especificada por un elemento option que tiene una línea de texto formateado.

Se puede organizar los elementos option dentro de grupos jerarquizados usando el elemento optgroup.

Se debe incluir uno de los siguientes elementos al menos una vez dentro de un elemento select: optgroup option

Si el atributo iname existe, los índices de la variable denominada por el iname son usados para seleccionar la opción.

Si la variable especificada no está colocada, el índice se presume como 1.

Si algún índice es más grande que el número de opciones de la lista de selección, se selecciona la última opción.

Si el atributo iname no existe, pero si existe el atributo name, el valor de la variable especificada por name es utilizado para seleccionar las opciones.

Si la variable especificada por name no ha sido fijada o ningún elemento option tiene un atributo value emparejando el valor, se selecciona la primera opción.

Sintaxis multiple=boolean

Si se coloca este atributo con valor true, la lista de selección acepta múltiples selecciones. Si no se coloca, la lista de selección acepta solo una opción de selección simple. El valor por defecto es false.

name=nmtoken El atributo name indica el nombre de la variable que toma el valor del elemento elegido. La variable se fija con el valor de la cadena del elemento option elegido, el cual se especifica con el atributo value. El valor de la variable name se utiliza para preseleccionar opciones de la lista de selección.

value=vdata El atributo value indica el valor por defecto de la variable especificada por el atributo name. Si la variable especificada por el atributo name no tiene un valor cuando se muestra la carta, el terminal le asigna el valor especificado en el

atributo value. Si la variable name ya contiene un valor, se ignora el atributo value. Hay que señalar que cualquier aplicación del valor por defecto se realiza

antes de que la lista sea preselecciónala con el valor de la variable name. Si este elemento permite la selección de múltiples opciones, el resultado de la elección del usuario es una lista de todos los valores

seleccionados, separados por puntos y aparte. A la variable name se le asigna este resultado. Además el atributo value se interpreta como una lista de opciones de preselección separados por puntos y aparte.

iname=nmtoken El atributo iname indica el nombre de una variable que contiene un numero de índice. El terminal del usuario utiliza el numero de ¡índice para colocar la opción por defecto. El numero 1 especifica el primer articulo, el numero 2 el

segundo, y as¡ sucesivamente. Un numero cero de índice indica que no se selecciona ninguna opción. La numeración del ¡índice empieza en uno y se incrementa monótonamente.

ivalue=vdata El atributo ivalue indica que el índice de el elemento option se selecciona por defecto. Si la variable especificada por el atributo iname no está fijada cuando la carta es mostrada, se le asigna la entrada seleccionada por defecto.

Si la variable ya contiene un valor, se ignora el atributo ivalue. Si el atributo iname no está especificado, el valor ivalue se aplica cada vez que se muestra la carta.

Si este elemento permite la selección de múltiples opciones, el ¡índice que resulta de la elección del usuario es una lista de los índices de todas las opciones seleccionadas, separados por puntos y aparte (por ej. 1;2). La variable iname se coloca con este resultado. Además, el atributo ivalue se interpreta como una lista de opciones preselecciónalas separadas por puntos y coma.

title=vdata Este atributo especifica un título para el elemento select, el cual puede usarse en la presentación de este objeto.

tabindex=number El elemento tabindex especifica la posición "tabbing" del elemento actual. Esta posición indica el orden relativo en el cual los elementos son

atravesados cuando se va dentro de una carta simple de WML. Un valor tabindex numéricamente mayor indica un elemento que va después en la secuencia que un elemento con un valor menor.

Ejemplos

<wml><card>

<p>Selecciona <i>t</i> tus números favoritos:<select name="X" iname="I" ivalue="1;2" multiple="true">

<option value=“U">UNO</option><option value=“D">DOS</option><option value=“T">TRES</option>

</select></p>

</card></wml>

Ejemplo

<wml><card>

<p>Selecciona tu número favorito:<select name="X">

<option value=“U">UNO</option><option value=“D">DOS</option>

</select></p>

</card></wml>

Ejemplo

<wml><card>

<p>Selecciona tu número favorito:<select iname="I" ivalue="1">

<option value=“U">UNO</option><option value=“D">DOS</option>

</select></p>

</card></wml>

Ejemplo optgroup<wml>

<card id="card1" title=“Pais"><p>

Selecciona una país<select name=“pais" multiple="true" tabindex="2">

<optgroup title=“Mexico"><option value=“U">UNO</option><option value=“D">DOS</option>

</optgroup><optgroup title=“Puerto Rico">

<option value =“tr">TRES </option><option value =“cua">CUATRO</option><option value =“cin">CINCO </option>

</optgroup></select>

</p></card>

</wml>

WMLS<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//OPENWAVE.COM//DTD WML 1.3//EN" "http://www.openwave.com/dtd/wml13.dtd">



<wml> <card id="monedas" title="Conversor" newcontext="true">

<p>Pesos a dólares</p> <p><input type="text" name="cantidad" title="Cantidad: " format="*N"/></p> <p>Tipo de cambio</p><p><input type="text" name="cambio" title="Tipo de cambio " format="*N"/></p> <p>

<do type="accept"> <go href="ej18.wmls#calcular('$(cantidad)','$(cambio)')"/>

</do> </p> <p> Resultado: $(resultado)</p>

</card> </wml>

/* WMLScript file created by the Openwave SDK */extern function calcular(cantidad,cambio) {

var dolar = (cantidad/cambio); var dolarString = String.toString(dolar); dolarString = String.format("%.2f",

dolarString);

WMLBrowser.setVar("resultado", dolarString);

WMLBrowser.refresh(); }

Librerías

El WmlScript tiene seis librerías con sus funciones, que nos permitirán hacer muchas cosas: Lang

Funciones de aritméticas Float

Funciones para manejar números con decimales no todos los browsers soportan esta librería, porque hay algunos dispositivos que sólo admiten

números enteros String

Funciones para manejar cadenas de texto URL

Funciones para manejar URLs WMLBrowser

Funciones para leer y escribir variables WML y ejecutar algunas tareas WML Dialogs

Funciones para diálogos Mensajes en la pantalla que esperan una respuesta del usuario

wml wireless markup languaje. wml cualquier editor de textos servidor de páginas wml configurar...

Documents