Capacitor integration

One of the used frameworks integrated with DecSoft App Builder is Capacitor. This framework is well integrated in DecSoft App Builder in various ways for your convenience. Continue reading this help topic to see how Capacitor is integrated in DecSoft App Builder.

Capacitor - Config file

Capacitor - Platforms icons

Capacitor - Splash screens

When you check the "Create a Capacitor config file" from the Capacitor General app options, the next time that the app is compiled, DecSoft App Builder creates several splash screens (based in the app splash screen that you can set in the app Capacitor Splashs options) for all the supported platforms. These splash screens are well referred then in the Capacitor configuration file, in order to be used by the platforms in which our app was running.

Capacitor - Batch files

Batch files for the Android platform

Batch files for the Apple iOS platform in Microsoft Windows

Capacitor - Shell files

Shell files for the Apple iOS platform

Capacitor - plugins

Available Capacitor plugins

Below you can see refer all the "out of the box" Capacitor plugins integrated in DecSoft App Builder, as well the JavaScript API that these plugins provides to you.

Capacitor Device plugin

The Capacitor Device plugin provides to you information about the device in which your app is running. This plugin put available the below JavaScript methods to retrieve the device information.

Return an unique identifier for the device. This method returns a promise with an object with the device identifier information.

app.capacitor.device.getId() .then(info => { alert(info.identifier); }) .catch(error => { alert(error); });

Return information about the underlying device/os/platform. This method returns a promise with an object with the device information. Below you can see a table with these object properties and their description.

app.capacitor.device.getInfo() .then(info => { alert(JSON.stringify(info)); }) .catch(error => { alert(error); });

Return information about the battery. This method returns a promise with an object with the battery information. Below you can see a table with these object properties and their description.

app.capacitor.device.getBatteryInfo() .then(info => { alert(JSON.stringify(info)); }) .catch(error => { alert(error); });

Get the device's current language locale code. This method returns a promise with an object with the device language code information. Below you can see a table with these object properties and their description.

app.capacitor.device.getLanguageCode() .then(info => { alert(info.value); }) .catch(error => { alert(error); });

Get a well-formed IETF BCP 47 language tag. This method returns a promise with an object with the device language tag information. Below you can see a table with these object properties and their description.

app.capacitor.device.getLanguageTag() .then(info => { alert(info.value); }) .catch(error => { alert(error); });

Capacitor Dialogs plugin

You can use the Capacitor Dialogs plugin in order to show to the user customizable natives dialogs. Note that all the methods provided by this Capacitor plugin fallback in the native "alert", "confirm" and "prompt" JavaScript functions, so this plugin can be used also in non Capacitor platforms. This is a very easy to use and useful plugin that offers to you the below methods ready to be used:

Show an alert dialog to the user. Below you can see a table with the method parameters and their description.

app.capacitor.dialogs.alert('My alert title', 'My alert message', 'My button') .then(() => { alert('Success!'); }) .catch(error => { alert(error); });

Show a prompt dialog to the user. Below you can see a table with the method parameters and their description.

If everything is right, this method returns a Promise with an object with the following properties.

app.capacitor.dialogs.prompt('Please...', 'What is your name?', 'Ok', 'Cancel', 'Type your name', '') .then(result => { alert(result.cancelled + ' :: ' + result.value); }) .catch(error => { alert(error); });

Show a confirm dialog to the user. Below you can see a table with the method parameters and their description.

If everything is right, this method returns a Promise with an object with the following properties.

app.capacitor.dialogs.confirm('Please, confirm...', 'Do you like DecSoft App Builder?', 'Yes of course!', 'I am just trying!') .then(result => { if (result.value) { alert('Thanks a lot!'); } else { alert('Ok then!'); } }) .catch(error => { alert(error); });

Capacitor SystemBars plugin

The Capacitor SystemBars plugin allows to control the system bars on Android and iOS devices, such as the status bar and navigation bar. It provides methods to show, hide, and customize the appearance of these bars to enhance the user experience in your app. Below you can see refer the methods of this plugin.

This is an object variable that stores all the possible values to be used with the app.capacitor.systemBars.setStatusBarStyle() and app.capacitor.systemBars.setNavigationBarStyle() methods. This object variable provide the below properties / values to be used:

// The available system bars styles app.capacitor.systemBars.style.dark app.capacitor.systemBars.style.light app.capacitor.systemBars.style.default

Use this method to hide the system status bar. This method returns a Promise that you can use to assert that the operation was successful or to handle any errors that may occur while hiding the status bar.

app.capacitor.systemBars.hideStatusBar() .then(() => { alert('Success!'); }) .catch(error => { alert(error); });

