Applications with Alta UI

In this section, let's review a sample web application developed in Oracle JET with Oracle Alta UI. Let's look at the one available for live demo at: http://www.oracle.com/webfolder/technetwork/jet/public_samples/WorkBetter/public_html/index.html.

Please note that it is assumed that you have already set up the development environment along with the browser plugin as advised in Chapter 1, Getting Started with Oracle JET. Please complete the setup before running the preceding steps.

We can also download its source code from the website and run it in our development environment, as detailed here:

1. Download the source code from the website http://www.oracle.com/webfolder/technetwork/jet-320/globalExamples-App-WorkBetter.html. The download page may prompt you for Oracle credentials, which you can obtain by registering with your email.

1. Once the source code (WorkBetter.zip) is downloaded, unzip it in your workspace. In case the download is not available from the site, please take it from code samples of this book.
2. From the NetBeans IDE, select the File | Open Project option and browse to the workspace where you unzipped the WorkBetter application.
3. Select the WorkBetter application and click on Open Project to import the project into NetBeans IDE.
4. Expand the project to review the folder structure containing sources (CSS, JS, SCSS, along with other source code), important files (package.json), and npm libraries, as shown in the following screenshot:

6. Right-click on the project root folder and choose the Run option to run the application. 

7. The WorkBetter application should start running and open the home page on the browser, as shown in the following screenshot:

A thorough review of the code components of this sample application in NetBeans is advised, along with reviewing its features. Let's now review the graphical user interface features on the application home page in the browser. It has the top-level menu options as Dashboard, People, and Organization, with Dashboard and People as the active tabs.