DecSoft App Builder

App options

The app options panel allows to set the appropriate options for the app that you are developing. The app options panel is divided by sections to made easy to navigate between these sections using the menu that is placed at the left of the app options panel.

App options Apache Cordova options

Apps options - Interface

Below you can see the app Interface options window. After the image you can get information about all the app options in the Interface section.

Apps options - Interface - App icon

Use the app icon editbox folder button to select the icon to be used in the app. It's recommended to use a 1024x1024 pixeles image here. DecSoft App Builder creates several icons for Apache Cordova based in the icon image that you provide here.

Apps options - Interface - App themes - Included

Select one or more app themes from the themes included list in order to be available for the app. At runtime, you can find the available themes in the app Themes property, and, also change between app themes by using the app setAppTheme() method.

Apps options - Interface - App themes - Default

Select one app theme from the themes default list in order to be established as the theme when the app start. At runtime, you can find the current theme in the app Theme property, and also the available themes in the app Themes property, and, also change between app themes by using the app setAppTheme() method.

Apps options - Interface - App Width

With the app width what you establish in the app options are the app designer size for all the app views and app dialogs. The app designer size is related with the app "fixed" and "scaled" styles and the Autosize the app size option. Use the listbox below the width and height editboxes in order to set a predefined size for the app, or just fill the width and height editboxes with your desired values.

Apps options - Interface - App Height

With the app height what you establish in the app options are the app designer size for all the app views and app dialogs. The app designer size is related with the app "fixed" and "scaled" styles and the Autosize the app size option. Use the listbox below the width and height editboxes in order to set a predefined size for the app, or just fill the width and height editboxes with your desired values.

Apps options - Interface - App Text direction

You can establish here the text direction for the app, which can be "left to right" (by default) or "right to left". You can use the app TextDirection property to know the current app text direction, and, it's also possible to change the app text direction at runtime by using the appSetTextDirection() method.

Apps options - Interface - App screen - Autoscale app size

The Autoscale app size option (which is checked / used by default) establish the app "scaled" style when the app start. Uncheck this checkbox if you want to establish the "fixed" style for the app. You can change between the "fixed" and the "scaled" styles at runtime, by using the app setAppFixedStyle() method and the app setAppScaledStyle() method. Take a look also at the app styles help topic.

Apps options - Interface - App screen - Allow user zoom

The app Allow user zoom option determines if the user can zoom the app by using the platform provided way, for example, by using some fingers gesture. By default this option is unchecked, means we don't want the zoom to be applied in the app. Note, however, that this option only works in certain platforms like Android and Apple iOS: the user can contiue zooming if the app is running in a browser.

Apps options - Interface - App screen - MaxWidth

The app MaxWidth option is taken in consideration if the Autoscale app size option is checked. This option limit the app scale width, as you can see described in the app styles help topic.

Apps options - Interface - App screen - MaxHeight

The app MaxHeight option is taken in consideration if the Autoscale app size option is checked. This option limit the app scale height, as you can see described in the app styles help topic.

Apps options - Information

Below you can see the app Information options window. After the image you can get information about all the app options in the Information section.

Apps options - Information - App ID

The app ID option establish the ID for the app, which is used in certain platforms like Android, for example, to maintain the app well updated. The app ID is suposed to be unique per every app. You can access to the app ID at runtime by using the app ID property.

Apps options - Information - App Language

The app Language option establish the language code for the app (by default "en" for "English"), which is used to establish the app HTML "lang" attribute, but, also internally when translate the apps. You can access to the app Language at runtime by using the app Language property.

Apps options - Information - App LanguageName

The app Language name option establish the language name for the app (by default "English"). You can access to the app Language at runtime by using the app LanguageName property.

Apps options - Information - App Version

The app Version option establish the version for the app. You can access to the app version at runtime by using the app Version property.

Apps options - Information - App Name

The app Name option establish the name for the app, which is used, for example, to set the browsers title, but also when our app is listed, or below the app icon, in other platforms. You can access to the app name at runtime by using the app Name property.

Apps options - Information - App ShortName

The app ShortName option establish a short name for the app, which is used, for example, in the Android platform, when, due to space limitations, is more convenient to use a short version of the app name. You can access to the app name at runtime by using the app ShortName property.

Apps options - Information - App BuildNumber

The app BuildNumber option set a build number for the app compilation. You can check the Autoincrement checkbox in order to auto increment the build number on every app compilation. You can access to the app name at runtime by using the app BuildNumber property.

