Off the Electrical Grid: Plug into CordovaWebinar

2

Why is OutSystems using Cordova?

● Adapt to different form-factors using a single code base

● Native shell that deals with all interactions with the device and offline data and logic

● Tap into the 2000 publicly available plugins to enhance the experience beyond

what’s available on a typical browser

● Mobile apps with HTML, CSS & JS

● Target multiple platforms with one code

base

● Free and open source

What is Cordova

● Client-side actions are JavaScript nodes

running on a webview

● The JavaScript bridge is implemented in

the Native Plugin OutSystems module

How does OutSystems “plug into” this picture?

● Native code for iOS and Android

encapsulated in a Cordova Plugin

What components can I use off-the-shelf?

● All the supported plugins

○ Most of them available for testing

directly on OutSystems Now

● Plus a number of community effort driven

plugins

Using an OutSystems PluginOff the Electrical Grid: Plug into Cordova

Using an “off-the-shelf” plugin

● Plugins are available on the Forge

● Either use one of the supported plugins

with the OutSystems Now shell

● Or use a plugin from the Forge and

generate your customized native shell

How to use them?

● Reference it

● Check for plugin availability on the shell

● Use it!

OutSystems Plugin DevelopmentOff the Electrical Grid: Plug into Cordova

Did I tell you this already?

● A wide community of native developers

are using and sharing their plugins

● Cordova has 1980 plugins on portfolio

https://cordova.apache.org/plugins/

Developing a new plugin in OutSystems

● Plugins are usually available on GitHub

Look for complete plugins

○ JavaScript API well defined

○ Support for your target device OS

● Plugin that need manual steps are harder

to integrate, they need hook automation

● Plugin needs to be supported by the

OutSystems Shell Cordova version

Fetching the plugin source code

● Use the github URL

or

● The public identifier

or

● Include it in the resources file

How do I include them in my Application?

And how to use it?

● Import plugin code in extensibility settings

● Pick up the JavaScript code from the plugin

● Add to JavaScript nodes

● Use it!

How to use them?

● Not so fast...

How to handle events?

● Plugins often register events

● Events need to be trapped by a

Block and pushed upwards via an

event

Plugin events

Screen Callback

OnBatteryStatusBattery Plugin

Lifecycle Events

On Click

loading...

Destroy(old screen)

Initialize Ready

OnBatteryStatus OnBatteryStatus OnBatteryStatusBattery Plugin

Screen transition

Meet your new friend, Template Plugin

OnBatteryStatusBattery Plugin

New Screen Callback

Old Screen Callback

New Screen Ready?

Registering screen callbacks

● Managed callbacks (newCallback’s return function) are what ensure the binding of the active screen is the one that is the recipient of events and callbacks

● The scope is destroyed with every page navigation, so no need to unbind these callbacks

Registering event listeners

● Because the event listener is bound to the managed callback, you can be sure only the active scope will get the event.

● It is important to unregister the event listener… housekeeping!

Unregistering event listeners

● This looks so empty...

Using the scope on external JavaScript

● The scope can be used for plugin variables. Remember it’s volatile!● You can call binded actions directly from JavaScript.

Common actions are also available

● CheckTemplate_Plugin

○ Common Error output structure

defined as well

● Template_PluginAction

● Import plugin code in extensibility settings

● Pick up the JavaScript code from the plugin

● Add to JavaScript nodes

● Write JavaScript to Register and Unregister

plugin events

● Write JavaScript to check plugin availability

on the shell

How to use them?

Example - BeaconsPlugin

Native Plugin DevelopmentOff the Electrical Grid: Plug into Cordova

Where are we now?

Plugin.xml examples

● Clobbers define the JavaScript API for your plugin

● Target is where they will be available under window DOM object

Plugin.xml examples

● Includes platform or third party libraries

Plugin.xml examples

● config-file edits configuration files in the target project

● feature: defines the Java class that extends from CordovaPlugin

○ Use onload = true when plugin needs to run immediately

● source-file: copies java files to the right path in the project

(respecting package name)

Plugin.xml examples

● Preferences can be set in compile time

○ Use them as $<preference>

Plugin.xml examples

● Hooks are nodeJS scripts used to edit project settings

● Some helpful hook types

○ before_plugin_install

○ after_plugin_install

○ before_build

○ after_build

● Install NodeJS

https://nodejs.org/en/

● Install plugman from command line

npm install -g plugman

● If you want to test the plugins outside the

platform: Cordova CLI

○ Android Studio

and/or

○ xCode

Before we start

● Use plugman to generate the cordova

structure and add native modules

● Build the native code for native modules

● Configure the cordova plugin settings on

plugin.xml

● Build the wrapper

● Use it!

How to build it from scratch?

Reference Material

● Platform evaluation material on mobile: https://success.outsystems.com/Evaluation/Mobile

● Extensibility configurations JSON schemahttps://success.outsystems.com/Documentation/10/Delivering_Mobile_Apps/Customize_Your_Mobile_App/Extensibility_Configurations_JSON_Schema?origin=d

● Template Plugin on the Forgehttp://www.outsystems.com/forge/component-details/1676/Template+Plugin/

● Documentation on how to create a mobile pluginhttps://success.outsystems.com/Documentation/10/Extensibility_and_Integration/Mobile_Plugins/Create_a_Plugin_to_Use_Mobile_Capabilities_in_Your_Application

● Plugman installation and usage guidehttps://cordova.apache.org/docs/en/latest/plugin_ref/plugman.html

Thank you!

www.outsystems.com