Vous avez installé Delphi et vous avez hâte de faire votre premier programme?

Parfait, dans ce tutoriel nous allons entrer directement dans le vif du sujet en réalisant un programme simple mais pleinement fonctionnel en quelques étapes.

C'est parti !!...

Alors bien évidemment on commence par lancer Delphi.

Et après quelques secondes de chargement vous devriez vous retrouver face à un écran semblable à celui-ci.

 

Je ne vais pas m'attarder ici à vous expliquer l'utilité de chaque menu, bouton ou fenêtre, cela fera l'objet d'autres tutoriels. Nous allons directement démarrer un nouveau projet.

Dans le menu Fichier, sélectionnez une nouvelle Application Fiches VCL.

 

Nous obtenons ainsi une application dotée d'une fiche principale nommée Form1. Cette fiche sera l'interface de notre application, la partie visuelle qui permet à l'utilisateur d'interagir avec l'application.

Cette application est déjà fonctionnelle, il suffit de la lancer pour le vérifier. Pour cela allez dans le menu Exécuter et sélectionnez: Exécuter.

 

L'application se lance et vous devriez obtenir ceci:

 

Alors, certes, c'est un peu vide et l’intérêt de cette application est quasi nul mais cela permet de constater que la base est là et bien fonctionnelle. On peut redimensionner la fiche, la déplacer, la réduire et surtout on peut la fermer.

Comme vous le savez notre application est constitué d'une interface mais bien évidement aussi d'un programme qui sera le cerveau de notre application.

Alors je ne vais pas tout de suite vous parler programmation, il nous faut terminer l'interface avant mais je vais faire une parenthèses pour vous montrer comment basculer entre l'éditeur d'interface et l’éditeur de code. On a vite fait de se retrouver dans l'éditeur de code par accident donc il vaut mieux que vous sachiez comment revenir à l'éditeur d'interface.

En fait c'est tout simple, vous avez un groupe d'onglet en bas de l'interface de Delphi. Un clic sur l'onglet code vous permet d'aller dans l'éditeur de code. Un clic sur conception et vous êtes de retour dans l’éditeur d'interface.

 

Fin de la parenthèse, nous pouvons revenir à la création de notre application.

 

La base étant faite, il ne reste plus qu'à lui ajouter quelques fonctionnalités.

Pour cela, nous allons utiliser des composants visuels. Rendez vous dans la Palette d'outils et ouvrez la catégorie Standard.

 

Sélectionnez le composant TEdit et faites un glisser-déposer sur votre fiche.

 

Faites de même avec les composants TLabel et TButton pour obtenir quelque chose comme ça:

 

Les composants insérés dans notre interface sont encore dans leur configuration par défaut, à nous de les personnaliser en fonction de nos besoins.

Nous allons commencer par notre composant TEdit.
Ce composant est une zone de saisie, l'utilisateur peut y entrer du texte qui pourra être lu ou modifié par le programme.

Il faut savoir que chaque composant d'une application possède un nom unique. Lors de l'ajout sur une fiche, ce nom est défini automatiquement. Ici par exemple notre composant TEdit a été nommé Edit1.
Et si nous avions ajouté un deuxième TEdit sur la fiche, il aurait été nommé Edit2.

Pour ce composant nous nous contenterons de vider le contenu initial de la zone de saisie.

Allez dans la fenêtre Structure et sélectionnez Edit1.

 

La fenêtre Inspecteur d'objets affichera alors toutes les propriétés de notre zone de saisie Edit1.
Recherchez la propriété Text et videz le contenu de cette propriété.

 

Ensuite nous allons nous occuper du composant TLabel nommé Label1.

Ce composant sert à afficher du texte non modifiable par l'utilisateur.
Nous modifierons sa propriété Caption, c'est elle qui défini le texte à afficher.
Remplacez "Caption1" par "Entrez votre message...".

Enfin, dans la propriété Caption de Button1, entrez le texte "Afficher".

Vous devriez obtenir quelque chose comme ça:

 

Maintenant que les composants ont leur contenu final, nous allons pouvoir redimensionner tout ça pour essayer d'avoir une interface présentable.

Vous avez dû remarquer que lorsque vous sélectionnez un composant dans l'Inspecteur d'objets, des ancres apparaissent autour.

 

Ces ancres vous permettent de redimensionner les composants comme vous le souhaitez.
Vous pouvez également déplacer les composants sur la fiche simplement avec la souris.

Vous verrez aussi que lorsque vous déplacez ou redimensionnez un composant, le magnétisme de la grille et des autres composants autour vous aide à vous aligner correctement. Toutefois il arrive parfois que cela devienne une contrainte. Dans ce cas là, pour désactiver temporairement ce magnétisme, vous pouvez maintenir enfoncée la touche ALT durant vos manœuvres.

