Partager via

Comment : concevoir un écran HTML à l'aide du concepteur d'écran

  • Article

À l'aide de le générateur d'écran, vous pouvez modifier l'apparence des écrans dans un client HTML pour une application Visual Studio LightSwitch.Par exemple, vous pouvez utiliser le concepteur pour accomplir les tâches suivantes.

Champs et commandes

  • Ajouter un groupe d'informations à un écran.

  • Modifier la disposition d'un groupe.

  • Ajoutez un bouton.

  • Ajoutez un élément.

  • Supprimez un élément.

  • Déplacez un élément.

  • Modifier le nom complet d'un élément.

  • Modifier la position de l'étiquette d'un élément.

  • Modifier la taille d'un élément.

  • Afficher ou masquer un élément.

  • Modifier le type de contrôle d'un élément.

  • Ajouter un contrôle personnalisé à un écran.

  • Annuler des modifications.

Collecte de données

  • Choisir si une collection affiche des données lorsque l'écran est chargé pour la première fois.

  • Activer ou désactiver la pagination.

  • Activer ou désactiver le tri.

  • Activer ou désactiver la recherche.

Ajouter un groupe d'informations à un écran

  1. Dans Arborescence de contenu de l'écran, sélectionnez le nœud auquel vous souhaitez ajouter un groupe d'informations.

  2. Dans la barre d'outils Concepteur d'écran, ouvrez la liste Ajouter un élément de disposition, puis choisissez Groupe.

    Un nouveau groupe apparaît alors.

  3. Dans la fenêtre Propriétés, dans la zone de texte Nom, entrez un nom pour le groupe.

  4. Dans Arborescence de contenu de l'écran, choisissez le nouveau groupe, ouvrez la liste Ajouter, puis sélectionnez les éléments à afficher au groupe.

Modifier la disposition d'un groupe

  1. Dans Arborescence de contenu de l'écran, ouvrez la liste pour un groupe que vous souhaitez modifier.

    La liste affiche tous les types de contrôles disponibles pour le groupe.

  2. Dans la liste, sélectionnez un type de contrôle.

    Le type de contrôle que vous choisissez affecte la disposition du groupe.Pour plus d'informations sur chaque type de contrôle, consultez Référence : propriétés du concepteur d'écran.

Ajoutez un bouton

  1. Dans Arborescence de contenu de l'écran, sélectionnez le nœud où le bouton apparaisse.

  2. Dans la barre d'outils Concepteur d'écran, choisissez Ajouter un élément de disposition, puis choisissez Bouton.

    La boîte de dialogue Ajouter un bouton s'affiche.

Ajoutez un élément

  • Dans Liste des membres d'écranConcepteur d'écran, faites glisser un élément (par exemple, un champ ou une commande) à l'emplacement approprié dans Arborescence de contenu de l'écran.

    Lorsque vous faites glisser l'élément, le pointeur indique si vous pouvez déplacer l'élément à un emplacement donné.Si le pointeur se transforme en un cercle avec une barre oblique à lui, vous ne pouvez pas supprimer l'élément dans cet emplacement.

    Pour plus d'informations sur l'ajout de champs personnalisés à un écran, consultez Comment : ajouter une propriété locale à un écran HTML.

Supprimez un élément

  1. Dans Arborescence de contenu de l'écran, sélectionnez l'élément (par exemple, un champ ou une commande) que vous souhaitez supprimer.

  2. Dans la barre d'outils Concepteur d'écran, choisissez le bouton Supprimer .

Déplacez un élément

  • Dans Arborescence de contenu de l'écran, faites glisser un élément (par exemple, un champ ou une commande) à un emplacement différent.

    Par exemple, faites glisser le champ d' PostalCode afin qu'il apparaisse sous le champ d' Country, ou faites glisser le bouton Modifier afin qu'il apparaisse sur le bouton Supprimer .

    [!REMARQUE]

    Lorsque vous faites glisser un champ, le pointeur indique si vous pouvez déplacer l'élément à un emplacement donné.Si le pointeur se transforme en un cercle avec une barre oblique à lui, vous ne pouvez pas déplacer l'élément à cet emplacement.

Modifier le nom complet d'un élément

  1. Dans Arborescence de contenu de l'écran, sélectionnez l'élément (par exemple, un champ ou une commande).

  2. Dans la fenêtre Propriétés, dans la zone de texte sous Nom complet, entrez un nom différent pour l'élément.

    Si vous modifiez le nom complet d'un élément, vous modifiez uniquement le nom qui apparaît dans l'écran.La propriété d' Name de l'élément reste le même.

