Skip navigation.

Andrejus Baranovski

Syndicate content
Blog about Oracle technology
Updated: 14 hours 7 min ago

ADF and Cloud User Experience Rapid Development Kit

Fri, 2016-02-19 09:51
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

Fri, 2016-02-12 09:57
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

Sat, 2016-02-06 09:57
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: