Procédure pas à pas : personnalisation de pages Web mobiles ASP.NET pour des périphériques spécifiques

Article
08/21/2008

Mise à jour : novembre 2007

Les filtres de périphérique, les techniques de création de modèle et les fonctionnalités de substitution de propriété dans les pages Web mobiles ASP.NET vous permettent de personnaliser votre application de sorte qu'elle restitue les contrôles de manière différente pour divers périphériques. Cette procédure pas à pas indique comment utiliser Visual Studio pour créer des modèles, des filtres de périphérique et des substitutions de propriété pour un contrôle mobile. Pour plus d'informations sur les filtres de périphérique, consultez Vue d'ensemble des filtres de périphérique ASP.NET.

Au cours de cette procédure pas à pas, vous apprendrez à :

ajouter une page Web ASP.NET et un fichier de configuration Web mobile ;
ajouter un contrôle List à un formulaire ;
ajouter un contrôle basé sur un modèle à une page Web mobile ;
modifier les modèles de contrôle ;
appliquer des substitutions de propriété pour un modèle.

Client de périphérique

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des éléments suivants :

Visual Studio ou Visual Web Developer Express.
La capacité d'exécuter la page sur un périphérique tel qu'un téléphone mobile. Vous pouvez exécuter cette procédure pas à pas même si vous avez uniquement un navigateur d'ordinateur de bureau. Toutefois, un émulateur de périphérique peut vous permettre de consulter plus directement les fonctionnalités des contrôles que vous utiliserez dans cette procédure pas à pas.
Un accès aux services IIS (Microsoft Internet Information Services) et des autorisations pour créer une application (ou un répertoire virtuel) dans IIS. Il est recommandé d'utiliser une copie locale d'IIS pour les pages de l'application, ce qui facilite le test de l'application avec votre émulateur. Toutefois, si vous ne pouvez pas créer d'application à l'aide d'IIS, vous pouvez toujours être en mesure d'utiliser un émulateur avec le serveur de développement ASP.NET. Pour plus d'informations, consultez Comment : utiliser des émulateurs et des navigateurs.

Création du site Web

