Estamos trabajando intensamente 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 la aplicación ("flavors") para Apache Cordova y Capacitor! DecSoft App Builder le permite ahora no solo distribuir una aplicación, con la misma base de código, en diferentes plataformas, sino también distribuir una aplicación como diferentes aplicaciones, en diferentes plataformas, ¡siempre con la misma base de código! Las variantes de la aplicación son una característica opcional, es decir, es totalmente opcional y usted no necesita cambiar ninguna configuración existente en sus aplicaciones actuales. Las opciones de aplicación de Apache Cordova y Capacitor se han mejorado para permitir trabajar con diferentes variantes y, por supuesto, se han realizado muchas otras mejoras para estar preparados para esto. Puede echar un vistazo al tema de ayuda "Hybrid apps flavors" para obtener más información y detalles.
- ¡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 Global JS. Esta versión de Bootstrap (y las futuras) solo estará disponible como un módulo ECMAScript. Gracias a esta situación, mejoramos la plantilla de aplicaciones de DecSoft App Builder de varias maneras. Por ejemplo, el archivo de plantilla "app.js" es ahora un módulo en sí mismo y ahora nuestras aplicaciones utilizan las versiones más recientes de Vue.JS, Vue Router, Vue Pinia, Luxon, JS Base64 y, por supuesto, Bootstrap como módulos ECMAScript. También realizamos otras mejoras diversas en la plantilla de las aplicaciones y, con todo esto, nuestras aplicaciones son ahora más confiables e incluso más rápidas.
- 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 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 o no. Te animamos a echar un vistazo a la aplicación de ejemplo del control Carousel —que incluye diversas mejoras— disponible 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.
- Se añaden nuevos métodos de la aplicación relacionados con los controles Navbar: app.canShowNavbar(), app.showNavbar(), app.hideNavbar(), app.hideNavbars() y app.isNavbarVisible(). Estos métodos son posibles debido al nuevo comportamiento de Navbar con Bootstrap 6. Estos métodos han sido debidamente documentados en la ayuda del producto y están disponibles en las declaraciones y autocompletados del editor de código fuente del producto.
- 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.
- 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 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 elimina de la plantilla de la aplicación la venerable biblioteca Hammer.js, que solía estar integrada en la aplicación, en las vistas de la aplicación y en los diálogos de la aplicación para los eventos SwipeLeft y SwipeRight. Ahora utilizamos (como un módulo ECMAScript) la biblioteca Pointeract JS, la cual es moderna, más pequeña, más rápida y cuenta con un buen mantenimiento. Adicionalmente, añadimos a las aplicaciones, vistas de aplicaciones y diálogos de aplicaciones los nuevos eventos SwipeUp y SwipeDown. Eche un vistazo a la también nueva aplicación de ejemplo Swipes.
- El módulo de la herramienta del minimizador de código de la aplicación ha sido reescrito desde cero y ahora ofrece más información sobre la tarea del minimizador, y también corrige un error introducido que dejaba sin minimizar las posibles aplicaciones existentes de Apache Cordova y Capacitor. Ahora estas aplicaciones se minimizan si existen, así como todas sus variantes ("flavors") existentes. El módulo está disponible en el IDE de DecSoft App Builder y también mediante el compilador CLI de DecSoft App Builder.
- Se actualiza la biblioteca de JavaScript Pinia de VueJS a la versión más reciente 4.1.0 (depuración y producción) para la plantilla de la aplicación. Esta versión de la biblioteca de JavaScript Pinia de VueJS incluye una gran cantidad de cambios, correcciones y mejoras.
- Se actualiza el núcleo de la biblioteca de JavaScript VueJS ("Core") a la versión más reciente 3.5.44 (depuración y producción) para la plantilla de las aplicaciones. Esta versión de VueJS Core incluye una gran cantidad de cambios, correcciones y mejoras, por lo que beneficia a la plantilla de nuestras aplicaciones.
Le invitamos a permanecer atento al próximo lanzamiento de DecSoft App Builder.