Personnalisation de la conception d'une application FireMonkey

Remonter à Guide de prise en main FireMonkey - Conception de l'interface utilisateur

Personnalisation de la conception d'une application FireMonkey

Dans la bibliothèque des composants visuels (VCL), vous pouvez modifier la couleur et les autres propriétés relatives à l'apparence de chaque composant dans l'inspecteur d'objets. Toutefois, vous ne voyez pas ces propriétés dans FireMonkey. Dans FireMonkey, l'apparence de chaque composant est défini en tant que style, et vous assignez un style à un composant.

Grâce à cette notion de style, vous pouvez maintenant facilement changer l'apparence de l'application entière en appliquant simplement différents styles à l'application. Voici des styles FireMonkey prédéfinis que vous pouvez facilement utiliser au sein de votre application :

Air.Style	Amakrits.Style	AquaGraphite.Style	Blend.Style
Dark.style	FMX.Platform.iOS.style	FMX.Platform.Mac.style	FMX.Platform.Win.style
GoldenGraphite.Style	iOS.Style	iOSNative.Style	Light.Style
Mac.Style	MacBlue.Style	MacGraphite.Style	RubyGraphite.style
Windows7.Style

Pour sélectionner un style au sein de votre application, il existe quelques façons typiques de l'implémenter :

• L'étape 1 explique comment changer de style à l'exécution en utilisant du code.
• L'étape 2 explique comment définir le style lors de la conception de votre application et comment inclure le style spécifié dans votre application.
• L'étape 3 explique comment définir le style pour un composant spécifique.

Etape 1 : Appliquer le style existant à votre application lors de l'exécution

Remarque : Vous pouvez trouver une application exemple sur C:\Utilisateurs\Public\Documents publics\RAD Studio\<n.n>\Samples\FireMonkey\ControlsDemo.

L'application exemple ControlsDemo comprend de nombreux composants FireMonkey déjà placés, et l'implémentation de la permutation du style à l'exécution est déjà implémentée.

Pour utiliser cette fonctionnalité dans cette application démo, cliquez sur File > Load Style… et sélectionnez un fichier de style.

Les fichiers de styles FireMonkey sont disponibles dans C:\Utilisateurs\Public\Documents publics\RAD Studio\9.0\Styles.

Voici le code utilisé pour permuter sur un nouveau style :

procedure TfrmCtrlsDemo.MenuItem7Click(Sender: TObject);
  if OpenDialog1.Execute then
  begin
    Application.StyleFileName := OpenDialog1.FileName;
  end;

D'abord, ce code démo montre un 'dialogue Ouvrir' utilisé pour sélectionner un fichier. Le nom du dialogue est défini sur OpenDialog1 dans le code. Quand l'utilisateur sélectionne un fichier, la méthode Execute renvoie True. Ce code vérifie si l'utilisateur a d'abord sélectionné un fichier, puis assigne le nom du fichier de style de OpenDialog1.Filename (contenant le nom de fichier sélectionné par l'utilisateur) à la propriété Application.StyleFileName. Et voilà !

Etape 2 : Appliquer un style existant à votre application lors de la conception

Vous pouvez aussi appliquer des styles existants par le biais du composant TStyleBook à la conception.

Pour appliquer un style à la conception

1. Déposez un composant TStyleBook sur votre fiche. Par défaut, le nom du nouveau composant est StyleBook1.
2. Sélectionnez une fiche FireMonkey et définissez la propriété StyleBook sur StyleBook1.

   

3. Double-cliquez sur le composant StyleBook1.
4. Cliquez sur le bouton Charger… et sélectionnez le style. Les styles sont disponibles sur C:\Program Files (x86)\Embarcadero\RAD Studio\9.0\Redist\styles\Fmx.

   

5. Sélectionnez Appliquer et fermer. Les contrôles du Concepteur de fiches sont maintenant restitués avec le style spécifié.

   [[

Remarque : L'étape 2 de ce tutoriel a changé la fonctionnalité de cette application démo (en discussion à l'étape 1). Après avoir essayé cette étape, retirez le composant StyleBook1 de votre application, afin de ne pas changer la fonctionnalité originale implémentée dans cette démo.

Etape 3 : Modifier le style d'un composant particulier

Vous pouvez aussi personnaliser le style d'un composant spécifique.

Pour personnaliser le style d'un composant spécifique

1. Sélectionnez un composant sur le Concepteur de fiches.
2. Cliquez avec le bouton droit sur le composant et sélectionnez l'option Modifier un style personnalisé….

   

3. Changez la propriété de ce style particulier dans l'inspecteur d'objets. Vous pouvez modifier toutes les propriétés définies dans l'inspecteur d'objets.

4. Sélectionnez Appliquer et fermer et retournez au Concepteur de fiches.

5. Dès que vous sélectionnez un composant (dont le style vient d'être personnalisé), vous trouvez une nouvelle propriété définie (Panel1Style1).

6. Vous pouvez maintenant appliquer le même style à différents composants. Sélectionnez un autre composant, puis définissez la propriété StyleLookup sur PanelStyle1.

Pour de plus amples informations

• Conception d'applications FireMonkey