Crear una excelente experiencia de usuario (UX) para sus aplicaciones es un trabajo difícil, especialmente si está desarrollando aplicaciones integradas. Hoy en día, existen dos tipos de herramientas de interfaz gráfica de usuario (GUI) generalmente disponibles para desarrollar software integrado:involucran tecnologías complejas o son extremadamente costosas.
Sin embargo, hemos creado una prueba de concepto (PoC) para una nueva forma de usar herramientas existentes y bien establecidas para crear interfaces de usuario (UI) para aplicaciones que se ejecutan en dispositivos de escritorio, móviles, integrados y dispositivos Linux ARM de bajo consumo. . Nuestro método usa Android Studio para dibujar la interfaz de usuario; TotalCross para representar el XML de Android en el dispositivo; una nueva API de TotalCross llamada KnowCode; y una Raspberry Pi 4 para ejecutar la aplicación.
Elección de Android Studio
Es posible crear una UX receptiva y hermosa para una aplicación usando la API de TotalCross, pero crear la UI en Android Studio acorta el tiempo entre la creación de prototipos y la aplicación real.
Hay muchas herramientas disponibles para crear interfaces de usuario para aplicaciones, pero Android Studio es el que los desarrolladores de todo el mundo usan con más frecuencia. Además de su adopción masiva, esta herramienta también es súper intuitiva de usar y es realmente poderosa para crear aplicaciones simples y complejas. El único inconveniente, en mi opinión, es la potencia informática necesaria para utilizar la herramienta, que es mucho más pesada que otros entornos de desarrollo integrado (IDE) como VSCode o su alternativa de código abierto, VSCodium.
Pensando en estos problemas, creamos una prueba de concepto utilizando Android Studio para dibujar la interfaz de usuario y TotalCross para ejecutar el XML de Android directamente en el dispositivo.
Construyendo la interfaz de usuario
Para nuestro PoC, queríamos crear una aplicación de electrodomésticos para controlar la temperatura y otras cosas, y que se ejecutaría en un dispositivo Linux ARM.
Queríamos desarrollar nuestra aplicación para una Raspberry Pi, por lo que usamos ConstraintLayout de Android para crear una interfaz de usuario de tamaño de pantalla fijo de 848 x 480 (la resolución de Raspberry Pi), pero puede crear interfaces de usuario receptivas con otros diseños.
Android XML agrega mucha flexibilidad para la creación de UI, lo que facilita la creación de experiencias de usuario ricas para las aplicaciones. En el siguiente XML, usamos dos componentes principales:ImageView y TextView.
<ImageView
android:id="@+id/imageView6"
android:layout_width="273dp"
android:layout_height="291dp"
android:background="@drawable/Casa"
tools:layout_editor_absoluteX="109dp"
tools:layout_editor_absoluteY="95dp" />
<TextView
android:id="@+id/insideTempEdit"
android:layout_width="94dp"
android:layout_height="92dp"
android:background="#F5F5F5"
android:text="20"
android:textAlignment="center"
android:gravity="center"
android:textColor="#000000"
android:textSize="67dp"
android:textStyle="bold"
tools:layout_editor_absoluteX="196dp"
tools:layout_editor_absoluteY="246dp" />
Los elementos TextView se utilizan para mostrar algunos datos al usuario, como la temperatura dentro de un edificio. La mayoría de los ImageViews se utilizan como botones para la interacción del usuario con la interfaz de usuario, pero también son necesarios para implementar los eventos proporcionados por los componentes en la pantalla.
Integrando con TotalCross
La segunda tecnología en este PoC es TotalCross. No queremos usar nada de Android en el dispositivo porque:
- Nuestro objetivo es proporcionar una excelente interfaz de usuario para Linux ARM.
- Queremos lograr un espacio reducido en el dispositivo.
- Queremos que la aplicación se ejecute en dispositivos de hardware de gama baja con poca potencia informática (por ejemplo, sin GPU, poca RAM, etc.).
Para comenzar, creamos un proyecto TotalCross vacío usando nuestro complemento VSCode. A continuación, guardamos una copia de las imágenes dentro del dibujable carpeta y una copia del archivo XML de Android dentro del XML carpeta:ambos se encuentran dentro de los Recursos carpeta:
Para ejecutar el archivo XML con TotalCross Simulator, agregamos una nueva API de TotalCross llamada KnowCode y una ventana principal para cargar el XML. El siguiente código usa la API para cargar y representar el XML:
public void initUI() {
XmlScreenAbstractLayout xmlCont = XmlScreenFactory.create(“xml / homeApplianceXML.xml”);
swap(xmlCont);
} ¡Eso es todo! Con solo dos comandos, podemos ejecutar un archivo XML de Android usando TotalCross. Así es como funciona XML en el simulador de TotalCross:
Quedan dos cosas para terminar este PoC:agregar algunos eventos para proporcionar interacción con el usuario y ejecutarlo en una Raspberry Pi.
Agregar eventos
La API KnowCode proporciona una manera de obtener un elemento XML por su ID (getControlByID) y cambiar su comportamiento para hacer cosas como agregar eventos, cambiar la visibilidad y más.
Por ejemplo, para permitir que los usuarios cambien la temperatura en su hogar u otro edificio, colocamos botones de más y menos en la parte inferior de la interfaz de usuario y un evento de "clic" que aumenta o disminuye la temperatura un grado cada vez que se hace clic en los botones:
Button plus = (Button) xmlCont.getControlByID("@+id/plus");
Label insideTempLabel = (Label) xmlCont.getControlByID("@+id/insideTempLabel");
plus.addPressListener(new PressListener() {
@Override
public void controlPressed(ControlEvent e) {
try {
String tempString = insideTempLabel.getText();
int temp;
temp = Convert.toInt(tempString);
insideTempLabel.setText(Convert.toString(++temp));
} catch (InvalidNumberException e1) {
e1.printStackTrace();
}
}
}); Prueba en una Raspberry Pi 4
¡Por fin, el último paso! Ejecutamos la aplicación en un dispositivo y verificamos los resultados. Solo necesitábamos empaquetar la aplicación e implementarla y ejecutarla en el dispositivo de destino. También se puede usar un VNC para verificar la aplicación en el dispositivo.
La aplicación completa, incluidos los activos (imágenes, etc.), XML de Android, TotalCross y la API de KnowCode, ocupa aproximadamente 8 MB en Linux ARM.
Aquí hay una demostración de la aplicación:
Más recursos de Linux
- Hoja de trucos de los comandos de Linux
- Hoja de trucos de comandos avanzados de Linux
- Curso en línea gratuito:Descripción general técnica de RHEL
- Hoja de trucos de red de Linux
- Hoja de trucos de SELinux
- Hoja de trucos de los comandos comunes de Linux
- ¿Qué son los contenedores de Linux?
- Nuestros últimos artículos sobre Linux
En este ejemplo, la aplicación se empaquetó solo para Linux ARM, pero la misma aplicación se ejecutará como una aplicación de escritorio de Linux, dispositivos Android, Windows, Windows CE e incluso iOS.
Todo el código fuente de muestra y el proyecto están disponibles en el repositorio GitHub de HomeApplianceXML.
Nuevas posibilidades con las herramientas existentes
La creación de GUI para aplicaciones integradas no tiene por qué ser tan difícil como lo es hoy. Esta prueba de concepto brinda una nueva perspectiva sobre cómo realizar esta tarea fácilmente, no solo para los sistemas integrados, sino también para todos los principales sistemas operativos, todos utilizando la misma base de código.
No pretendemos crear una nueva herramienta para que los diseñadores o desarrolladores construyan aplicaciones de interfaz de usuario; nuestro objetivo es brindar nuevas posibilidades para utilizar las mejores herramientas que ya están disponibles.
¿Cuál es tu opinión sobre esta nueva forma de crear aplicaciones? Comparta sus pensamientos en los comentarios a continuación.