Tutorial 6: Uso de áreas de texto TextAreas
En este tutorial, aprenderá a usar las áreas de texto TextAreas para un uso más avanzado. Crearemos una
aplicación que mostrará textos en varios idiomas y con diferentes tipografías. También veremos cómo
cambiar la apariencia del texto y cómo usar wildcards o comodines a través del TouchGFX Designer y a
través del código. Para seguir este tutorial con mayor facilidad, le invitamos a realizar el tutorial 2
previamente.
Este tutorial se ha preparado en dos partes. En la primera, aprenderá a agregar diferentes tipografías y a
usarlas. También verá cómo usar diferentes idiomas en su aplicación. En la segunda, le enseñará a
gestionar la apariencia de un TextArea y a usar wildcards o comodines.
Nota: Para realizar la parte 2 debes haber realizado la parte 1, porque la parte 2 es una continuación de la
parte 1.
Parte 1 – Tipografía y lenguaje
En esta primera parte del tutorial 6, primero veremos cómo crear una nueva tipografía y luego veremos cómo
cambiar el idioma de nuestra aplicación.
Paso 1: Configuración de la pantalla
Para este tutorial, usaremos una pantalla sencilla que mostrará texto. Para cambiar de idioma, usaremos un
widget de botón. También necesitaremos otro botón para modificar el texto: cambiar el contenido, el color, el
interlineado y la sangría.
Comencemos con un nuevo lienzo en blanco de 800*480 (compatible, por ejemplo, con el kit de
descubrimiento STM32F469I DISCO B-07). Inserte los widgets y actualice las propiedades como se indica en
la tabla a continuación.
Widget Properties
· Name: backgroundBox
· Location:
o X: 0, Y: 0
Box
o W: 800, H: 480
· Appearance:
o Color: #FFFFFF
· Name: descriptionTextArea
· Location:
o X: 110, Y: 85
o W: 580, H: 70
TextArea · Text:
o Translation: In this tutorial, you will learn
how to use and configure a TextArea
· Appearance:
o Color: #FF0000
TextArea · Name: informationTextArea
· Location:
o X: 190, Y: 180
o W: 420, H: 30
· Text:
o Translation: The line spacing is <> and the
color is <>
o Wildcard 1:
§ Use wildcard buffer: Yes
§ Initial Value: 0
§ Buffer size: 10
o Wildcard 2:
§ Use wildcard buffer: Yes
§ Initial Value: Red
§ Buffer size: 10
· Name: languageButton
· Location:
Button With Label o X: 110, Y: 300
· Text:
o Translation: Language
· Name: appearanceButton
· Location:
Button With Label o X: 450, Y: 300
· Text:
o Translation: Appearance
El canvas o lienzo de tu aplicación debería verse así por el momento:
Canvas o lienzo de la aplicación
Paso 2: Creación de nuevas tipografías
En este paso vamos a crear dos nuevas tipografías que serán utilizadas por nuestras áreas de texto TextAreas y
botones Buttons previamente creados.
Creando Tipografía
Creando nueva tipografía
En TouchGFX Designer, vaya a la pestaña Texts y a la sección Typographies en la parte superior de la
pantalla. Haga click en el icono "+" para crear una nueva tipografía.
Como puedes ver en el lado derecho, hay varias configuraciones para configurar antes de usar una nueva
tipografía:
· Typography id (ID de tipografía): es el nombre que quieres darle a tu tipografía.
· Font (Fuente): puedes elegir entre todas las fuentes instaladas en Windows, o puedes importar las
fuentes de tu elección (verás cómo hacerlo en el siguiente paso de este tutorial).
· Size (Tamaño): el tamaño de fuente de la tipografía.
· Bpp: bits por píxel. La cantidad de bits que se utilizan por píxel para representar la fuente.
· Direction (Dirección): puede elegir una dirección según el idioma que vaya a usar en su aplicación, ya
sea de izquierda a derecha o de derecha a izquierda. Por defecto, está configurada de izquierda a
derecha.
· Fallback Characters (Caracteres de respaldo): si TouchGFX necesita renderizar un personaje pero el
glifo no está disponible, se utiliza este carácter especificado.
· Wildcard Characters (Caracteres comodín): es la lista de caracteres que se pueden mostrar dentro de
los wildcards o comodines de un TextArea.
· Widget Wildcard Characters (Caracteres comodín de widgets): estos son los caracteres que
requieren algunos widgets. Por ejemplo, un widget de reloj digital necesitará estos caracteres para
funcionar correctamente: "0123456789:APM".
· Wildcard Ranges (Rangos de comodines): es similar a los caracteres comodín, pero se pueden
especificar rangos.
· Ellipsis Characters (Caracteres de elipsis): este carácter se utiliza para truncar texto largo en áreas de
texto.
Ahora añade las siguientes tipografías:
Typography Id Language Settings
· Font: Times New Roman
informationTypography · Size: 20
· Wildcard Ranges: a-z,0-9,A-Z
· Font: Comic Sans MS
descriptionTypography
· Size: 26
Cambiar la tipografía de un widget
Después de crear nuestras tipografías, podemos cambiar la tipografía de nuestros widgets:
Cambiar la tipografía de la información del ára de texto TextArea
Regresa a la pestaña Canvas (lienzo) y selecciona informationTextArea. En el panel derecho, en la categoría
text (texto), puedes modificar la tipografía. Cámbiala a informationTypography.
Luego haz lo mismo para los demás widgets:
Widget Typography
descriptionTextArea descriptionTypography
appearanceButton informationTypography
languageButton informationTypography
Ahora tu Canvas o lienzo debería verse así:
Canvas o lienzo de la aplicación
Paso 3: Cambiar el lenguaje
En esta sección, veremos cómo agregar múltiples idiomas a su aplicación.
TouchGFX es compatible con la mayoría de los idiomas del plano multilingüe básico Unicode. De hecho,
admite sistemas de escritura de izquierda a derecha o de derecha a izquierda (no la escritura vertical), lo que
incluye idiomas como el árabe, el inglés y el chino tradicional y simplificado. Para obtener más información
sobre los idiomas compatibles, consulte: Idiomas y caracteres .
Crear un nuevo lenguaje
En este ejemplo, decidimos agregar chino y coreano para ver cómo se comporta TouchGFX Designer al tratar
con caracteres como los del idioma chino.
Creando un nuevo lenguaje
Seleccione Texts en el panel izquierdo, seleccione Unsorted (sin ordenar) y haga click en el símbolo "+",
como se muestra en la figura anterior. Aparecerá una pequeña ventana para agregar un nuevo idioma. Cree un
idioma llamado KO para el coreano y CH para el chino.
Una vez añadidos los nuevos idiomas, introduciremos manualmente las traducciones de cada texto de la
aplicación. Tenga en cuenta que queremos que algunos textos permanezcan en inglés, así que, para ello,
simplemente no traducimos el idioma y los ponemos en inglés.
Asignar las siguientes traducciones para ambos idiomas:
GB KO CH
Red Red Red
0 0 0
Appearance Appearance Appearance
Language Language Language
The line spacing is <> and the color is The line spacing is <> a
The line spacing is <> and the color is <>
<> <>
In this tutorial, you will learn how to use 이 자습서에서는 만드는 방법을 배웁니다 在本教程中 您将学习如何创
텍스트 영역 및 사용 방법 文本区域以及如何使用它们
and configure a TextArea
GB Noqueado CH
Rojo Rojo Rojo
0 0 0
Apariencia Apariencia Apariencia
Idioma Idioma Idioma
El interlineado es < > y el color es < > El interlineado es < > y el color es < > El interlineado es < > y el colo
En este tutorial aprenderá a usar 이 자습서에서는 만드는 방법을 배웁니다 在 本 教 程 中 您 将 学 习
y configurar un TextArea 텍스트 영역 및 사용 방법 文本区域以及如何使用它们
Una vez que haya agregado los idiomas y las traducciones, su pestaña Texts debería verse así:
Todas las traducciones
Recuerde presionar F4 para generar código: esto agregará estos dos idiomas al código (archivo
[Link]).
Cambiar el lenguaje
Para cambiar el idioma predeterminado de la aplicación con TouchGFX Designer, ve a Config
(Configuración) en la parte inferior izquierda de la pantalla. Haz click en Selected Language (idioma
seleccionado) y cambia el idioma a "KO" (Coreano). Si regresas a la pestaña del canvas o lienzo, verás que el
idioma ha cambiado. Sin embargo, si seleccionas "Run Simulator" (ejecutar simulador), verás que
TouchGFX Designer no puede mostrar los caracteres coreanos.
Ejecución del simulador
De hecho, la fuente elegida para el descriptionTextArea o descripción de área de texto ("Comic sans MS") no
admite caracteres coreanos ni chinos. Debe asegurarse de que la fuente (font) que utiliza sea compatible con el
carácter que desea mostrar.
Entre las fuentes que hemos seleccionado, ninguna admite caracteres especiales como el chino o el coreano.
Por eso, ahora vamos a importar dos fuentes compatibles con estos dos idiomas.
Nota: No somos propietarios de las fuentes que ya están disponibles en TouchGFX Designer. Debe
asegurarse de tener la licencia de estas fuentes para usarlas con fines comerciales.
Agregar fuentes
Descargue las dos fuentes compatibles con caracteres coreanos o chinos. En este ejemplo, utilizamos las
siguientes fuentes gratuitas y de código abierto de Google :
· “Noto Sans Korean” para coreano
· “Noto Sans Simplified Chinese” para chino
A continuación, agregue las fuentes al directorio assets\fonts. Una vez agregadas las dos fuentes, cierre
TouchGFX Designer y vuelva a abrirlo.
Cambiar la fuente de un idioma
Si regresa a TouchGFX Designer y hace click en la lista de fuentes de descriptionTypography, verá las
fuentes que acaba de importar. Si hace click en el botón "+" junto a "Default", se mostrará un menú con
sugerencias de idiomas. Puede seleccionar un idioma y agregar una fuente específica.
Añade "KO" y cambia la fuente del coreano a "Noto Sans KR Thin". Haz lo mismo para el chino: añade
"CH" y cambia la fuente a "Noto Sans SC Thin". Haz esto solo para descriptionTypography.
Si hace click nuevamente en "Run Simulator", podrá ver que esta vez TouchGFX Designer admite los
caracteres coreanos:
Ejecución del simulador
Como antes, puedes cambiar el idioma (Config>General>Selected Language y cambiarlo a "CH") a chino y
ver que también funciona.
Cambiar idioma con el código
Ahora, agreguemos algunas interacciones y escribamos código. En esta parte, veremos cómo cambiar el
idioma de nuestra aplicación al hacer click en el botón de idioma.
Primero, crea la siguiente interacción:
Interaction Properties
· Trigger: Button is clicked
· Clicked Source: languageButton
ChangeLanguage
· Action: Call new virtual function
· Function Name: changeLanguage
Presione "Generate Code" o "Run Simulator", el TouchGFX Designer generará la función virtual
especificada.
Comencemos integrando la función de los botones. Agregue el siguiente código:
Y agregue el siguiente código en la ruta TouchGFX/gui/src/screen1_screen/[Link] para
implementar la función:
No olvides agregar el include necesario para poder utilizar la función getLanguage():
Texts::getLanguage() Se utiliza para obtener el ID del idioma y devuelve un valor de enumeración. Por lo
tanto, si la función devuelve 1, corresponde al inglés, 2 al coreano y 3 al chino. Es el valor de la enumeración
LANGUAGE del archivo [Link].
NUMBER_OF_LANGUAGES devuelve el número total de idiomas disponibles.
Creamos un contador llamado idLanguage para cambiar el idioma en cada click en el botón de idioma y lo
repetimos en caso de que hayamos llegado al último idioma (condición "if").
Para finalizar Texts::setLanguage(idLanguage);se utiliza para asignar el nuevo idioma.
Ahora, si se hace click en "Run Simulator" y presiona el botón Language, el idioma de su texto cambiará.
Nota: Tenga en cuenta que en TouchGFX Designer no se puede cambiar solo el idioma de un texto en
particular. Al configurar el idioma mediante TouchGFX Designer y el código, se modificará el idioma de
todos los widgets que contengan texto. Sin embargo, queremos que algunos textos permanezcan
explícitamente en inglés. Por eso no tradujimos todos los textos en el paso 3.
Con esto concluye la primera parte del tutorial 6. Te invitamos a continuar con la segunda parte, que te
permitirá implementar el botón "appearance" (Apariencia). También verás cómo usar los comodines de
informationTextArea.
Parte 2 – Apariencia de TextArea y Wildcard
Para realizar esta segunda parte del tutorial 6, asegúrese de haber completado la primera. Finalizaremos la
implementación de la aplicación iniciada en la primera parte del tutorial. Primero, veremos cómo modificar la
apariencia del TextArea e implementaremos el botón "appearance" (Apariencia). Finalmente,
implementaremos los comodines del informationTextArea.
Paso 1: Cambiar la apariencia del TextArea
En esta sección, veremos cómo cambiar la apariencia de un TextArea usando TouchGFX Designer y
también mediante código. La idea es cambiar el color del texto, el interlineado para textos con varias líneas y
rotarlo. Manipularemos el widget "descriptionTextArea" creado previamente.
TouchGFX Designer
TouchGFX Designer – Appearance (Apariencia)
En TouchGFX Designer, al seleccionar un widget TextArea, podrá cambiar su apariencia en "Properties"
(Propiedades) del panel derecho. Lo primero que puede cambiar es el color. Puede hacerlo con la paleta de
colores (haciendo click en un color) o introduciendo el código hexadecimal si ya lo conoce (por ejemplo,
#FF0000 para rojo). En este tutorial, seleccionamos el color rojo para la descriptionTextArea (paso 1 de la
parte 1).
El segundo elemento que puedes cambiar a través de la sección "appearance" (Apariencia) en TouchGFX
Designer es el valor "Alpha". Esto no es exclusivo de TextAreas. De hecho, muchos widgets permiten al
usuario decidir el valor alpha (por ejemplo, las imágenes). El valor alpha se puede definir como la
transparencia de un elemento. Por ejemplo, supongamos que tienes una pantalla con dos widgets superpuestos.
Si el widget en primer plano tiene un valor alpha menor de 255, deberías poder ver el segundo widget en
segundo plano a través del primero. Si el widget en primer plano tiene un valor alpha de 255, no deberías
poder ver el widget en segundo plano. Por el momento, mantendremos el valor alpha en 255.
Luego viene la opción "Line spacing" (interlineado). Este parámetro solo afectará al texto si tiene varias
líneas. Puede ser positivo, cero (valor predeterminado) o negativo. En caso de valor negativo, verá que la
segunda línea se superpone constantemente, e incluso puede estar por encima de la primera. Para este tutorial,
establezca el valor 40 para el interlineado.
El último parámetro es "Text rotating" (texto giratorio). Este valor influye en la orientación del texto. Un
valor de 0 mostrará el texto horizontalmente (default value o valor predeterminado). Un valor de 180 también
lo mostrará horizontalmente, pero invertido. Un valor de 90 mostrará el texto verticalmente y orientado a la
derecha (la parte superior del texto a la derecha). Por último, un valor de 270 mostrará el texto verticalmente
orientado a la izquierda. En este tutorial, usaremos el valor predeterminado, 0.
Ahora, si presionas “Run Simulator” (tecla F5), deberías ver algo parecido a esto:
Ejecución del simulador
La razón por la que no puedes ver la segunda línea es porque el widget descriptionTextArea es demasiado
pequeño para contener el texto. Por lo tanto, regresa al canvas o lienzo y, para este widget, en la sección
"Location Section" (Ubicación), marca la casilla "Auto-size" (Ajustar tamaño automáticamente). Ejecútalo de
nuevo y verás el texto completo.
Ejecución del simulador
del texto
En esta parte, veremos cómo cambiar la apariencia del texto mediante código. Para ello, usaremos la función
changeAppearance().
Primero, crea la siguiente interacción:
Interacción Propiedades
· Disparador: se hace clic en el botón
· Fuente en la que se hizo clic: appearanceButton
Cambiar apariencia
· Acción: Llamar a una nueva función virtual
· Nombre de la función: changeAppearance
Presione “Generar código”, el Diseñador generará la función virtual especificada.
Queremos cambiar el color del texto. Queremos que sea rojo, azul o verde, aleatoriamente. Para ello,
necesitamos generar un valor aleatorio entre 0 y 2 y almacenarlo. Por lo tanto, vaya a su
[Link] y declaremos el atributo Screen1View .
class Screen1View : public Screen1ViewBase
{
public:
...
virtual void changeAppearance();
protected:
...
};
Ahora, agreguemos algo de código para obtener un valor de color aleatorio al presionar el botón Cambiar
apariencia.
TouchGFX/gui/src/pantalla1_pantalla/[Link]
void Screen1View::changeAppearance()
{ //Color
int randomTextColor = rand()%3;
switch (randomTextColor)
{
case 0:
[Link](touchgfx::Color::getColorFromRGB(255,0,0));
break;
case 1:
[Link](touchgfx::Color::getColorFromRGB(0,255,0));
break;
case 2:
[Link](touchgfx::Color::getColorFromRGB(0,0,255));
break;
}
}
Observarás que, como en el Tutorial 5 , usamos la setColor()función para cambiar el color del texto, la
rand()función para obtener un valor aleatorio y la touchgfx::Color::getColorFromRGB()función para obtener
el color deseado. Para más información sobre estas funciones, consulta la API y el Tutorial anterior.
No olvides agregar el include necesario para poder utilizar la función rand()y :getColorFromRGB()
#include <stdlib.h>
#include <touchgfx/[Link]>
Ahora cambiemos el interlineado. Queremos que sea un valor aleatorio entre 0 y 20. Añada estas líneas a la
changeAppearance()función:
TouchGFX/gui/src/pantalla1_pantalla/[Link]
void Screen1View::changeAppearance()
{ ...
int randomLineSpacing = rand()%21;
[Link](randomLineSpacing);
}
Valor alfa y
Hagamos lo mismo para obtener un valor alfa aleatorio ( randomAlphaValue ) y un valor de rotación de texto
aleatorio ( randomTextRotation ).
Al final tu código debería verse así:
TouchGFX/gui/src/pantalla1_pantalla/[Link]
void Screen1View::changeAppearance()
{ //Color
int randomTextColor = rand()%3;
switch (randomTextColor)
{
case 0:
[Link](touchgfx::Color::getColorFromRGB(255,0,0));
break;
case 1:
[Link](touchgfx::Color::getColorFromRGB(0,255,0));
break;
case 2:
[Link](touchgfx::Color::getColorFromRGB(0,0,255));
break;
}
//Line spacing
int randomLineSpacing = rand()%21;
[Link](randomLineSpacing);
//Alpha value
int randomAlphaValue = rand()%256;
[Link](randomAlphaValue);
//Text rotation
int randomTextRotation = rand()%4;
switch (randomTextRotation)
{
case 0:
[Link](touchgfx::TextRotation::TEXT_ROTATE_0);
break;
case 1:
[Link](touchgfx::TextRotation::TEXT_ROTATE_90);
break;
case 2:
[Link](touchgfx::TextRotation::TEXT_ROTATE_180);
break;
case 3:
[Link](touchgfx::TextRotation::TEXT_ROTATE_270);
break;
}
[Link]();
}
Otras
La API para TextArea es bastante extensa y permite múltiples manipulaciones en la apariencia del texto.
Podemos mencionar, por ejemplo, la setIndentation()función que añade una sangría en la primera línea de un
texto o la setBaselineY()función que ajusta la coordenada "y" de TextArea para que su línea base sea el valor
especificado. No dudes en explorar la API, probar las funciones y ver el impacto en el código 😉.
Paso 2: usa
En esta parte, aprenderemos a cambiar el texto de un TextArea durante la ejecución. Esto es posible mediante
comodines .
Vamos a utilizar el componente informationTextArea para mostrar el tamaño y el color del texto dentro de
descriptionTextArea .
Agregar
Primero, obtendremos el valor del interlineado y lo asignaremos al primer comodín de informationTextArea .
Para ello, añadiremos la siguiente línea de código al final de la changeAppearance()función:
TouchGFX/gui/src/pantalla1_pantalla/[Link]
void Screen1View::changeAppearance()
{
...
Unicode::snprintf(informationTextAreaBuffer1, INFORMATIONTEXTAREABUFFER1_SIZE, "%d",
randomLineSpacing);
[Link]();
}
La función snprintf() formatea y almacena una serie de caracteres y valores en el búfer de la matriz. La cadena
se formatea como al usar printf estándar.
informationTextAreaBuffer1-> Es el primer búfer para la cadena formateada del área de texto de información .
Designer lo genera automáticamente al hacer clic en "Generar código". El dígito final es 1 o 2 y representa el
número del comodín en el texto (lo que significa que tenemos un máximo de 2 comodines por área de texto).
INFORMATIONTEXTAREABUFFER1_SIZE-> Es el tamaño del buffer que hemos especificado cuando
creamos el comodín en Designer.
"%d"-> Significa que vamos a escribir en nuestro buffer de cadena algo que es de tipo entero.
randomLineSpacing-> valor del interlineado creado durante el paso 4 (cambiar apariencia) (son los valores a
insertar en la cadena de formato).
Ahora, si ejecuta el simulador, podrá ver que cuando presiona el botón “Apariencia”, el valor del espacio entre
líneas cambia según el espacio entre líneas.
Agregar
Finalmente, obtendremos el color del área de texto de descripción y rellenaremos el segundo comodín del
área de texto de información según este color. Para ello, primero crearemos textos para cada color: rojo, verde
y azul. Una vez creados estos textos, los asignaremos al segundo comodín del área de texto de información
según este color.
Creando nuevo texto
Regrese al Diseñador, a la pestaña Textos. Haga clic en "+ Añadir nuevo texto". Reemplace los siguientes
valores:
Identificación Tipografía Alineación GB Noqueado CH
Verd Verd
ColorG Área de texto de información Izquierda Verde
e e
Crea de la misma manera los otros dos textos:
Identificación Tipografía Alineación GB Noqueado CH
ColorR Área de texto de información Izquierda Rojo Rojo Rojo
ColorB Área de texto de información Izquierda Azul Azul Azul
Tras crear los textos, podemos usarlos para rellenar el segundo comodín del informationTextArea . Para ello,
usaremos la función strncpy de la siguiente manera:
Unicode::strncpy(informationTextAreaBuffer2, TypedText(T_COLORR).getText(),
INFORMATIONTEXTAREABUFFER2_SIZE);
La función strncpy copia n caracteres de una cadena a un búfer de destino.
informationTextAreaBuffer2-> es el buffer de destino (segundo comodín del informationTextArea).
T_COLORR-> Es un valor de enumeración del texto que acabamos de crear en TouchGFX Designer. Puedes
ver todas las enumeraciones de los textos en el archivo [Link] . Designer lo genera
automáticamente al hacer clic en "Generar código".
TypedText (T_COLORR). getText() -> TypedText(T_COLORRR) obtendrá el objeto y getText() obtendrá el
texto asociado a este objeto.
INFORMATIONTEXTAREABUFFER2_SIZE-> Es el número máximo de caracteres a copiar. Aquí, es el
tamaño del segundo comodín del área de texto de información.
Para concluir, agregue las últimas líneas que faltan al código:
TouchGFX/gui/src/pantalla1_pantalla/[Link]
void Screen1View::changeAppearance()
{ //Color
int randomTextColor = rand()%3;
switch (randomTextColor)
{
case 0:
[Link](touchgfx::Color::getColorFromRGB(255,0,0));
Unicode::strncpy(informationTextAreaBuffer2, TypedText(T_COLORR).getText(),
INFORMATIONTEXTAREABUFFER2_SIZE);
break;
case 1:
[Link](touchgfx::Color::getColorFromRGB(0,255,0));
Unicode::strncpy(informationTextAreaBuffer2, TypedText(T_COLORG).getText(),
INFORMATIONTEXTAREABUFFER2_SIZE);
break;
case 2:
[Link](touchgfx::Color::getColorFromRGB(0,0,255));
Unicode::strncpy(informationTextAreaBuffer2, TypedText(T_COLORB).getText(),
INFORMATIONTEXTAREABUFFER2_SIZE);
break;
}
[Link]();
...
}
No olvides agregar el include necesario para poder utilizar la TypedText()función:
#include <texts/[Link]>
Ahora, si ejecuta la aplicación y presiona el botón “Apariencia”, podrá ver el valor del interlineado y el color
del nombre cambia dependiendo de la apariencia de descriptionTextArea .