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
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.
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.
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.
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.
Figure 3: The Customers list view
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
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.
READ more about Oracle JET.
EXPLORE Oracle JET resources.
FOLLOW Oracle JET on Twitter.
Photography by Tatiana Nino, Unsplash