Oracle JET Live List with WebSocket

I have updated sample - Oracle JET and WebSocket Integration for Live Data, to include live data list. Along with live updates delivered to the chart component, list component displays changed data. I'm displaying five last changes, with new data appearing in the last row:

Watch recorded demo, each 4 seconds new data arrives and chart is updated, along with list records:

JET list component UI structure (data grid) is rendered with a template, to arrange separate column for each job:

When new data arrives, it is being pushed into JET observable array (this triggers automatic UI list reload/refresh). If there are more than five items in the list, first one is removed. List observable array is configured with 500 ms. delay, to make UI refresh smoother:

Download sample application (JET, WebSocket server side and ADF to simulate updates in the DB) - JETWebSocket_v2.zip.

I'm going to present JET and WebSocket integration on Oracle Fusion Middleware Partner Community Forum 2016.

Extending ADF Cloud User Experience Rapid Development Kit (RDK)

You should be familiar with AppCloudUIKit ADF application from - The Cloud User Experience Rapid Development Kit. It provides a set of templates, components and sample flows to get you started with successful ADF setup. I will explain how to extend it, if you want to add extra parameters for the menu item, to be passed to the Task Flow.

The use case - each time when custom TF Manage Users is opened, criteria item First Name is assigned with TF parameter value (value "C" in the example below):

RDK is extended to support parameters for menu item. Each menu item in RDK is defined by Node object. I have updated Node object with HashMap to represent a set of parameters:

All menu items in RDK are defined in SessionState class. I have updated one of the menu items (Manage Users) with parameter - firstName:

ADF regions are rendered in RDK with ADF Multi Region binding. A set of regions is controlled through FilmStripBean class. Region attributes are set in buildTaskFlowBindingList method. For each menu item, I check if there are extra parameters to be set. If there are parameters, map is constructed and assigned for the region binding (map value with TF parameter):

Assigned value is used in the TF, to set search criteria item:

Download sample application (I have included only projects with changes) - AppsCloudUIKit_v2.zip.

Basic Authentication Hint for ADF BC REST

If you follow step by step ADF BC REST developer guide - 16.5 Granting Client Access to the ADF REST Resource, still you would not be able to implement basic authentication for the REST service. Thats because one step is missing, it is not described (and required setting is not auto generated by JDEV). In order to enable basic authentication for ADF BC REST service, you should manually define security constraint (based on context root) for RESTServlet resource.

When security is enforced for ADF BC REST project, and you are testing REST resource with authorization header (encoded username/password) - there will be authorization error - NotAuthorizedException (even with correct username/password):

