App Builder

Index of ContentsApp options

From the App Builder "Edit" menu we can open the app options dialog, which contains specific options for our app. Some of the options described below are also availables (to be view and edit) from the object inspector, when you click the designer out of any control or app view.

App Builder app options dialog

App ID

This option store the ID of our app. An app ID must be unique around the world and commonly take a form like: "com.company.appserver". When your app run in desktop or mobile browsers, for example, this ID it's not used. In fact the ID it's only used when you compile the app using Apache Cordova and it's used by only some platforms like Android™.

This particular platform uses the ID of your app to maintain it updated. Suposing you have your app installed on an Android device, if you try to install it again, Android recognize the app ID and proceed to upgrade the app instead of start the installation from scratch. The App ID is also used in certain HTML meta tag included in our app index.html file. Finally, the App ID is also stored in runtime in the App.ID global variable.

App name

This option store the name of our app. Such name is used for the title, for example, when your app run in a web browser. In other platforms the app name can be used in different places like as the label for your app icon. The App name is also used in certain HTML meta tag included in our app index.html file. The App name is also stored in runtime in the App.Name global variable.

App description

This option store the description of our app. The use of this option differs between platforms. The App description is used in certain HTML meta tag included in our app index.html file. The App name is also stored in runtime in the App.Description global variable.

Author name

This option store our app author name. The use of this option differs between platforms. The author name is used in certain HTML meta tag included in our app index.html file. The Author name is also stored in runtime in the App.AuthorName global variable.

Author email

This option store our app author email address. The use of this option differs between platforms. The author email is used in certain HTML meta tag included in our app index.html file. The Author email is also stored in runtime in the App.AuthorEmail global variable.

Author URL

This option store our app author URL address. The use of this option differs between platforms. The author URL is used in certain HTML meta tag included in our app index.html file. The Author URL is also stored in runtime in the App.AuthorUrl global variable.

App version

This option store the app version number expressed in major/minor/patch notation, for example, "1.0.0".


App size

Determine the width and height sizes of our app in pixels.

App scaled

Check this option if you want that the app scaled automatically on different screen sizes. You can also use the SetAppScaled action in order to alternate between the "scaled" and "fixed" modes in runtime.

Take a look at the Responsive tutorial included in this help file.

Allow user zoom

This option allow us to enabled or disabled the user zoom in our app. By default the option is "true", because accesibility rules implied than users can use the zoom if they needed. However you can change this option to "false" in order to disallow the zoom. This option affect to apps deployed in mobile browsers and do not have effect in desktop browsers.

App icon

Choose here the app icon file. Provide an icon 256x256 pixels or larger. When create a Cordova configuration file for your app App Builder automatically resizes and prepare your app icon for various platforms.

App default theme

Choose from the avaiable themes list the theme you wanted to use by default. If you add more than one theme to your app (see below) then you can use the SetAppTheme action to establish one of them.

App included themes

Choose from the avaiable themes list the themes you wanted to included along your app. Note that the themes increment a little the size of your app (around 125 KB per theme) then include only the themes you wanted to use. In runtime you can use the SetAppTheme action to change from one theme to another.


HTML

We can specify here if we wanted to add some metadata into the index.html file of our app. We can let App Builder to add app information and to turn off the browsers cache. If you wanted more metadata this options tab allow us to specify one or more meta tags to be added into the app index.html file.


Style (Inline CSS)

We can use the app file's manager to add any number of CSS stylesheet files and this is the recomended way to add particular CSS rules for our apps. However, for debugger purposes or small pieces of CSS code we can also use the above app Inline CSS option to add some particular CSS rules for our app.


Cordova options

In the Cordova tab of the app options dialog we specify some particular options related with Apache Cordova, that is, options which must be used if we plain to compile our apps using Apache Cordova. Below we describe every of these Cordova related options.

Cordova screen

Run at full screen. Check this checkbox if you wanted that your app run in full screen mode, that is, by hide the platform specific status bar. Uncheck the checkbox if you wanted that the status bar appears visible.

Disallow over scroll. Check this checkbox if you want that the over scroll effect which appear in some platforms like Android when the user scroll up or down in your app. Uncheck the checkbox if you wanted this over scroll effect visible.

Orientation. Choose the orientation of our app. The default behaviour mean that your app change their orientation when the user changes. You can specific "portrait" or "landscape" if you wanted to run your app only in one of these orientation modes.

Cordova plugins

Here you can specify the plugins you want to include in your app when compile it using Apache Cordova. This options are not take in count if you do not plain to compile your app using Cordova or in other words if you want to deploy your app in mobile or desktop browsers.

These plugins can be optional or mandatory, depend on the actions provided by the plugins. App Builder try to fallback every possible action. For example, the Vibrate action use the Vibration plugin when available, or fallback with a CSS animation in other case. Some other actions can be intented only to use for apps which must be compiled using Cordova. This actions can require the mandatory use of certain Cordova plugin. The action's reference refers if some specific plugin is optional or mandatory.

Plugin Mandatory Actions
Device No DeviceId, DeviceModel, DeviceVersion, DevicePlatform, DeviceSerial, DeviceIsVirtual
Network Yes GetNetworkType
Dialogs No Alert, Beep, Prompt, Confirm
Browser No OpenWindow, CloseWindow
Vibration No Vibrate
Compass Yes CompassHeading
Motion Yes Acceleration
Location No Geolocation
Battery Yes No actions but required by the Battery control
Barcode Yes BarcodeScan
Camera Yes CameraGetPicture, CameraDateToImage
Recorder Yes RecorderGetAudio, RecorderGetVideo, RecorderDataToFile
Files Yes FileWrite, FileAppend, FileRead
StatusBar Yes StatusBarShow, StatusBarHide, StatusBarIsVisible, StatusBarColor
Orientation Yes OrientationLock, OrientationUnlock
Custom plugins No We can use the Cordova custom plugins edit box to put one plugin ID per line. The plugin ID is what the author offer us to install the plugin, for example, "com.jsmobile.plugins.sms" is the plugin ID for certain Cordova plugin to send SMS messages. App Builder automatically add the custom plugins for you into the generated Cordova batch files and the Cordova "config.xml" file.

Android Keep running

Check this checkbox if you wanted that your app continue running even when the user pause it, for example, when open or change to another app. Uncheck the checkbox if you want that your app must be "halt" when the user open or change to another app.

Android Show app title

Check this checkbox if you wanted that the app title appear on the top of your app. Uncheck the checkbox if you do not wanted this.

Android version code

This option store the app version code number: 1, 2, 3, and so on. This option is only used when our app is compiled to the Android platform using Apache Cordova.

Android Min. SDK

The minimum SDK specify the API level or Android version in which our app can be installed and run.

Android target SDK

The target SDK specify the API level or Android version our app is optimized for.

iOS Bundle version

This option store the app bundle version for iOS. This is the version build number. This option is only used when our app is compiled to the iOS platform using Apache Cordova.

Windows version target

Choose "8.1" if you want to create projects for Windows Phone 8 and Windows 8.1. Choose "10.0" to create a project for the Windows 10 Universal App platform.

Cordova Batch files

App Builder can help us by creating the right batch files ready to compile our apps using Apache Cordova and for the selected platforms. You can choose one or more platforms in order to prepare the appropiate Batch file. App Builder take care about your selected plugins too and incoporate the right stuff in the batch files to download and install such plugins.

Remember Apache Cordova must be installed in your computer before you can execute these batch files. Also remember that you must have installed in your computer the appropiate SDK to be used by Cordova. For example, if you wanted to compile your app for the Android platform, you must be installed the Android's SDK.

You can't view an "iOS" checkbox like for other platforms. This is because you can compile your app for the iOS operating system, however, this cannot be made in a Windows machine. What you can do is to copy your app "www" directory and "config.xml" file into a MacOS machine with Cordova installed and then compile your app from here.

Cordova Paths

Optional paths: We can specify the Java, Ant and Android SDK home paths to be use in our application's BAT files. Please note this paths are completely optional and only required in certain specific scenarios. Commonly we no need to fill the above program paths in order to work.

Cordova Batch start

Add some specific code for the generated Cordova's BAT files for Windows at the start of the script, so we can, for example, copy certain files in the platform directory or something like that.

Cordova Batch after

Add some specific code for the generated Cordova's BAT files for Windows just after the Apache Cordova's platform add has been executed in the script, so we can, for example, copy certain files in the platform directory or something like that.

Cordova Batch end

Add some specific code for the generated Cordova's BAT files for Windows just after all the Cordova's stuff (platform, plugins, etc.) has been executed and just before the BAT script ends.

Cordova Shell start

Add some specific code for the generated Cordova's SHELL files for MacOS at the start of the script, so we can, for example, copy certain files in the platform directory or something like that.

Cordova Shell after

Add some specific code for the generated Cordova's SHELL files for MacOS just after the Apache Cordova's platform add has been executed in the script, so we can, for example, copy certain files in the platform directory or something like that.

Cordova Shell end

Add some specific code for the generated Cordova's SHELL files for Windows just after all the Cordova's stuff (platform, plugins, etc.) has been executed and just before the SHELL script ends.

Cordova configuration

Extra XML: sometimes, due to a particular Cordova plugin or anything else, we need to add into the Cordova config.xml file some stuff, in addition to the added by App Builder by default. For this a new tab has been added into the app options dialog, under the Cordova tab, which allow us to put some XML to be automatically added to the config.xml Cordova file.

Splash screen

You can optionally provide a couple of images to act like the splash screen for your app. You can provide a portrait 1280x720 or larger and a landscape 720x1280 or larger images. When a Cordova configuration file is created App Builder automatically resizes and prepare splash screen images for various platforms. The appropiate stuff has also added to the Cordova configuration file and the appropiate Cordova plugin is required from the supported platforms Batch files.


WebApp options

In the WebApp tab of the app options dialog we specify some particular options related with Webapps. Basically here we can specify options for a WebApp manifest file, which can then used for example to compile apps for Firefox or Firefox OS.


Progressive WebApp options

In the Progressive WebApp tab of the app options dialog we specify some particular options related with Progreesive WebApps. Basically here we can specify options for a Progressive WebApp manifest file, which can then used for example to prepare our applications for Chrome for Android.


WebExtension

In the WebExtension tab of the app options dialog we specify some particular options related with WebExtensions apps. Basically here we can specify options for a WebExtension manifest file, which can then used for example to prepare our applications as an extension for the modern browsers like Google Chrome, Opera, Mozilla Firefox, etc.


Build options

In the Build tab of the app options dialog we can determine some particular options related with the app build process.

Build before exec

Specify a program executable to be executed before our app is build or when the build process begin.

Build after exec

Specify a program executable to be executed after our app is build or when the build process end.


Plugins

From the Plugins tab we can check the plugins we want to use in our application. The plugins' list show all the App Builder's Javascript plugins which are activated. Check the plugins you want to use and leave uncheck the plugins that your application don't need. To manage the App Builder's Javascript plugins you can use the program's option dialog.