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

De Appmethod Topics
Aller à : navigation, rechercher

Remonter à Démarrage de votre première application Appmethod - 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 :

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

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.

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.

Ajout du menu principal

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 :

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

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 barre d'état

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 d'une zone de texte

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 :

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.

Ajout de dialogues pour ouvrir et enregistrer les fichiers

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.

MemoTutorialToolPaletteDialogsCategory.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

Définition de vos actions

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 :

TutorialIDEFig3-11.png

Vous êtes maintenant prêt à créer les éléments du menu principal.

L'éditeur de texte nécessite quelques capacités de fichier. Vous devez donc définir certaines actions. Cliquez sur le bouton Nouvelle action pour créer une nouvelle action personnalisée.

Une fois votre nouvelle action sélectionnée, sur l'inspecteur d'objets, définissez sa propriété Category sur Fichier. Appmethod affiche cette nouvelle catégorie dans la liste Catégories sur l'éditeur de liste d'actions, et fait apparaître votre nouvelle action dans cette nouvelle catégorie. Alors que votre nouvelle action est toujours sélectionnée, définissez sa propriété Name sur NewAction, sa propriété Text sur Nouveau et sa propriété ShortCut sur CTRL+N:

TMemoTutorialNewActionConfiguration.png

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 :

  • 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, dans 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.

Vous devez ajouter une action supplémentaire pour disposer d'une fonction de retour automatique à la ligne dans votre éditeur de texte. 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, dans l'inspecteur d'objets, définissez sa propriété Category sur Format, sa propriété Name sur WordWrapAction et sa propriété Text sur Retour automatique à la ligne.

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

Ajout de vos actions au menu principal

Sur le Concepteur de fiches, double-cliquez sur le composant du menu principal pour ouvrir le Concepteur d'éléments :

TMemoTutorialEmptyItemsDesigner.png

Sur le Concepteur d'éléments, vous devez définir les éléments visuels qui représentent les actions que vous avez définies. Appuyez sur le bouton Ajouter un élément à trois reprises pour ajouter des instances de TMenuItem pour les entrées de menu Fichier, Edition et Format. Puis, sélectionnez chaque TMenuItem ajouté à partir de la liste et appuyez à cinq reprises sur le bouton Ajouter un élément enfant pour le premier élément de menu, à six reprises pour le second élément de menu et une seule fois pour le troisième élément de menu :

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

Personnalisation des composants