Maintenant que vous savez comment procéder, vous êtes libre de modifier le design de votre interface comme bon vous semble. Cela n'aura pas de conséquences sur son bon fonctionnement, c'est purement esthétique.

Voilà ce que moi j'ai fait:

 

Histoire de peaufiner un peu plus, on peut aussi changer le titre dans l'interface de notre application.
Pour cela, Sélectionnez Form1 et changez le contenu de sa propriété Caption.
Personnellement je vais l'appeler "Mon premier programme".

Si vous exécutez le programme, vous vous rendrez compte que la fenêtre de l'interface est redimensionnable, ce qui peut défigurer notre belle interface. Pour y remédier, modifiez la propriété BorderStyle de Form1.
Remplacez BsSizeable par une des autres propriétés disponibles. Faites des essais en exécutant l'application à chaque fois pour voir l'impact réel de cette modification.

Lors de ces essais, vous aller avoir le cas où la petite croix pour fermer l'application ne sera pas présente. Pas de panique, rendez-vous dans le menu Executer de Delphi et cliquez sur Reinitialiser le programme pour fermer votre application.

 

Dernier fignolage, plutôt que votre application s'ouvre dans un un coin de l’écran, on peut faire en sorte qu'elle apparaisse centrée dans l'écran.
Pour cela il suffit de mettre la propriété Position de Form1 à poScreenCenter.

Avec toutes ces dernières modifications, voici à quoi ressemble mon programme lorsque je l’exécute.

 

Voilà, l'interface de notre application est maintenant achevée. Pour le moment notre application démarre, on peut rentrer du texte dans la zone de saisie et fermer le programme. Par-contre il ne se passe rien lorsque l'on clique sur le bouton Afficher.

Nous allons y remédier et pour cela nous allons devoir faire un peu de programmation.

Mais avant de mettre les mains sous le capot, il faut que je vous décrive la structure d'un application sous Delphi.
Une application se compose de plusieurs fichiers et la nôtre est constituée de trois fichiers :

Tout d'abord le fichier projet .dpr
Pour voir son contenu, rendez vous dans le menu Projet > Voir le source

 

program Project1;

uses

Vcl.Forms,
Unit1 in 'Unit1.pas' {Form1};

{$R *.res}

begin
  Application.Initialize;
  Application.MainFormOnTaskbar := True;
  Application.CreateForm(TForm1, Form1);
  Application.Run;
end.

 

Ceci est le fichier principal du projet et c'est par lui que l’exécution du programme commence.

Ensuite nous avons un fichier .pas qui contient l'unité Unit1.
Alors pour faire simple, une unité c'est un groupement de procédures et fonctions. Une unité peut être liée à une fiche ou pas. Dans notre cas elle est liée a la Form1 que nous avons crée. Pour voir son contenu, revenez sur l'onglet Unit1 en haut de la fenêtre principale puis cliquez sur l'onglet code en bas de cette même fenêtre.

 

unit Unit1;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls;

type
  TForm1 = class(TForm)
    Edit1: TEdit;
    Label1: TLabel;
    Button1: TButton;
  private
    { Déclarations privées }
  public
    { Déclarations publiques }
end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

end.

 

Enfin nous avons un fichier .dfm qui contient le descriptif de la fiche que nous avons crée.
Ce fichier porte toujours le même nom que le fichier unité auquel il est lié. C'est pourquoi si vous sauvegardez le projet en cours, Delphi vous demandera un nom pour le fichier Projet (.dpr) et un nom pour le fichier unité (.pas) mais ne demandera rien pour le fichier contenant les données de la fiche.

 

Si par curiosité vous souhaiter voir le contenu du fichier définissant votre fiche (.dfm), retournez dans le mode conception et faites un clic droit sur la fiche puis "voir comme texte".

 

object Form1: TForm1
  Left = 0
  Top = 0
  BorderStyle = bsToolWindow
  Caption = 'Mon premier programme'
  ClientHeight = 108
  ClientWidth = 402
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -13
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  Position = poScreenCenter
  PixelsPerInch = 120
  TextHeight = 16
  object Label1: TLabel
    Left = 16
    Top = 8
    Width = 136
    Height = 16
    Caption = 'Entrez votre message...'
  end
  object Edit1: TEdit
    Left = 16
    Top = 30
    Width = 369
    Height = 24
    TabOrder = 0
  end
  object Button1: TButton
    Left = 310
    Top = 68
    Width = 75
    Height = 25
    Caption = 'Afficher'
    TabOrder = 1
  end
end

 

Pour revenir sur la fiche, faites un clic droit puis "voir comme fiche".

Maintenant que vous savez comment est structuré notre application, je vais vous expliquer comment fonctionne une application Delphi.

