Introduction aux pages Web mobiles ASP.NET

Mise à jour : novembre 2007

Cette section de la documentation présente le design des pages Web mobiles ASP.NET à l'aide de contrôles mobiles ASP.NET. Les contrôles mobiles étendent la technologie Microsoft .NET Framework, à partir de laquelle ils sont créés.

Remarque :
Si vous créez des pages dans une langue autre que l'anglais, consultez Meilleures pratiques pour développer des applications mondialisables dans la documentation Microsoft ASP.NET.

Outils de création

Pour créer des pages Web mobiles ASP.NET, vous pouvez utiliser Microsoft Visual Studio ou un éditeur de texte. Visual Studio fournit des outils de création des pages Web mobiles et du code associé, et de gestion de l'application contenant les pages Web mobiles.

Après avoir créé vos pages mobiles, vous pouvez les consulter à l'aide d'un navigateur sur un périphérique pris en charge. Pour plus d'informations, consultez Appareils et plateformes pris en charge par le .NET Compact Framework.

Applications côté serveur

Les contrôles mobiles s'exécutent sur le serveur. Ils envoient le langage de balisage au navigateur qui lui indique comment afficher les contrôles et le contenu du formulaire ou de la page actuelle.

Chaque page Web mobile contient au moins un élément de formulaire, indiqué par la balise <mobile:Form>. Chaque balise de contrôle mobile doit inclure l'attribut runat=server.

Script client

Tout comme les autres types de pages Web, les pages Web mobiles peuvent contenir un script client à traiter par le navigateur. Si ces scripts font référence à des contrôles serveur Web spécifiques, ils doivent utiliser l'identificateur émis dans le langage de balisage. Ces identificateurs varient en fonction du langage de balisage pris en charge par le périphérique. Pour obtenir le nom exact du contrôle, compilez l'application, allez à la page ou au formulaire, puis affichez son balisage source.

Exemple "Hello World" traditionnel

L'exemple de code suivant illustre une page Web mobile "Hello World". L'exemple illustre l'utilisation d'un contrôle Form en tant que conteneur d'un contrôle mobile Label, qui affiche le texte "Hello, world!".

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

Exemple "Hello World" international

La communauté mobile est internationale. L'exemple de code suivant illustre une version internationale de "Hello World". Dans cette variation de l'exemple précédent, un contrôle List affiche une liste de langages tels que définis dans les éléments <Item> individuels. Un gestionnaire d'événements lit le langage sélectionné par un utilisateur avant de basculer vers un autre formulaire. Une instruction switch est utilisée pour afficher le texte correct pour le langage sélectionné de l'utilisateur.

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

<script >
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"  
      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" 
    BackColor="White" ForeColor="Green">
  <mobile:Label runat=server>
     Your "Hello World"  Translation
  </mobile:Label>
  <mobile:Label runat=server 
    id="Selection"></mobile:Label>
  <mobile:Link runat=server id="GoBack" 
    NavigateURL="#ListStuff">back</mobile:Link>
</mobile:Form>

Modification du codage de texte pour une application internationale

Les applications internationales vous obligent souvent à remplacer le codage de caractères par défaut UTF-8. Pour modifier le codage de texte, utilisez l'élément globalisation, comme indiqué dans l'exemple suivant, qui définit le codage UTF-16 :

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

Vous pouvez définir le codage dans le fichier global Machine.config, qui spécifie le codage de toutes vos applications, ou dans le fichier Web.config de l'application, qui spécifie le codage uniquement pour l'application désignée.

Voir aussi

Concepts

Meilleures pratiques pour développer des applications mondialisables

Appareils et plateformes pris en charge par le .NET Compact Framework

Référence

Form

Label

<Item>, élément

Autres ressources

Développement de pages Web mobiles de l'ASP.NET