Introduzione a Mobile Web Forms

Articolo
04/11/2008

In questa sezione della documentazione vengono descritte le modalità di progettazione di form e di pagine Web Form mobili di ASP .NET utilizzando i controlli mobili ASP .NET. I controlli mobili si basano sulla tecnologia Microsoft .NET Framework e la estendono.

Nota Se si creano pagine utilizzando una lingua che non sia l'inglese, vedere Suggerimenti per lo sviluppo di applicazioni internazionali nella documentazione di Microsoft ASP .NET.

Strumenti di creazione

Per iniziare la creazione di un'applicazione Web mobile di ASP .NET, è necessario decidere lo strumento da utilizzare. È possibile scegliere tra Progettazione Mobile Internet ASP .NET, incluso nell'ambiente di sviluppo di Microsoft Visual Studio .NET, e qualsiasi editor di testo per creare un file ASPX (Active Server Pages) che rappresenti una pagina Web Form mobile.

La finestra di progettazione rende disponibile uno strumento visivo per la creazione di Web Form mobili e di codice gestito (un file sottostante il codice) per caricare la nuova pagina Web Form mobile.

Applicazioni del lato server

In ogni pagina Web Form mobile è contenuto almeno un form mobile, indicato dal tag <mobile:Form>. Ciascun tag di controllo mobile deve includere l'attributo runat=server.

Dopo aver creato l'applicazione, è possibile visualizzarla utilizzando un browser e un dispositivo supportati. Per ulteriori informazioni, vedere Supporto per dispositivi.

Script del lato client

I controlli mobili vengono eseguiti nel server e trasmettono il linguaggio con tag che indica al browser del client come visualizzare i controlli e il contenuto nel form o nella pagina corrente. Il linguaggio con tag contiene gli identificatori dei controlli. Allo stesso modo di altri tipi di pagine Web, le pagine Web Form mobili possono includere gli script per l'elaborazione da parte del browser del client. Se tali script fanno riferimento a controlli specifici, devono utilizzare l'identificatore emesso nel linguaggio con tag. Questi identificatori variano a seconda del linguaggio con tag supportato dal dispositivo. Per ottenere il nome esatto del controllo, compilare l'applicazione, passare alla pagina o al form, quindi visualizzarne il linguaggio con tag di origine.

"Hello World" tradizionale

Di seguito viene riportato un esempio del famoso codice sorgente "Hello World" in un controllo mobile. In questo esempio viene mostrato l'utilizzo di un controllo Form come contenitore di un controllo mobile Label in cui è incluso il testo "Hello, world!".

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" 
   Language="C#" %>
<mobile:Form id=Form1 runat="server">
   <mobile:Label id=Label1 runat="server">
      Hello, world!
   </mobile:Label>
</mobile:Form>

"Hello World" internazionale

L'esempio riportato di seguito è la versione internazionale di "Hello World" poiché gli utenti di dispositivi mobili sono sparsi a livello mondiale. In questa versione dell'esempio precedente, uno script crea un gestore eventi per leggere il testo della selezione, quindi seleziona il form successivo. Un'istruzione switch gestisce le traduzioni del controllo List, quindi passa da un form all'altro.

<%@ Page Language="c#" 
   Inherits="System.Web.UI.MobileControls.MobilePage" %>

<script runat="server">
public void MyEventHandler(Object source, ListCommandEventArgs e)
{
   Selection.Text = "You selected " + e.ListItem.Text;
   ActiveForm = SecondForm;

   switch (e.ListItem.Text)
   {
      case "French":
         Selection.Text = "Bonjour le monde";
         break;

      case "German":
         Selection.Text = "Hallo Welt";
         break;

      case "Italian":
         Selection.Text = "Ciao il mondo";
         break;

      case "Norwegian":
         Selection.Text = "Hei verden";
         break;

      case "Portuguese":
         Selection.Text = "Oi mundo";
         break;

      default:
         Selection.Text = "Hello World";
         break;
   }
}
</script>
<mobile:Form id="ListStuff" runat="server"   BackColor="White" ForeColor="#bb7023">
   <mobile:Label runat=server id="label">Pick a Language!
   </mobile:Label>
   <mobile:List runat=server id="ListMe"      OnItemCommand="MyEventHandler">
      <item Text="English" />
      <item Text="French" />
      <item Text="German" />
      <item Text="Italian" />
      <item Text="Norwegian" />
      <item Text="Portuguese" /> 
    </mobile:List>
</mobile:Form>

<mobile:Form id="SecondForm" runat="server"   BackColor="White" ForeColor="Green">
   <mobile:Label runat=server>Your "Hello World"      Translation</mobile:Label>
   <mobile:Label runat=server       id="Selection">1</mobile:Label>
   <mobile:Link runat=server id="GoBack"       NavigateURL="#ListStuff">back</mobile:Link>
</mobile:Form>

Nella versione multilingue di "Hello World" viene utilizzato solo un nuovo controllo mobile: il controllo List. Il relativo elemento <Item> rende disponibile il contesto del testo.

Modifica della codifica del testo per un'applicazione internazionale

Nelle applicazioni internazionali spesso è necessario modificare la codifica dei caratteri rispetto alla codifica UTF-8 predefinita. Per modificare la codifica del testo, utilizzare l'elemento <globalization> per impostare la codifica su UTF-16, come mostrato nel seguente esempio:

<globalization>
  requestEncoding="utf-16"
  responseEncoding="utf-16"
/>

È possibile impostare la codifica nel file globale Machine.config, in cui viene specificata la codifica per tutte le applicazioni, o nel file Web.config dell'applicazione, in cui viene specificata la codifica solo per l'applicazione specifica.

Vedere anche