Comment utiliser le SDK pour configurer l’interface de l’application

Le SDK comprend un générateur d’interface. Ce générateur vous permet de personnaliser l’apparence de l’interface utilisateur de votre application.

Pour personnaliser l’interface, modifiez les paramètres généraux qui affectent l’apparence des éléments de l’interface, à savoir la couleur, la texture et la police. Ces propriétés sont regroupées en un thème.

Pour échanger les éléments d’interface du même type, utilisez les wrappers de widgets : les conteneurs d’éléments d’interface créés.

Le générateur d’interface comprend 2 parties indépendantes :

• Thèmes — permettent de personnaliser l’apparence.
• Gestionnaire de widgets — permet d’utiliser les widgets et de remplacer des parties entières de l’interface utilisateur.

Travailler avec les thèmes

Le thème est un asset de type XsollaUtilsTheme qui contient la liste des couleurs, des polices et des textures utilisées par les éléments de l’interface. Chaque liste est un ensemble de paires clé-valeur, la clé étant le nom unique d’un paramètre de thème et la valeur correspondant à la couleur, à la police ou à la texture.

Vous pouvez utiliser des thèmes dans Settings > Project Settings > Plugins > Xsolla UIBuilder :

• Pour définir le thème de l’interface, sélectionnez-le dans le champ Interface Theme.
• Pour modifier le thème sélectionné, cliquez sur l’icône 🔎 située à proximité du champ Interface Theme.

• Pour créer un nouveau thème, cliquez sur l'icône + située à côté du champ Interface Theme.
• Pour supprimer un thème sélectionné, cliquez sur l'icône × située à proximité du champ Interface Theme.

Connecter un élément de l'interface au thème

Pour connecter l’élément d’interface au thème :

1. Dans le blueprint du widget de l’élément d’interface, accédez au thème à l’aide des méthodes suivantes :
   • GetCurrentTheme — renvoie le thème actuel spécifié dans les paramètres du plug-in ;
   • GetTheme — renvoie le thème associé au nom spécifié dans le paramètre ThemeClass.
2. Utilisez les méthodes suivantes pour obtenir les valeurs de paramètres spécifiques d’un thème en leur passant le nom du paramètre du thème :
   • GetColor — récupère la valeur de la couleur ;
   • GetFont — récupère la police ;
   • GetBrush — récupère la texture.

Dans le projet de démo, chaque widget prenant en charge les thèmes possède un ensemble de paramètres de type String avec des noms de paramètres de thème. Ces paramètres sont utilisés pour configurer l’apparence d’un élément d’interface.

Pour trouver des exemples de widgets prenant en charge les thèmes, accédez à Content Browser > Xsolla Content > Common > Components > Primitives.

Travailler avec le gestionnaire de widgets

Le gestionnaire de widgets est un mécanisme qui vous permet de remplacer automatiquement les éléments d’interface par d’autres éléments du même type tout en modifiant leur apparence et leur logique de comportement.

Pour créer une interface qui prend en charge le gestionnaire de widgets, assurez-vous de respecter les conditions suivantes :

• Créez un widget avec une interface unifiée spécifiée pour l’élément d’interface.
• Définissez le nom de type du widget d’élément d’interface dans la bibliothèque de widgets.
• Passez le type de widget d’élément d’interface au wrapper. Le wrapper est un conteneur qui permet de créer les éléments d’interface. Le nom du type de widget doit être identique à celui de la bibliothèque.
• Lors de la conception de l’interface, utilisez le wrapper plutôt que le widget.

Wrappers de widgets

Un wrapper est un conteneur qui crée le widget nécessaire dans la zone de la page occupée par le wrapper.

L’utilisation des wrappers de widgets lors de la conception d’une interface vous permet de modifier automatiquement les éléments dans l’ensemble de l’interface. Pour ce faire, il vous suffit de modifier le widget contenu dans le wrapper. Contrairement au flux standard utilisant les primitives d’interface qui nécessite le remplacement manuel de tous les widgets dans ce scénario.

