Oracle JET (JavaScript Extension Toolkit)

Introduction

Smartface includes an extension to use Oracle JET components within your native Smartface app. Usage is simple and plug and play. For instance, it is possible to convert a JET chart to a Smartface library in just a couple of minutes so that you can use Oracle JET in a native app instead of a hybrid one.

What is Oracle JET?

Oracle JET is a JavaScript side framework to develop HTML based UI components. With JET it is possible to create responsive web apps, hybrid mobile apps. For more information about Oracle JET visit Oracle JET Home​

Why to Use Oracle JET in Native Smartface Apps?

Oracle JET is a powerful front end tool. The charts provided are fast, responsive and fully functional. Smartface recommends using Oracle JET to display charts in a native app without sacrificing native functionality.

Sample Oracle JET and Smartface Native Use Case

The Field Service application (a part of the Smartface SmartApps) is a fully native application with features like Touch ID and left navigation drawer, while using Oracle JET charts in the dashboard.

Touch ID in the Field Service application:

Native navigation in the Field Service application:

Interactive Oracle JET charts in the Field Service application:

Supported Oracle JET Features

Smartface supports JET Charts out of the box with features of JET Charts are available to use. For the other components required from JET, it is possible to create your own extension by looking into our JET Chart extension.

Sample Charts are available on Oracle JET Cookbook.

​

Usage & Samples

Smartface extension for Oracle JET on Github contains information about its installation and usage. Open a terminal in your workspace and type the following commands:

(cd ~/workspace/scripts && npm i -S sf-extension-oracle-jet)

This will: 1 Install the JS extension under scripts/node_modules/sf-extension-oracle-jet 2 Move the jet folder under assets/jet (this is automatically handled by the install script)

The jet folder under assets are the internal JET's own JavaScript, CSS, and HTML files. Perform modifications on them as you deem fit.

JET components are displayed in a WebView. The extension can either take one existing webView instance or it will create its own instance if not provided with the constructor. This webView automatically loads from assets://jet/. it is possible provide another location for JET libraries. This comes handy when there is another modified version of the jet folder.

If there is a need for using an alternative location for JET libraries and you are not using the assets/jet folder any more, it is safe to delete that folder in order to save space (both in device & workspace) to avoid future conflicts.

Samples

​Samples are located under the samples folder and they are being copied to the scripts/node_modules/sf-extension-oracle-jet/samples folder. Their codes can be reviewed and their actions can be observed by performing the instructions described below:

To run just the samples add following lines in app.js

//remove any previous page2 declaration first
Router.add("page2", require("sf-extension-oracle-jet/samples/samplePage.js"));
Router.add("page3", require("sf-extension-oracle-jet/samples/samplePageWithOfficalCharts.js"));
Router.go("page2"); //might be a good idea to start from the sample page

Recommended use

To develop the UI using the UI editor with JET components, insert a WebView to the page. This WebView instance can be used as a parameter for the JET component and chart will be displayed within the WebView.

var jet = new JET({
    jetPath: "assets://jet/",
    webView: page.webView
});

• jetPath: Optional. Defaults to: "assets://jet/"

• webView: Optional. If skipped it creates a new instance of webView.

Provided or created webView object cat be accessed via jet.webView

Properties of the chart will be assigned directly to the jet object.

var jetData = {
    series: [{ name: "Series 1", items: [74, 42, 70, 46] },
        { name: "Series 2", items: [50, 58, 46, 54] },
        { name: "Series 3", items: [34, 22, 30, 32] },
        { name: "Series 4", items: [18, 6, 14, 22] }
    ],
    groups: ["Group A", "Group B", "Group C", "Group D"],
    type: JET.Type.AREA,
    orientation: JET.Orientation.VERTICAL,
    stack: JET.Stack.OFF,
    animationOnDisplay: JET.AnimationOnDisplay.AUTO,
    animationOnDataChange: JET.AnimationOnDataChange.AUTO
}
​
Object.assign(jet, jetData);

More Information

• Smartface Sample App - Field Service includes a usage sample within a native app. pgDashboard.js contains the code for it

• ​JET Chart Cookbook​

• ​JSD ojChart​

FAQ About Oracle JET Usage in Smartface

Oracle JET is a web component usually used in hybrid applications. If I use Oracle JET in Smartface, will I get a hybrid application?

No. The Smartface application will be fully native. The JET component is displayed and wrapped within a WebView.

Can I create interactions between the native parts and the JET components?

Yes. For instance, chart data and style can be set from Smartface JavaScript code. ## How many charts can I display in a page? As many as needed. For each chart, a WebView is used.

Can I interact with the chart itself?

Yes. Please review our Native Smartface & WebView Interaction guide

How does JET usage affect the application size?

It adds about 8.5 MB both to the application binary and the stored data due to the JET libraries included.