ADF and Oracle JET - Integration Pattern with ADF Regions

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:

Read update for this post - Improved JET Rendering in ADF.

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.

ADF 12.2.1 Responsive Dashboard with Masonry Layout

ADF 12.2.1 is a breakthrough in responsive UI. Never before it was so easy to implement good looking and high performance ADF UI. Masonry layout component allows to develop responsive dashboard made from separate tiles. Tiles can be reordered, resized and even removed. Tiles layout is dynamically constructed based on available screen size.

You should see how it works, check video based on sample application - DashboardApp.zip. Tiles are reordered as I change screen size, and even more - I can reorder them by myself, just with drag and drop:

This is default dashboard layout with four tiles on wide screen:

As resize screen to be more narrow, tiles are recorded to occupy available space:

With even more narrow screen, tiles are reordered to occupy only one column:

User can scroll up/down on narrow screen to see all tiles:

I can move and reorder tiles manually with drag and drop. In this example I reordered tile with employee information to be below employees chart:

If screen width is resized to be even more narrow, ADF 12.2.1 responsive UI template (check my previous post about responsive UI improvements in ADF 12.2.1 - ADF 12.2.1 Responsive UI Improvements) will reorder facets and there will be only one column UI:

Implementation is simple, you should use new ADF Faces component - Masonry Layout. Add any number of UI layout components (tiles) inside. Manual reordering is handled with regular ADF Faces drag and drop functionality:

Each tile must be assigned with masonry layout style class, this will control tile dimensions:

You can watch OTN ArchBeat video, where I'm talking about ADF 12.2.1 and responsive UI:

Oracle JET - Rendering Table from ADF BC REST Service

Oracle JET - new tool for us to build UI applications with JavaScript. Right now there is no out of the box integration with ADF Faces, I heard on OOW there might be some sort of integration available in the future. At the end of the day this is only JavaScript and you can integrate it into existing ADF page by yourself. Probably you would not want this, ADF Faces offers very rich set of functionalities and there is no need in extra components. Unless you would like to use WebSockets in ADF and would like to push data from JavaScript into DVT components - it could be easier to do this with JET, instead of going through ADF Bindings layer.

JET comes with developer guide, this is the first source of information along with Cookbook examples. I have implemented sample application for today post, based on developer guide section - Creating a CRUD Application Using Oracle JET. Here you can download the sample - SimpleJETApp.zip. If you would like to run it, make sure to add JET JavaScript libraries, you can take them from JET QuickStart. Size of these libraries was too large, this is why I have removed them.

REST service is implemented with ADF BC, I have described it in previous post - ADF 12.2.1 ADF BC Support for REST.

This is how it looks a table rendered with JET from REST data supplied by ADF BC, with pagination support. JET is using Alta UI style, visually there is no much difference comparing to ADF Faces:

Data is displayed from REST generated on top of ADF BC:

Typical JET use case is implemented by combination of JavaScript and HTML files:

JavaScript function contains a logic to invoke and parse REST service, everything is handled by JET API and popular JavaScript modules (such as Knockout, etc.). You can see how REST resource URL is defined and there is parsing rule to apply to the fetch result. I have set to fetch up to 20 rows only:

There is main JavaScript file in JET. You need to include initialisation steps there:

The last step - UI. JET offers table component with pagination support. Pagination happens on client side, this means you should not fetch many rows anyway. UI structure is pretty simple:

I have recorded a video to show how table pagination works. All rows are on client side and still pagination is not super quick, as I would expect it:

For comparison, I have uploaded table pagination performance video for ADF 12c Alta UI. ADF Faces pagination support works pretty quick, if not faster:

I'm happy to have additional Oracle development toolkit available. We are going to use it in our projects in combination with ADF.

OOW'15 Session Slides - Oracle Alta UI Patterns for Enterprise Applications and Responsive UI Support

You can view slides from recent OOW'15 session (Oracle Alta UI Patterns for Enterprise Applications and Responsive UI Support [UGF2717]) on SlideShare:

I was explaining how to implement responsive layout and fast performance ADF 12c applications with Alta UI. New ADF 12.2.1 features were discussed. Session went pretty well, all demos were working without issues. I was happy with the feedback, for example a tweet from Grant Ronald:

Here you can download session demo application - oow15.zip. This application includes high performance ADF Alta UI dashboard with WebSockets.