Vu de l’extérieur on pourrait penser qu'il n'y a qu'un seul programme qui s'occupe de tout faire, dessiner la fiche, détecter les actions de l'utilisateur et répondre à ces actions.
Ce qui n'est pas complètement faux puisqu'au final l'application n'est qu'un seul et même programme.
Mais lorsque l'on y regarde de plus près, on s’aperçoit que cette application est découpée en plusieurs petits programmes ayant chacun une tâche bien spécifique à effectuer. Ces petits programmes ce sont des Procedures.

Ces procédures ne tournent pas en permanence, elles sont appelées uniquement lors qu'un événement particulier se produit.

Vous devez maintenant vous demander de quels événements je parle ?
Comment créer une procédure et comment la lier à un événement ?

Alors déjà ce qu'il faut savoir c'est que quasiment toutes les actions de l'utilisateur déclenchent des événements et que tous ces événements sont déjà liés à une procédure.
Si par exemple vous lancez notre application et vous cliquez sur le bouton "Afficher", se passe-t-il quelque chose ?

A première vue il ne se passe rien.
Et pourtant si l'on fait bien attention, on remarque que le bouton réagit au clic. Ce qui prouve qu'une procédure a été exécutée et a modifié l'apparence du bouton pour le rendre visuellement réactif au clic.

Si l'on y regarde d'encore plus près on peut voir que le bouton réagit aussi simplement lorsque le pointeur de la souris arrive sur le bouton et lorsque qu'il quitte le bouton. Là encore, deux autres procédures ont été exécutées pour rendre un peu plus vivant ce bouton.

Maintenant que vous avez compris que pour chaque action de l'utilisateur sur notre application, une procédure sera exécutée pour y répondre, nous allons pouvoir nous pencher sur le code d’exécution de notre fiche.

Commençons par retourner voir le code de l'unité liée à notre fiche.
Pour rappel, il suffit de cliquer sur l'onglet code en bas de l'interface de Delphi pour passer dans l’éditeur de code.

 

unit Unit1;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls;

type
  TForm1 = class(TForm)
    Edit1: TEdit;
    Label1: TLabel;
    Button1: TButton;
  private
    { Déclarations privées }
  public
    { Déclarations publiques }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

end.

 

Vous devez être un peu perdu avec toutes ces lignes de code. Soyez sans craintes, vous n'avez pas besoin de maitriser tout ça pour commencer à programmer.

Mais pour partir sur de bonnes bases, je quand même essayer de vous expliquer la structure.

Le code est divisé en 2 sections principales :

 

La section interface

 

Elle sert à lister et à définir la structures des choses que nous voulons utiliser dans notre programme.
Cette section est elle même redivisée en trois sous sections:

• La section uses liste des fonctions livrée avec Delphi dont nous avons besoin pour le bon fonctionnement de notre application. Par exemple "Vcl.StdCtrls" est la fonction qui contient le code source des trois composants que nous avons ajouté à notre fiche.

• La section type sert à définir des types de données. Dans le cas présent on défini que "TForm1" est une fiche qui contient les trois composants que nous lui avons ajoutés.

• La section var sert a déclarer les données que nous allons utiliser dans notre programme. Ici nous déclarons une variable nommée Form1, en précisant que cette variable est du type TForm1, et donc que c'est une fiche contenant 3 composants tel que nous l'avons défini dans l'éditeur d'interface. \n

Comme vous pouvez le constater, des déclarations ont été ajoutées automatiquement au fur et a mesure que nous faisions des modifications dans l'éditeur d'interface.

 

La section implementation

C'est elle qui contiendra tout le code et les données de l'application.
La commande {$R *.dfm} ordonne au compilateur d'insérer ici le contenu de tous les fichiers .dfm.

Dans notre cas il n'y a qu'un seul fichier a inclure et celui ci contient toutes les informations sur la fiche crée dans l'éditeur d'interface.
Au final la partie visuelle et le code d’exécution de la fiche seront réunis dans un seul fichier après compilation.

Nous savons maintenant à quoi ressemble le code de notre application dans l’état actuel, tel qu'il a été généré par Delphi et du fait également de nos modifications dans l'éditeur d'interface jusqu'à maintenant.
Ceci nous permettra de mieux repérer les modifications que fera Delphi dans notre code lors des prochaines manipulations.

A présent je vous invite à retourner dans l’éditeur d'interface (onglet conception).
Dans la fenêtre Structure, sélectionnez Button1. Puis dans l'Inspecteur d'objet, cliquez sur l'onglet Evenements et enfin faites un double clic sur l'événement OnClick.

 

L’éditeur de code s'ouvre alors automatiquement et vous constaterez qu'une procédure a été ajoutée dans la section implementation:

 

