Le WML

Avertissement :

Ce cours de DESS d'informatique de l'Université de Picardie Jules Verne n'est qu'une présentation (3H de cours/TD/TP) du WML, langage du WAP.
Récupérez le présent cours et ses sources "zippés".

didier Ferment
didier.Ferment@u-picardie.fr
dernière modification le 9 Janvier 2001

0. Introduction, glossaire, environnement de developpement:

Wap Wireless Application Protocol, protocole standardisé d'application sans fil développé par le Wap Forum
l'architecture Wireless Application Environment :
- Le terminal (téléphone mobile ou assistant personnel) interprète les langages WML (wireless markup language) sorte de XHTML léger, les images au format WBMP, le WMLScript espèce de JavaScript, grace à l'application "wml user-agent"; une autre application, le "wta user-agent", gère l'aspect téléphonique, c'est à dire les services du WTA (wireless telephony application) : appel sur un numero, le "make call", href="wtai://wp/mc;+33322827272" ou dand le futur, la localisation géographique.
- Le terminal est connecté via un réseau de téléphonie mobile à une passerelle wap (en général, celle de votre opérateur téléphonique). La communication est encodée binaire pour limiter les transferts; le débit du réseau GSM est de 9,6 Kpbs; 2 évolutions sont prévues : le GPRS (general packet radio services) pour des débits de données de 115Kbps, puis l'UMTS (universal mobile telecommunications system).
- La passerelle est un serveur relié d'un coté au réseau GSM, GPRS, ... et de l'autre à Internet, donc aux divers serveurs Web. De plus, certains opérateurs de téléphonie mobile configurent la passerelle pour qu'elle restreigne l'accès aux sites qu'elles autorisent, c'est à dire leur galerie marchande virtuelle !!
- Coté serveur, il est possible de générer du WML à la volée avec Perl, PHP, ...
Le WAE définit 5 couches :
- application : WML, WTA, adressage d'URI, ...
- session : WSP pull ou push en mode connectré ou non
- transaction : WTP (fiabilité)
- sécurité WTLS (sorte de SSL) authentification, secret, ..
- transport WDP indépendant du type de réseau téléphonique
Le kit de developpement :
1. récupérez le kit gratuit auprès de Phone.com
2. installez-le
3. récupérez tous les fichiers wml
4. essayer le UP SDK en fournissant comme location :
  file://chemin/essai0.wml

1. deck, card, p, nowrap, entity

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
			"http://www.phone.com/dtd/wml11.dtd" > 
<!--  essai1.wml  -->
<!--  deck, card, p, nowrap, entity -->
<wml>
   <card>
	<p>voici le paragraphe court</p>
      <p>voici le paragraphe tres tres long, 
         je dirais meme trop trop long, beaucoup trop long
      </p>
      <p mode="nowrap">voici un paragraphe en mode 
         "nowrap" qui est fort long aussi.
      </p>
      <p>voici une ligne<br/>
         et une autre <b>en gras</b><br/>
         &amp;&nbsp;&nbsp;&nbsp; la derniere
      </p>
   </card>
</wml>

c'est du XML
la DTD est normalement : "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/dtd/wml_1.1.xml"mais le kit de Phone.com fait ce qu'il veut !!
Un "deck" (fichier/document wml) est composé de card (page) .
La card est affichée sur un écran de 5 à 6 lignes d'environ 25 caractères.
le mode "nowrap" (pas de passage à la ligne) nécessite une technique particulière d'affichage.
les entités (exemple  ) sont celles de XML
le fichier wml est par défaut en UTF8, ce qui ne pose pas de problème pour les caractères non ascii.

2. card, a

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
			"http://www.phone.com/dtd/wml11.dtd" > 
<!--  essai2.wml  -->
<!--  card, a -->
<wml>
   <card id="carte1">
	<p>voici la carte1</p>
      <p>voici le lien pour <a href="#carte2">la carte2</a> </p>
      <p>voici le lien pour <a href="#carte3">la carte3</a> </p> 
   </card>
   <card id="carte2">
	<p>voici la carte2</p>
      <p>voici le lien pour <a href="#carte1">la carte1</a> </p>
      <p>voici le lien pour <a href="#carte3">la carte3</a> </p>
   </card>
   <card id="carte3">
	<p>voici la carte3</p>
      <p>debrouillez-vous pour revenir a la carte1</p>
   </card>