Apps options - Information - App Description

The app Description option set a line of text with an small description of the app. This description is used, for example, in the app HTML metatags. You can access to the app name at runtime by using the app Description property.

Apps options - Information - App Author Name

The app Author Name option is used, for example, to be placed in the appropriate HTML metatag. You can access to the app name at runtime by using the app AuthorName property.

Apps options - Information - App Author Email

The app Author Email option is used, for example, to be placed in the appropriate HTML metatag. You can access to the app name at runtime by using the app AuthorEmail property.

Apps options - Information - App Author URL

The app Author URL option is used, for example, to be placed in the appropriate HTML metatag. You can access to the app name at runtime by using the app AuthorUrl property.

Below you can see the app Sidebar options window. After the image you can get information about all the app options in the Sidebar section.

Apps options - Sidebar Header

Set this option to a litle text to be show at the header of the optional app sidebar. The app sidebar is optional, and so the sidebar header. You can access to the app sidebar header at runtime by using the app app.sidebar.header property.

Apps options - Sidebar image URL

Set this option to an image URL to be show at the header of the optional app sidebar. The app sidebar is optional, and so the image URL. You can access to the app sidebar image URL at runtime by using the app app.sidebar.imageUrl property.

Apps options - Sidebar Header kind

Set this option to the kind (color) to be used in the header of the optional app sidebar. The app sidebar is optional, and so the header kind. You can access to the app sidebar header kind at runtime by using the app app.sidebar.headerKind property.

Apps options - Sidebar Header Align

Set this option to the align ("left", "center", "right") to be used in the header of the optional app sidebar. The app sidebar is optional, and so the header align. You can access to the app sidebar header kind at runtime by using the app app.sidebar.headerAlign property.

Apps options - Sidebar Items

Use the "Edit" buttons to establish the app sidebar items and subitems at designtime by using the sidebar items dialog. You can access to the app sidebar items and subitems at runtime by using the app app.sidebar.items property.

There is a Sidebar sample app included with the installation of DecSoft App Builder. Take a look to see the above dialog in action!

Apps options - Metatags

Below you can see the app Metatags options window. After the image you can get information about all the app options in the Metatags section.

Apps options - Metatags - Metadata

