Reprenons notre EDI et, après avoir bien configuré les données au niveau du serveur et du nom de l'application, l'interface doit maintenant ressembler à ceci :
Vous pouvez remarquer que l'interface des applications ASP.NET diffère des applications Winforms mais nous y retrouvons quand même pas mal de points communs, notamment :
l'explorateur de solution contenant notre projet "WebApp", sa localisation "http://localhost/WebApp" et la page par défaut "Default.aspx", que nous pouvons bien évidemment renommer.
les propriétés des contrôles et pages grâce auxquelles nous allons pouvoir définir des comportements graphiques ou autres.
la page de code où une partie de codage est générée automatiquement par l'environnement de développement.
deux boutons "design" et "source" nous permettant de passer aisément d'un mode à l'autre dans notre page aspx. Remarquez aussi que, si vous déplacez votre curseur dans la partie code, à droite du bouton "source", vous apercevez l'endroit exact où se situe le curseur dans l'arborescence des balises HTML.
la boite à outils, ancrée ou non, contenant les contrôles utilisables pour votre application web :
l'explorateur de solution contenant notre projet "WebApp", sa localisation "http://localhost/WebApp" et la page par défaut "Default.aspx", que nous pouvons bien évidemment renommer.
les propriétés des contrôles et pages grâce auxquelles nous allons pouvoir définir des comportements graphiques ou autres.
la page de code où une partie de codage est générée automatiquement par l'environnement de développement.
deux boutons "design" et "source" nous permettant de passer aisément d'un mode à l'autre dans notre page aspx. Remarquez aussi que, si vous déplacez votre curseur dans la partie code, à droite du bouton "source", vous apercevez l'endroit exact où se situe le curseur dans l'arborescence des balises HTML.
la boite à outils, ancrée ou non, contenant les contrôles utilisables pour votre application web :
Passons maintenant en mode "design". Faites glisser sur la page les contrôles suivant et changez leurs propriétés en suivant le tableau ci-après :
| Contrôle | Propriété | Contenu |
| Un "label" : Label1 | Text | "Nom :" |
| Un "textbox" à droite de Label1 : TextBox1 | BorderWidth | 2 |
| Un "button" sous Label1 : Button1 | Text | "Cliquez" |
| Un "label" sous le bouton : Label2 | Text | "Bonjour" |
Remarque : dans la propriété BorderWidth, par défaut, l'unité de mesure est en "px" (pixel). Cela correspond bien aux normes HTML.
Votre page doit ressembler à ceci :
Votre page doit ressembler à ceci :
Si vous retournez en mode "source", vous constatez que le code HTML s'est enrichi automatiquement des contrôles que vous avez intégrés à votre page ainsi que des propriétés modifiées via la page de propriétés. Rien ne vous empêche, au fil de l'expérience acquise dans le développement ASP.NET, de taper immédiatement le code de vos contrôles dans la page HTML, vous verrez que le "design" se met aussi à jour de la même manière. L'avantage de coder directement dans l'HTML se trouve dans le libre choix que vous avez du type de contrôle placé.
Par exemple, vous voyez dans notre application que le TextBox1 est considéré comme un "asp:textbox" ce qui, niveau exécution du code prend plus de place et de temps qu'un simple "asp:inputbox" alors que le résultat, ici, est exactement le même. Pour les utilisateurs avertis ayant déjà réalisé des sites web en HTML, il peut aussi être plus aisé de coder directement dans la page source.
A ce point, nous avons des contrôles placés sur une page aspx, mais encore aucune action n'est définie. Vous avez beau taper un nom dans "TextBox1" et cliquer sur le "Button1", rien ne se passe. En effet, il faut associer un événement au bouton "Cliquez". Pour ce faire, double-cliquez sur le bouton en mode design et l'environnement de développement va créer une méthode associée à l'événement "Click" du bouton :
Par exemple, vous voyez dans notre application que le TextBox1 est considéré comme un "asp:textbox" ce qui, niveau exécution du code prend plus de place et de temps qu'un simple "asp:inputbox" alors que le résultat, ici, est exactement le même. Pour les utilisateurs avertis ayant déjà réalisé des sites web en HTML, il peut aussi être plus aisé de coder directement dans la page source.
A ce point, nous avons des contrôles placés sur une page aspx, mais encore aucune action n'est définie. Vous avez beau taper un nom dans "TextBox1" et cliquer sur le "Button1", rien ne se passe. En effet, il faut associer un événement au bouton "Cliquez". Pour ce faire, double-cliquez sur le bouton en mode design et l'environnement de développement va créer une méthode associée à l'événement "Click" du bouton :
Remarquez qu'une nouvelle page est apparue "Default.aspx.vb" qui contient le code associé aux méthodes et événements. Dans votre événement "Button1_Click", tapez cette ligne :
label2.text=label2.text & " " & textbox1.text
Vous verrez en cours de frappe que l'aide à la complétion existe aussi, exactement comme dans les applications winforms. Maintenant, vous pouvez exécuter votre page aspx (F5). Lors d'une première exécution vous allez certainement obtenir ce message :
label2.text=label2.text & " " & textbox1.text
Vous verrez en cours de frappe que l'aide à la complétion existe aussi, exactement comme dans les applications winforms. Maintenant, vous pouvez exécuter votre page aspx (F5). Lors d'une première exécution vous allez certainement obtenir ce message :
Par défaut, le débogage n'est pas activé au niveau des applications web. On vous conseille fortement de l'activer en répondant OK avec la première option cochée.
Ensuite, testez en tapant un nom et en cliquant sur votre bouton.
Prenons un peu le temps de voir le code HTML de la page exécutée :
Ensuite, testez en tapant un nom et en cliquant sur votre bouton.
Prenons un peu le temps de voir le code HTML de la page exécutée :
Vous constatez que des champs cachés ont été générés. Le champ nommé _VIEWSTATE contient toutes les informations d'état des contrôles de la page. Il est intéressant car est accessible par le programmeur et peut contenir des données internes aux pages. Cette notion de conservation de données sera développée plus loin dans ce tutoriel.
0 التعليقات:
Post a Comment