</wml>

les cartes peuvent avoir un attribut ID

3. do, accept, go

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
			"http://www.phone.com/dtd/wml11.dtd" > 
<!--  essai3.wml  -->
<!--  do, accept, go -->
<wml>
   <card id="carte1">
      <do type="accept">
         <go href="#carte2"/>
      </do>
	<p>voici la carte1</p>
      <p>acceptez-vous d'aller en carte2 ?</p>
   </card>
   <card id="carte2">
	<p>voici la carte2</p>
   </card>
</wml>

l'élément do définit le comportement de la carte
appuyer sur la touche de validation OK chargera la carte 2 sur la pile des cards (history)

4. label, prev

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
			"http://www.phone.com/dtd/wml11.dtd" > 
<!--  essai4.wml  -->
<!--  label, prev -->
<wml>
   <card id="carte1">
      <do type="accept">
         <go href="#carte2"/>
      </do>
	<p>voici la carte1</p>
      <p>acceptez-vous d'aller en carte2 ?</p>
   </card>
   <card id="carte2">
      <do type="accept" label="ACCEPT">
         <go href="#carte3"/>
      </do>
      <do type="prev">
         <go href="#carte1"/>
      </do>
	<p>voici la carte2</p>
      <p>acceptez-vous d'aller en carte3 ?</p>
   </card>
   <card id="carte3">
      <do type="prev">
         <go href="#carte1"/>
      </do>
	<p>voici la carte3</p>
   </card>
</wml>

le label précise l'action de la touche de validation
le comportement prev s'obtient en appuyant sur la touche back
par défaut, l'action associé à prev est de dépilement de la pile history des cards

5. template, img

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
			"http://www.phone.com/dtd/wml11.dtd" > 
<!--  essai5.wml  -->
<!--  template, img -->
<wml>
   <template>
      <do type="prev">
         <go href='#carte1'/>
      </do>
   </template>
   <card id="carte1">
      <do type="accept">
         <go href="#carte2"/>
         <img localsrc="righthand" alt="ACCEPT" src=""/>
      </do>
	<p>voici la carte1</p>
      <p>acceptez-vous d'aller en carte2 ?</p>
   </card>
   <card id="carte2">
      <do type="accept">
         <go href="#carte3"/>
      </do>
	<p>voici la carte2</p>
      <p>acceptez-vous d'aller en carte3 ?</p>
   </card>
   <card id="carte3">
      <do type="accept">
         <go href="#carte4"/>
      </do>
	<p>voici la carte3</p>
      <p>acceptez-vous d'aller en carte4 ?</p>
   </card>
   <card id="carte4">
      <do type="prev">
         <go href="#carte2"/>
      </do>
	<p>voici la carte4 qui retourne&nbsp;
         <img src="./smile.bmp" alt="sourire"/>
         &nbsp;en carte2</p>
   </card>
</wml>

template définit le comportement par défaut pour les cards du deck.
image utilise d'abord l'attribut localsrc s'il existe puis src pour définir son fichier de contenu.

6. options, selection

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
			"http://www.phone.com/dtd/wml11.dtd" > 
<!--  essai6.wml  -->
<!--  options, selection -->
<wml>
   <card id="carte1">
      <do type="accept" label="ACCEPT">
         <go href="#carte2"/>
      </do>
      <do type="options" label="AUTRE">
         <go href="#carte_autre"/>
      </do>
	<p>voici la carte1</p>
      <p>acceptez-vous d'aller en carte2 ?</p>
   </card>
   <card id="carte2">
	<p>voici la carte2
	   <select>
	      <option onpick="#carte3">vers la carte3</option>
	      <option onpick="#carte4">vers la carte4</option>
	   </select>
      </p>
   </card>
   <card id="carte3">
	<p>voici la carte3</p>
   </card>
   <card id="carte4">
	<p>voici la carte4</p>
   </card>
   <card id="carte_autre">
	<p>voici la carte_autre</p>
   </card>
</wml>

le comportement options est particulier au constructeur qui offre une 2ème touche de validation
la selection utilise içi l'attribut onpick qui est activé par l'événement de validation de la sélection en cours.

