Sei in: Office - Una risposta su... - Sul WML
Come iniziare
Tanto per incominciare bisogna sapere che il wml è diverso dall'html in alcuni aspetti, prima di tutto l'impostazione della pagina, poiché mentre nell'html l'impostazione della pagina è:
<head>
<title></title>
</head>
<body>
</body>
</html>
Innanzitutto il tag (comando) iniziale HTML serve al browser per capire
che il linguaggio è html.
Poi il tag HEAD da inizio ad una serie di comandi che non saranno
visualizzati, ma servono a terzi programmi (come i motori di ricerca) per
svolgere determinate funzioni. Il tag TITLE darà il nome alla pagina (quello
che si vede nel rigolino azzurro all'apice della finestra). poi troviamo il
tag di chiusura del titolo (/TITLE) che indica FINE DEL TITOLO e la chiusura
dei tag d'impostazione (/HEAD) poi troviamo l'inizio delle cose che verranno
visualizzate nella pagina (BODY). Alla chiusura del CORPO della pagina
(/BODY) segue la fine dei comandi HTML (/HTML). L'impostazione di un sito
HTML consiste in molte pagine tutte collegate tra loro.
il WML
<!DOCTYPE wml PUBLIC "_//WAPFORUM//DTD wml 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml>
<wml>
<card>
IMPOSTAZIONE VISTE
</card>
</wml>
Come possiamo vedere, invece, il WML inizia con un prologo. Poi dice al WAP-Browser che il linguaggio è il WML e vediamo che manca l'<HEAD>. In realtà si può mettere, ma è consigliabile solo a chi vuole mettere il sito nel motore di ricerca. Poi vediamo che nel TAG CARD ci sono le impostazioni che vengono visualizzate, come il BODY nell'html, con la differenza che in un documento ci possono essere più CARD, tutte collegate con SEGNALIBRI (o ancore). In questo caso il documento si chiamerà DECK (dall'inglese DECK OF CARD mazzo di carte). Così, mentre nell'HTM il sito, come ho detto prima è formato da più pagine, nel WML è formato da DECK ed ogni DECK da CARDS.
Formattazione testo
Come al solito, chi conosce l'inglese e/o l'html è avvantaggiato, in quanto sono le stesse cose dell'HTML è l'abbreviazione del nome inglese. Infatti in inglese grassetto=bolic; corsivo=italic, sottolineato=underlined; grande=big; piccolo=small. E proprio per questo per ottenere:
Questo testo è in grassetto
bisogna scrivere:
<!DOCTYPE WML PUBLIC =_//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<CARD>
<b>Questo testo è in grassetto</b>
</CARD>
</wml>
Possiamo vedere il tag <b> che ingrossa il testo che segue, fino alla
chiusura (</b>). Così per il CORSIVO <i></i>; per il sottolineato <u></u>;
per rendere il testo grande <big></big>; per rendere il testo piccolo <small></small>.
Però, come nell'html, l'accapo non c'è per cui si usa il tag <br/> (brake
line, rompi riga) [da notare lo SLASH (/) che non c'è nell'HTML.
Come nell'html esiste il tag <p> che indica il nuovo paragrafo (paragraf).
Però, a differenza dell'html, queste sono gli unici modi per formattare il
testo.
Le tabelle
Ancora una volta chi conosce l'HTML è avvantaggiato, in quanto è praticamente identico:
<!DOCTYPE wml PUBLIC "_//WAPFORUM//DTD wml 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml
<wml>
<card>
<table align="l/c/r" label="nome" columns="n">
<tr>
<td>nome</td>
<td>nome</td>
.........
</tr>
</table>
</card>
</wml>
Il TAG TABLE ha i seguenti attributi: ALIGN (allineamento)=l(left; sinistra)/c(center;centrata)/ r(right;destra). Poi label (nome) assegna il nome della tabella (che non si vede), infine c'è columns (colonne) che indica il numero delle colonne. A seguire c'è <tr> (table rows, riga della tabella), poi c'è td che indica la colonna, quindi ci DEVONO ESSERE tanti tag <td> quant'è il numero indicato in columns. A differenza dell'HTML, qui ci DEVONO ESSERE tutti i tag di chiusura.
Le immagini
Ancora una volta chi conosce l'html è avvantaggiato.
<!DOCTYPE wml PUBLIC "_//WAPFORUM//DTD wml 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml
<wml>
<card>
<img alt="testo da visualizzare" src="URL" align="top/middle/bottom" height="n" width="n"/>
</card>
</wml>
Dopo il prologo c'è la scritta che fa capire che stiamo scrivendo in wml. Poi si apre la card e si raggiunge il tag IMG (image: immagine). Il tag ha i seguenti attributi: ALT che indica il testo da visualizzare in caso di problemi con l'apertura dell'immagine; l'attributo SRC (research: ricerca) dove si deve indicare l'url (l'indirizzo) dell'immagine, poi troviamo ALIGN (allineamento) che può essere in alto (top), al centro (middle) o in basso (bottom). Infine troviamo HEIGTH=altezza e WIDTH=larghezza. Da notare è lo SLASH finale
A differenza dell'HTML, invece, nel WML è possibile inserire icone. E' sufficiente mettere al posto di src="url" local src="nomeicona".
E' ovvio che le icone cambino da dispositivo a dispositivo, ma se un'icona non c'è, è scaricata dal server a cui il dispositivo si collega.
Per far visualizzare le immagini da un dispositivo wap, c'è bisogno di un programma particolare, in grado di trascrivere i file d'immagine in file d'immagine wap.
I collegamenti
Questa è una delle parti che è più larga rispetto all'HTML, in quanto nell'HTML l'unico modo per creare collegamenti ipertestuali "semplici" è:
Per la verità questo è uno dei metodi per creare collegamenti ipertestuali, quindi
<!DOCTYPE wml PUBLIC "_//WAPFORUM//DTD wml 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml
<wml>
<card>
<a href="URL">testo visualizzato</a>
</card>
</wml>
Invece, per creare collegamenti da una CARD all'altra, si deve usare il MARCATORE DO, cioè un particolare tag tipico dei dispositivi Wap-Enable, che dice al dispositivo cosa fare, ad esempio:
<!DOCTYPE wml PUBLIC "_//WAPFORUM//DTD wml 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml
<wml>
<card>
<do type="accept" title="tasto">
<go href="#card2">
</go>
</card>
<card id="card2">
Testo da visualizzare
</card>
</wml>
Il tag <go> dice al dispositivo d'andare da un posto all'altro. Questo viene specificato nel type="accept" che dice che il passaggio è dato premendo un tasto specificato nel title="tasto". Poi c'è il GO HREF="#card2" che indica dove andare. Questo deve fare parte dello stesso documento e ciò e dato dal cancelletto (#). Inutile dire che il nome della CARD specificata nell'href="" dev'essere uguale a quello scritto nel CARD ID (escluso il cancelletto ovviamente).
Per creare un link con la tastiera numerica bisogna tornare all'href, ma bisogna aggiungere l'accesskey="1/2/3/4/5/6/7/8/9/0". Così da trasformarlo in:
I form
Ancora una volta chi conosce l'HTML è avvantaggiato:
<!DOCTYPE wml PUBLIC "_//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card>
Tuo Nome:
<input name="nome" maxlength="n"/>
<br/>Tuo cognome:
<input name="cognome" maxlength="n"/>
<br/>Città:
<input name="città" maxlength="n" emptyok="true" value="CA"/>
<br/>cap:
<input name="cap" maxlength="n"/>
</card>
</wml>
troviamo il tag INPUT che (come nell'html) sta a significare uno spazio
in cui l'utente può scrivere testo. Il tag INPUT è specificato da NAME che
indica al wapbrowser che il testo inserito è semplice testo . Poi troviamo
MAXLENGTH che indica il valore massimo dei caratteri che possono essere
inseriti.
Infine troviamo EMPTYOK="true/false" che indica se una riga deve essere
compilata (false) o no (true) e lo SLASH a chiudere.
Per far si che il testo inserito risulti maiuscolo, bisogna aggiungere
come specificatore di INPUT format="X", dove format (formato) è specificato
"X" che indica il testo maiuscolo. Es.
il tuo nome:
Per far inserire solo un determinato numero di caratteri al posto d'inserire MAXLENGTH, il numero deve essere specificato vicino ad "X", così se il testo dev'essere di 5 caratteri diventa: "5X"
Per far inserire testo solo minuscolo, la "X" diventa "x", al posto di X (maiuscolo) dev'essere inserita x (minuscolo) e vale la stessa regola per inserire un determinato numero di caratteri.
Per inserire una password, bisogna inserire questa riga:
Al NAME troviamo PASSWORD che occulta il testo.
Per far fare una scelta tra più parti, occorre inserire:
<option value="1">Nome1</option>
<option value="2">Nome2</option>
.......
</select>
Il marcatore SELECT indica una scelta multipla, MULTIPLE="" che indica che si può fare più di una scelta (true) o una sola scelta (false). Per rappresentare graficamente una scelta basta inserire tra i tag <OPTION></OPTION> il tag dell'immagine.
Per spedire i dati al server bisogna ricorrere ad uno script molto più complicato:
<!DOCTYPE wml PUBLIC "_//WAPFORUM///DTD WML 1.1//EN" "http://www.wapf0orum.org//DTD//wml_1.1.xml">
<wml>
<card title="prova" ordered="false">
<do type="ACCEPT">
<go method="post" href="URL">
<postfield name=title value="$title">
</go>
</do>
<do type="option" label="Clear">
<refresh>
<setvar name=title value=""/>
</refresh>
</do>
Testo visualizzato
<input title="" name="">
</card>
</wml>
La card creata contiene l'attributo ORDERED="" indica che le informazioni seguono (true) o no (false) un ordine predefinito.
DO in questo caso indica che le informazioni devono essere spedite ad un FORM CGI che si trova in HREF="URL" e METHOD="GET/POST" indica come le informazioni devono essere spedite allo SCRIPT (per informazioni più dettagliate si rimanda alle ISTRUZIONI DELLO SCRIPT, che variano da SCRIPT a SCRIPT e di conseguenza non sono trattate nel corso). Le informazioni spedite sono specificate in POSTFIELD VALUE="$". TITLE vicino ad $ dev'essere uguale al TITLE dell'INPUT. Qui DO indica che le informazioni (specificate in SETVAR NAME=TITLE. TITLE dev'essere uguale al TITLE dell'INPUT) devono essere ripulite (<refresh></refresh>) premendo un tasto.
Splash screen
<!DOCTYPE wml PUBLIC =_//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card ontimer="URL">
<timer value="n"/>
......
</card>
</wml>
Lo Splash Screen è una parte che è visualizzata per pochi secondi prima di entrare in una CARD.
Infatti vediamo che CARD è specificata da ONTIMER="URL" che indica la pagina visualizzata per pochi secondi (lo splash screen). Questi secondi sono specificati in decimi di secondo da TIMER VALUE="n". infine troviamo lo SLASH.
Attributi di Do
| ATTRIBUTO | Azione innescata dalla pressione di un tasto |
| TYPE=ACCEPT | accetta un'azione compiuta dall'utente |
| TYPE=DELETE | cancella un'azione |
| TYPE=HELP | mostra un'aiuto |
| OPTION | mostra una serie d'opzioni |
| TYPE=PREV | fa tornare alla card precedente |
| TYPE=RESET | innesca il meccanismo di reset |
| TYPE=UNKNOW | uguale a type="" |
| TYPE=VND.CO-TYPE | innesca un'azione contenuta nel WAP-ENABLE |
Scritte particolari
| Per visualizzare | Devo scrivere |
| < | < |
| > | > |
| ' | ' |
| " | " |
| & | & |
| $ | &dol |
| Spazio | |
Il WML Script
Il WMLscript funziona in modo leggermente diverso da javascript in quanto il codice non può essere "immerso" direttamente nel codice WML ma ha bisogno di un file a se, che deve avere estensione wmls. Per editare un file WMLscript è quindi sufficiente aprire un file di testo e salvarlo con estenzione .wmls.
All'interno del codice WML, per richiamere una funzione WMLscript è sufficinte ceare un pulsante e ossociare a questo l'url con il nostro file wmls e il nome della funzione specifica da invocare:
script.wmls#function()
Facciamo un semplicissimo esempio:
Creiamo un file wml con due card, la prima contente un semplice campo di
testo e un pulsante "invia", e la seconda che sarà adibita a visualizzare il
risultato dello script WMLscript.
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="card1" title="proveWMLs">
<!-- creo il campo di testo -->
<p>Input <input format="X" name="primo" title="primo:"/><br/></p>
<!-- creo il pulsante -->
<do type="accept" label="calcola">
<go href="esempio.wmls#mostra('result','$(primo)')"/>
</do>
</card>
<card id="results" title="Results">
<p>
<br/><br/>Risultato: <b>$(result)</b>
</p>
<do type="prev" name="Back" label="Back">
<prev/>
</do>
</card>
</wml>
Creiamo ora un file esempio.wmls con il codice contenente una semplice funzione "mostra", che non fa altro che settere la variabile returnString e reindirizzare il WMLBrowser alla card result del precedente file wml:
WMLBrowser.setVar(returnString, r);
WMLBrowser.go("esempio.wml#results");
}
Il risultato è che alla pressione del pulsante sul display apparirà la card result con il contenuto del campo di testo.
Avrete capito quanto è semplice creare uno script WMLscript.
