Blog de Gilles Vasseur - Pascal et compagnie

Afin de pouvoir procéder à des tests, une application plutôt simple nous servira de modèle. À partir d'une image source, il s'agira de passer à une image de destination grâce à une transition déterminée. La vitesse de transition ainsi que l'opacité des images en jeu seront paramétrables.

Nous allons aborder ci-après la création de l'interface utilisateur.

L'interface utilisateur

Commençons par créer une application à partir du menu « Fichier », option « Nouveau... ». Dans la fenêtre qui s'ouvre, choisissons « Fichier », « Application ».

En choisissant « Fichier », « Application », nous avons créé la forme la plus fréquente des applications gérées par Lazarus, à savoir une application graphique utilisant la bibliothèque LCL multiplateforme comme interface graphique.

Un bon réflexe consiste à sauvegarder tout de suite cet embryon de programme. Créons un répertoire de travail nommé bgratransitions dans lequel figurera un sous-répertoire nommé 00a. Sauvegardons-y notre projet avec Ctrl-Maj-S ou l'icône correspondante sous le nom projet00a.lpi. De même, à l'invite, enregistrons la fiche principale sous le nom de main.pas.

L'interface utilisateur ne met en jeu que quelques composants des plus communs. En premier lieu, il nous faut trois TImage : une image pour la source, une pour la destination et une pour dessiner la transition en cours. Nous leur donnerons des tailles différentes afin de rendre l'application plus souple quant au format des images à afficher. Un TButton nous servira à démarrer la transition. Un TCheckBox indiquera si la transparence doit être prise en compte. Enfin, un couple TLabel et TTrackBar nous permettra de régler la vitesse de la transition.

Voici à quoi pourra ressembler cette interface :

Pour rendre l'application plus facile à exploiter, nous devons modifier certaines propriétés des composants utilisés.

En ce qui concerne la fiche principale, nous pouvons :

• la rebaptiser en donnant à sa propriété Name la valeur MainForm ;
  
• la centrer dans l'écran avec sa propriété Position mise à poScreenCenter ;
  
• afficher un message adapté en en-tête avec la propriété Caption mise à 'Test des transitions - G. Vasseur 2018'.
  

L'image source (en haut à gauche) aura sa propriétéName fixée à imgFrom alors que l'image de destination (en haut à droite) sera renommée imgTo. Toutes deux auront leur propriétéStretch à True afin de toujours dessiner entièrement l'image, quelles que soient ses dimensions d'origine.

L'image pour le dessin de la transition sera nommée imgResult. Comme le calcul de la transition tiendra compte des dimensions de la surface de dessin, il est inutile de modifier la propriété Stretch de ce composant.

Le bouton pour l'exécution de la transition sera renommé btnGo tandis que sa propriété Caption[/FONT] deviendra « Démarrez ! ». Nous pouvons d'ores et déjà double-cliquer sur ce bouton pour créer le squelette du gestionnaire OnClick qui lui est attaché. Nous renseignerons ultérieurement ce gestionnaire chargé de lancer la transition.

Le composant de typeTCheckBox sera nommé cbOpacity et sa propriétéCaption deviendra « Transparence ». Nous nous occuperons plus tard de l'action liée à la modification de sa coche.

Le composant de type TTrackBar sera renommétbarSpeed. Sa propriété Min sera fixée à 1. Sa propriété Max sera portée à 10. Quant à sa propriétéPosition, nous lui donnerons la valeur 3. Ses différentes valeurs seront expliquées en temps utile. Le gestionnaire de changement de valeur sera lui aussi étudié à cette occasion.

Enfin, leTLabel s'appellera lblSpeed et sa propriété Caption deviendra « Vitesse ». Comme cette étiquette se rapporte au composant de typeTTrackBar, il est conseillé de le lier à lui grâce à la propriété FocusContro. Le choix du composant cible se fait grâce à la liste déroulante qui apparaît lorsque nos cliquons sur la valeur de la propriété.

Pour ceux qui sont habitués à la lecture des fichiers de description des fiches (suffixe .lfm), voici la fiche que j'ai utilisée :

Code pascal :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
object MainForm: TMainForm
  Left = 392
  Height = 450
  Top = 210
  Width = 677
  Caption = 'Test des transitions - G. Vasseur 2018'
  ClientHeight = 450
  ClientWidth = 677
  OnCreate = FormCreate
  OnDestroy = FormDestroy
  Position = poScreenCenter
  LCLVersion = '1.8.2.0'
  object imgFrom: TImage
    Left = 24
    Height = 154
    Top = 32
    Width = 232
    Stretch = True
  end
  object imgTo: TImage
    Left = 304
    Height = 90
    Top = 32
    Width = 104
    Stretch = True
  end
  object imgResult: TImage
    Left = 304
    Height = 224
    Top = 208
    Width = 298
  end
  object btnGo: TButton
    Left = 24
    Height = 25
    Top = 407
    Width = 75
    Caption = 'Démarrer !'
    OnClick = btnGoClick
    TabOrder = 0
  end
  object cbOpacity: TCheckBox
    Left = 24
    Height = 19
    Top = 365
    Width = 91
    Caption = 'Transparence'
    TabOrder = 1
  end
  object tbarSpeed: TTrackBar
    Left = 24
    Height = 25
    Top = 320
    Width = 100
    Max = 8
    Min = 1
    Position = 3
    TabOrder = 2
  end
  object lblSpeed: TLabel
    Left = 24
    Height = 15
    Top = 292
    Width = 36
    Caption = 'Vitesse'
    FocusControl = tbarSpeed
    ParentColor = False
  end
end

À présent, l'inspecteur d'objets devrait avoir cette apparence :

Pour parfaire notre interface, il suffit de charger les images fournies avec les fichiers du tutoriel. Nous devons double-cliquer sur la propriété Picture des deux composantTImage et charger l'image voulue. Cette dernière sera tronquée dans la fenêtre de chargement, mais, après validation du choix par un clic sur le bouton « OK », elle devrait occuper tout l'espace d'affichage du composant... si sa propriété Stretch est bien à True !

Voici ce à quoi devrait ressembler notre interface définitive :

Ce qui est visible est en place. Il nous reste à installer la bibliothèque et à créer la partie métier de notre application...