We are working 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! 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 "App flavors" help topic for more information and details. You can also take a look at the new Flavors sample app. Thanks, Daniel, for the idea and the nudge!
- 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 Base64 JS, Bootstrap, Font Awesome, jQuery, Luxon, Swipe JS, VueJS, Vue Pinia and Vue Router 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.
- Added the new "flavor" app property (app.flavor) to consistenly identify the flavor of the app which is running from your app JavaScript code. Even when other properties like "app.id", "app.name", "app.shortName" or "app.description" can be differents depending on the app flavor, the "app.id", for example, can be even more customized specifically in Apache Cordova and Capacitor. The "flavor" property will be always the lowercase name of the flavor, no matter the app ID. See more information at the app flavors help topic.
- Added the "data-app-flavor=default" to the app index.html. This HTML attribute is useful to apply some specific CSS style to a certain app flavor. The "default" will be changed by the name of the app flavor in lower case, for example: "data-app-flavor=other". See more information at the app flavors help topic and the Runtime selector help topic.
- 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. Additionally, now the minimizer also minimizes the index.html file of the app, in addition to the JS and CSS code.
- Added the new NavOverflow control. This control can be used in a similar way than the Navbar control, that is, as a navigation bar for the app, but, it's different than the Navbar control. The NavOverflow control uses a menu similar than the used for the Dropdown control, and, the Navbar control uses a drawer menu style, similar than the used for the app sidebar. Take a look at the new NavOverflow sample app to see the new NavOverflow control in action!
- The capacitor-app="true" and cordova-app="true" attributes set to the HTML element depending if the app is running in Apache Cordova or Capacitor and we can use from CSS to apply different styles are named now data-capacitor-app="true" and data-cordova-app="true". This is intended to follow the convention of others "data" attributes.
- 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 Radio input control, Switch input control and Checkbox input control supports now a Size property, similar to other controls like the Push button. We can use the "app.size.*" constant to set the size of these controls at runtime. The source code editor declarations and completions as well the product help file has been enhanced to reflect this enhancement.
- 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 and in top or bottom positions. 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". The NavBar control also have now the ability to set the "actived" and "disabled" property for items, in addition to subitems.
- Added new Navbar control methods: canShowMenu(), showMenu(), isMenuVisible() and hideMenu(). 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.
- Added the Squared property for the 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 and Search input controls. Take a look at the also added Squared sample app.
- 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.
- Added the optional monochrome icon for the Apache Cordova Android platform. In addition to the adaptative background and foreground icons, you can now set an optional monochrome icon image, which will be used when the settings of the device require that monochrome icon to be used by the apps. Like the other icons, DecSoft App Builder will pick your provided image and redimension it appropriately.
- 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.
- Added the new Always event to the HTTP client control. The Always event handler is fired always after the request is completed. The idea of this event is that you can make something at that time. For example, suppose you show a message to the user while the request is processed, then you can use this event in order to hide that message, no matter if the request is successfully done or failed. You can see this event in action at the Http sample app.
- Added the method app.setSwipeEvents() that can be used to attach swipe left and / or right events handlers to one or more specific controls or elements of the apps. DecSoft App Builder apps, views and dialogs already have the SwipeLeft and SwipeRight events, so you can use these or the new method for your specific controls and elements.
- Improved the way in which we parse the JSON of the stored Audio player and Video player sources, Navbar items, NavOverflow items, Dropdown items, Carousel items, and Sidebar items. Now it's not only faster, but also easier to keep a possible backward compatibility.
We invite you to stay tuned for the next release of DecSoft App Builder.