Use this method to show the system status bar. This method returns a Promise that you can use to assert that the operation was successful or to handle any errors that may occur while showing the status bar.

app.capacitor.systemBars.showStatusBar() .then(() => { alert('Success!'); }) .catch(error => { alert(error); });

Use this method to set the style of the system status bar. This method returns a Promise that you can use to assert that the operation was successful or to handle any errors that may occur while setting the status bar style.

// Set dark style app.capacitor.systemBars.setStatusBarStyle(app.capacitor.systemBars.style.dark) .then(() => { alert('Success!'); }) .catch(error => { alert(error); }); / Set light style app.capacitor.systemBars.setStatusBarStyle(app.capacitor.systemBars.style.light) .then(() => { alert('Success!'); }) .catch(error => { alert(error); }); // Set default style app.capacitor.systemBars.setStatusBarStyle(app.capacitor.systemBars.style.default) .then(() => { alert('Success!'); }) .catch(error => { alert(error); });

Use this method to hide the system navigation bar. This method returns a Promise that you can use to assert that the operation was successful or to handle any errors that may occur while hiding the navigation bar.

app.capacitor.systemBars.hideNavigationBar() .then(() => { alert('Success!'); }) .catch(error => { alert(error); });

Use this method to show the system navigation bar. This method returns a Promise that you can use to assert that the operation was successful or to handle any errors that may occur while showing the navigation bar.

app.capacitor.systemBars.showNavigationBar() .then(() => { alert('Success!'); }) .catch(error => { alert(error); });

Use this method to set the style of the system navigation bar. This method returns a Promise that you can use to assert that the operation was successful or to handle any errors that may occur while setting the navigation bar style.

// Set dark style app.capacitor.systemBars.setNavigationBarStyle(app.capacitor.systemBars.style.dark) .then(() => { alert('Success!'); }) .catch(error => { alert(error); }); / Set light style app.capacitor.systemBars.setNavigationBarStyle(app.capacitor.systemBars.style.light) .then(() => { alert('Success!'); }) .catch(error => { alert(error); }); // Set default style app.capacitor.systemBars.setNavigationBarStyle(app.capacitor.systemBars.style.default) .then(() => { alert('Success!'); }) .catch(error => { alert(error); });

Capacitor InAppBrowser plugin

The Capacitor InAppBrowser plugin allows, for example, to open a URL in the device's system browser. Take a look at the below methods of this plugin.

Open the provided URL in the device's system browser. This method fallback to the JavaScript window.open() method if the app is not running in a Cordova platform. This method returns a Promise but only the "catch" will be executed if an error occur while opening the URL. Below you can see a table with the method parameters and their description.

app.capacitor.inAppBrowser.openInExternalBrowser('https://www.decsoftutils.com/') .then(() => { alert('Success!'); }) .catch(error => { alert(error); });

Capacitor Screen Orientation plugin

The Capacitor Screen Orientation plugin provides to you a way to change and lock the device screen orientation at runtime. By default the screen orientation is unlocked - all orientations are supported: you must use (and probably wanted) to establish an orientation (the same that you use when design your app in DecSoft App Builder) at run time. This plugin put also available the app OrientationChange event.

This is an object variable that stores all the possible values to be used with the app.capacitor.screenOrientation.lock() method. This object variable provide the below properties / values to be used:

// The orientation variable which contains all possible orientations app.capacitor.screenOrientation.orientation.portraitPrimary app.capacitor.screenOrientation.orientation.portraitSecondary app.capacitor.screenOrientation.orientation.landscapePrimary app.capacitor.screenOrientation.orientation.landscapeSecondary app.capacitor.screenOrientation.orientation.portrait app.capacitor.screenOrientation.orientation.landscape app.capacitor.screenOrientation.orientation.any

You can use this plugin method to lock the screen orientation to one of the "app.capacitor.screenOrientation.orientation.*" values. This method admits the below argumens:

// Lock the screen orientation to portrait app.capacitor.screenOrientation.lock(app.capacitor.screenOrientation.orientation.portrait) .then(() => { alert('Success!'); }) .catch(error => { alert(error); });

You can use this plugin method to unlock the screen orientation.

// Unlock the screen orientation app.capacitor.screenOrientation.unlock() .then(() => { alert('Success!'); }) .catch(error => { alert(error); });

You can use this plugin method to know the current established screen orientation. This method returns one of the "app.capacitor.screenOrientation.orientation.*" values.

// Get the current screen orientation app.capacitor.screenOrientation.type() .then(info => { alert(info.type); }) .catch(error => { alert(error); });

---