What You See Is What You Get Element

Oracle JET and Oracle Database – a Beautiful Combination

 

by Yuli Vasiliev

Leverage the power of the Oracle JET framework when building a front-end for Oracle Database applications.

July 2017


Introduction


In recent years, JavaScript has become increasingly popular as a front-end language for Web development, surpassing many other most in-demand programming languages used in this area. According to the Developer Survey Results 2016 from Stack Overflow, JavaScript tops the list of the most popular technologies used by the full-stack Web developers, leaving behind Python, PHP, and even Java.

Not surprisingly, the JavaScript ecosystem, being actively developed, includes a great number of JavaScript frameworks, libraries, and tools available for download from different sources, providing a long list of choices to find what suits you best. Of course, if you already use Oracle software, you expectedly might want to start your search from what Oracle has to offer in this area, unavoidably meeting Oracle JavaScript Extension Toolkit (JET) – a modular open source toolkit designed for JavaScript developers working on client-side applications.

In this article, you’ll look at an example of how you can build a simple Oracle JET application interacting with an Oracle database.


How It Works 


Let's start with a very quick overview of Oracle JET and how an Oracle JET application can interact with an Oracle database.

If you have already read about Oracle JET, you know that it is based on a collection of popular open source JavaScript libraries, such as Knockout.js and jQuery, as well as a set of JavaScript libraries contributed by Oracle. It is interesting to note, however, that, being a modular toolkit, Oracle JET allows you to use in your application only those components that it really needs, meaning many of those libraries available for development with Oracle JET are optional and are not required by Oracle JET. This approach allows you to reduce your application code complexity, ultimately improving its performance.

Another important thing to emphasize is that Oracle JET is an entirely client-side toolkit and, therefore, does not support direct binding approach when it comes to data interaction, allowing you to interact with data sources, such as an Oracle database, only via Web services, including REST, WebSocket, and Server Sent Event (SSE).

A diagrammatic representation of this architecture is summarized in the figure below:

OracleJETComboFig1

Figure 1: An Oracle JET application interacting with an Oracle database.

 

 

As you can see in the above figure, an Oracle JET application interacting with an Oracle database calls a Web service, making a HTTP request to it. The Web service transforms the URL into an SQL query and then executes it against the database. Next, a returned result set is transformed into JSON and is sent to the calling application.

As mentioned, there are several alternatives when it comes to Web services you can use for Oracle JET data interaction. However, when building Oracle JET applications to be interacted with an Oracle database, employing Oracle REST Data Services (ORDS) as a mid-tier Web service seems to be a natural choice, since ORDS is designed especially for Oracle Database, Oracle Database 12c JSON Document Store, and Oracle NoSQL Database. It maps incoming HTTP requests to database transactions, returning retrieved result sets formatted in JSON.

Architecturally, an Oracle JET application follows the Model-View-ViewModel (MVVM) design pattern, which facilitates a clean separation of the user interface from the underlying back-end logic. The Model handles interaction with data sources, and the View is responsible for the presentation of the data. The ViewModel mediates communication between the View and the Model, providing two-way data binding between these two layers. Two-way data binding ensures that any data changes affecting the Model are sent to the View, and conversely, any changes made to the data by the user in the View’s UI components are reflected in the Model.

In light of the MVVM design, an Oracle JET application can be depicted as shown in the following figure. This figure also shows what libraries and components Oracle JET uses to implement the layers of the MVVM pattern.

 

OracleJETComboFig2

Figure 2: A visual depiction of an Oracle JET application in view of the MVVM design.

As you can see in the figure, the MVVM layers of an Oracle JET application are implemented in client side JavaScript and, therefore, the code is to be run within a user’s browser. On the server side, you may have a data source and a Web service, which accesses that data source, returning data as JSON objects. Physically, the Web service and the data source may be located on the same or different machines, interacting over a standardized interface, such as HTTP. As for the data source type, it can be anything from a flat file to a relational database.

The example application discussed in the next sections uses an Oracle database as the data source and ORDS as the Web service.

 

Preparing Your Working Environment

 

To follow along, you will need to have access to the following software components in your system:

Oracle Database

Oracle SQL Developer

Oracle REST Data Services (ORDS)

Oracle JET

If you don’t have access to an Oracle database yet, you can obtain it in one of several ways. Your options include:

 

Download Oracle Database software from OTN and install it in your system

