We are working so hard preparing what will be one of the major releases of DecSoft App Builder. We want to publish the new release as soon as possible, probably when a new version of Bootstrap 6 becomes available. In this post we want to advance you to what is already implemented for the new release. We hope you find it interesting!
See what's new below:
- Introducing app flavors for Apache Cordova and Capacitor! DecSoft App Builder allows you now not only to distribute an app, with the same codebase, in different platforms, but also to distribute an app like different apps, in different platforms, always with the same codebase! App flavors are an opt-in feature, that is, it's totally optional and you don't need to change any existing configuration in your existing apps. The Apache Cordova and Capacitor app options have been enhanced to allow working with different flavors, and, of course, a lot of other enhancements have been made to be ready with this. You can take a look at the "Hybrid apps flavors" help topic for more information and details.
- Introducing Bootstrap 6 in DecSoft App Builder! Bootstrap 6 is a major release of this amazing framework, which we use in DecSoft App Builder in various ways, including the apps template. The introduction of Bootstrap 6 implied several changes in DecSoft App Builder, in principle, transparent to you and your apps (you can just compile your apps and you will be using now Bootstrap 6), except if you use Bootstrap 5.x (the latest version in the previous release of DecSoft App Builder) classes or variables. In this last case, you must take care and change the Bootstrap 5 classes and variables with the new ones in Bootstrap 6. If you need this, you can review this document to get help: https://github.com/twbs/bootstrap/blob/main/skills/bootstrap-v5-v6-migration/SKILL.md
- Bootstrap 6 is not distributed anymore like Global JS. This version of Bootstrap (and the future ones) will only be available as an ECMAScript module. Thanks to this situation, we enhance the DecSoft App Builder apps template in several ways. For example, the template "app.js" file is now a module itself and now our apps use the very latest versions of Vue.JS, Vue Router, Vue Pinia, Luxon, JS Base64 and of course Bootstrap as ECMAScript modules. We also made other several enhancements over the apps template, and, with all this, our apps are now more reliable and even faster.
- This release of DecSoft App Builder introduces the new "Imports" app option. Before this release we can use ECMAScript modules in our apps, but now is easier than before. Basically we can now add the required modules using the app Files Manager and then import it using the app Imports option. You can see a new Module sample app which shows how we can use ECMAScript modules in our apps using the new app Imports option.
- The "kind properties" that we can use in several controls like the Push buttons, are now the availables in Bootstrap 6. The DecSoft App Builer app designer show now these colors in a better way, in fact the IDE shows the colors at designtime exactly as they are in runtime. This applies to the background and foreground colors of this "kind properties" of the Push buttons, but, also in other controls like the Image Push, Dropdown and more.
- The Push button, Image Push and Dropdown controls have a new "Style" property, which allows us to use the new capabilities of Bootstrap 6. We can now select if these controls must appears in flavors like "styled", "solid", "outline", "subtle" or "text." We encourage that you take a look at the sample apps which are shipped with DecSoft App Builder: you will see that we enhance a lot of them, for example, the PushButton sample app, in which we can see now these new property in action.
- The Carousel control has been entirely rewritten to show as the Bootstrap 6 carousel component. This control has been enhanced in various ways, for example, there now "indicators" and "controls" that can be shown overlaying or not the carousel: we encourage you to take a look at the enhanced Carousel sample app which is included in DecSoft App Builder.
- The app Sidebar has been enterely rewritten in order to use the new Drawer component of Bootstrap 6. You no need to change anything, but, now the app Sidebar looks consistently with Bootstrap 6 and this allow us to reduce the implied JavaScript and CSS drastically. You can take a look at the enhanced Sidebar sample app which is included in DecSoft App Builder.
- The Navbar control has been enterely rewritten in order to use the Navbar control of Bootstrap 6. You no need to change anything, but, the Navbar control has been enhanced in several ways, showing a Drawer menu when needed replacing the previous used "collapsable menu".
- Add new Navbar controls related app methods: app.canShowNavbar(), app.showNavbar(), app.hideNavbar(), app.hideNavbars() and app.isNavbarVisible(). These methods are possible due to the new Navbar behavior with Bootstrap 6. These methods has been properly documented at the product help and are available in the product source code editor declarations and completions.
- The Dropdown control has been entirely rewritten in order to use the new HTML markup of the Menu component of Bootstrap 6. The Dropdown control has now more ways to positioning their menu. Take a look at the enhanced "Dropdown*" sample apps which is included in DecSoft App Builder.
- The Range input, CheckBox and Switch controls support now the "kind color" property in a better way, natively, thanks to Bootstrap 6. Previous to this release only CheckBox and Switch support this by using third party CSS style. Now the "kind colors" are supported out of the box for this controls in Bootstrap 6, including the Range input control.
- Add the Bubble boolean property for the Range input control. This property is false by default, but, if set to true, the Range input control will show a Bubble (tooltip) with the current value of the Range input control. Take a look at the enhanced Range sample app to see this in action.
- Added the Formatter event for the Range input control. When the Bubble property of the control is set to true, this event is fired and allows us to customize the text that appears at the Bubble (tooltip) of the Range input control. Take a look at the enhanced Range sample app to see this in action.
- Add the Ticks property for the Range input control. This property allows us to optionally set certain ticks (and optional labels for them) to be shown with the Range input control. Take a look at the also new RangeTicks sample app to see this new property in action.
- The app dialogs (and also the app alerts) are now based on the native HTML dialog element, since this is how works now in Bootstrap 6. The app dialogs are now faster and reliable and have a new Animation property. This property allows to keep the dialog showing with a "fade animation" (by default), without any animation or with a slide down or slide up animations.
- The DecSoft app plugins BlockUI and "Controls" has been enterely rewritten in order to be ready with Bootstrap 6. For example, the BlockUI alert is now based in the native HTML dialog element, since this is how works now in Bootstrap 6.
- Make a lot of enhancements to the app's template. We moved several files, called some of them differently (more appropriately), and modified the compiler in order to write some things in other ways than before this release. This made the compilation of the app even faster and our "app.js" better debuggable. You no need to worry at all! All these changes are transparent for you and your apps.
- Add the new SystemBars sample app, which want to show how to deal with system bars and their colors when our apps are running in Android and iOS, that is, when they are compiled with Apache Cordova or Capacitor, without affect if our app is running in another platforms.
- Add the new Bootstrap sample app, which want to encourage you with the power of the HTML control and the ability to use in our apps all the HTML markup, CSS classes and variables of the Bootstrap framework. There are other samples who show this for specific components, and, this new sample shows various of them in just one place / HTML control.
- The DecSoft App Builder welcome page, about page, product help, DecSoft app plugins helps, AI chat tool, icons picker dialog and even the product ReadMe file use now Bootstrap 6.
- Add the "auto" value as a possible app theme color. When we establish at designtime or runtime the "auto" value for the app theme color, then the app will be shown in the color scheme used by the system / browser. By default the app theme color is still set to "light", but, now it's also possible to set it to "auto" at the designtime and runtime. Take a look at the new "ThemeColor" sample app.
- Remove from the app template the venerable Hammer.js library, used to be ready with the app, app views and app dialogs SwipeLeft and SwipeRight events. Now we use (as an ECMAScript module) the modern, smaller, faster and well maintained Pointeract JS library. Additionally, we add to the apps, app views and app dialogs the new SwipeUp and SwipeDown events. Take a look at the also new Swipes sample app.
- The app code minimizer tool module has been rewritten from scratch and now offers more information about the minimizer task and also fixes an introduced bug which leaves without minimizing the possible existing Apache Cordova and Capacitor apps. Now these apps are minimized if they exist as well as all their existing flavors. The module is available at the DecSoft App Builder IDE and also by the DecSoft App Builder CLI compiler.
- Updated the VueJS JavaScript library Pinia to the latest 4.1.0 version (debug and production) for the app's template. This version of the VueJS JavaScript library Pinia includes a lot of changes, fixes and enhancements.
- Updated the VueJS JavaScript library Core to the latest 3.5.44 version (debug and production) for the apps' template. This release of VueJS Core has a lot of changes, fixes and enhancements, so our apps' template.
We invite you to stay tuned for the next release of DecSoft App Builder.