Method and information outlined below describes my personal research and doesn't define best practice. Such approach is not recommended/supported by Oracle and should be used at your own risk. Oracle is working on JET Composite components for ADF, to be available in the future. Limitations and caveats for this approach are described by Duncan Mills:
1. No session sharing between ADF and JET
2. ADF and JET can’t use the same cache
3. No shared transaction
4. Separate timeouts
5. Geometry management
6. Drag&drop not possible between ADF and JET
7. Different maintenance and different libraries
8. Different popup’s and glasspaneI
In my previous post I have shared basic example for Oracle JET integration into ADF - Oracle JET and ADF Faces Integration in ADF. Today I would like to share a bit more than that - integration pattern with ADF Regions. This approach would allow to use JET functionality within ADF environment and leverage ADF reusability.
Sample application - DashboardApp_v2.zip, implements ADF dashboard UI and includes one tile rendered by Oracle JET. You can watch video with running sample:
ADF tile renders a bar chart implemented by Oracle JET:
Integration pattern is straightforward, especially if you are familiar with ADF concepts. There must be separate ADF region defined to hold ADF fragment, where JET HTML code will be implemented:
JET HTML is included into ADF fragment, there are no additional ADF Faces components here, besides top grouping:
ADF region is reusable and we can reuse the same JET code in different ADF pages. Here is the example of ADF region (with JET HTML inside) usage in the page:
JET JavaScript function is the same as you would use for typical index.html page, nothing special here for ADF:
1. No session sharing between ADF and JET
2. ADF and JET can’t use the same cache
3. No shared transaction
4. Separate timeouts
5. Geometry management
6. Drag&drop not possible between ADF and JET
7. Different maintenance and different libraries
8. Different popup’s and glasspaneI
In my previous post I have shared basic example for Oracle JET integration into ADF - Oracle JET and ADF Faces Integration in ADF. Today I would like to share a bit more than that - integration pattern with ADF Regions. This approach would allow to use JET functionality within ADF environment and leverage ADF reusability.
Sample application - DashboardApp_v2.zip, implements ADF dashboard UI and includes one tile rendered by Oracle JET. You can watch video with running sample:
ADF tile renders a bar chart implemented by Oracle JET:
Integration pattern is straightforward, especially if you are familiar with ADF concepts. There must be separate ADF region defined to hold ADF fragment, where JET HTML code will be implemented:
JET HTML is included into ADF fragment, there are no additional ADF Faces components here, besides top grouping:
ADF region is reusable and we can reuse the same JET code in different ADF pages. Here is the example of ADF region (with JET HTML inside) usage in the page:
JET JavaScript function is the same as you would use for typical index.html page, nothing special here for ADF:
Read update for this post - Improved JET Rendering in ADF.
8 comments:
Hi Andrejus,
Thanks for sharing the details of ADF-Oracle JET integration.
I would like to check if an ADF content can be rendered on a JET page. Is there any component in JET that can embed third party UI content (ADF in my case). Can you please provide some pointers.
Thanks,
Pavan.
I dont think this is possible. JET is Java Script, ADF Faces is JSF.
Andreju
ADF can not be included in a JET page. As Andrejus points out, JET is a pure client-side framework. It doesn't have a requirement to run on a server at all. ADF is a server-side framework and needs the pages need to be generated on the server before they are sent to the client.
Thats interesting, we were trying to exactly that - embed an ADF task flow in JET. Are there any callback hooks in Jet that would allow us to push this to the client side?
No, you cant include ADF Task Flow in JET - forget this idea :)
Andrejus
Thanks Great sample!
I note if you resize the page a few times causing the Jet region to be re-positioned, it blanks. Interesting, I wonder if one must somehow force a region refresh in this case.
Note I also tried placing a Jet region in a tabbed panel. The Jet region displays correctly, however also blanks when switching to another tab and back. Any ideas?
Hi,
JET region blanks - this means ADF is executing PPR request and HTML structure is changed. Each time when PPR is executed, you should re-apply JET context. I was doing this in one of the apps, hopefully will post example soon.
Regards,
Andrejus
hi i have modified main.js as below
var self = this;
/* toggle button variables */
self.stackValue = ko.observable('off');
self.orientationValue = ko.observable('vertical');
/* chart data */
var barSeries1 = [{name : "Series 1", items : [14, 42, 70, 46]},
{name : "Series 2", items : [50, 58, 46, 54]},
{name : "Series 3", items : [34, 22, 30, 32]},
{name : "Series 4", items : [18, 6, 14, 22]},
{name : "Series 5", items : [38, 16, 40, 12]},
{name : "Series 6", items : [68, 61, 41, 32]}];
var barGroups1 = ["Group A", "Group B", "Group C", "Group D", "Group E", "Group F"];
self.barSeriesValue = ko.observableArray(barSeries1);
self.barGroupsValue = ko.observableArray(barGroups1);
output is not showing added values for group E and F
Post a Comment