7. variable, input

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
			"http://www.phone.com/dtd/wml11.dtd" > 
<!--  essai7.wml  -->
<!--  variable, input -->
<wml>
   <card id="carte1">
      <do type="accept" label="ACCEPT">
         <go href="#$carte_choisie"/>
      </do>
      <p>donnez vos 2 initiales en majuscules
         <input format="AA" name="initiales"/>
      </p>
	<p>donnez une carte de destination (c2 ou c3) 
         <input format="aN" name="carte_choisie"/>
      </p>
   </card>
   <card id="c2">
	<p>voici la carte c2<br/>
         et vos initiales $initiales
      </p>
   </card>
   <card id="c3">
	<p>voici la carte c3<br/>
         et vos initiales $initiales
      </p>
   </card>
</wml>

plusieures lettres de spécification de format d'entrée : a(lettre minuscule), A(lettre majuscule), N(un chiffre), x(minuscule ou numeric), X, m ou M (n'importe quel caractère), *M (plusieures fois), 2AmX (une combinaison, ...
possibilité d'utiliser la valeur ($) d'une variable dans une URI

8. setvar, select, refresh

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
			"http://www.phone.com/dtd/wml11.dtd" > 
<!--  essai8.wml  -->
<!--  setvar, select, refresh -->
<wml>
   <card id="carte1">
      <do type="accept" label="OUI">
         <go href="#carte_glace"/>
      </do>
	<p> voulez-vous une glace ?<br/>
          combien de boules ?
          <input format="N" name="nombre"/>
      </p>
   </card>
   <card id="carte_glace">
      <do type="accept" label="MANGER">
         <go href="#carte_miam"/>
      </do>
	<p>quel parfum ?
       <select name="parfum" ivalue="1">
		 <option  value="fraise">fraise</option>
		 <option  value="banane">banane</option>
	   </select>
      </p>
   </card>
   <card id="carte_miam">
      <do type="options" label="CLEAR">
         <refresh>
            <setvar name="parfum" value="vanille"/>
            <setvar name="nombre" value="1"/>
         </refresh>
      </do>
	<p> je mange une glace de $nombre boules au parfum $parfum</p>
   </card>
</wml>

dans un choix "select", la valeur par défaut est déterminée par l'index "ivalue";
la première option est d'index 1; la selection est par défaut unique
refresh applique les "setvar" et réinitialise le timer de la carte s'il y a.

9. select multiple, timer, event

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
			"http://www.phone.com/dtd/wml11.dtd" > 
<!--  essai9.wml  -->
<!--  select multiple, timer, event -->
<wml>
   <card id="carte1">
      <do type="accept" label="CHOIX">
         <go href="#carte_choix"/>
      </do>
	<p> choisir l'apres mort ?<br/>
      </p>
   </card>
   <card id="carte_choix">
      <onevent type="ontimer">
         <prev/>
      </onevent>
      <onevent type="onenterbackward">
         <prev/>
      </onevent>
      <timer value="100"/>
      <do type="accept" label="C'EST FAIT">
         <go href="#carte_definitive"/>
      </do>
	<p>quel choix ? (5 secondes !!)
      <select name="apres_mort" multiple="true" ivalue="1;3">
		<option  value="paradis">paradis</option>
		<option  value="enfer">enfer</option>
		<option  value="re-incarnation">re-incarnation</option>
		<option  value="nean">nean</option>
		<option  value="immortalite">immortalite</option>
	   </select>
      </p>
   </card>
   <card id="carte_definitive">
	<p>votre choix est $apres_mort<br/>
         revenez en arriere (back)
      </p>
   </card>
</wml>

le select est multiple avec plusieures valeurs par défaut
le timer est uniquement local à la carte: il démarre dès que la carte est au top de la pile history;
si le compte à rebours est atteint, il provoque l'événement "ontimer"
4 événements :
- des élément card et template :
  - ontimer
  - onenterbackward ("arrivé dans le deck par une action back")
  - onenterforward ("arrivé dans le deck par une action go")
- de l'élément option
  - onpick (sélection d'un item)

Retour à ma homepage
Retour à la page d'accueil de l'Université de Picardie Jules Verne