Procédure pas à pas : conception d'un écran
Cette procédure pas à pas indique comment utiliser le concepteur d'écran LightSwitch pour créer un écran qui affiche les données client de l'exemple de base de données Northwind.Le concepteur d'écran est une zone de conception visuelle que vous pouvez utiliser pour modifier l'apparence d'un écran.
Cette procédure pas à pas vous montre comment effectuer les tâches suivantes :
Créer un écran
Modifier la disposition d'un écran
Supprimer des champs d'un écran
Modifier l'ordre des éléments
Modifier le nom complet d'un élément
Modifier le type de contrôle d'un élément
Personnaliser un écran dans une application en cours d'exécution
Composants requis
Cette procédure pas à pas suppose que l'exemple de base de données Northwind est installé sur votre ordinateur et que vous l'avez ajouté comme une source de données dans votre projet.
Pour plus d'informations sur l'installation de l'exemple de base de données Northwind, consultez Installation de l'exemple de base de données Northwind.
Pour plus d'informations sur l'ajout de l'exemple de base de données Northwind en tant que source de données dans votre projet, consultez Connexion aux données.
Création d'un écran
Cette section indique comment créer un écran pour afficher les données client de l'exemple de base de données Northwind.Cet écran est divisé en deux parties.La première partie affiche une liste récapitulative de tous les clients ; l'autre partie affiche les détails du client sélectionné..
Pour créer un écran
Dans l' Explorateur de solutions, sélectionnez Écrans.
Dans le menu Projet, cliquez sur Ajouter un écran.
La boîte de dialogue Ajouter un nouvel écran s'affiche.
Dans la boîte de dialogue Ajouter un nouvel écran, sous Sélectionnez un modèle d'écran, sélectionnez Écran de liste et détails.
Sous Nom de l'écran, tapez Customers.
Dans la liste déroulante sous Données d'écran, sélectionnez <NomSourceDonnées>.Customers.
Sous Données supplémentaires à inclure, sélectionnez Détails du client et Commandes du client.
Cela ajoute les champs de l'entité Customer à la partie détails de l'écran, avec une liste des commandes passées par ce client.
L'illustration suivante montre comment la boîte de dialogue s'affiche après avoir effectué les étapes de cette section.
.png "Boîte de dialogue Ajouter un nouvel écran")
Cliquez sur OK pour créer l'écran.
Le Concepteur d'écran apparaît.
Modification de la disposition de l'écran
L'écran de liste et détails comporte deux colonnes.La colonne de gauche est une liste des clients.La colonne de droite contient deux lignes.La ligne supérieure contient les détails du client sélectionné et la ligne inférieure contient les commandes associées au client sélectionné.L'arborescence de contenu de l'écran du concepteur d'écran affiche comment cette liste est composée.
Cette section indique comment modifier la présentation de l'écran de sorte qu'il contienne deux lignes à la place de deux colonnes.La ligne supérieure contiendra la liste de clients.La ligne inférieure contiendra deux colonnes.La colonne de gauche contiendra les détails du client sélectionné et la colonne de droite contiendra les commandes associées au client sélectionné.
Pour changer la disposition de la liste
Dans l' Arborescence de contenu de l'écran du Concepteur d'écran, modifiez la disposition du nœud Customers de Disposition des colonnes en Disposition des lignes.Pour ce faire, cliquez sur la flèche de déroulement en regard du nœud Customers.Ensuite, dans la liste déroulante, cliquez Disposition des lignes.
Modifiez la disposition pour Colonne de détails de Disposition des lignes en Disposition des colonnes.Pour ce faire, cliquez sur la flèche de déroulement en regard du nœud Details Column, puis cliquez sur Disposition des colonnes.
Suppression de champs d'un écran
Par défaut, la zone de l'écran qui affiche les détails d'un client nommée Colonne de détails affiche tous les champs de la source de données.Si vous ne voulez pas que tous les champs s'affichent, vous pouvez supprimer ceux que vous ne voulez pas afficher.Par exemple, les étapes suivantes indiquent comment supprimer le champ Pays.
Pour supprimer des champs d'un écran
Dans l' Arborescence de contenu de l'écran, développez le nœud Détails du client, s'il ne l'est pas déjà.
Cliquez sur le champ Pays, puis dans la barre de commandes du Concepteur d'écran, cliquez sur Supprimer.
Modification de l'ordre des champs
Les étapes suivantes indiquent comment modifier l'ordre d'affichage des champs, par exemple, le champ CustomerID et le champ Postal Code.
Pour changer l'ordre des champs
Dans l' Arborescence de contenu de l'écran, développez le nœud Détails du client, s'il ne l'est pas déjà.
Pour déplacer le champ CustomerID vers le bas de la colonne de détails, faites-le glisser sous le champ Télécopie.
Pour déplacer le champ Code postal vers la position juste au-dessus du champ ID du client, faites-le glisser entre le champ Télécopie et le champ CustomerID.
Modification du type de contrôle d'un champ
Vous pouvez personnaliser l'affichage d'un champ pour l'utilisateur.Par exemple, vous pouvez définir l'affichage d'un champ de texte en tant que TextBox ou Label.Les étapes suivantes indiquent comment modifier un champ d'affichage en un champ Label afin que l'utilisateur ne puisse pas modifier sa valeur.
Pour modifier le type de contrôle d'un champ
Dans l' Arborescence de contenu de l'écran, développez le nœud Détails du client, s'il ne l'est pas déjà.
Sélectionnez le champ ID du client, puis dans la liste déroulante, sélectionnez Étiquette.
Vous pouvez répéter cette étape pour modifier d'autres champs.
Pour tester les modifications, appuyez sur F5 pour exécuter l'application.
Personnalisation d'un écran dans une application en cours d'exécution
Vous pouvez également personnaliser un écran pendant que l'application s'exécute.Par exemple, vous pouvez supprimer des champs, modifier l'ordre des champs et modifier des propriétés, telles que le type de contrôle ou l'alignement d'étiquette.
Pour personnaliser un écran dans une application en cours d'exécution
Si votre application ne s'exécute pas déjà, appuyez sur F5 pour la démarrer.
Dans la barre de commandes de l'écran, cliquez sur Concevoir l'écran.
Dans l'écran Mode de personnalisation, supprimez le champ ID du client de la colonne de détails en le sélectionnant dans le nœud Détails du client et en cliquant ensuite sur le bouton Supprimer (
.png "Supprime l'élément sélectionné.")
).Déplacez le champ Télécopie sous le champ Code postal en le sélectionnant dans le nœud Détails du client et en cliquant ensuite sur le bouton Descendre (
.png "Déplace un élément plus bas dans la liste.")
).Modifiez le nom du champ Téléphone en Numéro de téléphone en sélectionnant le champ dans le nœud Customer Details, puis, dans la fenêtre Propriétés, modifiez la valeur de la propriété Nom complet en Numéro de téléphone.
Modifiez le type d'affichage du champ Numéro de téléphone en un Label en sélectionnant le champ dans le nœud Customer Details, puis dans la fenêtre Propriétés, cliquez sur la propriété Type de contrôle et sélectionnez la valeur Étiquette.
Modifiez l'alignement des étiquettes dans la colonne de détails.Sélectionnez le premier champ du nœud Détails du client, dans ce cas, le champ Nom de la société.Dans la fenêtre Propriétés, cliquez sur la propriété Position de l'étiquette et sélectionnez la valeur Aligné à droite.Répétez cette étape pour tous les champs du nœud Détails du client.
Pour enregistrer vos modifications, cliquez sur Enregistrer.Votre application affiche maintenant les modifications que vous venez d'apporter.
Étapes suivantes
Par défaut, lorsque vous sélectionnez une source de données pour un écran, toutes les données de la source sont affichées.Si vous voulez seulement afficher un sous-ensemble des données, vous pouvez créer une requête pour définir les données à afficher.Pour plus d'informations, consultez Comment : Concevoir une requête à l'aide du concepteur de requêtes.