Friday, November 13, 2015

Oracle JET and ADF Faces Integration in ADF

Oracle JET provides a set of UI components, based on a combination of HTML and JavaScript. ADF Faces is an Ajax-enabled rich JavaServer Faces component framework that uses JavaScript to render client-side components, implement rich component functionality, validate user input and convert user data input. Although it is not officially documented, but obviously Oracle JET components can be integrated into JSF pages implemented with ADF Faces. I think such integration provides many benefits to ADF Faces. Use cases where performance is critically important can be implemented with Oracle JET client components and rich functionality can be implemented with ADF Faces, all in the same ADF application. Probably I would not create dependencies between Oracle JET and ADF Faces components rendered on the same page. Oracle JET should render data coming from REST services, while ADF Faces should work with data obtained from ADF Bindings layer.

I have managed to implement Oracle JET component and ADF Faces UI in the same physical ADF page. Oracle JET group renders input text, user types text and this text appears in the output below (use case is described here - Getting Started Quickly without the JET QuickStart). ADF Faces UI group renders regular ADF data entry form with navigation and save/cancel buttons. It all works together on the same page:

Download sample application implemented with JDeveloper 12.2.1 - I did not delete Oracle JET libraries from the sample application, so you could download and directly run it. Download size is a drawback, Oracle JET is part of application and it occupies around 11 MB.

Some text is entered into Oracle JET field, on enter it is copied into output below:

ADF also works as expected, for example I can change Salary value and commit changes with Save button:

ADF validation also works fine, I remove value for mandatory field and try to save. Required validation message will popup:

Take a look into ADF application structure with Oracle JET elements inside. Basically I just copied Oracle JET files into ADF ViewController public_html folder:

There is Oracle JET JavaScript file, where function is implemented to handle text entry and output update, pretty simple one:

Here it comes the most important part - ADF page. Instead of using HTML page to implement Oracle JET, I'm using regular ADF page based on JSF and ADF Faces. Oracle JET CSS and RequireJS script for Oracle JET are defined in the top of the page, just above the form - this will make sure correct initialisation for Oracle JET:

Oracle JET UI (input text, together with output text) is defined inside ADF Faces Panel Header with HTML div. This is how Oracle JET is rendered inside ADF page, using HTML:

Stay tuned and I will be posting more use cases on Oracle JET integration topic.


Ramit Mathur said...


Do we have any plugin for Oracle JET which we can use in Jdeveloper 12.2.1?
Or we need to use NETBEAN IDE.

Please suggest.

Ramit Mathur

Andrejus Baranovskis said...

You can use JDeveloper 12.2.1, please check JET developer guide, it is described there.


Unknown said...

I'm trying to do some design mock-ups based on the ADF 12.x skin represented in your example application. Are you aware of any Visio or Pencil stencils or templates that are available?



Andrejus Baranovskis said...

You should check Alta UI site:


Rick Zelinsky said...

Thanks for your quick reply, I have looked there. From what I could tell, it didn't have any predefined templates to layout the mock-ups.

Andrejus Baranovskis said...

I suggest to ask on OTN ADF forum. May be one of ADF PM's will respond.


Subhash Chandra said...

Hi Andrejus,

I'm trying to do the similar thing by using the JET component in a jspx page based on a jdeveloper environment. I'm not able to render the JET component. Is the usage pattern followed in your sample application has any dependencies with respect to ADF/jdeveloper/JSF version? Any pointers would be of great help.


Andrejus Baranovskis said...

Officially Oracle doesnt encourage JET integration into ADF. Unless you want to render independent JET UI within ADF page, without any interaction with ADF lifecycle, context, etc.

I don't know if there is any dependency related to versions. It also depends on your JET component, may be tags are incorrect, etc.

You could try to use simple region or JSF include: