Ajout de composants avec le Concepteur de fiches (tutoriel de l'EDI)

De RAD Studio
Aller à : navigation, rechercher

Remonter à Démarrage de votre première application RAD Studio - Index (tutoriel de l'EDI)


Maintenant que vous avez défini la fiche principale, vous pouvez procéder à la disposition des composants nécessaires à la création de votre application éditeur de texte. Vous devez au préalable ajouter une barre de menus en fournissant les options de base pour la manipulation des fichiers, l'édition, ainsi que d'autres options telles que le retour automatique à la ligne.

Ajout d'une liste d'actions

Ajoutez une liste d'actions à la fiche pour fournir automatiquement les fonctionnalités de base de votre application. Pour cela, assurez-vous que l'onglet Conception est sélectionné, accédez à la palette d'outils et tapez "action" dans la zone de recherche. Cette action permet d'afficher uniquement les composants comportant la chaîne "action" dans leur nom, notamment le composant TActionList. La palette d'outils doit ressembler à ceci :

Conseil : Il est important de nommer correctement vos composants car votre code accède à ces composants en utilisant leurs noms. Il est donc utile de définir un nom que vous pouvez facilement mémoriser.

TutorialIDEFig3-7.png
Utilisation du filtre action dans la palette d'outils pour sélectionner TActionList

MemoTutorialToolPaletteDialogsCategory.png

Ajout du menu principal

Double-cliquez sur le bouton TActionList pour l'ajouter à la fiche. Vous devez maintenant changer le nom du composant TActionList pour l'adapter à votre application. Cliquez sur l'icône TActionList ActionList.png pour l'activer. Dans l'inspecteur d'objets, cliquez sur la propriété Name et définissez sa valeur sur ActionList.

TutorialIDEFig3-11.png

Vous allez ensuite placer une barre de menu sur la fiche. Pour cela, tapez "menu" dans la zone de recherche de la palette d'outils afin de localiser facilement le composant TMainMenu. Lors de l'utilisation de ce filtre, la palette d'outils a l'aspect suivant :

Ajout d'une barre d'état

ToolPaletteSearchForMenu.png
Utilisation du filtre status dans la palette d'outils pour sélectionner TMainMenu

TutorialIDEFig3-8.png
Utilisation du filtre menu dans la palette d'outils pour sélectionner TStatusBar

Double-cliquez sur TMainMenu pour l'ajouter à la fiche et utilisez l'inspecteur d'objets pour définir sa propriété Name sur MainMenu.

Ajout d'une zone de texte

Vous allez ensuite placer une barre d'état sur la fiche. Pour cela, tapez "status" dans la zone de recherche de la palette d'outils afin de localiser facilement le composant TStatusBar. Lors de l'utilisation de ce filtre, la palette d'outils a l'aspect suivant :

TutorialIDEFig3-8.png
Utilisation du filtre menu dans la palette d'outils pour sélectionner TStatusBar

Comme pour les composants précédents, double-cliquez sur TStatusBar pour l'ajouter à la fiche et utilisez l'inspecteur d'objets pour définir sa propriété Name sur StatusBar.

Ajout de dialogues pour ouvrir et enregistrer les fichiers

Le composant le plus important à ajouter est une zone de texte, qui fournit à votre application les fonctionnalités principales d'un éditeur de texte. Tapez "memo" dans la zone de recherche de la palette d'outils afin de localiser facilement le composant TMemo. Lors de l'utilisation de ce filtre, la palette d'outils a l'aspect suivant :

MemoTutorialToolPaletteDialogsCategory.png

TutorialIDEFig3-9.png
Utilisation du filtre memo dans la palette d'outils pour sélectionner TMemo

Double-cliquez sur TMemo pour l'ajouter à la fiche et utilisez l'inspecteur d'objets pour définir sa propriété Name sur Editor.

TutorialIDEFig3-10.png
Fiche de l'éditeur de texte basique

Définition de vos actions

Les seuls composants restants à ajouter sont des composants non visuels qui fournissent des boîtes de dialogue pour ouvrir et enregistrer les fichiers. Vous en avez besoin pour implémenter des fonctionnalités d'ouverture et d'enregistrement de base dans votre éditeur. Cliquez sur la catégorie Dialogues dans la palette d'outils.

TutorialIDEFig3-11.png

Double-cliquez sur TOpenDialog et sur TSaveDialog pour ajouter une instance de chacun de ces composants à votre fiche. Puis, utilisez l'inspecteur d'objets pour définir leur propriété Name sur OpenFileDialog et SaveFileDialog, respectivement.

La fiche principale doit à présent afficher le composant liste d'actions, le composant barre de menus principale, ainsi que les composants barre d'état, mémo et boîte de dialogue que vous avez ajoutés à la fiche.

TutorialIDEFig3-10.png
Fiche de l'éditeur de texte basique

TMemoTutorialNewActionConfiguration.png

Pour terminer la conception de la fiche, vous devez ajouter les éléments dans le menu principal. Commencez en double-cliquant sur le composant liste d'actions dans la fiche pour ouvrir l'éditeur de liste d'actions :

  • Cliquez sur Action1 et définissez sa propriété Name sur OpenAction, sa propriété Text sur Ouvrir... et sa propriété ShortCut sur CTRL+O.
  • Cliquez sur Action2 et définissez sa propriété Name sur SaveAction, sa propriété Text sur Enregistrer et sa propriété ShortCut sur CTRL+S.
  • Cliquez sur Action3 et définissez sa propriété Name sur SaveAsAction et sa propriété Text sur Enregistrer sous....
  • Cliquez sur Action4 et définissez sa propriété Name sur ExitAction et sa propriété Text sur Quitter.

L'éditeur de liste d'actions doit ressembler à ceci :

TutorialIDEFig3-14.png
Définition des actions du menu Fichier

L'éditeur de texte doit également avoir des capacités de modification.

Cliquez sur (pas de catégorie) dans la liste Catégories, puis sur le bouton Nouvelle action pour créer une nouvelle action personnalisée. Une fois la nouvelle action sélectionnée, sur l'inspecteur d'objets, définissez sa propriété Category sur Edition, sa propriété Name sur CutAction, sa propriété Text sur Couper et sa propriété ShortCut sur CTRL+X.

Alors que la catégorie Edition est toujours sélectionnée dans la liste Catégories, appuyez à cinq reprises sur le bouton Nouvelle action pour créer cinq nouvelles actions sous le menu Edition. Vous pouvez maintenant personnaliser les nouvelles actions créées :

  • Cliquez sur Action1 et définissez sa propriété Name sur CopyAction, sa propriété Text sur Copier et sa propriété ShortCut sur CTRL+C.
  • Cliquez sur Action2 et définissez sa propriété Name sur PasteAction, sa propriété Text sur Coller et sa propriété ShortCut sur CTRL+V.
  • Cliquez sur Action3 et définissez sa propriété Name sur SelectAllAction, sa propriété Text sur Tout sélectionner et sa propriété ShortCut sur CTRL+A.
  • Cliquez sur Action4 et définissez sa propriété Name sur UndoAction, sa propriété Text sur Annuler et sa propriété ShortCut sur CTRL+Z.
  • Cliquez sur Action5 et définissez sa propriété Name sur DeleteAction, sa propriété Text sur Supprimer et sa propriété ShortCut sur Suppr.

A présent que la catégorie Fichier est disponible dans l'éditeur de liste d'actions, sélectionnez cette catégorie dans la liste Catégories et cliquez à quatre reprises sur le bouton Nouvelle action pour créer quatre actions supplémentaires sous le menu Fichier. Vous pouvez maintenant personnaliser les nouvelles actions créées :

L'éditeur de liste d'actions doit ressembler à ceci :

Ajout de vos actions au menu principal

TutorialIDEFig3-14.png
Définition des actions du menu Fichier

TMemoTutorialEmptyItemsDesigner.png

L'éditeur de texte doit également avoir des capacités de modification.

TMemoTutorialFilledItemsDesigner.png

Pour associer ces éléments de menu visuels avec leurs actions :

  1. Sélectionnez chacun des trois principaux éléments puis, sur l'inspecteur d'objets
    1. Définissez la propriété Name sur FileMenu, EditMenu et FormatMenu respectivement.
    2. Définissez la propriété Text sur Fichier, Edition et Format respectivement.
  2. Sélectionnez chacun des éléments du sous-menu puis, sur l'inspecteur d'objets, donnez-leur un nom propre et définissez leur propriété Action sur l'action correspondante. Par exemple, sélectionnez le premier élément de sous-menu sous Fichier dans la liste Concepteur d'éléments puis, sur l'inspecteur d'objets, définissez sa propriété Name sur NewMenu et sa propriété Action sur NewAction.

L'image suivante montre l'aspect que devrait désormais avoir le Concepteur d'éléments.

TutorialIDEFig3-15.png
Contenu final sur le Concepteur d'éléments

Fermez le Concepteur d'éléments.

Suivant

Vos actions sont maintenant définies. Fermez l'éditeur de liste d'actions pour continuer.