Introduction aux formulaires Web

Introduction aux formulaires Web
Nikhil Kothari
Microsoft Corporation
Septembre 2000
Résumé : cet article présente les formulaires Web, structure ASP.NET qui permet aux développeurs de créer des pages
Web programmables dans le cadre d'une application Web globale.
Sommaire
Présentation
Contrôles HTML
Contrôles Web
Contrôles HTML et contrôles Web
Les formulaires Web et l'expérience de développement d'application rapide
Documents de référence
Présentation
La structure Active Server Pages.NET (ASP.NET ou ASP.NET), également connue sous le nom de formulaires Web, permet
la création de pages Web programmables dans le cadre d'une application Web globale. Les formulaires Web simplifient le
développement des applications Web de la façon suivante :
Ils offrent un modèle de programmation par événement sur le serveur, semblable au modèle de développement
reposant sur les formulaires que l'on trouve dans les outils de développement basés sur Microsoft® Win32®
tels que le système de développement Microsoft Visual Basic®.
Ils permettent une séparation complète des balises HTML et de la logique d'application. La logique, ou le code qui
se trouve derrière la page, est compilée et offre de bien meilleures performances. De plus, ce code peut être
écrit dans n'importe quel langage Microsoft® .NET, et vous permet de tirer un meilleur parti de vos
compétences existantes.
Ils offrent une riche expérience de conception. Visual Studio® .NET offre une expérience de développement
d'application rapide pour créer et gérer des formulaires Web.
Ils intègrent un ensemble riche et très fonctionnel de contrôles et de composants .NET qui offrent un modèle
objet cohérent indépendant du type. De plus, la structure se prête naturellement aux extensions par
l'intermédiaire de composants personnalisés et de tierces parties.
Cet article s'intéresse en premier lieu aux contrôles du serveur que nous avons intégrés à la structure. D'autres aspects
également importants d'ASP.NET, tels que la mise en mémoire cache, la sécurité, la configuration, et la personnalisation,
sont abordés en détail dans la section guide du développeur de la documentation du kit de développement .NET.
Les contrôles du serveur servent à créer l'interface utilisateur de votre application Web. Ils peuvent générer toutes les
sorties adaptées à l'unité ou au navigateur visé. La structure ASP.NET contient deux ensembles de contrôles du serveur :
les contrôles HTML et les contrôles Web, les deux produisant du HTML utilisé par les navigateurs Web. Outre ce rendu
HTML, ces contrôles encapsulent également le mécanisme pour préserver l'état pendant les allers-retours et les
événements survenant côté serveur pour différents événements du client. Ces contrôles peuvent également servir de
briques élémentaires dans des contrôles composites.
Ces deux types de contrôles sont décrits dans le détail dans les sections qui suivent.
Contrôles HTML
Le premier type de contrôles de la structure ASP.NET est constitué des contrôles HTML. Ces contrôles existent dans
l'espace de nom System.Web.UI.HtmlControls, et sont dérivés (directement ou non) de la classe de base HtmlControl.
La figure 1 illustre la hiérarchie de classe des contrôles HTML.
Figure 1. Contrôles HTML ASP.NET
Les contrôles HTML sont instanciés à partir de n'importe quelle balise contenant l'attribut runat="server". Par exemple,
le code HTML qui suit crée une instance de HtmlInputText nommée "textBox1" :
<input type="text" runat="server" id="textBox1" value="some text">
Le tableau qui suit donne la liste des contrôles HTML et des balises HTML qui leur correspondent.
Tableau 1. Balises des contrôles HTML
Contrôle
Balise correspondante
HtmlAnchor
<a>
HtmlButton
<button>
HtmlSelect
<select>
HtmlTextArea
<textarea>
HtmlInputButton
<input type="button">
HtmlInputCheckBox
<input type="check">
HtmlInputRadioButton
<input type="radio">
HtmlInputText
<input type="text"> et <input type="password">
HtmlInputHidden
<input type="hidden">
HtmlInputImage
<input type="image">
HtmlInputFile
<input type="file">
HtmlForm
<form>
HtmlImage
<img>
HtmlTable
<table>
HtmlTableRow
<tr>
HtmlTableCell
<td>
HtmlGenericControl
Toute autre balise sans correspondance, telle que <span>, <div>, etc.
Du fait que les contrôles HTML ont une correspondance directe avec les balises HTML, ils sont utiles pour faire migrer des
pages ASP existantes vers ASP.NET. Ces contrôles sont comparés à leurs homologues, les contrôles Web, plus loin dans cet
article.
Contrôles Web
Le second type de contrôles de la structure ASP.NET est constitué des contrôles Web. Ces contrôles existent dans l'espace
de nom System.Web.UI.WebControls, et sont dérivés (directement ou non) de la classe de base WebControl. La figure
2 illustre la hiérarchie de classe des contrôles Web.
Figure 2. Contrôles Web ASP.NET
Les contrôles Web incluent les formes traditionnelles de contrôles telles que les TextBox et Button, ainsi que d'autres
concepts de niveau supérieur tels que Calendar et DataGrid. Ils offrent plusieurs fonctions qui simplifient vos efforts de
développement, en particulier :
Un modèle objet riche et cohérent. La classe de base WebControl implémente un certain nombre de
propriétés communes à tous les contrôles. Il s'agit notamment de ForeColor, BackColor, Font, Enabled, etc.
Les noms de propriété et de méthode ont été choisis pour favoriser la cohérence dans l'ensemble de la
structure et des contrôles. Le modèle objet fortement typé implémenté par ces composants permet de réduire
les erreurs de programmation.
Détection automatique du navigateur. Les contrôles Web détectent automatiquement les capacités du
navigateur client et peuvent personnaliser le rendu pour utiliser au mieux ces capacités.
Liaison de données. Dans les pages de formulaires Web, toute propriété d'un contrôle peut être reliée aux
données. De plus, plusieurs contrôles Web peuvent servir à rendre le contenu d'une source de données.
Les contrôles Web apparaissent dans le balisage HTML comme des balises d'espace de nom, c'est-à-dire des balises avec
un préfixe. Le préfixe sert à faire correspondre la balise à l'espace de nom du composant exécutable. Le reste de la balise
est le nom de la classe d'exécutable elle-même. Tout comme les contrôles HTML, ces balises doivent également contenir
un attribut runat="server". Un exemple de déclaration se trouve ci-après :
<asp:TextBox id="textBox1" runat="server" Text="[Entry
Keywords]"></asp:TextBox>
Dans l'exemple qui précède, "asp" est le préfixe de la balise et correspond à l'espace de nom
System.Web.UI.WebControls.
La suite cette section décrit les contrôles Web qui ont été implémentés pour les versions PDC et bêta 1. Chaque contrôle
contient une brève description, un exemple de déclaration et une capture d'écran affichant un exemple de rendu dans le
navigateur. Les contrôles ont été regroupés par catégories fonctionnelles.
Affichage de texte
Le contrôle Label sert à afficher du texte statique en lecture seule ou lié aux données dans la page :
<asp:Label runat="server" Text="Label1" FontItalic="true"></asp:Label>
Contrôles d'entrée
La suite des contrôles Web contient les contrôles qui permettent à l'utilisateur final d'entrer les valeurs traitées par la page
sur le serveur.
Le contrôle TextBox permet de modifier le texte. De même qu'avec le contrôle Label, le texte peut être lié aux données.
Le contrôle TextBox prend en charge plusieurs modes qui permettent de l'utiliser pour l'entrée sur une ligne unique, sur
plusieurs lignes, ou de mot de passe :
<asp:TextBox runat="server" Text="TextBox1"></asp:TextBox>
<asp:TextBox runat="server" Mode="Multiline" Rows="3">
TextBox1
</asp:TextBox>
<asp:TextBox runat="server" Mode="Password"></asp:TextBox>
Le contrôle CheckBox permet de créer une case à cocher que l'on peut activer ou désactiver :
<asp:CheckBox runat="server" Text="CheckBox1"
Checked="True"></asp:CheckBox>
Le contrôle RadioButton est semblable au contrôle CheckBox, mais s'utilise généralement avec d'autres contrôles
RadioButton dans un groupe, pour offrir un ensemble de choix mutuellement exclusifs :
<asp:RadioButton runat="server" Text="RadioButton1" GroupName="Group1"
Checked="true">
</asp:RadioButton>
<asp:RadioButton runat="server" Text="RadioButton2"
GroupName="Group1"></asp:RadioButton>
Sélection
Les quatre contrôles qui suivent offrent un mécanisme qui permet à l'utilisateur de sélectionner parmi des choix ou des
options qui lui sont présentés. La liste des choix peut être définie de façon statique, comme illustré ci-dessous, ou remplie
à partir d'une source de données.
Le contrôle DropDownList autorise une sélection unique à partir de plusieurs choix dans une liste déroulante :
<asp:DropDownList runat="server">
<asp:ListItem Text="Choice1" Value="1" selected="true"/>
<asp:ListItem Text="Choice2" Value="2"/>
</asp:DropDownList>
Le contrôle ListBox permet de créer une liste déroulante de choix et de sélectionner soit une seule option, soit plusieurs :
<asp:ListBox runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Choice1" Value="1" selected="true"/>
<asp:ListItem Text="Choice2" Value="2"/>
</asp:ListBox>
Le contrôle CheckBoxList permet de créer une séquence ou un groupe de contrôles Checkbox disposés sur une ou
plusieurs colonnes :
<asp:CheckBoxList runat="server">
<asp:ListItem Text="Choice1" Value="1" selected="true"/>
<asp:ListItem Text="Choice2" Value="2" selected="true"/>
</asp:CheckBoxList >
Le contrôle RadioButtonList est très semblable au contrôle CheckBoxList. Il utilise un groupe de contrôles RadioButton
afin de créer un ensemble de choix mutuellement exclusifs :
<asp:RadioButtonList runat="server">
<asp:ListItem Text="Choice1" Value="1" selected="true"/>
<asp:ListItem Text="Choice2" Value="2"/>
</asp:RadioButtonList >
Envoi de formulaire et retour
Les contrôles qui suivent servent à renvoyer la page au serveur, avec les valeurs entrées par l'utilisateur, pour qu'elles
soient traitées par la logique de votre page. Ils créent un événement Click sur le serveur, que vous pouvez gérer dans
votre code.
Le contrôle Button crée un bouton poussoir en 3D servant à renvoyer la page au serveur :
<asp:Button runat="server" Text="Cliquez ici"></asp:Button>
Le contrôle LinkButton a le même comportement que le contrôle Button. Cependant, il s'affiche dans la page sous la
forme d'un lien hypertexte :
<asp:LinkButton runat="server" Text="Cliquez ici"></asp:Button>
Le contrôle ImageButton sert également à envoyer des pages. Il se présente sous forme d'image et peut donner les
coordonnées x et y du clic de l'utilisateur :
<asp:ImageButton runat="server" ImageUrl="net.gif"></asp:Button>
Navigation
Le contrôle HyperLink sert à créer un lien permettant de naviguer vers d'autres URL :
<asp:HyperLink runat="server"
Text="Suivez-moi" NavigateUrl="MyPage.aspx"></asp:HyperLink>
Affichage d'une image
Le contrôle Image peut servir à afficher une image dans la page :
<asp:Image runat="server" ImageUrl="net.gif"></asp:Image>
Contrôles de mise en page
Le contrôle Panel sert en général comme contrôle de groupement ou comme conteneur pour les contrôles créés de façon
dynamique. Notez qu'un contrôle Panel n'a généralement pas d'apparence visuelle.
<asp:Panel runat="server"></asp:Panel>
Le contrôle Table, associé aux contrôles TableRow et TableCell, vous permet de créer des tableaux et des mises en pages
sous forme de tableaux, par programmation :
<asp:Table runat="server" GridLines="Both" BorderWidth="1px">
<asp:TableRow>
<asp:TableCell>[0,0]</asp:TableCell>
<asp:TableCell>[0,1]</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>[1,0]</asp:TableCell>
<asp:TableCell>[1,1]</asp:TableCell>
</asp:TableRow>
</asp:Table>
Sélection de la date
Le contrôle Calendar permet de naviguer entre des dates et d'effectuer des sélections de dates, y compris dans des
plages de dates :
<asp:Calendar runat=server DayNameFormat="FirstLetter" ...>
<property name=SelectedDayStyle>
<asp:TableItemStyle Font-Bold="True" BackColor="#CCCCFF"/>
</property>
...
</asp:Calendar>
Contrôles liés à des listes
Les contrôles liés à des listes servent à rendre le contenu de la source de données ou de la liste à laquelle ils sont associés.
Ils permettent de créer des mises en pages personnalisées et standard. Ces contrôles font l'objet d'articles plus détaillés
dont la liste se trouve à la section "Documents de référence" à la fin de cet article.
Le contrôle Repeater est un simple contrôle lié à une liste qui utilise des modèles (ou des extraits de code HTML
définissant une mise en page) pour rendre le contenu d'une source de données de manière neutre, c'est-à-dire sans aspect
prédéfini :
<asp:Repeater runat="server">
<template name="HeaderTemplate">
<ol>
</template>
<template name="ItemTemplate">
<li>
<a runat="server" href='<%# DataBinder.Eval(Container.DataItem,
"SiteURL") %>'>
<%# DataBinder.Eval(Container.DataItem, "SiteName") %>
</a>
</li>
</template>
<template name="FooterTemplate">
</ol>
</template>
</asp:Repeater>
Le contrôle DataList utilise également des modèles pour rendre le contenu de la source de données à laquelle il est lié. De
plus, il offre la possibilité de personnaliser le formatage visuel et la mise en page :
<asp:DataList runat="server">
<template name="ItemTemplate">
<%# DataBinder.Eval(Container.DataItem, "PersonName") %>
...
</template>
...
</asp:DataList>
Le contrôle DataGrid crée des mises en pages de texte enrichi sous forme de tableaux pour rendre le contenu de la source
de données à laquelle il est lié. De plus, il offre les possibilités de tri, d'édition, de pagination, etc.
<asp:DataGrid runat="server" ...>
<property name="Columns">
<asp:BoundColumn HeaderText="ID" .../>
...
</property>
...
</asp:DataGrid>
Contrôles de validation
Les contrôles Validation simplifient la tâche de validation de l'entrée de l'utilisateur. Ils créent automatiquement un script
côté client qui permet aux navigateurs de haut niveau d'effectuer la validation sur la machine de l'utilisateur avant un
retour, ce qui permet d'obtenir des pages plus interactives et conviviales. En même temps, ils fonctionnent de façon
identique sur le serveur comme un mécanisme de secours. Ces contrôles font l'objet d'articles plus détaillés dont la liste se
trouve à la section "Documents de référence" à la fin de cet article.
Le contrôle RequiredFieldValidator permet de vérifier que l'utilisateur remplit les contrôles d'entrée
obligatoires.
Le contrôle RangeValidator permet de vérifier que l'entrée de l'utilisateur se trouve dans la plage des valeurs
autorisées. Ceci est utile pour les entrées numériques et de dates.
Le contrôle CompareValidator permet de vérifier l'entrée d'un contrôle par rapport à un autre.
Le contrôle RegularExpressionValidator permet de vérifier l'entrée de l'utilisateur en utilisant une expression
régulière (ou modèle de chaîne) comme critère.
Le contrôle CustomValidator vous permet d'offrir une logique de validation personnalisée côté serveur et côté
client.
Le contrôle ValidationSummary fournit un résumé des messages d'erreur produits par tous les contrôles de
validation.
Divers
Le contrôle AdRotator permet d'afficher de la publicité ou des bannières. Les informations concernant les publicités,
notamment l'URL de leur image, sont indiquées dans un fichier XML :
<asp:AdRotator runat="server"
AdvertisementFile="AdsList.xml"></asp:AdRotator>
Contrôles HTML et contrôles Web
Au cours du développement de ces contrôles, nous nous sommes sans cesse demandé s'il était nécessaire d'implémenter à
la fois une suite de contrôles HTML et une suite de contrôles Web avec des fonctions qui se superposaient. Je suis certain
que vous aurez également des questions concernant le sujet Contrôles HTML et contrôles Web, notamment lorsqu'il s'agit
de décider si l'un est plus adapté que l'autre.
Les deux suites de contrôles peuvent être comparées du point de vue de plusieurs facteurs.
Abstraction du contrôle
Les contrôles HTML n'offrent aucun niveau d'abstraction. À chaque contrôle correspond une et une seule balise
HTML (voir Tableau 1).
Les contrôles Web créent des abstractions de niveau supérieur qui n'ont pas d'équivalent HTML (tels que
Calendar et DataGrid). Du fait qu'ils n'ont pas de correspondance directe avec des balises HTML, les
contrôles Web peuvent également renforcer une fonction le cas échéant (pour avoir par exemple un contrôle
TextBox unique au lieu de plusieurs balises). Cette abstraction ouvre la porte à une richesse de contrôles de
fournisseurs tiers.
Modèle objet
Les contrôles HTML offrent un modèle objet très centré HTML. Chaque contrôle contient une collection d'attributs
que vous pouvez utiliser pour manipuler les attributs d'une balise. Cette collection d'attributs utilise des paires
nom de chaîne/valeur, et n'est pas fortement typée.
Lorsque vous utilisez des contrôles HTML, vous programmez de façon très semblable à ce que vous faisiez avec
l'ASP classique. De ce fait, les contrôles HTML offrent une voie rapide de migration, puisqu'il suffit d'ajouter
l'attribut runat="server" pour transformer une balise en contrôle du serveur.
Les contrôles Web offrent un modèle de programmation à base de formulaires de type Visual Basic. Même s'ils
offrent également une collection d'attributs, ils s'attachent d'abord à offrir un modèle objet riche et cohérent,
indépendant du type. Chaque contrôle Web contient un ensemble standard de propriétés telles que ForeColor,
BackColor, Font, etc.
Ce modèle objet favorise également des conditions de conception dans un environnement plus riche avec un
outil de conception tel que Visual Studio .NET.
Navigateur cible
Les contrôles HTML ne détectent pas automatiquement les caractéristiques du navigateur demandant la page et
ne modifient pas le HTML rendu. Lorsque vous utilisez cet ensemble de contrôles, vous avez la responsabilité
de vérifier que votre page fonctionne chez les clients de haut et de bas niveau.
Les contrôles Web ajustent automatiquement le rendu pour garantir le même fonctionnement avec les
navigateurs de haut et de bas niveau. Un contrôle Web est également capable d'offrir des comportements
différents sur différents navigateurs afin d'exploiter pleinement le potentiel du client. Par exemple, les
contrôles de validation peuvent également utiliser des scripts côté client pour créer des pages très interactives
dans un navigateur de haut niveau.
Contrôle du rendu
Les contrôles HTML vous donnent le contrôle complet sur le rendu et sur ce qui est envoyé au navigateur du
client.
Les contrôles Web offrent un modèle objet plus riche, ainsi que la possibilité de cibler plusieurs navigateurs. En
conséquence, ils n'offrent pas le même niveau de contrôle sur le résultat rendu.
Au cours du développement de vos applications Web, vous pouvez choisir l'une ou l'autre suite de contrôles en fonction de
leurs caractéristiques et de vos besoins. Vous pouvez également décider de mélanger les deux dans une même page ;
l'utilisation d'un type de contrôle n'exclut pas l'autre.
Les formulaires Web et l'expérience de développement d'application
rapide
Les formulaires Web et les contrôles du serveur apportent la même expérience de développement d'application rapide aux
pages Web et aux applications.
La prochaine version de Microsoft Visual Studio .NET intégrera un créateur de formulaires Web partagé par Visual Basic et
Visual C++® (spécialement C#). Elle offre la métaphore de programmation à base de formulaires hautement productive et
familière, qu'apprécient tant les développeurs en Visual Basic. La figure 3 illustre différents aspects de l'expérience de
conception avec les formulaires Web.
Figure 3. Le créateur de formulaires Web de Visual Studio .NET
La boîte à outils permet de glisser-déplacer sur la surface de conception des composants visuels tels que des contrôles et
des composants non-visuels tels que des jeux de données ainsi que d'autres composants du serveur.
La surface de conception elle-même affiche une vue WYSIWYG des contrôles sur la page. Le créateur dispose également
d'une fenêtre de code sous-jacent, dans laquelle vous pouvez créer et modifier la logique sous-jacente à la page. Le fait de
double-cliquer sur les composants et les contrôles fait naviguer vers le code approprié de cette fenêtre. Le navigateur de
propriété vous permet de personnaliser des composants de la surface de conception.
L'explorateur de solution et le projet permettent de gérer et de déployer les composants, les pages, les fichiers de code
sous-jacent, ainsi que les autres fichiers de contenu présents dans votre application Web.
L'environnement de développement inclut également un débogueur rajeuni qui peut vous aider à déboguer facilement vos
applications Web.
Documents de référence
Le kit de développement .NET contient des documents de référence pour tous ces contrôles ; ils en décrivent les classes,
les propriétés, les méthodes et les événements en détail.
Le kit de développement contient également plusieurs exemples sous forme de Démarrages rapides qui illustrent
l'utilisation de ces contrôles dans des pages Web.
La bibliothèque MSDN contient d'autres articles détaillés consacrés à certains contrôles :
Utilisation des contrôles liés à une liste ASP.NET présente les contrôles Repeater, DataList, et DataGrid
et aborde un certain nombre de concepts sous-jacents.
Création d'une vue Maître/Détails à l'aide du contrôle ASP.NET DataGrid aborde les différentes
caractéristiques du contrôle DataGrid.
Validation des entrées utilisateur en ASP.NET présente la structure de validation dans ASP.NET ainsi que les
contrôles de validation décrits dans cet article.
IBuySpy constitue un exemple d'application Web réelle, que vous pouvez découvrir à l'adresse www.ibuyspy.com
. Il démontre comme utiliser les divers aspects d'ASP.NET pour créer un site complet de shopping, et contient
également des explications techniques approfondies.
Dernière mise à jour le jeudi 16 novembre 2000
Pour en savoir plus
Les Web Forms pour les utilisateurs de Visual Basic