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.
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​
With Smartface, you can use Oracle JET in native mobile 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.
Oracle JET support in Smartface allows you to share codebases between web and mobile.
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:
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.
You can create visually stunning charts in Smartface by using Oracle JET Charts.
​
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.
Upon uninstallation of the sf-extension-oracle-jet module, the npm script automatically deletes the assets/jet folder. This deletion happens every time when the module is:
Uninstalled
Reinstalled
Updated
Any modifications under this folder might be lost!
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 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 firstRouter.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
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);
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​
No. The Smartface application will be fully native. The JET component is displayed and wrapped within a WebView.
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.
Yes. Please review our Native Smartface & WebView Interaction guide
It adds about 8.5 MB both to the application binary and the stored data due to the JET libraries included.