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:
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.
No comments:
Post a Comment