Subscribe

Share

Mobile

Become a Mobile Oracle JET Setter

Build mobile applications with Oracle JavaScript Extension Toolkit.

By Chris Muir

November/December 2016

There was a time at Oracle events when there was a distinct divide between developer communities. Oracle Database and Oracle Application Express folks would congregate in one corner of the conference hall, Oracle Application Development Framework people would assemble somewhere in the middle, and Java folks would gather on the other side. And a mass of JavaScript and mobile developers roamed outside the conference hall!

In 2015 Oracle opened the doors for these developer groups, by introducing Oracle JavaScript Extension Toolkit (Oracle JET). Oracle initially built Oracle JET for its own Oracle Cloud platform-as a-service web application user interfaces, and realizing the merits of what it had created, it made Oracle JET publicly available to enable customers to build client-side JavaScript web and mobile applications. Oracle JET knits several popular open source JavaScript modules together without requiring developers to do the knitting themselves. It includes jQuery, jQuery UI, Knockout, RequireJS, and Apache Cordova, as shown in Figure 1. The future of Oracle JET looks bright, because the toolkit has been designed to be modular so libraries can be replaced—an important quality in the ever-churning world of JavaScript frameworks.

o66mobile-f1

Figure 1: Oracle JET’s JavaScript libraries

Oracle JET also has its own set of rich data visualization components, such as graphs and charts, for building data-driven client-side applications, and it includes support for important concepts such as accessibility and internationalization. This Oracle Magazine article demonstrates Oracle JET’s support not only for web application development but also for hybrid mobile applications.

In this article, you will build a very simple Oracle JET–based mobile application for Android that displays a list of customers. While creating the application, you will be introduced to the Oracle JET development tooling and development model.

Installing the Oracle JET Tooling

Oracle JET includes both development-time command-line tooling and the runtime JavaScript libraries utilized by your application. To build an Oracle JET application, you must first install the tooling. The tooling features several popular open source build tools, including Yeoman, Bower, and Grunt. Oracle’s documentation covers how to install the Oracle JET web tooling and hybrid mobile tooling. This video steps you through the installation process.

Building Your First Oracle JET Mobile Application

With the Oracle JET web and mobile tooling installation complete, you’re now ready to create your first mobile application with Oracle JET.

The first step is to create the application scaffold. To make the job easier, Oracle JET utilizes Yeoman (“yo” from the command line) to generate an application shell based on several predefined templates.

For the purposes of this article, you will use Yeoman to generate an application called OraMagDemo for the Android platform, based on the supplied “navbar” template. This template creates a multipage mobile application that includes among its pages a blank page for displaying customers, which is ideal for this article.

To create the application shell, type from the command line

cd <change to an empty directory>
yo oraclejet:hybrid OraMagDemo --template=navbar –platforms=android

With this application shell in place, you are now ready to build and run the application to confirm that it works. Execute the following commands:

cd OraMagDemo
grunt build --platform=android
grunt serve --platform=android --destination=<YourAndroidEmulatorAVDName>

This will start the Android Emulator AVD you have configured and show the running application. Be patient—the Android Emulator is notoriously slow.

Figure 2 shows the result.

o66mobile-f2

Figure 2: The running application shell

An alternative and often faster option for simple testing purposes is to run the app from your local browser. This enables you to test the mobile application as if it were a web application, although there are limitations to testing mobile device integration if you take this route. You can run the app in your local browser via the following alternative command-line call:

grunt server --platform=android --browser

With the application running, use the buttons at the bottom to navigate to the various pages of the application, and once you’ve finished your exploration, leave the Customers page open.

Returning to the source code on your machine, you will notice the src/index.html file, which is the opening page of your application. Among other responsibilities, this HTML page loads the required Oracle JET libraries. Digging a little further into the src/js/views directory, you will see several HTML files with complementary JavaScript files in the src/js/viewModels directory. The index.html file uses the popular RequireJS library to manage the HTML and JavaScript mappings. Your task as a developer is to work with the HTML files and JavaScript to flesh out the purpose of your application.

If this setup looks familiar to you, it is because Oracle JET applications are built around the popular Model-View-View model (MVVM) pattern. In Oracle JET, the src/js/views HTML files represent the user interface of your application; the src/js/viewModels JavaScript files represent the event logic used by the UI to manipulate the model; and, finally, the model represents the runtime state manipulated by the view via the view model.

For this article, you will modify the src/js/views/customers.html and src/js/viewModel/customers.js files to include the additional components and logic for showing a list of customers.

For beginners, a key resource for getting up and running with Oracle JET is the Oracle JET Cookbook. This content provides hundreds of examples for using the Oracle JET UI components, including their required HTML and JavaScript, which you can copy and paste into your existing source code. For example, in the Oracle JET Cookbook, click the List View component and then click one of the many examples on the left to see a live running example and investigate the HTML and JavaScript used to build the example. The beauty of the cookbook is that you can even change the code and apply it to see the changes live.

In the interest of brevity, this article skips an in-depth discussion of what the HTML and JavaScript code does and instead gives you some sample code for this article’s example. Download and unzip the source files for this article, and in the extracted file, copy the customers.html and customers.js files over the respective src/js/views/customers.html and src/js/viewModels/customers.js files.

Assuming that you are still on the Customers page in the running application, if you are running the application via your browser, as soon as you copy both files over, you should see the running application change immediately to show real customers. No slow and frustrating redeploys here! If you are running the application via the Android Emulator and you don’t see an instant change to your interface, you may be seeing a bug in the emulator that fails to see the updates. In this case, press Ctrl-C in the running grunt process and then execute the same command again to restart the Android Emulator and the deployment. This is a known issue, and a workaround will be provided shortly. The end result is shown in Figure 3.

o66mobile-f3

Figure 3: The Customers list view

There is too much to explain about the HTML and JavaScript code you just copied in a brief article such as this one, but both files include documentation that provides an introduction to what’s going on in the code. Look at the comments in the customers.html and customers.js code, and if you want to learn more, follow the links in “Next Steps.”

You will likely note in the customers.js file that all of the customer data for this app is hardcoded, which is obviously cheating badly for a demonstration. A future Oracle Magazine article will teach you how to derive this data from external REST web services such as those published by Oracle Mobile Cloud Service.

Summary

Within the enterprise world, the Holy Grail of development frameworks is one that covers all development platforms; uses common skills and popular languages such as HTML, JavaScript, and CSS; and uses the latest popular open source libraries but is also modular enough to swap solutions in and out in case a framework is desupported. Oh, and that Grail framework is free and built on open source technologies, too.

Given Oracle JET’s focus on not only being a web application development platform but also being a free, cross-platform, mobile application solution that supports Android, iOS, and Windows 10’s Universal Windows Platform, it certainly checks many boxes and is well worth investigating further.

Watch the video on YouTube

Next Steps

 READ more about Oracle JET.

 EXPLORE Oracle JET resources.

 FOLLOW Oracle JET on Twitter.

 

Photography by Tatiana Nino, Unsplash