Download and install a VM for Oracle VM VirtualBox, containing pre-configured Oracle Database software

Take advantage of an Oracle database in a cloud, choosing one of the Oracle Database Cloud Services

If you choose a Database Virtual Box Appliance, you get it packed with features for database application development, including Oracle SQL Developer. Otherwise, to work with an Oracle database instance in a cloud or on-premises, you may need to download and install Oracle SQL Developer on your local machine.

Oracle Database cloud services normally come preconfigured with Oracle REST Data Services (ORDS). If you’re using an on-premises database, you may need to install Oracle REST Data Services (ORDS) in your system, as described in the Installing Oracle REST Data Services section in the REST Data Services Installation, Configuration, and Development Guide. Before installing it, make sure that your system meets the requirements specified in the System Requirements section in this same guide.

You can install and administer ORDS with Oracle SQL Developer, using the ORDS distribution that comes bundled with Oracle SQL Developer or another ORDS distribution that you want to use. For details on how to configure the RESTful Services feature in Oracle SQL Developer, see Installing and Administering REST Data Services with SQL Developer hands-on-lab. The Configuring a RESTful Service upon a Database Table section later in this article covers how to enable REST access for database objects, such as a schema or table, from within Oracle SQL Developer.

As stated in the documentation, there are several options you can use to get started with Oracle JET application development. For example, you can create a new Oracle JET application using files from the oraclejet.zip download. Or you can take advantage of the Oracle JET QuickStart templates to simplify the development process. Also, you can add Oracle JET to an existing JavaScript application, unpacking the oraclejet.zip file into your application's site root and then including links to the required Oracle JET libraries.

However, the quickest way to get started is to modify an existing Oracle JET application, enhancing or changing its functionality as needed. The example application discussed in the rest of this article is based on the OracleJET-CommonModel-CRUD sample covered in detail in the section Creating a CRUD Application Using Oracle JET of the JavaScript Extension Toolkit (JET) Developing Applications with Oracle JET guide.


The Quickest Way To Get Started

 

Some general steps to get started with Oracle JET can be found at Oracle JET Get Started. Of course, to get the most out of the features available in Oracle JET, you should have a good understanding of the key libraries used, such as Knockout.js and RequireJS. The example application in this article, however, does not require you to be a JavaScript guru and can be followed even by a beginner. As mentioned, it is based on an existing sample application provided in the documentation.

Before getting into the detailed steps, let’s outline the general plan. So, below is what you will need to accomplish:

Download and unpack OracleJET-CommonModel-CRUD.zip onto your system

Install ORDS and configure a RESTful service to retrieve rows from a database table 

Modify the sample application to work with the RESTful service defined in the previous step

After unpacking OracleJET-CommonModel-CRUD.zip, the following application files and folders should be created in your system:

 

OracleJETComboFig3

 

Figure 3: File structure of the OracleJET-CommonModel-CRUD sample application.

In the following sections, you will modify the content of some of the above files, changing existing application functionality as needed.  Before that, however, you’ll need to configure a RESTful service through which the example application will retrieve data from the underlying database.

 

Configuring a RESTful Service upon a Database Table

 

REST (stands for Representational State Transfer) is rapidly becoming an important standard for data access on the Web. To ease the process of developing REST interfaces for relational data, Oracle offers Oracle REST Data Services (ORDS). Since Oracle SQL Developer is the primary tool for managing Oracle REST Data Services, the steps in this section explain how you can configure a RESTful service upon a database table using the ORDS feature in Oracle SQL Developer.

Although, as mentioned earlier, ORDS comes bundled with Oracle SQL Developer, you still need to install it before you can use this feature. Detailed steps on how to install ORDS with SQL Developer’s ORDS Installation Wizard can be found in the Installing and Administering REST Data Services with SQL Developer hands-on-lab. After completing the steps in this hands-on-lab, you can check to see if the ORDS you just installed with your SQL Developer can be reached from a Web browser. For that, point your browser to http://localhost:9090/ords/, provided you specified 9090 as the HTTP port for ORDS to listen on.

 

OracleJETComboFig4

Figure 4: Checking to see if ORDS is connecting through the browser.

Of course, the ORDS 404 Not Found page that you should see as a result does not indicate that something went wrong. That simply means that ORDS is running and can be connected.

Your next step is to enable ORDS queries to access necessary database schema objects. In this particular example, you’ll need ORDS access to the departments database table that can be found in the HR sample schema. This can be done very easily with the RESTful Services Wizard in Oracle SQL Developer, as described in the following steps:

