Benissimo ragazzi… possiamo definire questo tutorial una appendice al mio tutorial precedente : come creare un sito wap

IMPARIAMO IL LINGUAGGIO WML

BY CYBERDUDE

 

                                                                          ######       #####              ######

################                                                         #MMMMM#     ##MMMMM##           #MMMMM#

###MMMMMMMMMMMM#                                                        #MMMMMM#    #MMMMMMMMM##        #MMMMMM#

###MMM##########                                                       #@@@@@@@#   #@@@@###@@@@#       #@@@@@@@#

###MMM#          ########### ###########   ########     ###########   #HHH#HHHH#   #HHH#   #HHHH#     #HHH#HHHH#

###MMM#          #HHHH##HHH# #HHHH#HHH#  ##HHHHHHHH#    #HHHH#HHH#   #HHH##HHHH#  #HHHH#   #HHHH#    #HHH##HHHH#

###MMM#########  #XXXX#XXXX# #XXXX#XXX#  #XXXXX#XXXX#   #XXXX#XXX#  #XXX# #XXXX#  #XXXX#   #XXXX#   #XXX# #XXXX#

###MMMM@@@@@HH#  #XXXXX####  #XXXXX###  #XXXX## #XXXX#  #XXXX####  #XXX#  #XXXX#  #XXXX#   #XXXX#  #XXX#  #XXXX#

###MMM#########  #XXXXX#     #$$$$#     #$$$#    #$$$$# #$$$$#    #$$$#####$$$$####$$$$#   #$$$$# #$$$#####$$$$##

###MMM#          #XXXXX#     #$$$$#    #$$$$#    #$$$$# #$$$$#    #$$$$$$$$$$$$$$##$$$$#   #$$$$# #$$$$$$$$$$$$$$

###MMM#          #XXXX#      #%%%%#     #%%%#    #%%%%# #%%%%#    #%%%%%%%%%%%%%%##%%%%#   #%%%%# #%%%%%%%%%%%%%%

###MMM########## #XXXX#      #%%%%#     #%%%%## #%%%%#  #%%%%#    #########%%%%### #%%%%# ##%%%#  #########%%%%##

###MMMM@@@@@HHH# #XXXX#      #%%%%#      #+++++#++++##  #++++#            #++++#    #++++#+++++#          #++++#

###MMMM@@@@@HHH# #XXXX#      #%%%%#       ##+++++++#    #++++#            #++++#    ###++++++##           #++++#

################ ######      ######         #######     ######            ######       ######             ######

 

                                                                                                                

                                          #######                                                                

                                       ###//;;;;;##                                                             

                                      #/////;;;;;;:#                                                             

                                     #+////####;;;:#                                                            

                                    #++//##   ##;;:##  ##########   #########   ######   #####    ######         

                                    #++//#     ####    #===##---#  #,,,,,,,,,#  #....#   #   #    #   #         

                                    #++//#             #=====--#  #-,,,####,,.#  #....# #     #  #    #         

                                    #++//#             #====#### #--,,#   #,,..# #....# #     #  #   #          

                                    #++//#      ##     #===##    #--,,#####,,..#  #...# #  #   # #   #          

                                    #++//#     #;;###  #===#     #--,,,,,,,,,..#  #....#  # #  ##   #           

                                    #++///#####;;;::#  #===#     #--,,##########   #...#  #  #  #  #            

                                     #+/////;;;;;;:#   #===#      #-,,#####,####   #....  #  #     #            

                                      ##////;;;;;###   #===#       #,,,,,,,,,##     #... #    #   #             

                                        ####;;###      #####        ###,,,###        #####    #####              

                                                                                                                

                                                                                  Cyberdude ASCII :)

                                                                                www.error404.cjb.net                                 

                                                                                                                

                                                                                                                 

                                                                                                                

                                                                                                                 

                                                                                                                

                                                                                                                                                                                                

                                                                                                                                                                                                                                                                      

 >>> PRESENTAZIONE TUTORIAL SUL LINGUAGGIO WML BY CYBERDUDE

