Mobile Web Forms
La tecnologia .NET ci da una grande quantità di soluzioni per i nostri applicativi web, e naturalmente non poteva mancare la possibilità di creare pagine web per i device mobili. In questo articolo vedremo come creare la nostra prima pagina mobile, e soprattutto creare diverse interfacce utente a seconda del device che visita il nostro sito mobile.

Prima di iniziare
Per poter creare la nostra applicazione mobile abbiamo bisogno di alcuni strumenti, primo tra tutti il "MS Mobile Internet ToolKit", che potete scaricare al seguente indirizzo:
http://msdn.microsoft.com/vstudio/device/mobilecontrols/default.aspx ">Mobile Internet Toolkit

Per chi utilizza Visual Studio 2003 non deve scaricare il toolkit perché è già compreso. Oltre al nostro mobile abbiamo bisogno di un simulatore di cellulare o di palmare, tra i più usati ci sono:
? Nokia Mobile Internet Toolkit (http://www.forum.nokia.com ">Forum Nokia)
? OpenWave SDK (http://www.openwave.com/products/developer_products/omdt/ ">OpenWave SDK)
Vediamo qui sotto alcune screenshot degli emulatori:



A questo punto siamo pronti per partire.


La mia prima pagina mobile
Apriamo il nostro Visual Studio e creiamo un nuovo progetto con il linguaggio che preferiamo di piu, e scegliamo dai template ASP.NET Mobile Web Application.



Diamo un nome al nostro progetto, di default "MobileWebApplication1"
Una volta creato il nostro progetto avremo già pronta la nostra pagina di default "MobileWebForm1.aspx".


MobileWebForm1.aspx
Bene ora che abbiamo il nostro file di prova possiamo incominciare a inserire i vari controlli che ci vengono proposti dal nostro Visual Studio. Incominceremo nell'inserire un semplice label. Per far ciò bisogna selezionare il controllo dal menu degli strumenti di Visual Studio .NET.



Una volta selezionato e trascinato nella nostra Mobile Form, possiamo impostare a grandi linee le stesse proprietà di un label di una Web Form. Impostiamo quindi il testo della nostro label dalla finestra delle proprietà.



A questo punto possiamo utilizzare tutti i controlli della Toolbox, e scrivere codice come se fosse una web form qualunque. Ora però centreremo la nostra attenzione sulla novità che introducono queste mobile Web Form.


Inferno dei Device ? mi fai un baffo
A parte il titolo è un argomento serio, il .NET Framework ci permette di sviluppare delle applicazioni mobile accessibili a diversi tipi di device, da quelli WAP a quelli che supportano HTML, ma naturalmente con un video molto ristretto. Questo accade perché in base alla richiesta di una pagina mobile il framework si attiva e riconosce il device e carica le sue impostazioni, queste impostazioni sono memorizzate nel file machine.config.
Per poter in unica pagina gestire più device bisogna utilizzare il controllo nella Toolbox di Visual Studio "DeviceSpecific".



Ora che abbiamo inserito il nostro controllo, dobbiamo scegliere i tipi di device che vogliamo utilizzare, e lo si può impostare ciccando sul link "Templating Options", dopo aver selezionato il controllo.



A questo punto compare una form, e ciccate sul bottone edit, questo per poter inserire una lista di device che comparirà nel menu a tendina attualmente con la dicitura "(none)"



Ciccando su bottone "Edit" comparirà un altro form con una lista di tutti i device disponibili, basta selezionare i device desiderati e ciccare il bottone "Add to list"



A questo punto una volta che abbiamo selezionato tutti device possiamo specificare gli oggetti a seconda del device che si collega, ad esempio se si collegherà un terminale WAP non potremmo presentare una tabella colorata. In questo caso sono stati utilizzati due device: isWML11 (Classico terminale wAP) e isCHTML10 (Terminali compatibili cHTML), e per inserire del semplice codice basta andare a inserire controlli mobile all'interno dei tag del device che ci interessa.


<mobile:DeviceSpecific id="DeviceSpecific1" runat="server">
<Choice Filter="isWML11">
<!-- Codice per device wap -->
</Choice>
<Choice Filter="isCHTML10">
<!-- codice per device cHTML -->
</Choice>
</mobile:DeviceSpecific>


All'interno di ogni tag specifico si possono inserire dei tag per la composizione della pagina mobile:
? HeaderTemplate: Parte superiore della pagina
? FooterTemplate: Part inferiore della pagina
? Html: Template HTML della pagina
? ScriptTemplate: Template Javascript, naturalmente se il device li supporta


Web.config
Prima di concludere è importante chiedersi..., ma posso personalizzare i miei Device?
Certo che è possibile, andando a modificare il file Web.config.


<deviceFilters>
<filter name="isWML11" compare="PreferredRenderingType" argument="wml11" />
<filter name="isCHTML10" compare="PreferredRenderingType" argument="chtml10" />
</deviceFilters>


come si nota all'inteno dei tag "deviceFilters" sono contenuti tutti i filtri per il confronto. Analizziamo gli attributi dei tag Filters:
? Name: nome del filto
? Compare: metodo di comparazione, in questo caso PreferredRenderingType
? Agument: è il valore che deve avere il device per il metodo di confronto selezionato (attributo compare)

Questo ci permette di personalizzare tutti i filtri che vogliamo utilizzare. Attenzione a non confondere il deviceFilter con il device, la differenza tra i vari device la fa il Framework, il deviceFilter è uno strato aggiuntivo che utilizziamo noi sviluppatori per controllare le capacità (mobileCapabilities) del nostro device e quindi adattare via codice l'output della pagina in base al device.


Conclusioni
In conclusione abbiamo visto come creare pagine mobile, concentrandoci soprattutto sull'aspetto dell'accesso dei vari device, questo ci può essere molto utile per poter costruire un applicativo accessibile da tutti i nostri utenti, ovunque essi siano, sia da cellulare che da browser. Inoltre visto che in Italia sta arrivando i-mode, piattaforma che permette a cellulari compatibili con lo standard cHTML di visitare siti web, quale buona occasione per fare delle prove e aumentare i nostri utenti, e perché no, anche il nostro business!