By using Cordova plugins in Web Screenlet, you can extend the functionality of the web page that the Screenlet renders. This lets you tailor that page to your app’s needs.
You’ll get started by installing and configuring Cordova. There are two ways to do this: automatically, or manually. The automatic method is covered first.
Installing and Configuring Cordova Automatically
Follow these steps to automatically create an empty Android project configured to use Cordova. Note that you must have git, Node.js, and npm installed.
-
Install
screens-cli
:npm install -g screens-cli
-
Create the file
.plugins.screens
in the folder you want to create your project in. In this file, add all the Cordova plugins you want to use in your app. For example, you can add plugins from Cordova or GitHub:https://github.com/apache/cordova-plugin-wkwebview-engine.git cordova-plugin-call-number cordova-plugin-camera
-
In the folder containing your
.plugins.screens
file, runscreens-cli
to create your project:screens-cli android <project-name>
This creates your project in the folder
platforms/android/<project-name>
. You can open it with Android Studio.
Installing and Configuring Cordova Manually
To install and configure Cordova manually, follow these steps:
-
Follow the Cordova getting started guide to install Cordova, create a Cordova project, and add the Android platform to your Cordova project.
-
Install any Cordova plugins you want to use in your app. For example, this command adds the Cordova plugin
cordova-plugin-call-number
:cordova plugin add cordova-plugin-call-number
You can use
cordova plugin
to view the currently installed plugins. -
Copy the following files and folders from your Cordova project to your Android project’s root folder:
/platforms/android/res/xml/config.xml
/platforms/android/assets/www
You should also review other files like
AndroidManifest.xml
, resource files, and so on. Some plugins add permissions or styles in such files that you may need to copy for those plugins to work correctly in your Android app.
Using Cordova in Web Screenlet
Now that you’ve installed and configured Cordova in your Android project, you’re ready to use it with Web Screenlet. Follow these steps to do so:
-
When you set Web Screenlet’s parameters via the
WebScreenletConfiguration.Builder
object, you must enable Cordova by calling theenableCordova
method with aCordovaLifeCycleObserver
argument.CordovaLifeCycleObserver
informs Cordova about the activity lifecycle. You can create an instance of this observer by using its no-argument constructor.For example, this code creates a
CordovaLifeCycleObserver
object that it then uses withenableCordova
when setting Web Screenlet’s parameters:CordovaLifeCycleObserver observer = new CordovaLifeCycleObserver(); WebScreenletConfiguration configuration = new WebScreenletConfiguration .Builder("/") .addLocalJs("call.js") .enableCordova(observer) .load(); webScreenlet.setWebScreenletConfiguration(configuration); webScreenlet.load();
-
Override the following
Activity
methods to call their corresponding observer methods:@Override protected void onStart() { super.onStart(); observer.onStart(); } @Override protected void onStop() { super.onStop(); observer.onStop(); } @Override public void onPause() { super.onPause(); observer.onPause(); } @Override public void onResume() { super.onResume(); observer.onResume(); } @Override public void onDestroy() { super.onDestroy(); observer.onDestroy(); } @Override public void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); observer.onSaveInstanceState(outState); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); observer.onActivityResult(requestCode, resultCode, data); } @Override public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) { super.onRequestPermissionsResult(requestCode, permissions, grantResults); observer.onRequestPermissionsResult(requestCode, permissions, grantResults); } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); observer.onConfigurationChanged(newConfig); }
That’s it! Note, however, that you may also need to invoke Cordova from a
JavaScript file, depending on what you’re doing. For example, to use
the Cordova plugin cordova-plugin-call-number
to call a number, you must add a JavaScript file with the following code:
function callNumber() {
//This line triggers the Cordova plugin and makes a call
window.plugins.CallNumber.callNumber(null, function(){ alert("Calling failed.") }, "900000000", true);
}
setTimeout(callNumber, 3000);
If you run the app containing this code and wait three seconds, the plugin activates and calls the number in the JavaScript file.
Great! Now you know how to use Web Screenlet with Cordova.