Création de l'application et placement des objets visuels

De RAD Studio
Aller à : navigation, rechercher

Remonter à Tutoriel : Utilisation de LiveBindings dans les applications VCL


Pour commencer ce tutoriel, vous devez créer un nouveau projet. Choisissez Application Fiches VCL. Définissez le nom de la fiche que vous voulez utiliser en tant que fiche principale sur Main. Vous pouvez maintenant démarrer en ajoutant les composants visuels requis à la fiche vide nouvellement créée.

Déposez un bouton sur la fiche. Conservez son nom Button1, mais définissez son libellé sur Redraw Image. Ce bouton sera utilisé pour actualiser votre image dynamique. Déplacez et déposez ensuite 4 libellés : Top, Left, Width et Height. Déplacez et déposez ensuite 4 contrôles d'édition et nommez-les en utilisant la convention d'affectation des noms suivante : edtTop, edtLeft, edtWidth et edtHeight.

Depuis l'inspecteur d'objets, définissez la valeur des contrôles d'édition comme suit :

  • edtTop.Text : 48
  • edtLeft.Text : 128
  • edtWidth.Text : 110
  • edtHeight.Text : 105

LBVCL1.png

Ajoutez ensuite un panneau et définissez ses dimensions comme suit :

  • Panel1.Width : 344
  • Panel1.Height : 193

Placez ensuite une image à l'intérieur du panneau. Conservez leurs noms par défaut (Panel1 et Image1).

LBVCL2.png

A ce stade, l'image est vide. Pour rendre les choses plus intéressantes, l'image sera générée dynamiquement à chaque fois que sa largeur ou sa hauteur change. Pour que cela se produise, le code suivant doit être ajouté à la fiche dans la section public de la classe de la fiche.

 public
     { Public declarations }
     procedure RedrawImage;
   end;
Pour C++Builder, ajoutez le prototype de la méthode RedrawImage dans le fichier d'en-tête de votre fiche principale.
 /* other main form declarations */
 public:	// User declarations
 	void __fastcall RedrawImage(void);
 };

Ajoutez ensuite l'implémentation de la procédure RedrawImage comme suit.

 procedure TMain.RedrawImage;
 var
   I, J: Integer;
   Bitmap: TBitmap;
 
 begin
   { create a bitmap picture in the memory }
   Bitmap := TBitmap.Create;
 
   { use the dimensions of the Image1 control }
   Bitmap.Width := Image1.Width;
   Bitmap.Height := Image1.Height;
 
   { dynamically render a color spectrum }
   for I := 0 to Bitmap.Width do
     for J := 0 to Bitmap.Height do
       Bitmap.Canvas.Pixels[I, J] := RGB(I, J, 128);
 
   { assign the bitmap to Image1 }
   Image1.Picture.Bitmap := Bitmap;
 
   { free up used memory }
   Bitmap.Free;
 end;
 void __fastcall TMain::RedrawImage(void)
 {
 	int I, J;
 	TBitmap *Bitmap;
 
 	/* create a bitmap picture in the memory */
 	Bitmap = new TBitmap();
 
 	/* use the dimensions of the Image1 control */
 	Bitmap->Width = Image1->Width;
 	Bitmap->Height = Image1->Height;
 
 	/* dynamically render a color spectrum */
 	for (I = 0; I <= Bitmap->Width; I++) {
 		for (J = 0; J <= Bitmap->Height; J++) {
 			Bitmap->Canvas->Pixels[I][J] = RGB(I, J, 128);
 		}
 		}
 
 	/* assign the bitmap to Image1 */
 	Image1->Picture->Bitmap = Bitmap;
 
 	/* free up used memory */
 	Bitmap->Free();
 }

Pour que l'image soit restituée quand l'application est exécutée pour la première fois, implémentez l'événement FormCreate (double-cliquez sur la fiche dans l'EDI), comme suit.

 procedure TMain.FormCreate(Sender: TObject);
 begin
   RedrawImage;
 end;
 void __fastcall TMain::FormCreate(TObject *Sender)
 {
 	RedrawImage();
 }

Implémentez maintenant l'événement OnClick du bouton comme suit.

 procedure TMain.Button1Click(Sender: TObject);
 begin
   RedrawImage;
 end;
 void __fastcall TMain::Button1Click(TObject *Sender)
 {
 	RedrawImage();
 }

La section suivante de ce tutoriel décrit comment lier les quatre contrôles d'édition aux propriétés associées à la dimension et à la position du contrôle image.

Suivant