-In Oracle SQL Developer, move on to the Connections navigator and expand the HR schema. If you do not see HR in the list, create a new connection for this schema.

-In the Connections navigator, expand Tables(Filtered) under HR. Then, right-click DEPARTMENTS and select Enable REST Service… from the popup menu to launch the RESTful Services Wizard.

-In Step 1 of the wizard, select the Enable object checkbox and uncheck the Authorization required checkbox, leaving the value of Object alias unchanged (it should be departments, in this particular example).

-In the next page of the wizard, view the summary information, and click Finish. Finally, you should see the Successfully processed SQL command information message.

After completing the above steps, you will be able to access the data in the departments database table, using the following URL: http://localhost:9090/ords/hr/departments/.


OracleJETComboFig5
 

Figure 5: The output of the REST service you just created.

Now that the departments table’s data can be accessed through a REST service, you can move on to the OracleJET-CommonModel-CRUD sample, which you should already have unpacked in your system, and modify its code to consume this REST service.

 

Adjusting Existing Code

 

Actually, you’ll need to modify only two files of those that come with the OracleJET-CommonModel-CRUD sample: main.js and app.js, making minor adjustments to the existing code in these files.

So, move on to the folder in your system where you unpacked OracleJET-CommonModel-CRUD.zip, and expand the js folder. In this folder, find and open the main.js file. There are only two things that you’ll need to alter here. This is the first parameter of the getJSON function that you must change to the URL of the REST service created as described in the preceding section. Also, this is the value of the id parameter passed to the mock REST server created here:

$(document).ready(function() {
$.getJSON("http://localhost:9090/ords/hr/departments/",
function (data) {
 new MockRESTServer(data, {collProp:data 


responseTime:1000, id:"department_id", 
url:/^http:\/\/mockrest\/stable\/rest\/Departments(\?limit=([\d]*))?$/i,
idUrl:/^http:\/\/mockrest\/stable\/rest\/Departments\/([\d]+)$/i});  


Save the changes and close the main.js file.

Now, open the app,js file that is also located in the js folder, and find function parseDept(response) within the viewModel function. Change the code of the parseDept function as follows:

function parseDept(response) {
  if (response['items']) {
 var innerResponse = response['items'][0];
return {DepartmentId: innerResponse['department_id'], 
DepartmentName: innerResponse['department_name']};
}
return {DepartmentId: response['department_id'], DepartmentName: 
 response['department_name'], LocationId:response['location_id'], 
ManagerId:response['manager_id']};
}


As you can see, compared to its original version, the modified parseDept function does not contain code related to the Employees links. This is because the department object in the JSON document retrieved through our REST service (back to Figure 5) does not include such links.

Then, move on to the parseSaveDept function and change its code as follows:

function parseSaveDept(response) {
return {DepartmentId: response['department_id'], 
DepartmentName: response['department_name'],
LocationId:response['location_id'], ManagerId:response['manager_id']};
}

That is it. No more changes are needed. Save and close the app.js file.

Before testing the application, make sure that Oracle REST Data Services is running. If you’re using Oracle SQL Developer, the running Oracle REST Data Services process can be seen in the Processes pane. If you see no ORDS process there, you can run it using ORDS Run Wizard, which can be accessed from the Tools/REST Data Services/Run… menu.

To test the application, you can simply double-click its index.html file to invoke it in your browser:


OracleJETComboFig6
 

Figure 6: The article example application page (fragment).

 

 

Conclusion

 

In this article, you looked at an example of how you can build an Oracle JET application that interacts with an Oracle database through an ORDS service. To simplify development, you used a complete pre-configured sample application as a template to create the article example application.

See Also:

Oracle JET Get Started
Oracle OpenWorld 2016 Hands-On-Lab
Building Browser-Based UIs with Oracle JET
Oracle REST Data Services OTN website
JET Site Cookbook

 

About the Author

 

Yuli Vasiliev is a software developer, freelance author, and consultant currently specializing in open source development, databases, business intelligence (BI), machine learning, and virtualization. He is the author of a series of books on the Oracle technology, including Oracle Business Intelligence: An introduction to Business Analysis and Reporting (Packt Publishing) and PHP Oracle Web Development: Data processing, Security, Caching, XML, Web Services, and Ajax (Packt Publishing).