Benissimo ragazzi… possiamo definire questo tutorial una appendice al mio tutorial precedente : come creare un sito wap!!! Iihhihihihih, quindi sono quasi sicuro che tutti quelli che stanno leggendo sto tutorial hanno gia letto in precedenza l’altro oppure lo andranno a leggere dopo!! Se non e’ cosi’,  fatelo!!! Comunque so come sia palloso mettersi a leggere infinite pagine per imparare un linguaggio di programmazione, scripting o qualsiasi altro sia, ed e’ per questo che provero’ a spiegarvi un intero linguaggio in pochissime pagine, 13 mi sembra,  rendendovi la vita piu’ facile e spero me ne siate grati!! Adesso non perdiamoci in inutili parole e iniziamo subito il nostro studio del linguaggio WML

 >>> LA DEDICA

Allora vediamo un po’ essendo naturalmente collegati i due tutorial (questo e creare 1 sito wap) ho deciso di dedicarli entrambi all’intera crew di error404! La nuova crew fondata sulle polveri di AIDSH!! Che dire diamoci sotto ragazzi… iniziamo a studiare! :)

-----------------------------------------------------------------------------------------------

 

                                  ý---#                                              (----#                           ý----$              

                                 ¡"   (                                              (    J                           $   ¡"              

                                 (    $                                              $    $                          (    (               

                                 J    $                                              $   ¡"                          (    J                

       ____                      $    $ ___          ____               __     ___   $   (                      ___  J    $      ____     

    _J"    -a   (----$    F----$ $   (a"   #       g-    !-q     ý---# J  (   J   !,¡"   (  (----#   ý----$   g"   # $    $    a-    !-,  

   J         !j (    $   (    J (           $     J         #    $   ($   J ¡"      3    $  (    $   $   ¡"  J      #    (   ¡"         $ 

  J           (  $   #   $   ¡" (           (    J    _a     $  (    F    $ $            $  $   ¡"  (    (  (            (   $    _,    ( 

 (     J--,    $ $   (  (    J  $     F!j    #  (    J  (    (  (      __J (    g--j    (   $   (   (    J ¡"    J-j     $  J    $  #    $

 $    J   !aaaa$ $   (  $   (   $    J  (    (  $   (    $   (  (     F    J    $  (    (  ¡"   (   $    $ J    J  (     $ (    J   (    (

¡"   (           (   ( (    $  (    ¡"  (    ( (    -----"   (  $    J     $   ¡"  (    J  (    $  (    ¡" $   ¡"   $   (  $    -----    (

(    $           (   ( $   (   (    (   (    $ J             (  $    $    (    (   (    $  $    $  (    (  $   (   (    (  $             (

(    $    g,_    !j   þ"   $   $    $   (    $ $    gaaaaaaaad ¡"   J     (    $   (    $  $   ¡"  $    J (    (   (    $  $   ¡aaaaaaaaaJ

(    $   (   !#   $   ý   J    $    (   $    $ $    $   _      (    $     (    $   $   ¡" ¡"   (  g"    $ !j   (   $    $  $    $   _     

(    !#aJ     $   #      ¡"   ¡"    !#a"    (  (    (_ _$!--aj J    $     (    !,aJ    (  (     #-     ¡"  $    #gJ    ¡"  $    &_ g"!--q 

!j           J    (      J    (    _       g"   $     "     J  $    $     !j           (  (        j   (   #           (   !j     "     $ 

 !,         J     !j    (     J    ý,     ¡"    !,         J  ¡"   ¡"      #      (    $   $     _J$   J   !j      $   J    !,        ¡"  

   -a_____J"       $    $     &aaad  #___a"       #,_____a"   (aaaad        -,__gJ(aaaa$   !,___J (aaaa$    !a__gJ#&aaa$      #,____gJ"   

                  (    (                                                                                                                   

               ý--     $                                                                                                                  

               $      (                                                                                                                    

              (      g"                                                                                                                   

              !#aa_g-                                                                                                                      

                                                                                                                                          

-----------------------------------------------------------------------------------------------

.:: INDICE ::.

  1. COS'E' IL WML? CARATTERISTICHE FONDAMENTALI
  2. LA SINTASSI DEL WML
  3. FORMATTAZIONE
  4. PRIMO DECK WML
  5. IL TAG "DO"
  6. LINK e COLLEGAMENTI
  7. TEMPLATE e TIMER
  8. LE IMMAGINI IN WML
  9. LE VARIABILI
  10. DECK: UN ESEMPIO COMPLETO
  11. FORM INPUT DELL'UTENTE. Parte 1
  12. FORM INPUT DELL'UTENTE. Parte 2
  13. BEH DIREI CHE 12 PARAGRAFETTI POSSONO BASTARE HIHIHIHHIHIHI :)

-----------------------------------------------------------------------------------------------

 1 >>> COS'E' IL WML? CARATTERISTICHE FONDAMENTALI

Allora ragazzi… Il Wireless Markup Language é il linguaggio con cui vengono progettate le pagine WAP. Sia il linguaggio WML che il linguaggio HTML derivano dal XML (Extensible Markup Language) e ne ereditano le principali caratteristiche. Ok? Il WML è stato progettato su telefoni cellulari che hanno le seguenti caratteristiche:

Diciamo quindi quasi una kiavica ihihihhihihihi :)

Un utente naviga attraverso un insieme di pagine, dette card , i deck (sarebbero i comandi) WML possono essere memorizzati in un file statico o in un server di origine o possono essere generati dinamicamente dal server o da un generatore di contenuto. Il micro-browser , pero, deve decidere come presentare gli elementi presenti allinterno di una card in base alle caratteristiche del dispositivo stesso (se si ha a disposizione

un display ampio si può scegliere di visualizzare tutte le informazioni della card, altrimenti le si frammenta in più unità). I tag che identificano le istruzioni del linguaggio WML sono anch'essi racchiusi dai simboli '<' e '>' proprio come in HTML.  Il WML include inoltre le seguenti caratteristiche:

La pagina WML é detta deck é composto da più carte. La card rappresenta la singola unità di navigazione che viene visualizzata dal browser sul display del telefonino WAP, più card possono essere raggruppate in un deck, il deck é la minima unità che viene scaricata dal WAP Server al telefonino. Ogni qualvolta si richiede una "pagina" WML ad un WAP Server, questo invierà al browser tutto il deck, composto di una o più card, e poi ne visualizzerà la prima.

Alcuni telefonini non accettano un deck più grande di 1.4 Kbytes. Il WAP gateway comprime il vostro WML in un formato binario più compatto, ma non può fare miracoli.

Un primo e molto semplice esempio di pagina WML:

<?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="ciao" title="ciao">
   <p>
      Ciao<br/>
      Questa e' una card in WML.
   </p>
</card>

</wml>

 

 2 >>> LA SINTASSI DEL WML

TAG
I tag sono i descrittori del linguaggio WML. Il tag descrive un elemento della pagina WML; é definito da un nome unico e da alcuni attributi specifici. Ciascun tag é racchiuso dai simboli '<' e '>'. HTML permette di inserire una interruzione di linea con il tag <br> mentre il linguaggio WML richiede necessariamente una delle due forme equivalenti: <br></br> o <br/>.

ELEMENTO

specifica le informazioni sia strutturali che di markup di un deck WML. Possono essere formati da uno start tag, un contenuto specifico, opzionalmente altri elementi quindi un end tag; con la seguente struttura:

<tag>contenuto</tag>

oppure

<tag/>

ATTRIBUTO

inclusi all'interno dello start tag, di questi alcuni sono obbligatori e vanno sempre indicati, altri invece possono essere opzionali e omessi se non necessari. Il valore dell'attributo deve sempre essere racchiuso tra apici, singoli (') oppure doppi ("), mentre due attributi vanno separati ricorrendo ad uno spazio.

<tag attr="valore"/>

CARATTERI "SPECIALI"

ad esempio i due caratteri < e > che nel testo possono essere utilizzati solo ed esclusivamente per circoscrivere un tag. Esistono però tre modi alternativi che permettono di specificare qualunque carattere del set tramite un formato unico ed indipendente:

 

CARATTERE  MNEMONICO 

           &quot;

   &        &amp;

           &apos;

   <        &lt;

>        &gt;

         &nbsp;

 

INTESTAZIONE DOCUMENTO
Tutte le pagine WML devono includere la definizione di tipo XML come prima riga:

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

La prima riga indica la versione XML che si intende utilizzare, mentre le altre indicano dove si trova il descrittore del linguaggio che ne contiene la sintassi. Alcuni terminali richiedono questa dichiarazione all'inizio del WML, altri no. Meglio comunque specificarlo sempre.

COMMENTI
Si possono inserire nel testo sorgente della pagina WML alcuni commenti esplicativi proprio come nel HTML. I commenti verranno ignorati dal microbrowser che non li visualizzerà, possono occupare una riga intera oppure solo una parte di essa.

<!-- commento -->

Non é possibile "nidificare" più commenti, uno dentro l'altro.

 

 3 >>> FORMATTAZIONE

SPAZI
I caratteri Newline (hex. 10), Carriage Return (hex. 1D), Space (hex. 20) e Tab (hex. 9) sono tutti considerati indifferente come spazi.

TAG "p"

delimita un paragrafo

<p [align="left|center|right"]>...</p>

left: allinea il testo a sinistra
center: allinea il testo al centro
right: allinea il testo a destra

ELEMENTI DI FORMATTAZIONE
é possibile specificare un tipo particolare di formattazione racchiudendo il testo tra due tag specifici.

<em>....</em> testo enfatizzato (italico)
<strong>....</strong> testo fortemente enfatizzato (grassetto)
<i>....</i> testo italico
<b>....</b> testo in grassetto
<u>....</u> testo sottolineato
<big>....</big> testo ingrandito
<small>....</small> testo ridotto

<p>
   Questo testo e' in <i>italico</i>
   menre questo e' in <b>grassetto</b>.
</p>

TAG "br"

sancisce nel testo l'inizio di una nuova riga.

<br/>

<p>
   riga1<br/>
   riga2
</p>

 4 >>> PRIMO DECK WML

Definiamo il deck che conterrà le varie card della nostra pagina WML, ed infine definiamo due card. Ecco lo scheletro iniziale della pagina WML:

<?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="home" title="CYBERWORLD.it">
 
</card>
 
<card id="info" title="CYBERWORLD.it">
 
</card>
 
</wml>

Completiamo il testo contenuto nelle card, assegnando ad ognuna di esse un nome ed un titolo mediante due attributi. Aprendo il deck verrà visualizzata la card Home, premendo la soft key indicata, sarà possibile navigare alla card successiva, info, e da questa tornare alla precedente.
Di seguito il deck completo:

 

<?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="home" title="CYBERWORLD.it">
   <p>
      CYBERWorld.it<br/>
      ...viaggio nel wml...<br/>
      <anchor title="Info">Info
         <go href="#info"/>
      </anchor>
   </p>
</card>
 
<card id="info" title="CYBERWORLD.it">
   <p>
      Benvenuto nel sito WAP di CYBERDUDE.it<br/>
      <anchor title="Home">Home<br/>
         <go href="#home"/>
      </anchor>
   </p>
</card>
 
</wml>

 

E questa e un po la spiegazione di quello che ne viene fuori

card 1 (home). Premendo il link Info si passerà alla seconda card.

card 2 (info). Premendo il link Home si ritornerà alla prima card

N.B.

In un deck WML si possono avere più card e quindi più titoli.

 

CARD
Come definire una card in un deck WML? La sintassi generale del tag "card" é la seguente:

<card id="Nome_card" [title="titolo_da_visualizzare"] [onenterforward="url"] [onenterbackward="url"] [ontimer="url"]>...</card>

-          ID >> Definisce il nome della card, indispensabile per poterla richiamare. Deve essere unico all'interno del deck e composto da una sola parola

-          TITLE >> Definisce il titolo della card, se non é indispensabile meglio non utilizzarlo perché comunque occupa una riga del già piccolo display.

-          ONENTERFORWARD >> Quando un utente accede con il metodo 'go’ viene automaticamente rediretto proprio verso quel URL

-          ONENTERBACKWARD >>Quando un utente riaccede con il tasto 'back' viene automaticamente rediretto proprio verso quel URL

-          ONTIMER >> redirigere l'utente alla pagina specificata come URL in questo attributo allo scadere di un timer di inattività.

 

 5 >>> IL TAG "DO"

Consente di specificazione un'azione da svolgere nella card corrente. Può essere un bottone grafico sul display del telefonino, un tasto funzione o speciale sulla tastiera, un comando ad attivazione vocale, etc.

<do type="azione" label="etichetta" name="nome">
go|refresh|prev|noop
</do>

-          TYPE >> Indica l‘azione da eseguire. Alcune sono:

                ·  type="accept", esegue il contenuto del tag

                ·  type="prev ", torna all'ultima pagina visitata

                · type="reset", resetta il contesto del browser

                · type="unknow", non specifica alcuna azione

 

-          LABEL >> Specifica l'etichetta di testo da associare alla soft-key, meglio non superare i 6 caratteri

-          NAME >> Definisce l'identificativo del tag. Nella stessa card, non è possibile avere più di un tag "do" con lo stesso nome.

 

All'interno dell'elemento "do" é possibile specificare una delle seguenti azioni :

TAG AZIONE "go"
Specificare l’ URL a cui saltare quando si seleziona quella soft-key.

<go href="url">
<setvar nome="nome_variabile" value="valore_da_assegnare"/>
</go>

href >> url a cui puntare

TAG AZIONE "prev"
Indirizza la navigazione all'ultima card visitata

<prev>
<setvar nome="nome_variabile" value="valore_da_assegnare"/>
</prev>

Per assegnare alla soft-key 'back' il ritorno alla card precedente:

<do type="accept" label="Back"> 
   <prev/>

</do>

 

TAG AZIONE "refresh"
Forza il ricaricamento della card

<refresh>
<setvar nome="nome_variabile" value="valore_da_assegnare"/>
</refresh>

<do type="accept" label="Reload"> 
   <refresh/> 

</do>

 

TAG AZIONE "noop"

Indica che non deve essere eseguita alcuna azione

<noop/>

 

 6 >>> LINK e COLLEGAMENTI

Per inserire un link nella propria pagina é necessario prima definire un'anchor con il tag "anchor" che crea il pulsante attivabile.

<anchor title="titolo">...</anchor>

<go href="url"/>

<anchor>
   Go to card 2
   <go href="#card2"/>

</anchor>

All'interno del tag "go" é poi possibile specificare anche il tag setvar per cambiare il valore di una o più variabili nella card di destinazione

<setvar nome="nome_variabile" value="valore_da_assegnare"/>

<wml>
 
<card id="card1" title="Link e anchor">
   <p>
      <anchor title="go_card2">Link to card2!
         <go href="card2.wml"/>
      </anchor>
   </p>
   <p>
      <anchor title="prev">Back!
         <prev/>
      </anchor>
   </p>
</card>
 

</wml>

 

 7 >>> TEMPLATE e TIMER

 

TEMPLATE
E' possibile definire e specificare un metodo sia singolarmente per ogni card sia globalmente 
condivisibile per tutte le card presenti nel deck risparmiando così di copiare lo stesso
codice in più parti del deck.

Supponiamo di voler disporre in tutte le card del deck di un pulsante "indietro" che rimandi indietro all'ultima card visitata, ecco come potremmo definire il TEMPLATE:

<template>
   <do type="prev" name="back" label="Back">
      <prev/>
   </do>
</template>
Ma la possibilità di tornare indietro (back) su una lista di card concatenate ha senso solo
 dalla seconda in poi, come fare allora per eliminare il tasto Back dalla prima? Sarebbe
sufficiente specificare un'azione "noop" corrispondente alla softkey "back"

Nell'esempio che segue viene definito un TEMPLATE per il tasto 'Back'. La "card2" avrà quindi la soft-key 'Back' presente, mentre la "card1" no poiché il metodo 'Back' é sovrascritto nella card utilizzando il tag "noop".

<wml>
<template>
   <do type="prev" name="Back" label="Back">
      <prev/>
   </do>
</template>
<card id="card1">
   <do type="prev" name="Back">
      <noop/>
   </do>
   ...
</card>
<card id="card2">
   ...
</card>
<wml>
 

TIMER
permette di gestire i momenti di inattività. Quando si entra in una card il timer viene inizializzato, se l'utente non é ancora "uscito" dalla card al momento del suo scadere viene scatenata l'azione preimpostata e specificata nell'attributo "ontimer" della card stessa. I timer sono indicati in decimi di secondo ed é possibile specificare al massimo un timer per ciascuna card.

<timer name="nome_timer" value="valore"/>

 

-          NAME >> Specifica il nome di una variabile contenente il valore in decimi di secondo del timer. Usciti dalla card, questa variabile conterrà l’eventuale tempo residuo; zero se il timer é scaduto, un valore positivo se l'utente é uscito volontariamente dalla card prima dello scadere del timer.

-          VALORE >> Valore di default del timer in decimi di secondo. Se é specificata la variabile in "name" e questa é già settata con un certo valore, allora verrà utilizzato proprio quel valore per il timer, ignorando il valore di default qui indicato. Obbligatorio

Nell'esempio seguente si visualizza per 1 secondo il titolo del sito per poi passare al deck home.wml:

<wml>
<card id="splash" ontimer="home.wml" title="CYBERWORLD.it">
   <timer value="10"/>
   <p align="center">
      CYBERWORLD.it<br/>
      Viaggio nel mondo del WML
   </p>
</card>
</wml>
 
 8 >>> LE IMMAGINI IN WML

Il WML prevede utilizzo uno specifico tipo di immagine, con un formato particolarmente "leggero" in termini di occupazione di memoria, il WBMP (Wireless BitMap) , una versione a 1 bit (bianco e nero) del formato BMP. Tutte le immagini per essere compatibili con le specifiche e quindi visualizzabili devono quindi essere convertite in WBMP e non devono superare le dimensioni di 150x150 pixel o comunque 1461 pixel complessivi.

Per visualizzare un'immagine si ricorre al tag "img":

<img src="percorso" alt="descrizione" [vspace="xx"] [hspace="yy"] [align="top|middle|bottom"] [height="aa"] [width="bb"]/>                                                                                

-          SRC >> Specifica l'indirizzo URL dell'immagine. Obbligatorio

-          ALT >> Descrizione dell'immagine. Viene visualizzata al posto dell'immagine in caso di problemi. Obbligatorio

-          VSPACE >> Specifica in pixel o percentuale lo spazio da lasciare vuoto DESTRA O SINISTRA

-          HSPACE >> Specifica in pixel o percentuale lo spazio da lasciare vuoto SOPRA SOTTO

-          ALIGN >> Indica l'allineamento verticale dell'immagine: top, testo allineato al lato superiore dell'immagine; bottom in basso e middle al centro. Opzionale.

-          HEIGHT  HIDTH>> Specificano altezza (height) e larghezza (width) dell'immagine. I valori possono essere espressi in pixel o in percentuale, con la caratteristica che il valore percentuale NON si riferisce alle dimensioni dell'immagine bensì allo spazio disponibile in cui inserirla. Opzionale.

Attenzione perche il Web server deve inviare limmagine specificando il corretto tipo MIME:
image/vnd.wap.wbmp

 9 >>> LE VARIABILI

Le variabili possono avere un nome qualsiasi composto da una sequenza di lettere, numeri e caratteri '_' (underscore), purché inizi con il carattere '$'. Se quindi volete utilizzare questo carattere nel testo della vostra pagina WML, dovrete dire al micro-browser che non intendete referenziare una variabile utilizzando la doppia sintassi '$$'.

Questo é il carattere $$

verrà visualizzato così:

Questo é il carattere $

Fate attenzione che il WML é sensibile alle maiuscole/minuscole, quindi $cyberdude e $Cyberdude non referenziano la stessa variabile, ma bensì due diverse. Una variabile può essere settata attraverso il tag "setvar":

<setvar nome="nome_variabile" value="valore_da_assegnare"/>

Nell'esempio seguente la variabile $var1 può essere settata al valore "Buongiorno!" oppure cancellata premendo rispettivamente la soft-key etichettata "Set" o "Clear".

<wml>
<card id="home" title="CYBERWORLD.it">
   <p>
      Variabile:<br/>
      $var1
      <do type="accept" label="Set">
         <go href="variables.wml">
            <setvar name="var1"  value="Buongiorno!"/>
         </go>
      </do>
      <do type="accept" label="Clear">
         <go href="variables.wml">
            <setvar name="var1"  value=""/>
         </go>
      </do>
   </p>
</card>
</wml>
 
-                 Premendo "Set" la variabile $var viene settata al valore "Buongiorno!".
-                 Premendo "Clear" invece il valore viene cancellato

 10 >>> DECK: UN ESEMPIO COMPLETO

Il deck é composto da 3 card. Inizialmente definiamo un template, valido per tutte le card,
che attiva la soft-key 'Back' per navigare all'indietro sulle card. La prima card, "splash", 
visualizza il logo del sito. Premendo il link "continua" oppure entro 5 secondi se
l'utente non compie alcuna azione, si viene trasferiti alla card "home".

 
 
 
 
 
 
 
<wml>
<template>
        <do type="prev" name="Back" label="Back">
        <prev/>
        </do>
</template>
 
<card id="splash" ontimer="#home" title="CYBERWORLD.it">
        <timer value="50"/>
        <do type="prev" name="Back">
           <noop/>
        </do>
        <p align="center">
           <img src = "cyberdude.wbmp" alt = "CYBERWORLD.it"/><br/>
               Viaggio nel mondo del WML<br/>
               <anchor title="Home">Continua<br/>
                       <go href="#home"/>
               </anchor>
        </p>
</card>
 
<card id="home" title="CYBERWORLD.it">
        <p>
        Menu:<br/>
        <anchor title="Asp">Asp
               <go href="Asp.wml"/>
        </anchor>
        <br/>
        <anchor title="hacking">hacking
               <go href="hacking.wml"/>
        </anchor>
        <br/>
        <anchor title="Info">Info
               <go href="#info"/>
        </anchor>
  </p>
</card>
 
<card id="info" title="CYBERWORLD.it">
        <p>
   Benvenuto nel sito WAP sperimentale di CYBERDUDE<br/>
   In caso di problemi contattate via email: cyberdude.h4ck3r@libero.it
   <br/><br/>
        <anchor title="Home">Home<br/>
               <go href="#home"/>
        </anchor>
        </p>
</card>
</wml>
 
 11 >>> FORM INPUT DELL'UTENTE. Parte 1
Il WML prevede la possibilità di gestire degli input provenienti da scelte inserite dall'utente.
Tag <input> 
Simile all'HTML. L'utente può inserire il testo attraverso la tastiera del telefonino.

<input name="nome" [value="valore"] [type="password|text"] [emptyok="true|false"] [size="num"] [length="num"]>

-                 NAME >> Nome della variabile che verrà settata con il contenuto inserito 
               dall'utente. Obbligatorio
-                 VALUE >> Valore di default del campo. Nel caso in cui la variabile
             specificata in name contenga già un valore, l’attributo value viene
             ignorato.
-                 TYPE >> Indica il campo é una password oppure un normale testo. Nel primo
             caso all’atto della digitazione il testo verrà sostituito con degli
             asterischi.
-                 EMPTYOK >> Settato a 'TRUE' accetta in input stringe vuote.
-                 SIZE >> Dimensione, in numero di caratteri, dell’area di input.
-                 MAXLENGHT >> Numero massimo di caratteri digitabili.
-                 FORMAT >> specifica una maschera di input. E possibile indicare il tipo di
                 carattere per ciascuna posizione della stringa.

 

Quindi ricapitoliamo la situazione :

Si vuole richiedere un campo di testo di al massimo 32 caratteri alfanumerici:

<input name="nome" type="text" maxlength="32"/>

Lo stesso del caso precedente, ma con valore di default pari a "Marcello":

<input name="nome" type="text" value="Marcello" maxlength="32"/>

Oppure un numero di due cifre:

<input name="eta" type="text" format="NN"/>

Ed infine un campo particolare, tre caratteri alfabetici maiuscoli, quindi due cifre numeriche più un numero non precisato di caratteri alfabetici generici:

<input name="specific" type="text" format="XXXNN*m"/>

Tag "postfield"

Non viene mostrato sullo schermo. Può essere usato per postare un coppia nome/valore al server. E' molto più potente di un campo nascosto, perché grazie al modo in cui vengono gestite le variabili in WML, potete collezionare informazioni contestuali e quindi passarle al server tutte insieme.

UN ESEMPIO COMPLETO DI FORM

<card id="send_email" title="Invia email">
   <p>
   A:<br/>
   <input type="text" format="*M" emptyok="false"
      name="To" size="10" maxlength="40"/>
   Oggetto:<br/>
   <input type="text" format="*M" emptyok="false"
      name="Subject" size="10" maxlength="100"/>
   Messaggio:<br/>
   <input type="text" format="*M" emptyok="false"
      name="Body" size="10" maxlength="40"/>
   Signature:<br/>
   <select name="Signature">
      <option value="yes">yes</option>
      <option value="no">no</option>
   </select>
   <anchor title="Invia">Invia
      <go href="send_mail.wml">
         <postfield name="To" value="$(To)" />
         <postfield name="Subject" value="$(Subject)" />
         <postfield name="Body" value="$(Body)" />
         <postfield name="Signature" value="$(Signature)" />
      </go>
   </anchor>
   </p>
</card>


 12 >>> FORM INPUT DELL'UTENTE. Parte 2

Tag "select"

Il tag "select" consente all'utente di selezionare un'opzione da una lista di possibili scelte, ognuna delle quali specificata da un elemento "option".

<select name="nome" [multiple="true|false"] [value="valore"] [iname="var_name"] [ivalue="var_valore"]>
...
<select>

-          NAME >> Nome della variabile che verrà settata con il contenuto inserito dall'utente. Obbligatorio

-          MULTIPLE >> Abilita la scelta multipla. Il default per questa opzione é false.

-          VALUE >> Valore di default. Nel caso in cui la variabile specificata in "name" contenga già un valore, l’attributo "value" viene ignorato. In caso di scelta multipla, conterrà i vari elementi selezionati separati da punto e virgola.

-          INAME >> Nome della variabile nella quale è contenuto l'indice di default. Il valore 1 indica la prima option; 0 invece nessuna option selezionata.

-          IVALUE >> Indica l'indice (numero posizionbale della option) di default. Il valore 1 indica la prima option; 0 invece nessuna option selezionata.

Tag "option"

Con questo tag possiamo popolare la nostra lista di opzioni.

<option [valore="valore"] [onpick="URL"]>
...
<option>

-          VALORE >> Valore da assegnare alla variabile indicata nell'attributo name della "select" nel caso in cui l'opzione venga selezionata

-          ONPICK >> Con onpick è possibile specificare un URL al quale saltare quando viene selezionata questa opzione.

<wml>
   <card>
      <p>
      Seleziona le tue competenze:
      <select name="HOBHIES" iname="H" ivalue="1;2" multiple="true">
         <option value="A">Programmazione</option>
         <option value="B">Grafica</option>
         <option value="C">Satellitare</option>
      </select>
      </p>
   </card>
</wml>

 >>> CONCLUSIONI

Benissimo ragazzi siamo giunti alla fine di un’altro tutorial, che dire, se l’avete letto con attenzione vi sara’ sembrato molto semplice e credetemi, lo e’!!! hihihihhi adesso vi lascio al vostro divertimento ora tocca lavorare alla vostra fantasia per realizzare splendidi siti WAP. Ciao a tutti

Cyberdude  >>> www.area91.da.ru >>> cyberdude.h4ck3r@libero.it >>> Error404 MEMBER