1

Introducción a
WML: Wireless Markup Language
Ignacio Soto Campos
Universidad Carlos III de Madrid
2
¿Qué es WAP?
Especificación de protocolos (Wireless Application
Protocol) que permiten el acceso a Internet desde
terminales inalámbricos, y la creación de contenidos y
aplicaciones para estos terminales, teniendo en cuenta las
particularidades de este medio
El WAP forum, fundado por Nokia, Ericsson, Motorola, y
Unwired Planet (hoy Openwave), es la organización que
está detrás de estos protocolos
WAP 1.0, WAP 1.1, WAP 1.2, WAP J une2000, WAP 2.0
3
Modelo de programación WAP
Agente de
Usuario
WAE
Cliente
Codificadores
Y
Decodificadores
WAP Gateway
Programas CGI
Servlets
Contenidos
Servidor
Solicitud codificada (1)
Respuesta codificada (4)
Solicitud URL (2)
Respuesta (3)
4
Arquitectura WAP: WAE
WAE – Wireless Application Environment
Es el que más concierne a programadores de
aplicaciones WAP
Compuesto por las definiciones de WML y WMLScript
necesarias para escribir aplicaciones WAP, las APIs
para acceder a funciones de telefonía (WTA) desde los
programas WAE, y una serie de formatos de contenido
bien definidos
5
Componentes del WAE (I)
Un micronavegador:
Ofrece mecanismos para hacer solicitudes y recibir respuestas
siguiendo el modelo de programación WAP
Incluye intérpretes de WML y WMLScript
Capacidades adicionales como memoria caché
Wireless Markup Language:
Soporta texto e imágenes, permite la introducción de datos por
parte de usuarios, ofrece mecanismos de navegación, soporte para
diferentes lenguas por medio del uso de caracteres Unicode,
permite gestión de contexto (soporta variables cuya vida es mayor
que la de documentos particulares)
6
Componentes del WAE (II)
WMLScript
Lenguaje de guiones procedimental (similar a
J avaScript)
Complementa a WML, ofreciendo capacidad de
procesamiento
Permite crear funciones que pueden ser llamadas desde
documentos WML, y que van a ser ejecutadas en el
terminal WAP
Lenguaje extensible por medio de librerías
7
Componentes del WAE (III)
Soporte para gráficos WBMP (Wireless BitMaP)
Wireless Telephony Application Interface
API que permite acceder a funciones telefónicas desde documentos
WML o WMLScript
Los operadores pueden usar este tipo de documentos para crear
aplicaciones telefónicas en lugar de incluirlas en la ROM del
teléfono, haciendo más sencilla la distribución y actualización
Además de estos componentes, el WAE asume la existencia de
un WAP gateway que traduce entre protocolos WAP y
protocolos Internet; y, en particular, entre WSP, y solicitudes y
respuestas HTTP.
8
Creando aplicaciones WAP
WAP Software Developer’s Kit (SDK)
Nokia, Ericsson, Openwave, ...
Servidor Web que proporcione los contenidos:
SDK =terminal WAP +codificadores WML y
WMLScript
Tipo MIME Extensión __
text/vnd.wap.wml wml Código WML
text/vnd.wap.wmlscript wmls Código WMLScript
application/vnd.wap.wml-wbxml wmlc WML compilado
application/vnd.wap.wmlscriptc wmlsc WMLScript compilado
image/vnd.wap.wmpb wbmp Wireless bitmap
9
Wireless Markup Language
Lenguaje similar a HTML
Un documento WML está formado por un conjunto de
elementos con la siguiente sintaxis:
<elemento lista_de_atributos_del_elemento>
contenido
</elemento>
ó
<elemento />
Atributos opcionales para todos los elementos WML: wml:lang,
id, y class
10
Wireless Markup Language
Comentarios:
<!-- Esto es un comentario -->
Los documentos WML se denominan “decks”.
Son la menor unidad WML que es transmitida a
un terminal móvil. Un deck se referencia mediante
un URL.
El desarrollador de aplicaciones debe valorar el
tamaño del deck
11
Wireless Markup Language
Los documentos WML son aplicaciones XML, lo
que se debe identificar mediante un preámbulo que
hay que incluir en todos los decks:
<?xml version =“1.0”?>
<!DOCTYPE wml PUBLIC “_//WAPFORUM//DTD WML 1.1//EN”
“http://www.wapforum.org/DTD/wml_1.1.xml”>
12
Wireless Markup Language: decks
<wml>
<head>
Información de cabecera que afecta al deck en conjunto
</head>
<template>
Indica, para todo el deck, cómo se tratan ciertos eventos
</template>
<card>
Define la interfaz de usuario y la lógica de procesamiento del deck
</card>
... Opcionalmente más cards
</wml>
13
WML: HEAD
<head>
<access>, <meta>
</head>
<access
domain=“STRING”
path=“STRING”
/>
El elemento accesspermite definir
restricciones de acceso a un deck
desde otro
14
WML: <meta>
<meta
http-equiv=“STRING” nombre de cabecera HTTP
name=“STRING” Otra meta-información(ignorada por el AU)
forua=“true | false” ¿Enviar la meta-información al cliente?
content=“STRING” El valor dehttp-equiv o name
scheme=“STRING” /> Informaciónsecundaria
El elemento <meta>permite transmitir meta-información
sobre un deck. Un elemento <meta> sólo puede tener un
atributo http-equiv o un name pero no ambos.
15
WML: <card>
En ellas se define contenido, información de
formateo, e instrucciones de procesamiento
Una <card> se referencia mediante un URL:
URL_card=URL_deck#id_card
Al recibir un deck, el terminal WAP normalmente
presentará la primera de las cards de ese deck.
16
WML: <card>
<card
id=“ID” Identificador de la card
newcontext=“true | false” ¿Borrar variables de estado y pila de URLs?
onenterbackward=“URL” URL a ir si se llega al card mediante un <prev>
onenterforward=“URL” URL a ir si se llega al card mediante un <go>
ontimer=“URL” URL a ir si expira el elemento <timer>
ordered=“true | false” ¿Son los elementos de la card una lista?
title=“STRING + referencia a variables” > Etiqueta de la card
<onevent>, <do>, <p>, <timer>
</card>
17
WML: <p>
<p
align = “left | center |right” Alineado del texto
mode = “wrap | nowrap” Forma de tratar una línea que sale
por el borde derecho de la pantalla
>
<a>, <anchor>, <br>, <do>, <img>, <table>, texto, elementos de
formateo de texto, elementos para entrada de datos
</p>
Elementos de formateo de texto: <em>, <strong>, <b>, <i>, <u>, <big>,
<small>
En general, los espacios de más en el texto son ignorados
<br/>es un elemento para que se pase a una nueva línea en el terminal WAP
18
WML: “Hola mundo”
<wml>
<card>
<p>
Hola Mundo.
</p>
</card>
</wml>
19
WML: Tablas
<table
align = “STRING” Un carácter por columna: L (izq.), C
(centro), o R (derecha)
columns = “number”
title = “STRING + variables” Nombre de la tabla
>
<tr> Comienzo de fila
<td>...</td> Contenido del elemento de una columna de la fila
<td>...</td></tr>
<tr> <td>...</td> <td>...</td></tr>
</table>
20
WML: Tablas, ejemplo
<wml>
<card>
<p>
<table columns=“2”>
<tr><td>Uno </td><td>Dos </td></tr>
<tr><td>1</td></tr>
<tr><td/><td>B</td><td>C<br>D</td></tr>
</table>
</p>
</card>
</wml>
Uno Dos
1
B C
D
21
WML: imágenes
<img
align = “top | middle | bottom”
alt = “STRING + variables” Texto alternativo a la imagen
height = “LENGTH” En pixels o % de la pantalla
hspace = “LENGTH”
localsrc = “STRING + variables” Imagen local
src = “URL”
vspace = “LENGTH”
width = “LENGTH”
/>
22
WML: Variables
Al revés que HTML, en WML es posible definir variables,
asignarles valores, y utilizarlas en expresiones. Su vida no
depende del documento donde se crean se pueden usar
para pasar información entre decks
<setvar
name = “STRING + variables” Nombre de la variable
value = “STRING + variables” Valor de la variable
/>
Para referirse a una variable se usa: $nombre_de_variable,
$(nombre_de_variable), ó$(nombre_de_variable:conversion)
23
WML: Tareas
Las tareas especifican acciones a tomar como
resultado de eventos
Cuatro tipos:
1. <noop> No hace nada
2. <prev> Navega a la card previa de la pila de
cards recorridos por el terminal WAP
<setvar> Se ejecuta antes de realizar la navegación
</prev>
24
WML: Tareas
Tipos de tareas (continuación):
3. <refresh> Refresca los contenidos visibles del terminal WAP,
y reinicia temporizadores.
<setvar> Se procesa antes de refrescar los contenidos
</refresh>
4. <go Permite navegar a un deck o a una card
accept-charset = “STRING” Codificación/es de caracteres
para transmitir que el servidor de
contenido entiende
href = “URL” URL destino
method = “post | get” Método HTTP de la solicitud
sendreferer= “true | false” > ¿Intentar utilizar URL’s relativos?
<postfield>, <setvar>
</go>
25
WML: Tareas, <postfield>
<postfield Permite enviar datos al servidor
name = “STRING + variables”
value = “STRING + variables”
/>
Ejemplos:
<go href=“/foo.cgi”> <!-- Hace un HTTP GET a “/foo.cgi?x=1” -->
<postfield name=“x” value=“1”/>
</go>
<go href=“/bar.cgi” method=“post”> <!-- Envía HTTP POST a
“/bar.cgi” con una entidad
message que contiene
“w=12&y=test” -->
<postfield name=“w” value=“12”/>
<postfield name=“y” value=“test”/>
</go>
26
WML: Eventos, <anchor>
Las tareas se asocian a eventos que definen
cuándo deben ejecutarse. Se hace mediante
diversos elementos:
<anchor
title = “STRING + variables”
>
<br>, <img>, texto, <go>, <prev>, <refresh>
</anchor>
<anchor> especifica un enlace en el documento WML. Si se
selecciona, la tarea indicada en el contenido (sólo puede haber un
<go>, <prev>, o <refresh>) resulta ejecutada. La manera de señalar el
enlace y de seleccionarlo depende del terminal WAP.
27
WML: Eventos, <a>
Una forma simplificada de <anchor>:
<a href=“URL”
title=“STRING + variables” >
<br>, <img>, texto
</a>
Que es equivalente a un <anchor> en el que la tarea es un <go>
28
WML: Eventos, ejemplo de <a>
<wml>
<card id = “tarjeta1” > <!-- Card 1 -->
<p>
¿<a href=“#tarjeta2”>Vienes</a> o <a href=“#tarjeta3”>te
vas</a>?
</p>
</card>
<card id = “tarjeta2”> <!-- Card 2 -->
<p>
¡Hola!
</p>
</card>
<card id = “tarjeta3”> <!-- Card 3 -->
<p>
¡Adiós!
</p>
</card>
</wml>
29
WML: Eventos intrínsecos
Los eventos intrínsecos son consecuencia del
procesamiento interno del Agente de usuario. Son:
Evento Elementos Descripción
ontimer card,template Ocurre cuando expira un temporizador
previamente definido con <timer>
onenterforward card,template Ocurre cuando el usuario hace al agente
entrar en una <card> con <go> o similar
onenterbackward card,template Ocurre cuando el usuario hace al agente
entrar en una <card> con la tarea <prev>
onpick option Ocurre cuando el usuario selecciona o
deselecciona una opción del elemento
<option>
30
WML: Eventos intrínsecos
Es posible capturar los eventos intrínsecos
utilizando el elemento <onevent>
<onevent
type=“onenterforward | onenterbackward | ontimer | onpick” >
<go>, <noop>, <prev>, <refresh>
</onevent>
31
WML: Eventos intrínsecos
Ejemplo modo 1:
<card onenterforward=“URL”> <p> Hola </p> </card>
Ejemplo modo 2:
<card>
<onevent type=“onenterforward”>
<go href=“URL”>
</onevent>
<p> Hola </p>
</card>
32
WML: Temporizadores
<timer
name=“STRING de dígitos, letras, y/o subrayados”
value=“STRING + variables”
/>
Define un temporizador que se inicializa al entrar en la card
correspondiente y se para al abandonarla. name contiene el nombre de
una variable que, a su vez, contiene el valor en décimas de segundo del
temporizador. value es el valor en décimas de segundo del
temporizador pero sólo se usa si la variable contenida en name no está
definida.
33
WML: Temporizadores, ejemplo
<wml>
<card id=“tarjeta1” ontimer=“#tarjeta2”>
<timer value=“100” />
<p>
Hola mundo
</p>
</card>
<card id=“tarjeta2”>
<p> Adiós. </p>
</card>
</wml>
34
WML: Eventos generados por el ususario
La especificación WAP define que un terminal
WAP debe ofrecer al usuario la forma de señalar
una serie de órdenes. Puede ser mediante botones
específicos, menús, etc. Las ordenes son:
accept, prev, help, reset, options, delete, yunknown
El programador de aplicaciones captura las señales
y define la tarea a realizar. Lo hace mediante el
elemento <do>
35
WML: Eventos generados por el usuario
<do
type = “accept | prev | help | reset | options | delete | unknown”
label = “STRING + variables” Etiqueta que el terminal WAP
usarápara identificar la acción
name = “Nombre con letras, dígitos, y/o subrayados”
optional = “true | false” Indica si el terminal WAP puede
ignorar este elemento
>
<go> | <noop> | <prev> | <refresh>
</do>
El name identifica de forma única el enlace entre el evento y la tarea.
Si no se especifica, se usa el type. No puede haber dos <do> con el mismo
name en una misma <card>. Un <do> en una tarjeta (<card>) tiene
preferencia sobre un <do> en un <deck>
36
WML: Eventos a nivel de deck
Se definen dentro del elemento <template> del
deck
Se pueden utilizar elementos <onevent> y <do>
Valen para todo el deck (cualquier card)
<template
onenterbackward = “URL”
onenterforward = “URL”
ontimer = “URL” >
<do>, <onevent>
</template>
37
WML: Eventos a nivel de deck vs. card
<wml>
<template>
<do type=“options” name=“do1” label=“default”>
<prev/>
</do>
</template>
<card id=“first”>
<!-- Aquí no defino un <do> por lo que uso el del template -->
<!-- resto del card -->
</card>
<card id=“second”>
<!-- El <do> de nivel-deck es redefinido por un noop luego no se hace nada -->
<do type=“options” name=“do1”>
<noop/>
</do>
...
</card>
</wml>
38
WML: Entrada de datos
Los teléfonos móviles tienen un teclado limitado lo que debe
tenerse presente al crear aplicaciones
<input
emptyok = “true | false” ¿Puede no introducirse datos?
format = “STRING” Especifica formato
maxlength = “NUMBER” Máximo número de caracteres de la entrada
name = “STRING de letras, dígitos, y/o subrayados”
size = “NUMBER” Tamaño en caracteres de la ventana de entrada
tabindex = “NUMBER” Orden dentro de las entradas de datos de la card
title = “STRING + variables” Para presentar la entrada de datos
type = “text + passwd” Indica cómo es el eco de caracteres
value = “STRING + variables” Valor por defecto si no existe previamente name
</input>
namees el nombre de la variable a la que se asignan los datos introducidos. Si la
variable ya existía, su valor se usa como valor por defecto de la entrada.
39
WML: Entrada de datos, ejemplo
Ejemplo:
<card>
<p>
Login: <input type=“text” name=“login”/> </br/>
Password: <input type=“password” name=“pass”/>
</p>
</card>
40
WML: Entradas agrupadas
Se pueden agrupar <input>’s mediante el
elemento <fieldset>:
<fieldset
title = “STRING + variables” >
<a>, <anchor>, <input>, <fieldset>, <do>, texto, órdenes de
formateo de texto, <img>, <table>
</fieldset>
41
WML: Entradas agrupadas, ejemplo
<wml> <card>
<p>
<do type=“accept”>
<go href=“/enviar.cgi?f=$(fname)&amp;l=$(lname)&amp;s=$(sex)”/>
</do>
<fieldset title=“Nombre”>
Nombre: <input type=“text” name=“fname” maxlength=“32”/>
Apellidos: <input type=“text” name=“lname” maxlength=“32”/>
</fieldset>
<fieldset title=“Info”>
<select name=“sex”>
<option value=“H” >Hembra</option>
<option value=“V”>Varón</option>
</select><br/>
</fieldset>
</p>
</card></wml>
42
WML: Opciones
El elemento <select>permite ofrecer una serie de opciones
al ususario para que elija una o más:
<select
iname=“STRING con letras, dígitos, y subrayados”
ivalue=“STRING+variables”
multiple=“true | false”
name=“STRING con letras, dígitos, y subrayados”
tabindex=“NUMBER”
title=“STRING+variables”
value=“STRING+variables”>
<optgroup>, <option>
</select>
43
WML: Opciones
1. iname =nombre de la variable que es fijada al índice o
índices de las opciones elegidas por el usuario
2. ivalue =índice de la opción por defecto, sólo se usa si la
variable definida en iname no existía
3. multiple =indica si es posible elegir varias opciones
4. name =nombre de la variable que se fija al valor de la
selección o selecciones hechas por el usuario
5. tabindex =orden en la card
6. title =se puede usar para presentar el elemento
7. value =valor por defecto de la variable contenida en
name. Sólo se usa si esa variable no tenía un valor previo
44
WML: Opciones, <option>
Un elemento <select>debe contener dos o más
<option>que definen las posibles opciones:
<option
onpick = “URL” Se va al URL al seleccionar esta opción
title = “STRING + variables” Para presentarla
value = “STRING + variables” Este valor se usa para fijar el valor de
la variable name del <select> si el
usuario selecciona esta opción
>
texto, <onevent>
</option>
45
WML: Opciones, ejemplo
<card id=“deportes”>
<p>
Selecciona tu deporte favorito: <br/>
<select name=“deporte”>
<option value=“fútbol”>Fútbol</option>
<option value=“baloncesto”>Baloncesto</option>
<option value=“natación”>Natación</option>
</select>
</p>
</card>
46
WML: Opciones agrupadas
<optgroup> permite agrupar opciones:
<optgroup
title = “STRING + variables”
>
<optgroup>, <option>
</optgroup>
47
WML: Opciones agrupadas, ejemplo
<select name=“deporte”
<optgroup title=“Motor”>
<option value=“motos”>Motos</option>
<option value=“fórmula 1”>Fórmula 1</option>
</optgroup>
<optgroup title=“Equipo”>
<option value=“fútbol”>Fútbol</option>
<option value=“baloncesto”>Baloncesto</option>
</optgroup>
</select>
48
WAP, ¿Qué más?
WMLScript
Servidores, contenido dinámico: CGI’s,
J avaservlets
Control de memoria Caché
...
49
Referencias
Programming Applications with the Wireless Application
Protocol; Steve Mann; J ohn Wiley & Sons, 2000.
WAP forum: http://www.wapforum.org(los documentos
de referencia de WAP están disponibles desde esta URL)
Understanding WAP: wireless applications, devices and
services; Marcel van der Heijden, Marcus Taylor (editors);
Artech House, 2000.
Desde http://www.ericsson.com, http://www.nokia.com, y
http://www.openwave.com, es posible conseguir SDKs.