Personnalisation des applications FireMonkey avec les styles

De Appmethod Topics
Aller à : navigation, rechercher

Remonter à Conception d'applications FireMonkey


Les contrôles FireMonkey sont des arrangements d'une arborescence composée de sous-contrôles, de pinceaux et formes primitives, décorés avec des effets. Ces compositions sont définies sous forme de styles, stockés dans un livre de styles. Les éléments individuels d'un style sont appelés en interne ressources. Etant donné que ce terme a plusieurs autres significations, le terme ressource de style est utilisé pour plus de clarté. Les styles fournissent un grand niveau de personnalisation sans sous-classement.

Les styles FireMonkey fournis avec le produit sont enregistrés dans les fichiers .Style localisés dans C:\Program Files (x86)\Embarcadero\Studio\17.0\Redist\styles\Fmx. Vous pouvez charger ces styles avec le Concepteur de styles FireMonkey.

Styles par défaut

Dans FireMonkey, chaque classe de contrôle a un style par défaut, codé en dur par plate-forme. Une copie du style interne codé en dur pour une classe de contrôle est créée dès que vous cliquez sur la commande Modifier le style par défaut du menu contextuel du contrôle.

Pour voir les définitions de styles dans le Concepteur de styles FireMonkey :

  1. Déposez un TStyleBook sur la fiche dans le Concepteur de fiches.
  2. Double-cliquez sur le livre de styles.

Par exemple, le style par défaut de FMX.StdCtrls.TPanel est défini simplement comme suit :

  • panelstyle: TRectangle

Le nom de la ressource de style qui définit le style est "panelstyle". Il se réfère à un TRectangle. L'apparence de ce rectangle peut être changée dans le Concepteur de styles. Alors, chaque TPanel de la fiche aura cette apparence par défaut.

Néanmoins, il n'y a pas de règle spécifiant qu'un TPanel doit être représenté par un TRectangle. Un TRoundRect ou un TEllipse fonctionnerait. Même des contrôles simples peuvent être une composition complexe.

Considérons FMX.StdCtrls.TCheckBox, qui ressemble à ceci :

  • checkboxstyle: TLayout (le contrôle entier)
    • TLayout (la disposition de la zone)
      • background: TRectangle (la zone elle-même, qui est une composition de :)
        • TGlowEffect (brille quand le contrôle détient la focalisation)
        • TRectangle (le rectangle extérieur qui forme la zone)
        • TRectangle (le rectangle intérieur)
        • TColorAnimation (animation de couleur quand la souris passe dessus)
        • TColorAnimation (et en arrière)
        • checkmark: TPath (la coche à l'intérieur de la zone, dessinée sous forme d'un chemin, qui a :)
          • TColorAnimation (son animation de couleur quand la coche est activée ou désactivée)
    • text: TText (et en arrière sous le niveau supérieur, le libellé texte)