Si vous avez déjà créé un site Web IIS local dans Visual Web Developer (par exemple, en suivant les étapes décrites dans Procédure pas à pas : création d'un site Web IIS local dans Visual Web Developer), vous pouvez utiliser ce site Web et passer à la section suivante, « Création d'une page et d'un fichier de configuration Web mobiles ». Sinon, créez un site Web IIS local en suivant ces étapes.

Remarque :
Si vous avez installé un émulateur de périphérique, le site Web que vous utilisez dans cette procédure pas à pas doit être accessible à l'émulateur ; cette procédure pas à pas recommande donc d'utiliser un site Web IIS. Si votre émulateur peut accéder aux pages Web fournies par le serveur de développement ASP.NET, vous pouvez créer ou ouvrir un site Web de système de fichiers à la place.

Si vous avez installé un émulateur de périphérique, le site Web que vous utilisez dans cette procédure pas à pas doit être accessible à l'émulateur ; cette procédure pas à pas recommande donc d'utiliser un site Web IIS. Si votre émulateur peut accéder aux pages Web fournies par le serveur de développement ASP.NET, vous pouvez créer ou ouvrir un site Web de système de fichiers à la place.

Pour créer un site Web IIS local

Ouvrez Visual Studio.
Dans le menu Fichier, cliquez sur Nouveau site Web.

La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Cliquez sur Parcourir.

La boîte de dialogue Choisir un emplacement s'affiche.
Cliquez sur Serveur IIS local.
Cliquez sur Site Web par défaut.
Cliquez sur l'icône Créer une application Web qui se trouve dans le coin supérieur droit.

Cette icône n'est pas étiquetée, mais lorsque vous placez et maintenez le pointeur de la souris dessus, une info-bulle identifie l'icône.

Une nouvelle application, Site Web, est ajoutée sous Site Web par défaut.
Dans la zone du nouveau site Web, entrez C:\SitesWeb\ProcédureSpécifiquePériphérique, puis cliquez sur Ouvrir.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Cliquez sur OK.

Visual Web Developer crée le site Web et ouvre une nouvelle page nommée Default.aspx.

Création d'une page et d'un fichier de configuration Web mobiles

Dans cette section, vous allez créer une page Web mobile, semblable à une page Web ASP.NET normale mais incluant des éléments propres aux pages mobiles. Par exemple, toutes les pages Web mobiles doivent hériter de MobilePage et inclure un contrôle Form. Vous allez également créer un fichier Web.config mobile que vous utiliserez ultérieurement pour créer des fonctionnalités spécifiques au périphérique.

Vous allez aussi ajouter un contrôle qui affiche des données et prend en charge l'utilisation de modèles. Les contrôles mobiles qui prennent en charge les modèles sont les contrôles List, ObjectList et DeviceSpecific. Les procédures suivantes utilisent un contrôle List. Vous ajouterez du code ultérieurement dans la procédure pas à pas pour émuler une source de données.

Pour créer un formulaire mobile ASP.NET et un fichier de configuration Web mobile

Si le fichier Default.aspx est ouvert, fermez-le.

Il ne sera pas utilisé dans cette procédure pas à pas.
Si le site Web possède un fichier Web.config, supprimez-le. (Si vous utilisez un site Web existant, renommez temporairement le fichier Web.config pendant que vous utilisez cette procédure pas à pas.)
Dans le menu Fichier de Visual Studio, cliquez sur Nouveau, puis sur Fichier. Dans le menu Fichier de Visual Web Developer Express, cliquez sur Nouveau fichier.

La boîte de dialogue Ajouter un nouvel élément s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Fichier de configuration Web mobile.
Cliquez sur OK.

Le nouveau fichier de configuration est ouvert dans l'éditeur. Notez la section <deviceFilters> du fichier Web.config. Ces filtres apparaîtront dans une liste ultérieurement dans la procédure pas à pas.
Fermez le fichier Web.config.
Dans le menu Fichier, cliquez sur Nouveau, puis sur Fichier.

La boîte de dialogue Ajouter un nouvel élément s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Web Form Mobile.
Dans la zone Nom, entrez le nom du fichier.

Par exemple, tapez TestModèle.
Désactivez la case à cocher Placer le code dans un fichier distinct.
Cliquez sur OK.
Passez en mode Design.
À partir de l'onglet Web Form Mobile de la Boîte à outils, faites glisser un contrôle List dans le contrôle Form.

Sélection d'un filtre de périphérique

Vous disposez maintenant de votre site Web, d'une version de contrôles mobiles du fichier Web.config et d'un formulaire avec un contrôle List. Dans la procédure suivante, vous allez sélectionner le filtre de périphérique par défaut.

Un filtre de périphérique permet aux applications de personnaliser l'apparence des contrôles pour des périphériques matériels spécifiques ou pour certaines catégories de périphériques. La personnalisation repose sur les capacités du navigateur dans le périphérique utilisé avec l'application. Pour plus d'informations sur les filtres de périphérique, consultez Introduction aux filtres de périphérique.

Pour sélectionner un filtre de périphérique par défaut

Cliquez avec le bouton droit sur le contrôle List, puis cliquez sur Options de modèles.

La boîte de dialogue Options de modèles s'affiche. Dans la liste Filtre de périphérique appliqué, aucun filtre n'est répertorié. Cela signifie qu'aucun filtre de périphérique n'a été appliqué au contrôle.
Cliquez sur Modifier.

La boîte de dialogue Filtres de périphérique appliqués apparaît.
Si la liste Filtres de périphérique disponibles ne contient aucun élément, vérifiez que votre fichier Web.config dispose d'une section <deviceFilters> contenant des éléments pour divers filtres de périphérique. Si nécessaire, reportez-vous à la procédure précédente pour créer un fichier Web.config mobile.
Dans la liste Filtres de périphérique disponibles, sélectionnez (Par défaut) et cliquez sur Ajouter à la liste.
Cliquez sur OK.

La boîte de dialogue Options de modèles est toujours ouverte.

Dans la liste Filtre de périphérique appliqué, sélectionnez (Par défaut).

Dans la zone de liste Schéma de balisage, Modèle Mobile HTML 3.2 s'affiche.

Remarque :
Les informations spécifiées dans le champ Schéma de balisage ne sont utilisées que par le concepteur et n'ont aucun effet au moment de l'exécution. Le schéma fournit la fonctionnalité Microsoft IntelliSense et la vérification de la syntaxe en mode Source.

Cliquez sur Fermer.

Modification de modèles

Vous pouvez maintenant modifier des modèles individuels pour le contrôle List que vous avez ajouté à la page. Le contrôle List définit les modèles suivants :

Modèle d'en-tête
Modèle de pied de page
Modèle d'élément
Modèle d'élément de remplacement
Modèle de séparateur

Dans la procédure suivante, vous allez placer des contrôles Label dans le modèle d'en-tête et le modèle d'élément. De plus, vous allez lier le contrôle Label dans le modèle d'élément à une valeur de données.

Pour modifier les modèles

Cliquez avec le bouton droit sur le contrôle List, cliquez sur Modifier les modèles, puis sur Modèles d'en-tête et de pied de page.

Les zones HeaderTemplate et FooterTemplate s'affichent dans le formulaire.
À partir de l'onglet Web Forms mobiles de la Boîte à outils, faites glisser un contrôle Label dans le modèle d'en-tête.
Dans la fenêtre Propriétés, affectez Liste des villes à la propriété Text.
Cliquez avec le bouton droit sur le contrôle List, cliquez sur Modifier les modèles, puis sur Modèles d'élément.

Les zones ItemTemplate et AlternatingItemTemplate s'affichent dans le formulaire.
À partir de l'onglet Web Forms mobiles de la Boîte à outils, faites glisser un contrôle Label dans le modèle d'élément.
Cliquez avec le bouton droit sur le contrôle Label, puis cliquez sur Modifier les DataBindings.

La boîte de dialogue DataBindings s'affiche.
Dans la zone Expression de code, entrez l'expression suivante :
```
CType(Container, MobileListItem)
```
```
(MobileListItem)Container
```
Cliquez sur OK.
Cliquez avec le bouton droit sur le contrôle List, puis cliquez sur Terminer la modification du modèle.
Enregistrez le fichier et fermez-le.

Création de données à afficher dans le contrôle List

Pour émuler la lecture des données à partir d'une base de données ou d'une autre source de données, vous allez créer des données dans le code auxquelles le contrôle List pourra se lier.

Pour créer des données dans le code

Passez en mode Source.

Copiez le code suivant et collez-le dans l'élément <script runat="server"> de la page.

Remarque :
L'exemple de code utilise un objet MobileListItem pour structurer les données en deux propriétés, Text et Value. Il est également possible de créer une classe personnalisée et de définir les propriétés DataTextField et DataValueField du contrôle List pour utiliser les propriétés de votre classe personnalisée.

Private Sub Page_Load()
    Dim _arrayList As New ArrayList()

        _arrayList.Add(New MobileListItem("San Francisco", "SF"))
        _arrayList.Add(New MobileListItem("Seattle", "SEA"))
        _arrayList.Add(New MobileListItem("New York", "NY"))
    List1.DataSource = _arrayList
    List1.DataBind()
End Sub

Application de substitutions de propriété

Pour chaque filtre de périphérique que vous avez sélectionné, vous pouvez définir des propriétés spécifiques à ce périphérique et substituer les propriétés correspondantes dans le contrôle List. Dans la procédure suivante, vous allez définir les propriétés DataTextField et ForeColor pour le filtre de périphérique (Par défaut).

Pour appliquer des substitutions de propriété pour un filtre de périphérique spécifique

Passez en mode Design.
Sélectionnez le contrôle List et, dans la fenêtre Propriétés, cliquez sur le bouton de sélection () dans la zone (PropertyOverrides).

La boîte de dialogue Substitutions de propriété s'affiche.
Dans la liste Filtre de périphérique appliqué, cliquez sur (Par défaut).

La liste Propriétés spécifiques aux périphériques affiche les propriétés que vous pouvez substituer.
Pour la propriété DataTextField, entrez Text.

Cela garantit que la propriété Text de chaque MobileListItem dans la source de données apparaît dans List au moment de l'exécution pour le filtre de périphérique spécifié.
Affectez à la propriété ForeColor la valeur Rouge.
Cliquez sur OK.

Test de la page

Vous pouvez à présent exécuter la page.

Pour tester la page

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur TestModèle.aspx, puis cliquez sur Afficher dans le navigateur.

La page s'affiche dans votre navigateur par défaut.
Pour afficher la page dans un émulateur de périphérique, suivez les instructions du fabricant de l'émulateur de périphérique pour accéder à la page.

Si votre émulateur correspond au filtre de périphérique sélectionné répertorié dans le fichier Web.config, vous obtiendrez la sortie que vous avez spécifiée pour ce périphérique.

Étapes suivantes

Cette procédure pas à pas a illustré l'utilisation de Visual Studio pour créer un contrôle avec des paramètres de propriétés spécifiques aux périphériques, sélectionner un filtre de périphérique, modifier les modèles pour ce filtre et définir des substitutions de propriété pour ce filtre.

Vous pouvez également basculer en mode Source et examiner le balisage déclaratif généré par Visual Studio.

Consultez la page dans plusieurs navigateurs ou émulateurs pour voir si les paramètres spécifiques au périphérique fournissent une sortie différente pour votre navigateur par défaut et pour votre émulateur. Vous pouvez étendre la procédure pas à pas en sélectionnant un autre filtre de périphérique, en plus du filtre par défaut, pour obtenir la sortie propre à votre émulateur.

Pour plus d'informations, consultez les rubriques suivantes :

Voir aussi