Friday, November 13, 2015

Oracle JET and ADF Faces Integration in ADF

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 glasspane

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 - SimpleADFApp.zip. 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.
at

13 comments:

  1. UnknownNovember 13, 2015 at 1:56 PM

    Hi,

    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.

    Thanks,
    Ramit Mathur

    ReplyDelete
  2. Andrej BaranovskijNovember 13, 2015 at 3:59 PM

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

    Regards,
    Andrejus

    ReplyDelete
  3. UnknownNovember 13, 2015 at 5:54 PM

    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?

    Thanks!

    Rick

    ReplyDelete
  4. Andrej BaranovskijNovember 13, 2015 at 6:02 PM

    You should check Alta UI site: http://www.oracle.com/webfolder/ux/middleware/alta/index.html

    Andrejus

    ReplyDelete
  5. UnknownNovember 13, 2015 at 6:13 PM

    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.

    ReplyDelete
  6. Andrej BaranovskijNovember 13, 2015 at 6:32 PM

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

    Regards,
    Andrejus

    ReplyDelete
  7. Subhash ChandraDecember 4, 2015 at 6:42 AM

    Hi Andrejus,

    I'm trying to do the similar thing by using the JET component in a jspx page based on a jdeveloper 11.1.1.7.1 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.

    Thanks
    Subhash

    ReplyDelete
  8. Andrej BaranovskijDecember 4, 2015 at 7:49 AM

    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: http://andrejusb.blogspot.lt/2015/11/adf-and-oracle-jet-integration-pattern.html

    Andrejus

    ReplyDelete
  9. UnknownJuly 5, 2017 at 8:52 AM

    Hi Andrejus,

    Thanks for the post its very useful. I followed the steps and its working fine. But, When i try to call a function on button click. it gives error-

    VM5662:3 Uncaught ReferenceError: viewUser is not defined.

    But function is defined in main.js
    self.viewUser= function(userId){
    console.log('viewUser called : '+userId);
    };

    and I am calling this function in button tag-

    data-bind="click: function() {viewUser(UserId)}, ojComponent: {component: 'ojButton', label: 'View'}"

    Please suggest.

    ReplyDelete
  10. Krishna KumarJuly 25, 2017 at 2:06 PM

    Hi Andrejus,
    Are you aware of a possibility of invoking an ADF UI from JET UI. I understand this is the converse of what is detailed in this post, just in case if you have done such thing please do let me know.
    Regards.

    ReplyDelete
  11. Andrej BaranovskijJuly 25, 2017 at 2:42 PM

    ADF UI from JET UI - never heard about such strange requirement. Why you need this, please elaborate.

    Andrejus

    ReplyDelete
  12. BhaveshJuly 26, 2017 at 8:00 AM

    Hi Andrejus,
    We have ADF taskflows bundled in a shared library and used by couple of of services.
    Now a new service wants to use our shared library, but they have built there UI using Oracle JET UI.
    How can these services consume these taskflows in there JET UI.

    ReplyDelete
  13. Andrej BaranovskijJuly 26, 2017 at 8:34 AM

    You dont integrate ADF into JET. Only option - inline frame. But I would suggest just open another browser tab, to render ADF content.

    Andrejus

    ReplyDelete