procedure TForm1.Button1Click(Sender: TObject);
begin

end;

 

Si vous regardez dans la section interface, vous verrez qu'une ligne à également été ajouté à la déclaration de TForm1:

 

procedure Button1Click(Sender: TObject);

 

Et enfin si vous regardez dans l'inspecteur d'objet, l'événement OnClick contient maintenant Button1Click.

Je pense que vous avez déjà du comprendre ce que tout cela signifie mais voici quand même une explication dans l'éventualité où ça ne serait pas le cas.

Delphi a ajouté une procédure nommée Button1Click dans la partie implémentation de notre unité.
Cette procédure a ensuite été déclarée comme faisant partie de Tform1.
Ensuite la procédure Button1Click a été liée a l'événement OnClick de Button1.
Ce qui fait que lors d'un clic sur Button1, la procédure Button1Click faisant partie de Tform1 sera exécutée.

La procédure étant encore vide, si vous exécutez l'application, il ne se passera toujours rien lors du clic sur le bouton "Afficher".

 

Attention, à chaque compilation Delphi fait un peu de ménage dans le code au moment de la compilation, lorsqu'il constate qu'une procédure est vide et donc inutile, il la supprime pour simplifier le code et le garder propre.

Nous allons donc tout de suite insérer le code à exécuter lors du clic sur le bouton dans cette procédure.

 

procedure TForm1.Button1Click(Sender: TObject);
begin
  ShowMessage('hello!');
end;

 

Rien de bien compliqué, la fonction ShowMessage sert simplement à afficher des messages.
Lancez l'application et testez le bouton "Afficher".

Votre bouton réagit maintenant au clic et effectue la tâche que vous lui avez demandé.

Pour allez un peu plus loin dans la programmation, nous allons maintenant récupérer le texte se trouvant dans la zone de saisie et l'afficher à l'aide de ShowMessage. Pour y arriver nous devons accéder à la zone de saisie Edit1 et lire le contenu de sa propriété Text.
Vous vous souvenez ? C'est celle là même que nous avons vidé dans l'inspecteur d'objet quand nous avons paramétré notre TEdit.

Nous pouvons grâce à la programmation, lire ou modifier les propriétés des composants à volonté, comme nous le ferions avec l’éditeur d'interface.

Voici la commande à entrer:

 

procedure TForm1.Button1Click(Sender: TObject);
begin
  ShowMessage(Edit1.Text);
end;

 

De cette façon, en paramètre à la fonction ShowMessage, nous fournissons le contenu de la propriété Text du composant Edit1.

Faites un essai.

Pour aller un petit peu plus loin en programmation, nous allons faire une analyse du contenu de notre zone de saisie. Si Edit1 est vide nous le signalerons par un message, sinon nous afficherons son contenu.

Voici le code:

\n

procedure TForm1.Button1Click(Sender: TObject);
begin
  if Edit1.Text = '' then
    ShowMessage('La zone de saisie est vide')
  else
    ShowMessage('Vous avez entré le texte suivant: ' + Edit1.Text);
end;

 

Comme vous pouvez le voir, le code est assez simple.
J'ai employé une structure conditionnelle constitué de trois instructions.
if, then, else. Ce qui se traduit par "si, alors, sinon".

A l'aide de l'instruction if, on compare le contenu de la propriété Text de Edit1 avec la valeur '' (vide).
Et si c'est égal on affiche le 1er message, sinon on affiche le 2ème message contenant du texte + le contenu de la zone de saisie.

Le détail important à retenir concerne les point virgule.
Précédemment nous n'avions qu'une seul ligne d'instruction suivie d'un point virgule pour terminer cette ligne.
Et maintenant nous avons quatre lignes mais seule la dernière se termine par un point virgule.
C'est le genre de détail qui peut poser bien des problèmes à la compilation.

Il faut savoir que pour Delphi le code n'est pas organisé ligne par ligne mais d'abord par bloc d'instructions.
Chaque bloc d'instructions se termine par un point virgule.

J'ai étalé ma structure conditionnelle sur quatre lignes pour une meilleure lisibilité mais pour Delphi ces quatre lignes font partie d'un seul bloc d'instructions. Essayez de tout remettre sur une seule ligne pour en être convaincu.

Je vous laisse maintenant exécuter votre application pour vérifier que tout fonctionne correctement.

C'est sur ce dernier essai que le tutoriel se termine. Vous avez maintenant les bases pour pouvoir créer vos premières applications. Avec un peu de recherche vous ne devriez pas avoir trop de mal a trouver quelles instructions utiliser pour donner vie à vos applications.

Rendez vous dans de prochains tutoriels pour approfondir vos connaissances dans le langage Delphi.