Oracle JET has been around for a while, and at this moment we are investigating what it would take to integrate JET with our existing ADF Application. In the current ADF application we want to make a dashboard in JET, however we still need to know for what project we need the data from. Therefore I am researching on how to get data from our ADF application into our JET part. In this blog I will show you how you can in an easy and quick way get your ADF BC data into your JET Components without using REST services.
I used the blog of Andrejus1 to set up JET within my ADF Application.
Add the JET libraries to the public_html folder of the ViewController project.
(Final) Structure of the project:
Make a jsf page and use af:resources to get to the css and requireJS and add the main.js
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:dvt="http://xmlns.oracle.com/dss/adf/faces" xmlns:ui="http://java.sun.com/jsf/facelets">
<af:document title="main.jsf" id="d1">
<af:messages id="m1"/>
<af:resource type="css" source="jet/css/alta/2.2.0/web/alta.min.css"/>
<af:resource type="javascript" source="jet/js/libs/require/require.js"/>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20%20%20require.config(%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20baseUrl%20%3A%20%22jet%2Fjs%22%0A%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20%20%20%20%20require(%5B%22main%22%5D)%3B%0A%20%20%20%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<af:form id="f1">
</af:form>
</af:document>
</f:view>
Then I added my composite component folder to the js folder of JET. My component is named amis-person and will show the name of the person in capital letters and the emailadress within a blue box. You can read more about composite components in the blog series of Duncan2
Put the metadata directly in the loader.js instead of via a json file, otherwise it will not work!. When you do it via the .json file and you console.log the in the function, you will see it does not print out the metadata from the .json file.
define(['ojs/ojcore',
'./amis-person',
'text!./amis-person.html',
'css!./amis-person',
'ojs/ojcomposite'],
function (oj, ComponentModel, view, css) {
'use strict';
var metadata = '{ "properties": { "amisPersonName": { "type": "string"}, "amisPersonEmail": { "type": "string"}} }';
oj.Composite.register('amis-person',
{
metadata: { inline: JSON.parse(metadata) },
viewModel: { inline: ComponentModel },
view: { inline: view },
css: { inline: css }
});
});
Import the component in main.js to make it available.
require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'jet-composites/amis-person/loader'],
function (oj, ko, $){
function ViewModel() {
var self = this;</code>
}
ko.applyBindings(new ViewModel(), document.body);
})
Create a page fragment where you will put the html to show your component, in this case it is just the composite component.
<?xml version='1.0' encoding='UTF-8'?>
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets">
<amis-person amis-person-name="NAME" amis-person-email="EMAIL" />
</ui:composition>
In the jsf page, create an iterator for the viewmodel and put the page fragment within the iterator
<af:iterator id="iterator" value="#{bindings.EmployeesVO.collectionModel}" var="item">
<ui:include src="/fragments/amis-person-fragment.jsff"/>
</af:iterator>
Change the bindings in the page fragment to match the output of the iterator
<amis-person amis-person-name="#{item.bindings.FirstName.inputValue}" amis-person-email="#{item.bindings.Email.inputValue}" />
That’s it, you are done. When I now run the project I see the data from the Employee Viewmodel in the Jet Component I made:
Sources
- http://andrejusb.blogspot.nl/2015/12/improved-jet-rendering-in-adf.html
- https://blogs.oracle.com/groundside/entry/jet_composite_components_i_backgrounder (and the other blogs)
- ADFJetDemo Application or Github
Versions used
JDeveloper 12.1.3,
OracleJet V2.2.0
Disclaimer
The information is based on my personal research. At the moment, Oracle does not support or encourage integrating ADF and Jet. Oracle is working on JET Composite Components in ADF.
There is also a second part, on how to this, but then with DVT’s
Very important to mention – JET Composite is getting data directly from ADF Bindings, there is no REST layer here. This simplifies JET implementation in ADF Faces significantly.
Thanks for sharing this information ,very clean presentation every user can understand it easily.
Keep posting useful articles like this.
Thank you