Modifier la position de l'étiquette d'un élément

  1. Dans Arborescence de contenu de l'écran, sélectionnez le champ.

  2. Dans la fenêtre Propriétés, ouvrez la liste sous Position de l'étiquette, puis choisissez la position souhaitée.

    Le tableau suivant décrit chaque option.

    Position de l'étiquette

    Description

    Aligné à gauche

    L'étiquette apparaît près de le côté gauche du contrôle.

    Aligné à droite

    L'étiquette apparaît près de le côté droit du contrôle.

    Top

    L'étiquette s'affiche au-dessus du contrôle.

    Hidden

    Aucune étiquette ne s'affiche pour le contrôle.

    Aucun

    Aucune étiquette ne s'affiche pour le contrôle, et elle s'est alignée où l'étiquette aurait été.

Modifier la taille d'un élément

  1. Dans Arborescence de contenu de l'écran, sélectionnez l'élément (par exemple, un champ ou une commande).

  2. Dans la fenêtre Propriétés, sous Redimensionnement, choisissez une taille différente pour la largeur et la hauteur du contrôle.

    [!REMARQUE]

    Certains types de contrôles ne prennent pas en charge les propriétés de hauteur.

    Pour plus d'informations sur chaque paramètre, consultez Référence : propriétés du concepteur d'écran.

Afficher ou masquer un élément

  1. Dans Arborescence de contenu de l'écran, sélectionnez l'élément (par exemple, un champ ou une commande).

  2. Dans la fenêtre Propriétés, activez ou désactivez la case à cocher pour la propriété Est visible .

    [!REMARQUE]

    L'étiquette (Non visible) apparaît dans le concepteur en regard de les éléments qui ne sont pas visibles lorsque l'application s'exécute.

Modifier le type de contrôle d'un élément

Ajouter un contrôle personnalisé à un écran.

  1. Dans Arborescence de contenu de l'écran, sélectionnez un groupe.

  2. Dans la barre d'outils Concepteur d'écran, ouvrez la liste Ajouter un élément de disposition, puis choisissez contrôle personnalisé.

    Pour plus d'informations, consultez Comment : ajouter un contrôle personnalisé à un écran HTML pour une application LightSwitch.

Annuler des modifications

  • Dans la barre de menus, sélectionnez Modifier, Annuler.

    ConseilConseil

    Si vous annulez accidentellement une modification dans Concepteur d'écran, dans la barre de menus, sélectionnez Modifier, Rétablir.

Choisir si une collection affiche des données lorsque l'écran est chargé pour la première fois

  1. Dans Liste des membres d'écranConcepteur d'écran, sélectionnez le nœud parent d'une collection (par exemple, OrderCollection en-tête se).

  2. Dans la fenêtre Propriétés, désactivez la case à cocher Exécution automatique de la requête si vous ne voulez pas que la collection affiche des données lorsque l'écran s'ouvre.Activez la case à cocher Exécution automatique de la requête, si vous voulez que la collection affiche des données lorsque l'écran s'affiche.

Activer ou désactiver la pagination

  1. Dans Liste des membres d'écranConcepteur d'écran, sélectionnez le nœud parent d'une collection (par exemple, OrderCollection en-tête se).

  2. Dans la fenêtre Propriétés, désactivez la case à cocher Prendre en charge la pagination si vous souhaitez afficher toutes les lignes qu'une requête retourne, même si la collection de lignes est volumineuse.Activez la case à cocher si vous souhaitez limiter le nombre d'enregistrements qui s'affichent, puis spécifiez le nombre d'éléments à afficher sur chaque page.

    [!REMARQUE]

    Les utilisateurs peuvent afficher chaque page de résultats en choisissant un lien dans l'écran.

Activer ou désactiver le tri

  1. Dans Liste des membres d'écranConcepteur d'écran, sélectionnez le nœud parent d'une collection (par exemple, OrderCollection en-tête se).

  2. Dans la fenêtre Propriétés, activez ou désactivez la case à cocher Prendre en charge le tri .

Activer ou désactiver la recherche

  1. Dans Liste des membres d'écranConcepteur d'écran, sélectionnez le nœud parent d'une collection (par exemple, OrderCollection en-tête se).

  2. Dans la fenêtre Propriétés, activez ou désactivez la case à cocher Prendre en charge la recherche .

    Si vous activez la case à cocher, une zone de recherche apparaît au-dessus de la collection.

Voir aussi

Tâches

Comment : contrôler la navigation entre les écrans HTML dans une application LightSwitch

Comment : ajouter un bouton à un client mobile pour LightSwitch

Comment : ajouter un contrôle personnalisé à un écran HTML pour une application LightSwitch

Concepts

Référence : propriétés du concepteur d'écran

Autres ressources

Écrans de client HTML pour les applications LightSwitch