Estamos trabajando en la preparación de lo que será uno de los lanzamientos más importantes de DecSoft App Builder. Queremos publicar esta nueva versión lo antes posible, probablemente cuando esté disponible una nueva versión de Bootstrap 6. En esta publicación, queremos adelantarles algunas de las funcionalidades que ya se han implementado para este lanzamiento. ¡Esperamos que les resulte interesante!
Consulte las novedades a continuación:
- ¡Presentamos las "variantes de aplicación" (app flavors)! DecSoft App Builder ahora te permite no solo distribuir una aplicación (con la misma base de código) en diferentes plataformas, sino también distribuir una misma aplicación como si fueran aplicaciones distintas en diversas plataformas, ¡todo ello manteniendo siempre el mismo código fuente! Las variantes de aplicación son una funcionalidad opcional; es decir, no es obligatorio utilizarlas y no requieren modificar la configuración de tus aplicaciones existentes. Las opciones para Apache Cordova y Capacitor se han mejorado para permitir el trabajo con estas variantes y, por supuesto, se han realizado otros muchos ajustes para hacer esto posible. Puedes consultar el tema de ayuda "App flavors" para obtener más información y detalles. También puedes echar un vistazo a la nueva aplicación de ejemplo "Flavors". ¡Gracias, Daniel, por la idea y por el empuje!
- ¡Presentamos Bootstrap 6 en DecSoft App Builder! Bootstrap 6 es una versión principal de este increíble framework, el cual utilizamos en DecSoft App Builder de varias maneras, incluyendo la plantilla de las aplicaciones. La introducción de Bootstrap 6 implicó varios cambios en DecSoft App Builder, en principio, transparentes para usted y sus aplicaciones (simplemente puede compilar sus aplicaciones y ya estará utilizando Bootstrap 6), excepto si utiliza clases o variables de Bootstrap 5.x (la última versión en el lanzamiento anterior de DecSoft App Builder). En este último caso, debe tener cuidado y cambiar las clases y variables de Bootstrap 5 por las nuevas de Bootstrap 6. Si necesita esto, puede revisar este documento para obtener ayuda: https://github.com/twbs/bootstrap/blob/main/skills/bootstrap-v5-v6-migration/SKILL.md
- Bootstrap 6 ya no se distribuye como un archivo JS global. Esta versión de Bootstrap (así como las futuras) solo estará disponible como módulo ECMAScript. Gracias a este cambio, hemos mejorado la plantilla de aplicaciones de DecSoft App Builder en varios aspectos. Por ejemplo, el archivo «app.js» de la plantilla es ahora, en sí mismo, un módulo; además, nuestras aplicaciones utilizan las versiones más recientes de Base64 JS, Bootstrap, Font Awesome, jQuery, Luxon, Swipe JS, VueJS, Vue Pinia y Vue Router, todas ellas implementadas como módulos ECMAScript. Asimismo, hemos introducido otras mejoras en la plantilla de aplicaciones, logrando que nuestras aplicaciones sean ahora más fiables y, además, más rápidas.
- Se ha añadido la nueva propiedad de aplicación "flavor" (app.flavor) para identificar de manera coherente, desde el código JavaScript de la aplicación, la variante ("flavor") que se está ejecutando. Si bien otras propiedades (como "app.id", "app.name", "app.shortName" o "app.description") pueden variar según la variante de la aplicación (y, en el caso de "app.id", pueden personalizarse aún más en entornos como Apache Cordova o Capacitor), la propiedad "flavor" siempre corresponderá al nombre de dicha variante en minúsculas, independientemente del ID de la aplicación. Para obtener más información, consulte el tema de ayuda sobre las variantes de la aplicación ("app flavors").
- Se ha añadido "data-app-flavor=default" al archivo index.html de la aplicación. Este atributo HTML resulta útil para aplicar estilos CSS específicos a una variante (flavor) concreta de la aplicación. El valor "default" deberá sustituirse por el nombre de la variante de la aplicación en minúsculas; por ejemplo: "data-app-flavor=other". Encontrará más información en los temas de ayuda sobre variantes de aplicaciones (app flavors) y sobre el selector de tiempo de ejecución (Runtime selector).
- El módulo de la herramienta de minimización de código de la aplicación ha sido reescrito desde cero; ahora ofrece más información sobre el proceso de minimización y, además, corrige un error que impedía la minimización de aplicaciones existentes creadas con Apache Cordova o Capacitor. Ahora, estas aplicaciones (incluidas todas sus variantes (flavors)) se minimizan correctamente si están presentes. Este módulo está disponible tanto en el IDE de DecSoft App Builder como en el compilador de línea de comandos (CLI) de DecSoft App Builder. Asimismo, la herramienta ahora minimiza el archivo "index.html" de la aplicación, además del código JS y CSS.
- Se ha añadido el nuevo control NavOverflow. Este control puede utilizarse de forma similar al control Navbar (es decir, como una barra de navegación para la aplicación), pero difiere de este último. El control NavOverflow emplea un menú parecido al que utiliza el control Dropdown, mientras que el control Navbar utiliza un estilo de menú tipo "cajón" (drawer), similar al de la barra lateral de la aplicación. ¡Eche un vistazo a la nueva aplicación de ejemplo de NavOverflow para ver este control en funcionamiento!
- Los atributos capacitor-app="true" y cordova-app="true` (que se añaden al elemento HTML según si la aplicación se ejecuta en Apache Cordova o en Capacitor, y que permiten aplicar distintos estilos mediante CSS) han pasado a denominarse data-capacitor-app="true" y data-cordova-app="true". Este cambio tiene como objetivo seguir la convención utilizada para otros atributos de tipo "data".
- Esta versión de DecSoft App Builder introduce la nueva opción de aplicación "Imports". Antes de este lanzamiento podíamos utilizar módulos ECMAScript en nuestras aplicaciones, pero ahora es más fácil que antes. Básicamente, ahora podemos añadir los módulos requeridos utilizando el Administrador de Archivos de la aplicación y luego importarlos utilizando la opción Imports de la aplicación. Puede ver una nueva aplicación de ejemplo Module que muestra cómo podemos utilizar módulos ECMAScript en nuestras aplicaciones mediante la nueva opción Imports de la aplicación.
- Las "kind properties" que podemos utilizar en varios controles, como los botones Push, son ahora las que están disponibles en Bootstrap 6. El diseñador de aplicaciones de DecSoft App Builder muestra ahora estos colores de una mejor manera; de hecho, el IDE muestra los colores en tiempo de diseño exactamente como se ven en tiempo de ejecución. Esto se aplica a los colores de fondo y de primer plano de estas "kind properties" de los botones Push, pero también a otros controles como Image Push, Dropdown y más.
- Los controles de entrada de tipo Radio, Switch y Checkbox ahora admiten una propiedad "Size", al igual que otros controles como el botón de acción (Push button). Es posible utilizar la constante "app.size.*" para definir el tamaño de estos controles durante la ejecución. Tanto las declaraciones y el autocompletado en el editor de código fuente como el archivo de ayuda del producto se han actualizado para reflejar esta mejora.
- Los controles Push button, Image Push y Dropdown tienen una nueva propiedad "Style", que nos permite utilizar las nuevas capacidades de Bootstrap 6. Ahora podemos seleccionar si estos controles deben aparecer en variantes como "styled", "solid", "outline", "subtle" o "text." Le animamos a que eche un vistazo a las aplicaciones de ejemplo que se incluyen con DecSoft App Builder: verá que hemos mejorado muchas de ellas, por ejemplo, la aplicación de ejemplo PushButton, en la cual podemos ver ahora esta nueva propiedad en acción.
- El control Carousel ha sido reescrito por completo para presentarse como el componente de carrusel de Bootstrap 6. Este control ha sido mejorado en varios aspectos; por ejemplo, ahora cuenta con "indicadores" y "controles" que pueden mostrarse superpuestos al carrusel y situados en la parte superior o inferior. Le recomendamos echar un vistazo a la aplicación de ejemplo del control Carousel, que se incluye en DecSoft App Builder.
- La barra lateral de la aplicación ("Sidebar") ha sido reescrita por completo para utilizar el nuevo componente "Drawer" de Bootstrap 6. Usted no necesita cambiar nada, pero ahora la barra lateral de la aplicación se ve de manera consistente con Bootstrap 6 y esto nos permite reducir drásticamente el JavaScript y CSS implicados. Puede echar un vistazo a la aplicación de ejemplo "Sidebar" mejorada que se incluye en DecSoft App Builder.
- El control Navbar ha sido reescrito por completo para utilizar el control Navbar de Bootstrap 6. Usted no necesita cambiar nada, pero el control Navbar se ha mejorado de varias maneras, mostrando un menú "Drawer" cuando sea necesario en reemplazo del "collapsable menu" utilizado anteriormente. El control NavBar ahora también permite establecer las propiedades "actived" (activo) y "disabled" (deshabilitado) para los elementos, además de para los subelementos.
- Se han añadido nuevos métodos de control para la barra de navegación (Navbar): "canShowMenu()", "showMenu()", "isMenuVisible()" y "hideMenu()". Estos métodos son posibles gracias al nuevo comportamiento de la barra de navegación en Bootstrap 6. Se han documentado adecuadamente en la ayuda del producto y están disponibles en las declaraciones y funciones de autocompletado del editor de código fuente.
- El control Dropdown ha sido reescrito por completo para utilizar el nuevo marcado HTML del componente Menu de Bootstrap 6. El control Dropdown tiene ahora más formas de posicionar su menú. Eche un vistazo a las aplicaciones de ejemplo "Dropdown" mejoradas que se incluyen en DecSoft App Builder.
- Los controles Range input, CheckBox y Switch admiten ahora la propiedad "kind color" de una mejor manera, de forma nativa, gracias a Bootstrap 6. Antes de esta versión, solo CheckBox y Switch admitían esto mediante el uso de estilos CSS de terceros. Ahora los "kind colors" se admiten de forma nativa para estos controles en Bootstrap 6, incluyendo el control Range input el cual se ha mejorado.
- Añade la propiedad booleana "Bubble" al control de entrada "Range". Esta propiedad es «false» por defecto; sin embargo, si se establece en "true", el control "Range" mostrará una burbuja (información emergente) con su valor actual. Eche un vistazo a la aplicación de ejemplo "Range" mejorada para ver esto en funcionamiento.
- Se ha añadido el evento "Formatter" al control de entrada "Range". Cuando la propiedad "Bubble" del control está establecida en "true", este evento se dispara, permitiendo personalizar el texto que aparece en la burbuja (información emergente o *tooltip*) del control "Range". Eche un vistazo a la aplicación de ejemplo mejorada de "Range" para ver esto en funcionamiento.
- Se ha añadido la propiedad "Ticks" al control de entrada "Range". Esta propiedad permite definir, de forma opcional, determinadas marcas (y sus correspondientes etiquetas, también opcionales) que se mostrarán junto al control "Range". Eche un vistazo a la nueva aplicación de ejemplo "RangeTicks" para ver esta propiedad en funcionamiento.
- Se ha añadido la propiedad "Squared" a los controles Push button, Image push, Dropdown, Select, MultiSelect, Textarea, File input, Text input, Number input, Password input, Email input, Color input, Phone input, Date input, Time input y Search input controls. Revise el también añadido ejemplo de app "Squared".
- Los diálogos de la aplicación (así como las alertas) se basan ahora en el elemento nativo `dialog` de HTML, tal como funciona actualmente en Bootstrap 6. Estos diálogos son ahora más rápidos y fiables, e incluyen una nueva propiedad de animación. Dicha propiedad permite configurar la visualización del diálogo mediante una animación de desvanecimiento («fade», por defecto), sin ninguna animación, o bien mediante animaciones de desplazamiento hacia abajo o hacia arriba.
- Los plugins de la aplicación de DecSoft BlockUI y "Controls" han sido reescritos por completo para estar listos con Bootstrap 6. Por ejemplo, la alerta de BlockUI se basa ahora en el elemento nativo HTML dialog, ya que así es como funciona ahora en Bootstrap 6.
- Realizamos una gran cantidad de mejoras en la plantilla de las aplicaciones. Movimos varios archivos, llamamos a algunos de ellos de manera diferente (más apropiadamente) y modificamos el compilador para escribir algunas cosas de otras formas en comparación con las versiones anteriores a este lanzamiento. Esto hizo que la compilación de la aplicación fuera aún más rápida y que nuestro "app.js" fuera mejor depurable. ¡No tiene de qué preocuparse en absoluto! Todos estos cambios son transparentes para usted y sus aplicaciones.
- Se añade la nueva aplicación de ejemplo SystemBars, la cual busca mostrar cómo manejar las barras del sistema y sus colores cuando nuestras aplicaciones se ejecutan en Android e iOS, es decir, cuando se compilan con Apache Cordova o Capacitor, sin afectar si nuestra aplicación se está ejecutando en otras plataformas.
- Se añade la nueva aplicación de ejemplo Bootstrap, la cual busca entusiasmarle con el poder del control HTML y la capacidad de utilizar en nuestras aplicaciones todo el marcado HTML, las clases CSS y las variables del framework Bootstrap. Existen otros ejemplos que muestran esto para componentes específicos, y este nuevo ejemplo muestra varios de ellos en un solo lugar / control HTML.
- La página de bienvenida de DecSoft App Builder, la página acerca de, la ayuda del producto, las ayudas de los plugins de la aplicación de DecSoft, la herramienta de chat de IA, el diálogo del selector de iconos e incluso el archivo ReadMe del producto utilizan ahora Bootstrap 6.
- Se ha añadido un icono monocromo opcional para la plataforma Android en Apache Cordova. Además de los iconos adaptativos (que constan de fondo y primer plano), ahora es posible definir una imagen de icono monocromo opcional; esta se utilizará cuando la configuración del dispositivo requiera que las aplicaciones empleen un icono de este tipo. Al igual que ocurre con los demás iconos, DecSoft App Builder tomará la imagen que proporcione y la redimensionará de forma adecuada.
- Se añade el valor "auto" como un color de tema de la aplicación posible. Cuando establecemos en tiempo de diseño o en tiempo de ejecución el valor "auto" para el color de tema de la aplicación, entonces la aplicación se mostrará en el esquema de color utilizado por el sistema / navegador. Por defecto, el color de tema de la aplicación sigue estando configurado en "light", pero ahora también es posible establecerlo en "auto" en tiempo de diseño y en tiempo de ejecución. Eche un vistazo a la nueva aplicación de ejemplo "ThemeColor".
- Se ha añadido el nuevo evento "Always" al control de cliente HTTP. Este evento se dispara siempre una vez finalizada la solicitud. La finalidad de este evento es permitir realizar alguna acción en ese momento; por ejemplo, si se muestra un mensaje al usuario mientras se procesa la solicitud, es posible utilizar este evento para ocultar dicho mensaje, independientemente de si la solicitud se ha completado con éxito o ha fallado. Puede ver este evento en funcionamiento en la aplicación de ejemplo HTTP.
- Se ha añadido el método app.setSwipeEvents(), que permite asignar controladores de eventos de deslizamiento ("swipe") hacia la izquierda y/o hacia la derecha a uno o varios controles o elementos específicos de las aplicaciones. Las aplicaciones, vistas y cuadros de diálogo de DecSoft App Builder ya cuentan con los eventos "SwipeLeft" y "SwipeRight", por lo que puedes utilizar estos o bien el nuevo método para tus controles y elementos concretos.
- Se ha mejorado la forma en que analizamos el JSON de las fuentes de los reproductores de audio y vídeo, los elementos de la barra de navegación (Navbar), los elementos desbordados de la navegación (NavOverflow), los elementos de los menús desplegables (Dropdown), los elementos de los carruseles y los elementos de la barra lateral (Sidebar). Ahora, el proceso no solo es más rápido, sino que también resulta más sencillo mantener la compatibilidad con versiones anteriores.
Le invitamos a permanecer atento al próximo lanzamiento de DecSoft App Builder.