Le style est nommé afin qu'il puisse être trouvé et utilisé. En outre, certains sous-éléments sont nommés, afin qu'ils puissent être référencés. Lorsque la propriété IsChecked est basculée, la "coche" a sa visibilité changée (en animant l'opacité de sa couleur de unie à transparente). La définition de la propriété Text du TCheckBox définit la propriété Text du TText sous-jacent nommé "text".

Dénomination et référencement des ressources

Deux propriétés avec des noms similaires forment les liens entre un contrôle, son style et ses sous-composants :

  • La propriété StyleName est le nom par lequel un style ou un sous-composant de style est connu des autres et peut être trouvé.
  • La propriété StyleLookup d'un contrôle est définie sur le nom de la ressource de style désirée afin d'adopter ce style pour le contrôle spécifique. Lorsque StyleLookUp est vide, le style par défaut est utilisé.
  • Les sous-composants peuvent être trouvés en appelant FindStyleResource avec le nom désiré.

Un contrôle a deux propriétés car il peut être stylé, et il peut être un élément de style (ou partie d'un élément de style). Des composants plus simples tels que les formes ne peuvent pas être stylés, et peuvent être seulement un élément de style.

Stockage des ressources de style : TStyleBook multiplate-forme

A présent dans FireMonkey, un composant TStyleBook est une collection de styles pour diverses plates-formes cible. Chaque élément de la collection inclut un marqueur de style et de plate-forme (une chaîne). Il existe deux marqueurs de style de plate-forme différents : pour un style personnalisé et un style de plate-forme.

  • Pour le style de plate-forme, il existe 4 marqueurs pour chaque plate-forme cible, telle que Windows, OS X, Android et iOS.

StyleBook.png

  • Pour le style personnalisé, le nombre de marqueurs est augmenté car un contrôle personnalisé doit être natif sur chaque version de la plate-forme cible. FireMonkey prend désormais en charge les styles personnalisés pour les plates-formes suivantes :
    • Windows
    • Windows 7
    • Windows 8 Desktop
    • Windows 10 Desktop
    • OSX Yosemite
    • OSX Lion
    • iOS
    • Android Light

Remarque : Il existe également le marqueur de plate-forme "Default". L'application FireMonkey charge le style Default lorsqu'elle ne peut pas trouver les styles correspondants à la plate-forme en cours.

Le Concepteur de styles FireMonkey vous permet de modifier, d'ajouter ou de retirer des styles d'un composant TStyleBook.

Pour ouvrir le Concepteur de styles FireMonkey :

  1. Déposez un TStyleBook sur la fiche dans le Concepteur de fiches.
  2. Double-cliquez sur le livre de styles.

Pour plus d'informations, voir Concepteur de styles FireMonkey.

Le nouvel objet créé est défini en tant que propriété StyleBook de la fiche, il prend donc effet pour la fiche.

Une fiche peut avoir plusieurs objets TStyleBook. La propriété StyleBook de la fiche peut référencer ces objets, un à la fois, ou elle peut être définie sur nil, ce qui permet à la fiche de rétablir seulement les styles par défaut codés en dur.

Le Concepteur de styles FireMonkey modifie les styles pour un seul TStyleBook à la fois. Double-cliquer sur un TStyleBook d'une fiche ouvre le Concepteur de styles avec ces styles. Le Concepteur de styles peut enregistrer le TStyleBook sous un format texte dans un fichier .style, et il peut charger un tel fichier. Le jeu complet de styles par défaut codés en dur peut également être chargé dans le Concepteur de styles.

Styles de plates-formes

Dans FireMonkey, le terme style de plate-forme se réfère à un fichier .Style qui contient un jeu de ressources pour une plate-forme. Pour commencer à travailler avec les styles de plates-formes, double-cliquez dans le Concepteur de fiches sur le composant TStyleBook pour ouvrir le Concepteur de styles FireMonkey.

Dans la fenêtre du Concepteur de styles FireMonkey, vous pouvez ouvrir un fichier .Style existant ou enregistrer les styles en cours dans un fichier .Style, en utilisant respectivement les boutons Load FMStyle.png et Save FMStyle.png. L'arborescence de la structure du style est affichée dans le volet Structure :

Platform Styles.png

Styles personnalisés

De nouveaux styles peuvent être créés en modifiant les styles par défaut, ou en démarrant à partir de rien avec un composant unique.

  • Pour modifier un style par défaut, cliquez avec le bouton droit sur un contrôle dans le Concepteur de fiches et sélectionnez Modifier un style personnalisé. Le nom de style généré est dérivé du nom du contrôle, vous pouvez donc économiser une étape en choisissant un nom correct pour le contrôle. Le nom généré est assigné en tant que propriété StyleLookup du contrôle, il prend ainsi effet pour ce contrôle. Le nouveau style est une copie du style en cours du contrôle.
    FireMonkey Platform Style.png
  • Pour ajouter un style personnalisé pour la nouvelle plate-forme, cliquez dans le Concepteur de styles FireMonkey sur le bouton FireMonkey Style Designer Add Platform.png et suivez les instructions spécifiées à l'écran. Pour plus d'informations, voir Concepteur de styles FireMonkey.
  • Pour créer un style totalement nouveau, modifiez un fichier .style et chargez-le avec le Concepteur de styles FireMonkey. Par exemple, après l'enregistrement du jeu de styles en cours, modifiez le nom du fichier à ajouter avant le end final :
object TBrushObject
  StyleName = 'somebrush'
end

Remarque : Après avoir ajouté une nouvelle plate-forme ou changé la plate-forme en cours, FireMonkey recrée automatiquement le style personnalisé pour le contrôle cible.

Styles imbriqués

Des styles peuvent se référer à d'autres composants stylés. Comme toujours, les styles sont trouvés par leurs noms de niveau supérieur dans le TStyleBook. Par exemple, pour utiliser le même dégradé :

  1. Dans le Concepteur de styles FireMonkey, enregistrez les styles existants dans un fichier .style.
  2. Modifiez le fichier avec un éditeur de texte pour créer un TBrushObject. Utilisez un StyleName approprié.
  3. Chargez le fichier .style.
  4. Sélectionnez le nouveau style défini afin qu'il apparaisse dans l'inspecteur d'objets.
  5. Ouvrez la propriété Brush :
    1. Modifiez la propriété Gradient avec le Concepteur de pinceaux (choisissez Modifier dans le menu déroulant de la valeur de la propriété).
    2. Définissez la propriété Kind sur Gradient.
  6. Pour chaque composant utilisant le dégradé, par exemple, avec la propriété Fill d'un TRectangle :
    1. Définissez la propriété Kind sur Resource.
    2. Ouvrez la propriété Resource (un TBrushResource) et définissez le StyleLookup sur le nom du dégradé de l'étape 2.

Séquence de recherche des ressources de style

Pour trouver un style de contrôle, Appmethod parcourt les étapes suivantes, en s'arrêtant à la première correspondance :

  1. Si la propriété StyleBook de la fiche est définie, ce livre de styles est recherché en utilisant deux noms :
    1. La propriété StyleLookup du contrôle, si elle est définie.
    2. Un nom par défaut construit à partir du nom de la classe du contrôle, de la manière suivante : le nom par défaut est composé du nom de la classe sans le "T" initial, suivi par la chaîne "style". Par exemple, si le nom de la classe est TEdit, le nom du style est Editstyle.
  2. Les styles par défaut codés en dur sont recherchés en utilisant trois noms :
    1. La propriété StyleLookup du contrôle, si elle est définie.
    2. Le nom de style par défaut construit à partir du nom de la classe du contrôle.
    3. Un nom par défaut construit à partir du nom de la classe parent du contrôle, en utilisant les mêmes étapes.

Exemple : Les noms par défaut pour TPanel sont "Panelstyle" et "Controlstyle". Pour TCalloutPanel, les noms par défaut sont "CalloutPanelstyle" et "Panelstyle".

Remarque : FireMonkey génère les noms des styles par défaut (voir les étapes 2.2 et 2.3) en utilisant les méthodes virtuelles GetDefaultStyleLookupName et GetParentClassStyleLookupName. Facultativement, vous pouvez redéfinir ces méthodes pour changer l'algorithme de génération des noms.

La correspondance du nom n'est pas sensible à la casse. Si aucune correspondance n'est trouvée, le contrôle n'a pas de contenu et est en réalité invisible. Le code qui dépend de la recherche des sous-composants échouera. (Cela devrait seulement se produire pour les contrôles personnalisés incomplets ou incorrectement regroupés, puisque tous les contrôles intégrés ont des styles codés en dur correspondants. Les descendants directs des classes intégrées devraient avoir leur contenu de classe de base ; les descendants de seconde génération devraient être vides.)

Style des fiches

Bien que TForm n'est pas un contrôle ou une sous-classe de TStyledControl, il est aussi stylé. Sa propriété StyleLookup prend par défaut "backgroundstyle". La ressource de style par défaut avec ce StyleName est un TRectangle gris.

Quand elle est chargée, la propriété Align de la ressource est définie sur Contents pour remplir la fiche comme arrière-plan. C'est le premier objet dessiné, avant les autres enfants de la fiche.

Remarque : Si vous appelez la fonction TStyleManager.SetStyle dans la section initialisation d'une unité sur le fichier principal du projet, avant Application.Initialize, alors le style est appliqué à toutes les fiches.

Voir aussi