Cómo utilizar el SDK para configurar la interfaz de usuario de la aplicación

El SDK incluye un generador de interfaz de usuario. El generador de interfaz de usuario le permite configurar los aspectos visuales de la aplicación de la interfaz de usuario.

Puede cambiar la interfaz de usuario editando los ajustes globales que afectan a los aspectos visuales de los elementos de la interfaz de usuario: color, textura y fuente. Estas propiedades se agrupan en un tema.

Para intercambiar los elementos de interfaz de usuario del mismo tipo, puede utilizar los wrappers de widget: contenedores para elementos de interfaz de usuario creados.

El generador de interfaces de usuario contiene 2 partes independientes:

• Temas se encargan de trabajar con aspectos visuales.
• Administrador de widgets se encarga de trabajar con widgets y le permite reemplazar partes enteras de la interfaz de usuario.

Trabajar con temas

El tema es un activo del tipo XsollaUtilsTheme. Contiene la lista de colores, fuentes y texturas que usan los elementos de la interfaz de usuario. Cada lista es un conjunto de pares clave-valor en los que la clave es un nombre único de un parámetro de tema, y el valor es un color, fuente o textura correspondiente.

Puede trabajar con temas en Settings > Project Settings > Plugins > Xsolla UIBuilder:

• Para establecer el tema de la interfaz de usuario, selecciónelo en el campo Interface Theme.
• Para modificar el tema seleccionado, haga clic en el icono 🔎 situado cerca del campo Interface Theme.

• Para crear un nuevo tema, haga clic en el icono + situado junto al campo Interface Theme.
• Para eliminar un tema seleccionado, haga clic en el icono × situado junto al campo Interface Theme.

Conectar el elemento de interfaz de usuario al tema

Para conectar el elemento de interfaz de usuario al tema:

1. En el plano técnico del widget del elemento de interfaz de usuario, obtenga acceso al tema mediante los siguientes métodos:
   • GetCurrentTheme: devuelve el tema actual especificado en la configuración del complemento.
   • GetTheme: devuelve un tema con el nombre especificado en el parámetro ThemeClass.
2. Utilice los siguientes métodos para obtener los valores de parámetros definidos del tema transmitiéndoles el nombre del parámetro de tema:
   • GetColor: obtiene el valor del color.
   • GetFont: obtiene la fuente.
   • GetBrush: obtiene la textura.

En el proyecto de demostración, cada widget que admite temas tiene un conjunto de parámetros del tipo String con nombres de parámetros de tema. Estos parámetros se usan para configurar un aspecto visual para el elemento de interfaz de usuario.

Para encontrar ejemplos de widgets que admitan temas, vaya a Content Browser > Xsolla Content > Common > Components > Primitives.

Trabajar con el administrador de widgets

El administrador de widgets es un mecanismo que le permite sustituir automáticamente los elementos de la interfaz de usuario por otros del mismo tipo, cambiando sus aspectos visuales y su comportamiento.

Para crear la interfaz de usuario para que sea compatible con el administrador de widgets, deben cumplirse las siguientes condiciones:

• Crear un widget con la interfaz unificada especificada para el elemento de interfaz de usuario.
• Definir el nombre de tipo para el widget del elemento de interfaz de usuario en la biblioteca de widgets.
• Transmitir el tipo de widget para el elemento de interfaz de usuario al wrapper. El wrapper es un contenedor para crear los elementos de interfaz de usuario. El nombre del tipo de widget debe ser idéntico al nombre de la biblioteca.
• Cuando cree una interfaz de usuario, utilice el wrapper en lugar del widget.

Wrappers de widgets

Un ‘wrapper’ es un contenedor que crea un widget necesario en el área de la página ocupada por el wrapper.

El uso de los del wrappers de widgets a la hora de crear la interfaz de usuario le permite cambiar automáticamente los elementos de la interfaz de usuario en toda la interfaz. Para ello, cambie el widget en el wrapper. El flujo estándar, que usa primitivas de interfaz de usuario, indica la sustitución de todos los widgets de forma manual en este escenario.

Aquí están los siguientes contenedores (wrappers) para los diferentes tipos de widgets:

• W_ButtonWrapper: para un botón
• W_InputWrapper: para un campo de entrada
• W_TextWrapper: para texto
• W_RichTextWrapper: para texto enriquecido
• W_ImageWrapper: para una imagen
• W_CheckBoxWrapper: para una casilla

En el panel Details, puede configurar los parámetros de visualización de los widgets creados por un wrapper. En el campo Widget Library Name, debe especificar el nombre del tipo de widget de la biblioteca de widgets actual.

Puede encontrar las interfaces de contenedores (wrappers) widgets en Content Browser > Xsolla Content > Common > Components > Wrappers.

Los wrappers utilizan los métodos del administrador de widgets para interactuar con los widgets.

Interfaces de widgets

Para que las primitivas de interfaz de usuario interactúen con el contenedor (wrapper) del widget como lo harían con el widget habitual, los wrappers utilizan interfaces unificadas.

Existen los siguientes wrappers para diferentes tipos de widgets:

• BPI_PrimitivesButton: para un botón
• BPI_PrimitivesInput: para un campo de entrada
• BPI_PrimitivesText: para texto
• BPI_PrimitivesRichText: para texto enriquecido
• BPI_PrimitivesImage: para una imagen
• BPI_PrimitivesCheckbox: para una casilla

Puede configurar interfaces para los widgets de elementos de interfaz de usuario en la sección Implemented Interfaces del panel Details.

Puede encontrar las interfaces de widgets en Content Browser > Xsolla Content > Common > Components > Interface.

Biblioteca de widgets

La biblioteca de widgets es un activo del tipo XsollaUtilsWidgetsLibrary que contiene la lista de clases de widgets en forma de pares clave-valor. La clave contiene el nombre del tipo de widget y el valor contiene la clase de widget que será creada por un wrapper que corresponda a esta clave.

La biblioteca de widgets funciona como un conector entre los wrappers y las clases de widgets.

La biblioteca de widgets BP_DefaultWidgetLibrary por defecto está incluida en el SDK. Esta biblioteca contiene la lista de elementos de interfaz de usuario del proyecto de demostración.

Puede trabajar con la biblioteca de widgets en Settings > Project Settings > Plugins > Xsolla UIBuilder:

• Para establecer la biblioteca de widgets actual, selecciónela en el campo Widgets Library.
• Para modificar la biblioteca de widgets seleccionada, haga clic en el icono 🔎 situado junto al campo Widgets Library.

• Para crear una nueva biblioteca de widgets, haga clic en el icono + situado junto al campo Widgets Library.
• Para eliminar la biblioteca de widgets seleccionada, haga clic en el icono × situado junto al campo Widgets Library.

Utilice los siguientes métodos en los planos técnicos del wrapper para acceder a la biblioteca de widgets:

• GetCurrentWidgetsLibrary: devuelve la biblioteca de widgets actual especificada en la configuración del complemento (plug-in).
• GetWidgetsLibrary: devuelve la biblioteca de widgets especificada por el nombre definido en el parámetro WidgetLibraryClass.

Utilice el método GetWidget en los planos técnicos del wrapper, para obtener el tipo de widget de la biblioteca.

Métodos del administrador de widgets

Los siguientes métodos son utilizados por los contenedores (wrappers) para interactuar con los widgets. Utilícelos cuando cree sus propios wrappers y widgets que admitan temas.

Métodos de trabajo con botones

Métodos de trabajo con casillas

Métodos para trabajar con texto o texto enriquecido

Métodos de trabajo con imágenes

Método de trabajo con campos de entrada