I. Introduction▲
Objectif : connaître les méthodes de la RichEdit et aborder les fonctions vocales des Microsoft Agents pour réaliser un éditeur de texte à fonctions vocales. Ne vous étonnez pas si ce tutoriel possède quelques ressemblances avec celui présenté dans l'aide de Delphi 6, car il m'a beaucoup aidé et je ne m'en cache pas.
Pour savoir comment créer, animer, faire parler des Microsoft Agents, rendez-vous sur mon premier tutoriel.
Ce tutoriel a été réalisé avec Delphi 6 Entreprise. Cependant il devrait marcher sur toutes les versions de Delphi supérieures à Delphi 4.
Sur ce, bonne programmation !
II. Éditeur de texte▲
Premièrement, démarrez un nouveau projet.
Insérez une RichEdit (« Win32 ») sur votre fiche puis cliquez sur « … » à cause de sa propriété Lines. Ensuite effacez le contenu pour disposer d'un espace de texte vide au démarrage de l'application.
Réglez la propriété Align de votre RichEdit à AlClient pour qu'elle puisse occuper un maximum d'espace et la propriété ScrollBar à SSVertical.
Maintenant déposez un composant StatusBar (« Win32 ») sur votre fiche et cliquez sur « … » à droite de sa propriété Panels. Ensuite, cliquez juste sur « Ajouter un nouvel élément ».
Mettez dans l'emplacement var de Unit1 :
Fichier : string
;
Cette variable servira à désigner le fichier que votre RichEdit affichera.
Puis, à l'aide de l'inspecteur d'objets, sélectionnez Form1, puis « Événements » et enfin double-cliquez dans l'emplacement OnCreate qui désigne les actions que votre programme effectuera à son ouverture. Insérez le code suivant dans cet emplacement :
Fichier := 'sans titre.txt'
;
StatusBar1.Panels[0
].Text := Fichier;
Enregistrez votre projet puis exécutez-le. Vous verrez que « sans titre.txt » est écrit dans votre StatusBar.
Maintenant nous allons créer une liste d'actions que l'on lancera à partir du menu et de la barre d'outils. Pour cela, déposez un composant ActionList (« Standard ») et double-cliquez dessus afin d'ouvrir son interface.
Nous allons définir les actions que Delphi n'a pas mises à disposition dans ses actions standard.
II-A. Nouveau▲
Créez une nouvelle action, réglez ses propriétés Caption et Name sur « Nouveau », sa propriété ShortCut sur « Ctrl + N » et sa propriété Category sur « Fichier ».
|
Puis dans l'événement Execute de cette action, tapez :
RichEdit1.Clear;
Fichier := 'sans titre.txt'
;
StatusBar1.Panels[0
].Text := Fichier;
Cette action servira à supprimer le texte de la RichEdit et de régler Fichier à « sans titre.txt ».
II-B. Enregistrer▲
Créez une nouvelle action, réglez ses propriétés Caption et Name sur « Enregistrer », sa propriété ShortCut sur « Ctrl + E » et sa propriété Category sur « Fichier ». Puis dans l'événement Execute de cette action, tapez :
if
(Fichier = 'sans titre.txt'
) then
FileSaveAs1.Execute
else
RichEdit1.Lines.SaveToFile(Fichier);
Cette commande lance la commande FileSaveAs (que nous allons bientôt créer) si le fichier n'a pas encore été enregistré. Autrement le fichier est enregistré.
Pour les autres actions, Delphi nous mâche un peu le travail en mettant à disposition des actions standard.
Ouvrez le ActionList, cliquez sur « Nouvelle action standard » puis sélectionnez en maintenant la touche AltGr enfoncée (pour sélectionner plusieurs éléments) les actions suivantes :
TEditCut, TEditCopy, TEditPaste, TSelectall, TUndo, TRichEditBold, TRichEditItalic, TRichEditUnderline, TRichEditBullets, TRichEditAlignLeft, TRichEditAlignCenter, TRichEditAlignRight, TFileOpen, TFileSaveAs, TFilePrintSetup, TFileExit.
Voilà il y en a un bon paquet.
Pour ceux qui possèdent la version US de Delphi, allez dans chaque catégorie puis sélectionnez avec AltGr la totalité des actions de cette catégorie et mettez leurs propriétés Category en français. Maintenant, allez dans la rubrique « Toutes les actions » et il ne reste plus qu'à y traduire tous les Caption et Hints de vos actions. Ne changez pas les propriétés Name.
Nous allons définir plus précisément certaines actions.
II-C. Ouvrir▲
Sélectionnez FileOpen1 puis, dans l'inspecteur d'objets, cliquez sur le petit + à côté de « Dialog » pour définir les paramètres de la boîte de dialogue « Ouvrir ». Mettez la propriété DefaultExt à « txt » et Title à « Ouvrir un fichier texte ». Ensuite, double-cliquez sur « Filtrer » et remplissez-le selon le screenshot suivant :
|
Ensuite, mettez le code suivant dans l'évènement Onaccept :
RichEdit1.Lines.LoadFromFile(FileOpen1.Dialog.FileName);
Fichier := FileOpen1.Dialog.FileName;
StatusBar1.Panels[0
].Text := Fichier;
Votre programme va ainsi charger le fichier sélectionné.
II-D. Enregistrer sous▲
Sélectionnez l'action FileSaveAs puis, dans l'inspecteur d'objets, cliquez sur le petit + à côté de Dialog pour définir les paramètres de la boîte de dialogue « Enregistrer Sous ». Mettez la propriété DefaultExt à « txt » et Title à « Enregistrer un fichier texte ». Ensuite, double-cliquez sur « Filtrer » et remplissez-le de la même manière que pour la commande « Ouvrir ».
Ensuite dans l'événement Onaccept de FileSaveAs, insérez le code suivant :
RichEdit1.Lines.SaveToFile(FileSaveAs1.Dialog.FileName);
Fichier := FileSaveAs1.Dialog.FileName;
StatusBar1.Panels[0
].Text := Fichier;
Cette commande ordonne au programme d'enregistrer les lignes de votre RichEdit dans le fichier sélectionné avec la boîte de dialogue « Enregistrer sous ».
II-E. Imprimer▲
Sélectionnez FilePrintSetup dans la liste d'actions puis insérez le code dans son événement OnAccept :
RichEdit1.Print('Imprimer le document'
);
Voilà toutes vos actions sont créées. Il faut maintenant créer un menu et une barre d'outils pour pouvoir y accéder.
II-F. Liste d'images▲
D'abord nous allons créer les images qui seront associées aux éléments du menu et aux boutons de la barre d'outils.
Téléchargez les images mises à disposition pour ce programme et décompressez l'archive dans le répertoire de votre projet.
Déposez un composant TImageList (« Win32 ») sur votre fiche, puis ouvrez l'éditeur de listes d'images en double-cliquant dessus.
Cliquez sur « Ajouter », puis sélectionnez dans la liste le fichier « newhf.bmp » et cliquez sur « Ouvrir ».
Répétez cette opération pour les fichiers (respectez l'ordre donné) :
« Open.bmp », « Save.bmp », « Print.bmp », « Cut.bmp », « Paste.bmp », « Bold.bmp », « Italic.ico », « Underline.bmp », « Aleft.bmp », « Center.bmp », « ARight.bmp », « para_bull.ico ».
Normalement si tout ce passe bien, l'image « par_bull.ico.bmp » doit être classée n° 13.
Cliquez sur « Appliquer » puis sur « OK ».
|
Maintenant nous allons associer ces différentes images à leurs actions respectives.
Définissez la propriété Images de votre composant ActionList pour demander au programme d'utiliser les images faisant partie de votre liste.
Ensuite, double-cliquez sur ActionList, sélectionnez « Toutes les actions ».
Sélectionnez l'action « Nouveau » puis dans la propriété Image, tapez « 0 ».
Répétez cette action de la manière suivante :
Action |
Image correspondante |
Nouveau |
0 |
FileOpen1 |
1 |
Enregistrer |
2 |
FilePrintSetup1 |
3 |
EditCut1 |
4 |
EditCopy1 |
6 |
EditPaste1 |
6 |
RichEditBold1 |
7 |
RichEditItalic1 |
8 |
RichEditUnderline1 |
9 |
RichEditBullets1 |
13 |
RichEditAlignLeft1 |
10 |
RichEditAlignRight1 |
11 |
RichEditAlignCenter1 |
12 |
Pour les actions non citées dans le tableau ci-dessus, réglez leur propriété Image sur « -1 ».
II-G. Création du menu▲
Déposez un composant MainMenu (« Standard ») sur votre fiche puis double-cliquez dessus pour ouvrir l'éditeur de menu.
Dans la première case en haut à gauche, réglez Caption sur « &Fichier » (ne pas mettre les guillemets !).
Sur la première case de la première colonne, définissez l'action « Nouveau ».
2e case : « FileOpen1 ».
3e : « Enregistrer ».
4e : « FileSaveAs ».
5e : « FilePrintSetup1 ».
Pour la 6e case : mettez juste un « - » dans la propriété Caption ;
Enfin pour la 7e case, définissez la propriété Action sur « FileExit1 ».
Maintenant, passez à la deuxième colonne. Définissez la propriété Caption de l'entête de cette colonne à « &Edition ».
- Première case : réglez la propriété Action sur « EditCut1 ».
- 2e case : « EditCopy1 ».
- 3e : « EditPaste1 ».
- 4e case : insérez le caractère « - » dans sa propriété Caption.
- 5e : « EditUndo1 ».
- 6e : « EditSelectAll ».
Votre menu doit ressembler à cela :
|
Maintenant on règle la propriété Images du composant MainMenu (fermez l'éditeur et cliquez juste une fois sur ce composant) sur « ImageList1 ». Votre menu doit ressembler à ceci :
|
Enregistrez et testez votre projet.
II-H. Création d'une barre d'outils▲
Rien de plus facile que de créer une petite barre d'outils avec Delphi.
Déposez un composant ToolBar (« Win32 ») sur votre fiche.
Réglez sa propriété Images sur « ImageList1 » pour une raison que vous devez connaître maintenant.
Ensuite insérez des boutons et des séparateurs pour obtenir le résultat suivant (pour insérer des boutons et des séparateurs, bouton droit sur votre barre d'outils et sélectionnez « Nouveau bouton » ou « Nouveau séparateur »).
|
Cliquez sur le premier bouton de cette barre d'outils puis réglez sa propriété Action à « Nouveau ».
Répétez cette même opération pour les autres actions en utilisant les données du tableau ci-dessous :
Boutons |
Actions |
1 |
« Nouveau » |
2 |
« FileOpen1 » |
3 |
« Enregistrer » |
4 |
« FilePrintSetup1 » |
- |
|
5 |
« EditCut1 » |
6 |
« EditCopy1 » |
7 |
« EditPaste1 » |
- |
|
8 |
« RichEditBold1 » |
9 |
« RichEditItalic1 » |
10 |
« RichEditUnderline1 » |
- |
|
11 |
« RichEditAlignLeft1 » |
12 |
« RichEditAlignCenter1 » |
13 |
« RichEditAlignRight1 » |
- |
|
14 |
« RichEditBullets1 » |
Maintenant, votre projet doit ressembler à ceci :
Enregistrez puis testez votre application. Le résultat est quand même pas mal !
II-I. Gestion de la police▲
II-I-1. Taille de la police▲
Déposez un composant ComboBox dans votre barre d'outils et insérez le chiffre « 8 » dans sa propriété Text.
Cliquez sur « … » dans sa propriété Items pour définir les éléments de cette ComboBox qui servira à changer la taille de la police.
Les remplir de la façon suivante :
|
Cliquez sur « OK » (pour plus de facilité, vous pouvez réduire la taille de votre ComboBox).
Définissez l'événement OnChange de votre ComboBox de la manière suivante :
RichEdit1.SelAttributes.Size := strtoint(Combobox1.text);
J'en profite pour remercier les participants du forum Delphi qui m'aident beaucoup, c'est notamment grâce à eux que je connais la méthode Selattributes. Merci encore.
Cette commande demande de définir la police de votre RichEdit à celle inscrite dans la ComboBox.
Enregistrez votre projet puis testez-le ; on commence à sentir le bon travail, mais ça serait encore mieux si on pouvait changer le style de la police.
II-I-2. Nom de la police▲
Déposez une autre ComboBox sur votre barre d'outils et enlevez le texte contenu dans la propriété que vous connaissez maintenant.
Dans l'inspecteur d'objets, sélectionnez dans la liste Form1 puis « Événements » (« Events ») et double-cliquez sur OnCreate qui est l'événement se chargeant au démarrage de la fiche. Puis collez le code suivant (à la suite des autres insérés précédemment), qui permet de générer automatiquement dans votre ComboBox toutes les polices installées sur l'ordinateur de l'utilisateur :
ComboBox2.Items := Screen.Fonts;
ComboBox2.Text := RichEdit1.Font.Name;
Maintenant, double-cliquez sur cette combo pour générer l'événement Onchange :
RichEdit1.Selattributes.Name := ComboBox2.Text;
Enregistrez et testez. Tout est impeccable, il ne reste plus que la modification de la police.
II-I-3. Modification de la couleur de la police▲
Déposez un composant ColorBox (« Supplément ») encore dans votre barre d'outils et réduisez légèrement sa taille.
Cliquez sur le + à côté de la propriété Style et mettez l'élément SystemColor à False et l'élément PrettyName à True.
Ensuite double-cliquez sur ce composant pour créer l'événement Onchange et insérez le code suivant :
RichEdit1.SelAttributes.Color := ColorBox1.Selected;
Cette commande ordonne à votre RichEdit de sélectionner comme couleur celle inscrite dans la ColorBox.
Votre éditeur de texte doit maintenant ressembler à ceci :
Voici le source du programme à cette étape : Programme.
Voilà, votre éditeur de texte est créé. Si vous voulez, vous pouvez réaliser la rubrique suivante pour insérer un compagnon utilisant les Microsoft Agents capable de s'animer et de lire le texte tapé ou ouvert.
III. Fonctions vocales▲
III-A. Composants nécessaires▲
Je vous renvoie à mon tutoriel précédent pour télécharger et installer les composants nécessaires. Claude est le personnage Microsoft Agents que nous utiliserons.
III-B. Installation dans Delphi▲
Après avoir installé les composants (certaines erreurs se déroulent pendant l'installation de certains composants ; méthode : faites « Parcourir » puis « OK »).
Ensuite, pour pouvoir utiliser les Microsoft Agents dans Delphi, vous devez importer le composant ActiveX : dans le menu « Composants » de Delphi, choisissez « Importer un contrôle ActiveX » et sélectionnez dans la liste « Microsoft Agent Control 2.0 ».
Cliquez sur « Installer ».
Voilà vous êtes prêt(e) à programmer notre petit personnage qui mettra un peu de tonus dans votre application.
C'est parti pour le codage des petits agents.
Déposez un composant Agent (ActiveX) sur votre fiche. Ne touchez pas à ses propriétés.
Dans l'emplacement var de votre unit1, placez le code suivant sur la ligne après Form1:TForm; :
Claude:IAgentCtlCharacterEX;//ainsi ça ira plus vite pour parler de notre agent
Ensuite dans l'événement Oncreate de Form1 (sélectionné dans l'inspecteur d'objet), placez ces lignes à la suite des autres :
Agent1.Connected := True
;//On "branche" l'agent à notre appli
Agent1.Characters.Load('Claude'
, 'Claude.acs'
);//on charge le perso Claude
Claude := IAgentCtlCharacterEX(Agent1.Characters.Character('Claude'
));//on désigne Claude comme agent de l'application
Claude.Show(False
); //on affiche Claude
Enregistrez puis testez votre application. Vous pouvez maintenant voir Claude s'afficher sur votre écran.
Par défaut Claude est placé en haut à gauche de l'écran. Cette place est gênante, nous allons lui demander de se déplacer en bas à droite de la RichEdit. Pour cela, insérez le code suivant dans l'événement Oncreate de Form1 à la suite des autres lignes :
Claude.MoveTo(RichEdit1.Left + RichEdit1.Left,RichEdit1.Width,RichEdit1.Top + RichEdit1.Height,1000
);
//Structure de base : Claude.MoveTo(pointd'abscisse,pointd'ordonnée,vitesse)
Nous allons maintenant demander à Claude de saluer l'utilisateur. Donc insérez le code suivant toujours dans l'événement Oncreate :
Claude.Play('Wave'
);//structure de base : Claude.Play('Nom de l'animation')
Maintenant, le grand moment attendu : nous allons demander à l'agent de réciter le texte contenu dans la RichEdit.
Placez un bouton dans votre barre d'outils et réglez son Caption à « Lire le texte » (agrandissez un peu votre fiche).
Ensuite double-cliquez dessus pour déclarer sa procédure Onclick (instruction que le programme effectue quand on clique sur le bouton). Insérez le code suivant (ouf c'est la dernière fois que je le dis) :
var
i:integer
;
begin
for
i:=0
to
RichEdit1.Lines.Count-1
do
//sélectionne toutes les lignes de la richedit
Claude.speak(RichEdit1.Lines[i],''
)
end
;
Enregistrez et exécutez votre programme :
Voilà le source du programme que vous devez obtenir : Programme.
C'est fini. Quant à moi, je suis en seconde avec option européenne et Mpi au Lycée Assomption de Rennes. Bon développement à tous et vive Delphi !