Création d'un Flyout Metropolis UI

Remonter à Développement des applications Metropolis UI

Un flyout de style Metropolis UI est une fenêtre popup affichée temporairement. Le flyout disparaît en cliquant à l'extérieur de sa zone. Ce tutoriel explique comment créer un flyout qui "entre en scène" en partant du côté droit de l'écran et demande confirmation avant sa sortie.

Création d'un nouveau projet FireMonkey

1. Sélectionnez Fichier > Nouveau > Autre > Projets <personnalité> > Application FireMonkey Metropolis UI puis sélectionnez le template Application de bureau vide Metropolis pour créer une nouvelle application FireMonkey Metropolis UI.
2. Sélectionnez Fichier > Tout enregistrer pour enregistrer votre nouveau projet.

Conception du flyout

1. Ajoutez un TPopup sur la fiche et positionnez-le dans le coin supérieur gauche de la fiche (dans l'inspecteur d'objets définissez ses propriétés de position (X,Y) sur Position=(0,0)).

2. Ajoutez un TPanel au TPopup.

• Définissez la propriété Aligndu volet sur Contents.
• Définissez la propriété StyleLookup du volet sur flyoutpanel.

3. Ajoutez un TLabel et un TLayout au volet.

• Définissez la propriété Align du libellé sur Left.
• Définissez la propriété Align de la disposition sur Bottom.
• Définissez la propriété StyleLookup du libellé sur flyouttitlelabel.
• Définissez la propriété Text du libellé sur Really close? ou tout autre texte que vous considérez comme suggestif pour l'action de sortie.

4. Ajoutez un TButton à la disposition.

• Définissez la propriété Align du bouton sur Client.
• Définissez la propriété StyleLookup du bouton sur flyoutbutton.
• Définissez la propriété Text du bouton sur Yes ou tout autre texte que vous considérez comme suggestif pour l'action de sortie.

5. Dans l'inspecteur d'objets, cliquez sur la propriété Position.X du TPopup, et choisissez Créer un nouveau FloatAnimation.

• Définissez la propriété Trigger de l'animation ajoutée sur IsOpen=true et la propriété TriggerInverse sur IsOpen=false.

Le flyout doit ressembler à ceci :

Implémentation du code du flyout

1. Double-cliquez sur le bouton du flyout pour lui attacher un gestionnaire d'événement OnClick :

• Delphi :

procedure TForm1.Button1Click(Sender: TObject);
begin
   Application.Terminate;
end;

• C++ :

void __fastcall TForm1::Button1Click(TObject *Sender) {
   Application->Terminate();
}

2. Déclarez une méthode privée dans la classe TForm1 pour que le flyout soit visible :

• Delphi :

//Declaration
private
procedure ShowFlyout(AShow: Boolean);

//Implementation
procedure TForm1.ShowFlyout(AShow: Boolean);
begin
  FloatAnimation1.StartValue := ClientWidth;
  FloatAnimation1.StopValue :=
    Width/2 - Popup1.Width/2;
  Popup1.IsOpen := AShow;
end;

• C++ :

• Ajoutez la déclaration de fonction suivante dans les déclarations private: du fichier .h :

private: 
   void ShowFlyout(bool AShow);

• Ajoutez l'implémentation de fonction suivante dans le fichier .cpp :

void TForm1::ShowFlyout(bool AShow) {
   FloatAnimation1->StartValue = ClientWidth;
   FloatAnimation1->StopValue = (Width / 2 - (Popup1->Width / 2));
   Popup1->IsOpen = AShow;
}

Utilisation du flyout

1. Ajoutez un objet TButton à la fiche.

• Définissez la propriété StyleLookup du bouton sur closebutton.
• Double-cliquez sur le bouton pour lui attacher un gestionnaire d'événement OnClick.

• Delphi :

procedure TForm1.Button2Click(Sender: TObject);
begin
   ShowFlyout(True);
end;

• C++ :

void __fastcall TForm1::Button2Click(TObject *Sender)
{
        ShowFlyout(true);
}

2. Ajoutez un TLayout sur la fiche. La disposition est utilisée comme un objet factice pour positionner le flyout lorsqu'il est affiché.

• Définissez la propriété Align de la disposition sur Center.

3. Définissez la propriété PlacementTarget du TPopup sur la disposition factice.

4. Exécutez l'application en appuyant sur F9.

Voir aussi

• Création d'une barre d'application Metropolis UI
• Création d'une zone de liste déroulante Metropolis UI
• Création d'une info-bulle Metropolis UI
• Création de boutons d'édition Metropolis UI avec des glyphes incorporés
• Création d'un élément de zone de liste Metropolis UI