par , 05/03/2018 à 16h19 (601 Affichages)
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 :
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...