Home Page Home Page Articoli Mobile Web Forms e compatibilità tra Device

Mobile Web Forms e compatibilità tra Device

Ecco un articolo che illustra la creazione di una pagina mobile, tenendo conto delle compatibilità tra vari Device mobili.
Autore: Giovanni Ferron Livello:
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:

Pocket PC, Nokia e OpenWave
Pocket PC, Nokia e OpenWave


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!
Voto medio articolo: 4.5 Numero Voti: 2

File allegati


104_mobilevb.zip (9 Kbyte)
104_mobilecsharp.zip (10 Kbyte)
Giovanni Ferron

Giovanni Ferron

Sviluppatore dal 2000. Collabora a grandi progetti nella creazione di portali e intranet aziendali. Attualmente ha lasciato la terra natia per una nuova avventura in Australia, dove lavora come programmatore web per una emittente radio Australiana. Profilo completo

Articoli collegati

Utilizzare controlli lato server in un Datagrid
Il DataGrid è un controllo molto avanzato spesso usato in ASP.NET. La maggior parte degli sviluppatori utilizza le funzioni basilari. E' possibile però estenderlo utilizzando controlli server aggiuntivi all'interno delle celle. Vediamo un esempio con una Combo Box.
Autore: Luca Graziani | Difficoltà: | Commenti: 6 | Voto:
Utilizzare il Tracing in ASP.NET
Scopriamo in questo articolo il servizio di analisi di ASP.NET che permette di controllare e analizzare le richieste web, consentendo di scrivere nel log del servizio di analisi in modo da effettuare a runtime una sorta di debug dell'applicazione Web.
Autore: Marco Caruso | Difficoltà: | Commenti: 1 | Voto:
Spedire messaggi SMS con .NET
Spiegheremo in questo articolo alcune tecniche per inviare messaggi SMS tramite .NET: invio tramite Web Service, invio diretto tramite cellulare oppure invio tramite un SMS Gateway. Presente anche un esempio pratico di invio con ASP.NET e Web Service.
Autore: David De Giacomi | Difficoltà: | Commenti: 9
Utilizzare il Web Service dei SQL Reporting Services da una pagina ASP.NET
Vedremo in questo articolo un altro modo di utilizzo dei Reporting Services. Mostreremo infatti come consumare il Web Service offerto dai RS per esportare i Reports in vari formati (XML, Excel, PDF, HTML, CSV) e visualizzarli in una pagina ASP.NET.
Autore: Marco Caruso | Difficoltà: | Commenti: 1 | Voto:
Visualizzare gerarchicamente i dati con una speciale DataGrid
La rappresentazione grafica di dati gerarchicamente connessi tra loro può essere realizzata anche con l'ausilio di un free control, creato da Denis Bauer, ottenendo un risultato veramente ottimo sia dal punto di vista grafico sia da quello funzionale.
Autore: Andrea Bersi | Difficoltà: | Commenti: 1 | Voto:
DataSet, CreateChildView, e DataRelation: usare DataGrid per visualizzare dati da 2 tabelle
Un semplice e chiaro esempio per sfruttare al meglio il controllo DataGrid, per la visualizzazione di dati provenienti da 2 tabelle diverse, ma collegate fra loro. Viene spiegato come utilizzare il DataSet per creare delle relazioni tra le tabelle in esso contenute.
Autore: Andrea Bersi | Difficoltà: | Commenti: 1 | Voto:
Caching di pagine ASP.NET
Quando si ha a che fare con l'ingegnerizzazione di un programma la gestione del cache è una cosa importante. La "cache" e' un'area molto veloce (di solito la RAM) dove vengono copiati i dati che necessitano di essere disponibili nel piu breve tempo possibile. Vediamo com'è possibile gestire la Cache in ASP.NET
Autore: Matteo Raumer | Difficoltà:
Paginare un Datalist utilizzando il metodo ReadXml della classe Dataset
Il controllo DataGrid è uno strumento molto completo, ma che a volte può risultare troppo complesso in base alle esigenze della nostra applicazione. In questo articolo verrà spiegato come utilizzare al massimo il controllo DataList, anch'esso ottimo visualizzatore di dati, utilizzando però un'origine dati in formato XML, implementandone la paginazione.
Autore: Matteo Raumer | Difficoltà:
Come paginare un DataList
In questo articolo viene spiegato come paginare un DataList, grazie all'aiuto di stored procedure e al supporto per il paging offerto dal controllo stesso. Per ottenere una paginazione veloce, leggera, e personalizzabile al massimo.
Autore: Loris Badii | Difficoltà: | Commenti: 2 | Voto:
Ridimensionare al volo le immagini uploadate sul server, per creare le ThumbnailImages.
Molto spesso ci capita di voler visualizzare un'anteprima di un'immagine che magari ha grosse dimensioni. In questo articolo verrà spiegato come creare le immagini ridimensionate senza perdita di qualità.
Autore: Valerio Fornito | Difficoltà: | Commenti: 6
Renderizzare automaticamente gli URL come links in formato HTML
Molto spesso ci capita di dover visualizzare nelle pagina web degli URL, letti magari dal DB, ma che non ci vengono visualizzati subito come link cliccabili dall'utente. In questo articolo verrà spiegato come automatizzare questo processo.
Autore: Valerio Fornito | Difficoltà: | Voto:
Copyright © dotNetHell.it 2002-2017
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5