Check the checkbox (it's checked by default) to include the app author information and the app description using the appropriate app HTML metatags.

Apps options - Metatags - Custom metadata

You can use the Custom metadata app option to add more HTML metatags to be included in the app HTML.

Apps options - Custom Style

Below you can see the app Custom Style options window. After the image you can get information about all the app options in the Custom Style section.

Apps options - Custom Style - CSS style

In addition to the CSS stylesheets that you can include in the app by using the app files manager and the custom style that you can set by using the IDE controls style inspector, it's also possible to use the app custom style option to place some CSS code to be applied in the entire app.

You can set the custom CSS style for the app using the above app option editbox, but, there is another way from the app designer, by using the right click contextual menu, as you can see in the below GIF image:

Apps options - Build programs

Below you can see the app Build programs options window. After the image you can get information about all the app options in the Build programs section.

Apps options - Build programs - Before and after build

You can use the Build programs app options to establish executable programs (or BAT, or CMD files) to be executed before and after the app has been successfully compiled. Use the arguments listboxes to pick some arguments (like the app project file path or the app output directory path) to be send to the referred executable programs.

Apps options - WebApp

Below you can see the WebApp options window. After the image you can get information about all the app options in the WebApp section.

Apps options - WebApp - WebApps and Progressive WebApps

You can use the WebApp options to create the appropriate stuff (some manifest files, for example) to made your app ready to be installed in modern browsers and devices, without downloading first from any app store.

Commonly the browsers vendors detect the app manifest and offers to the user a way to install the app, basically place an app icon in the device home screen. Then, when the app is launch from that icon, the options that you can establish here are applied.

Note that we are not talking here about the hybrid apps that we can also creates with DecSoft App Builder and the help of Apache Cordova. A WebApp is running in a browser and is served from certain HTTP server. When the user use the app icon, the appropriate app URL is loaded.

Hybrid apps, however, can be really downloaded and installed from the different app stores, or just from your own website, and can access to the device information and capabilities too, like if they are native apps.

To prepare your app to be available as a WebApp and Progressive WebApp just check the "Create manifest" checkboxes, and set the WebApp and Progressive WebApp options as you wanted. Then when the app is compiled, DecSoft App Builder creates the right manifest files to be used.

Apps options - Web Extension

Below you can see the Web Extension options window. After the image you can get information about all the app options in the Web Extension section.

Apps options - Web Extension - Web Extension

You can check the "Create a manifest file" so DecSoft App Builder creates the appropriate app manifest which allows the app to be installed in modern browsers as a plug-in or add-on, that is, as a Web Extension. The installed Web Extension app can then be show by the user clicking in the provided browser toolbar icon.

How the app works as a Web Extension

The app that are deployed as a Web Extension for the modern browsers, partially run in the context of the browser's current page, so we can change from the app that page background color, for example. There is no possible to directly access to the referred browser's current page, so, to change their background color, for example, we must follow the below steps:

  1. Call to the app webExtensionSendMessage() method, passing a message as the method argument like "set-red-background-color".
  2. Once we call the referred method, then the app WebExtContent event is fired. This event code run in the context of the browser's current page, and, put at your disposition a "message" variable, in this case with the "set-red-background-color" string, so we proceed to change their background color from here.
  3. Optionally we can use the "window.chrome.runtime.sendMessage(message)" Javascript method from the app WebExtContent event, which causes that the WebExtMessage event was fired. So we send a message to the app from the Web Extension Content script.

Probably a bit of code can be good here too:

There is a WebExtension sample app included with the installation of DecSoft App Builder. Take a look to see a WebExtension app in action!

Apache Cordova options - General

Below you can see the Apache Cordova - General options window. After the image you can get information about all the app options in the Apache Cordova - General section.

Apache Cordova options - General - Config file

If you want to deploy your app as an hybrid app for platforms like Android, Apple iOS and Microsoft Window, then check the "Create a Cordova config file" checkbox. Doing that, DecSoft App Builder prepare the appropriate stuff (configuration file, icons, splash screens and more) to made it possible.

Apache Cordova options - General - Batch & Shell

You can check as many platforms as you wanted here, so DecSoft App Builder creates the right Batch and Shell files in order to properly compile the app with Apache Cordova. You can then execute these Batch files in Microsoft Windows, and, in the same way, execute the prepared Shell files in Apple Mac OS.

Note that Shell files are only prepared for the iOS and Electron platforms, since these platforms are the supported ones in Apple Mac OS. Please, read the Apache Cordova help topic for more information and details about these Batch and Shell files.

Apache Cordova options - General - Plugins

Check as many plugins as you wanted to be included in the app when compile it with Apache Cordova. These plugins are the Apache Cordova officially supported plugins.

When you check a Cordova plugin here, DecSoft App Builder prepares the right plugin Javascript variables and methods to be ready for use, and, include the Cordova plugin to be installed when compile the app. For example, take a look at the below GIF image: you can see how when the Cordova File plugin is checked, the IDE code editor show the appropriate variables and methods that the plugin provides to you. See here the Apache Cordova Javascrit APIs integration.

Take a look at the Apache Cordova help topic in order to learn more about the integration of DecSoft App Builder with Apache Cordova.

Apache Cordova options - General - Shell files

Select from the Shell files group if DecSoft App Builder must use the NL (New Line) character or the CR (Carriage Return) character when creates the Shell files for Apple Mac OS. By default the NL (New Line) character is used, but, you can change it to CR (Carriage Return) if needed.

Apache Cordova options - General - Custom Plugins

In addition to the Apache Cordova plugins which are supported "out of the box", you can use the the Custom Plugins editbox to specify other Apache Cordova plugin to be used in the app. Just add one plugin ID per line in the referred editbox and that plugin will be referred in Apache Cordova configuration file and the created Batch and Shell files.

If you need a more control to install your desired custom Apache Cordova plugins, you can use the app Apache Cordova Batch and Shell files hooks.

Apache Cordova options - Configuration

Below you can see the Apache Cordova - Configuration options window. After the image you can get information about all the app options in the Apache Cordova - Configuration section.

Apache Cordova options - Configuration - Screen

Check the "Run at full screen" checkbox if you want that your app run in a full screen manner, without any statusbar, for example. Run the app in full screen mode can be atractive, however, it's not the regular way in which the app run, so take careful and use this feature if your app really need to work in a full screen mode, like if you are developing certain game, for example.

Check the "Disallow over scroll" if you don't want the interface to display any feedback when users scroll past the beginning or end of content. On iOS, overscroll gestures cause content to bounce back to its original position. on Android, they produce a more subtle glowing effect along the top or bottom edge of the content.

Select from the listbox the default device orientation. You can change it at runtime by using the Apache Cordova Screen Orientation plugin.

Apache Cordova options - Configuration - Statusbar

Check the "Overlay WebView at startup" checkbox to make the statusbar overlay on top of your app. Ensure that you adjust your styling accordingly so that your app's title bar or content is not covered. Uncheck the checkbox to make the statusbar solid and not overlay your app.

Select one of the available statusbar styles from the listbox, and, finally the default statusbar background color to be used. You can change the color and perform several other actions over thee statusbar by using the Apache Cordova Statusbar plugin.

Apache Cordova options - Configuration - Extra XML config

If you need to add some XML configuration into the Apache Cordova configuration file, here is the place. Some Apache Cordova plugins can require specific configuration which can be set in the Apache Cordova configuration file. Always that you need to add some XML code into the Apache Cordova configuration file, use the above Extra XML configuration editbox.

Apache Cordova options - Batch files

Below you can see the Apache Cordova - Batch files options window. After the image you can get information about all the app options in the Apache Cordova - Batch files section.

Apache Cordova options - Batch files

Probably you already know that DecSoft App Builder can create several Batch files to get our app compiled with Apache Cordova. Well. In this app options section you can hook into the created Batch files, so you can add certain specific batch code into the Start, After and End times.

You can place in the Start editbox batch code that be executed before any Apache Cordova command was executed.

You can place in the After editbox batch code that be executed after the Apache Cordova platform was added.

You can place in the End editbox batch code that be executed after all the Apache Cordova commands was executed.

Apache Cordova options - Shell files

Below you can see the Apache Cordova - Shell files options window. After the image you can get information about all the app options in the Apache Cordova - Shell files section.

Apache Cordova options - Shell files

Probably you already know that DecSoft App Builder can create several Shell files to get our app compiled with Apache Cordova. Well. In this app options section you can hook into the created Batch files, so you can add certain specific batch code into the Start, After and End times.

You can place in the Start editbox shell code that be executed before any Apache Cordova command was executed.

You can place in the After editbox shell code that be executed after the Apache Cordova platform was added.

You can place in the End editbox shell code that be executed after all the Apache Cordova commands was executed.

Apache Cordova options - Tools Paths

Below you can see the Apache Cordova - Tools Paths options window. After the image you can get information about all the app options in the Apache Cordova - Tools Paths section.

Apache Cordova options - Tools Paths

In principle, you can ommit these options, that is, only if you need to specify special paths for the Java home, the Ant home and the Android home, you can use the above editboxes to do it.

Apache Cordova options - Splash screens

Below you can see the Apache Cordova - Splash screens options window. After the image you can get information about all the app options in the Apache Cordova - Splash screens section.

Apache Cordova options - Splash screens - Splash screens

DecSoft App Builder creates several icons for Apache Cordova as well several splash screens for Apache Cordova. Here you can set splash screens specific options, for example, you can set the duration, in milliseconds, that the splash screen is visible when your app starts. By default the splash screen appear during 3000 ms (three seconds). You can set the duration to "0" (zero) in order to avoid the splash screen usage.

Pick also the splash screen Spinner color. Check the Fading in and out... checkbox to apply a fade effect to the splash screen when it's show and hide. Check the Show the native spinner... checkbox to show the splash screen spinner: remember that you can set the color of that spinner too.

Last, but not least, choose an image file to be used as your app splash screen. A 1024x1024 image size can be good here, then DecSoft App Builder creates several splash screens for Apache Cordova based in your provided image. Note that, if you did not provide an image here, the app icon is used for the app splash screen.

Apache Cordova options - Android platform

Below you can see the Apache Cordova - Android platform options window. After the image you can get information about all the app options in the Apache Cordova - Android platform section.

Apache Cordova options - Android platform - Keep running

The "Keep running" option checkbox determines whether the application stays running in the background even after an app Pause event fires. Uncheking this checkbox does not kill the app after an app Pause event, but simply halts execution of code within the Cordova webview while the app is in the background.

Apache Cordova options - Android platform - Show title

The "Show title" option checkbox determines if the app title must appear at the top of the screen. This is "false" (unchecked) by default.

Apache Cordova options - Android platform - Version code

Sets the version code for the application. This version code must be increased when everytime the app is uploaded to the Play Store.

Apache Cordova options - Android platform - App ID

Set here a specific app ID for Android. This value overrides the general app ID. If this value is not set the general app ID is used.

Apache Cordova options - Android platform - Splash screen

If set check the Splash screen "Maintain aspect ratio" checkbox, the splash screen drawable is not stretched to fit screen, but instead simply "covers" the screen, like CSS "background-size:cover". This is very useful when splash screen images cannot be distorted in any way, for example when they contain scenery or text. This setting works best with images that have large margins (safe areas) that can be safely cropped on screens with different aspect ratios. Take a look at the Splash screens options.

Apache Cordova options - Android platform - Min Android SDK

Choose from the listbox the minimum Android SDK API to be used for your app. This option sets the "minSdkVersion" attribute of the "uses-sdk" tag in the project's "AndroidManifest.xml" file.

Apache Cordova options - Android platform - Target SDK

Choose from the listbox the target Android SDK API to be used for your app. This option sets the "targetSdkVersion" attribute of the "uses-sdk" tag in the project's "AndroidManifest.xml" file.

Apache Cordova options - Android platform - Signing

Use the debug and release Signing groupboxes to provide the required stuff in order to properly sign your app APK file. This is mandatory if you want to deploy your APK in the Google Store and probably other stores. When you compile the app, the signing information was stored in the right JSON files, which is later used by Apache Cordova when compile the app.

You can create Key Store files to signing your apps using the DecSoft App Builder provided Key Store tool.

Apache Cordova options - Android platform - Adaptative icons

In addition to the app icon that you can provide, you can specify here additional icons for the Android platform. These optional adaptative icons are intended to be used in the supported Android versions (Android 9+) and are just ignored in versions who don't support these kind of icons. DecSoft App Builder generates the right platform icons based in your provided adaptative icons.

Apache Cordova options - Apple iOS platform

Below you can see the Apache Cordova - Apple iOS platform options window. After the image you can get information about all the app options in the Apache Cordova - Apple iOS platform section.

Apache Cordova options - Apple IOS Platform

Specify the "Bundle version" for the Apple iOS platform, as well the "Deployment target" and the "Target device". You can provide here an app ID specifically to be used in the Apple iOS platform. This app ID overrites the general app ID.

Set the "Signing" groupboxes controls in order to provide the information to sign your IPA files. When you compile the app, the signing information was stored in the right JSON files, which is later used by Apache Cordova when compile the app.

Apache Cordova options - Electron platform

Below you can see the Apache Cordova - Electron platform options window. After the image you can get information about all the app options in the Apache Cordova - Electron platform section.

Apache Cordova options - Electron platform

The Apache Cordova Electron platform is quite interesting, since allows to deploy the app in the Microsoft Windows and Mac OS platforms. You can use the Apache Cordova Windows platform to deploy your apps in the Universal Windows platform, but with the Apache Cordova Electron platform, what you get are executable files of your app, ready to be deployed in the regular Microsoft Windows platform.

Use the "Settings" editbox to place the JSON settings for the Electron platform. There are lot of posible options to be used, as you can see by clicking the "Electron's Docs" link. Then you can use the "Signing" groupboxes to sets the information in order to sign your apps for both Microsoft Windows and Apple Mac OS platforms. When you compile the app, the signing information was stored in the right JSON files, which is later used by Apache Cordova when compile the app.

Apache Cordova options - Windows platform

Below you can see the Apache Cordova - Windows platform options window. After the image you can get information about all the app options in the Apache Cordova - Windows platform section.

Apache Cordova options - Windows platform

Thanks to the Apache Cordova Windows platform you can deploy the app in the Windows Universal Platform, putting it available, for example, in the Windows 10 store. You can use these options to set the platform target version, which can be "8.1" (for Windows 8) or "10.0" (for Windows 10). You can also determines the architecture type, that can be "x86", "x64" and "ARM".

Maybe you want to consider to use the Apache Cordova Electron platform instead of the Apache Cordova Windows plaform: the first one produces executable files, that finally can be also distributed in the Windows Store, and, additionally allows to deploy the app in Mac OS platform too.

Apache Cordova options - Phonegap platform

Below you can see the Apache Cordova - Phonegap Platform options window. After the image you can get information about all the app options in the Apache Cordova - Phonegap Platform section.

Phonegap Platform

If you plain to compile the app using Adobe Phonegap, here in you can specify the Apache Cordova CLI version to be used. It's possible to compile the apps using Adobe Phonegap, however, DecSoft App Builder offers the right Apache Cordova integration.