Les wrappers suivants sont disponibles pour différents types de widgets :

• W_ButtonWrapper — pour un bouton ;
• W_InputWrapper — pour un champ de saisie ;
• W_TextWrapper — pour un texte;
• W_RichTextWrapper — pour un texte enrichi ;
• W_ImageWrapper — pour une image ;
• W_CheckBoxWrapper — pour une case à cocher.

Pour configurer les paramètres d’affichage des widgets créés par un wrapper, accédez au panneau Details. Dans le champ Widget Library Name, spécifiez le nom du type de widget de la bibliothèque de widgets actuelle.

Les blueprints des wrappers de widgets se trouvent dans Content Browser > Xsolla Content > Common > Components > Wrappers.

Les wrappers utilisent les méthodes du gestionnaire de widgets pour interagir avec les widgets.

Interfaces de widgets

Pour permettre aux primitives d’interface d’interagir avec le wrapper de widget de la même manière qu’avec un widget classique, les wrappers utilisent des interfaces unifiées.

Les wrappers suivants sont disponibles pour différents types de widgets :

• BPI_PrimitivesButton — pour un bouton ;
• BPI_PrimitivesInput — pour un champ de saisie ;
• BPI_PrimitivesText — pour un texte;
• BPI_PrimitivesRichText — pour un texte enrichi ;
• BPI_PrimitivesImage — pour une image ;
• BPI_PrimitivesCheckbox — pour une case à cocher.

Pour configurer les interfaces pour les widgets d’éléments d’interface, accédez à la section Implemented Interfaces du panneau Details.

Les interfaces de widgets se trouvent dans Content Browser > Xsolla Content > Common > Components > Interface.

Bibliothèque de widgets

La bibliothèque de widgets est un asset de type XsollaUtilsWidgetsLibrary qui répertorie les classes de widgets sous forme de paires clé-valeur. La clé contient le nom du type de widget et la valeur contient la classe de widget qui sera créée par un wrapper correspondant avec cette clé.

La bibliothèque de widgets fonctionne comme un connecteur entre les wrappers et les classes de widgets.

La bibliothèque de widgets par défaut BP_DefaultWidgetLibrary est incluse dans le SDK. Cette bibliothèque contient la liste des éléments d’interface du projet de démo.

Vous pouvez utiliser la bibliothèque de widgets dans Settings > Project Settings > Plugins > Xsolla UIBuilder :

• Pour installer la bibliothèque de widgets actuelle, sélectionnez-la dans le champ Widgets Library.
• Pour modifier la bibliothèque de widgets sélectionnée, cliquez sur l’icône 🔎 située à proximité du champ Widgets Library.

• Pour créer une nouvelle bibliothèque de widgets, cliquez sur l'icône + située à côté du champ Widgets Library.
• Pour supprimer une bibliothèque de widgets sélectionnée, cliquez sur l'icône × située à proximité du champ Widgets Library.

Utilisez les méthodes suivantes dans les blueprints du wrapper pour accéder à la bibliothèque de widgets :

• GetCurrentWidgetsLibrary — renvoie la bibliothèque de widgets actuelle spécifiée dans les paramètres du plug-in.
• GetWidgetsLibrary — renvoie la bibliothèque de widgets associée au nom spécifié dans le paramètre WidgetLibraryClass.

Utilisez la méthode GetWidget dans les blueprints du wrapper pour obtenir le type de widget à partir de la bibliothèque.

Méthodes du gestionnaire de widgets

Les méthodes suivantes sont utilisées par les wrappers pour interagir avec les widgets. Utilisez-les lorsque vous créez vos propres wrappers et widgets qui prennent en charge les thèmes.

Méthodes pour utiliser les boutons

Méthodes pour utiliser les cases à cocher

Méthodes pour utiliser du texte ou du texte enrichi

Méthodes pour utiliser les images

Méthodes pour utiliser les champs de saisie