If you encounter this error after configuring ADF Security for ADF BC REST project with the wizard. Do one extra step to declare security constraint manually - set /rest/* URL pattern for RESTServlet resource in web.xml:

Basic authentication will start to work:

Download sample application - ADFBCRestApp_v5.zip.

ADF and Cloud User Experience Rapid Development Kit

Oracle published new set of UI templates - The Oracle Applications Cloud User Experience Rapid Development Kit (RDK). This includes methodology based on Oracle Fusion Applications experience and contains ADF source code. Kit is shipped with ADF application (download it from Oracle site), you could use it as a jumpstart. This could be next UI Shell. It is more than UI Shell, RDK comes with a set of declarative components (header/toolbar is one of them).

I have implemented my own simple TF and tested how it works in RDK. Custom TF can be opened from My Team group, Manage Users item. Home UI in RDK:

Manage Users - custom TF. When TF is opened, in the top area user have possibility to switch to other items (items can be hidden). First fragments brings search screen, user can edit selected record:

UI is adaptive, it stretches according to screen size. Below you can see edit screen. Fusion Applications have Save, Save and Close, Cancel buttons as standard in edit screens:

Complete menu structure can be displayed at any time from top left menu item:

User can select My Team option from the menu, it will render another TF in the main area:

RDK ADF application is shipped with SessionState bean. Menu items can be registered in this bean. I have registred my own TF under existing Manage Users entry (it was empty originally). But you could create new menu items by adding new entries into SessionState bean:

Custom TF is created in the new project - UsersUI, it is dependent on ADF BC from UsersModel project:

TF is based on two fragments - search and edit:

Page header can be set with declarative component:

Toolbar buttons Save, Save and Close, Cancel are rendered by the same declarative component where page header is set:

Download RDK application with my custom TF - AppsCloudUIKit_RS.zip.

When JET Comes To Rescue - Live Data Charts in ADF

I have described previously, how you can run JET in ADF UI - Improved JET Rendering in ADF. This was technical steps explanation. Today I will describe a case, when such rendering can be important and useful. The case is related to live data delivered through WebSocket and rendered in chart. WebSocket client must be implemented in JavaScript, but we can't access ADF DVT component values in JavaScript and update them, without making a call to the server and reloading binding value. Which would require client/server roundtrip.

In this post I'm using JET/WebSocket integration solution described previously - Oracle JET and WebSocket Integration for Live Data. Technical steps for JET rendering in ADF are the same as in the post above. Download sample application (it contains WebSocket and ADF (with JET code) projects) - JETWebSocketADF.zip.

Pie chart is rendered by JET in ADF UI:

You should check demo video, where two sessions are running in parallel and each second new data is coming from WebSocket. See how synchronous JET rendered chart is changing in both sessions:

JET HTML code is included into ADF fragment. It renders DVT pie chart component, with value initialized from JavaScript variable:

Main ADF page must include a reference to WebSocket JavaScript file, this is where WebSocket client is implemented:

ADF fragment with JET code is included into main ADF page:

Whats the difference with ADF DVT chart? It gets data in different way, from bindings - this means data must be prepared on the server. ADF DVT chart value property must point to Collection Module from bindings. This is not bad, it is just different approach. It works perfect to display server side data, but makes it complex to render live data received in JavaScript:

WebSocket client contains onMessage method, where update is received and pushed to JET context:

JET handles update and changes chart data directly on the client:

To simulate continues updates, I have implemented ADF BC method to update DB data multiple times. DB change listener picks up these changes and makes a call through WebSocket to deliver update event. JET re-draws chart UI, based on the update:

Currently Oracle doesn't support JET in ADF. While JET can be rendered in ADF, you will not get official support through Oracle Support channels. 

You may run into issue of session timeout handling. ADF page sends a "ping" to the server whenever there is interaction on the page. JET does not do anything of that kind, so if you are sitting on an ADF page, and only interacting with the JET portion of that page, there is nothing telling the server that you are still active. This could result in ADF session timeout, while user is still working with JET component. In practice this would rarely happen, especially if ADF timeout is set to be long, but you should be aware of that.

Oracle JET and WebSocket Integration for Live Data

I was researching how to plugin WebSocket into JET. I would like to share my findings and explain how it works. It is amazing, how scalable and quick it is to send JSON message through WebSocket channel and render it in JET. Luckily WebSocket client is implemented in JavaScript, this integrates perfectly with Oracle JET (also based on JavaScript).

Watch recorded demo, where I'm sending updated data with JSON message through WebSocket. UI chart is rendered with JET. See how nicely JET re-draws chart, based on received new data (watch at 6th second):

Download sample application - JETWebSocket.zip. This contains both WebSocket application (implemented with JDeveloper) and JET (implemented with NetBeans).

On WebSocket server side, I'm listening for DB changes (Database Change Notification Listener Implementation). Each time when DB change happens, all changes are collected into one collection and sent to the clients through WebSocket:

Changes are collected into array. WebSocket message must be encoded into JSON Array, this makes it easier to read it on client. Multiple JSON Objects are added into JSON Array:

Message is sent to all connected WebSocket clients:

All this happens on server side. Now lets take a look into client side. We should open WebSocket connection when JET is loading. I have included WebSocket client JavaScript code from separate file websocket.js. JET renders chart component:

Each time when WebSocket message is received by the client, onMessage method is invoked. This method is responsible to parse JSON message and pass it to function from JET context, where chart data update happens:

WebSocket is opened, when document is rendered. In the next step, JET View Model is created along with bindings:

Variable viewModel is accessible from WebSocket onMessage method, because it is defined outside of JET function:

Method updateChart invoked from onMessage, applies received changes to chart data. JET re-draws chart automatically, because changes are applies for observable array. This is really cool:

See how it works. Page is loaded with JET chart component, WebSocket is opened:

Go to DB and update few records, commit changes:

JET receives changes through WebSocket and chart is updated instantly: