Make Enterprise Applications shine again – part 1

This series of articles aim to show different integration option between ADF and Oracle JET, as there is some tweaking here and there that we have to consider when doing so. The reason for this is that I believe ADF is not dead, but for some use cases we can bring more value to the customer by making ADF and Oracle JET fly together.

The first integration option is when we have to integrate a full Oracle JET application into an ADF application. That means in the ADF application we create one page where we copy the code from index.html, from the Oracle JET application. I’ve took for this article an Oracle JET application generated from a template provided by Oracle JET. Bottom line is that ADF application will provide a secured frame (login page and resources security using ADF Security) and one JSF page (index.jsf). Oracle JET will be initiated in index.jsf and will generate the navigation and the loading of modules.

You can find the source code in GitHub, click here (use branch dev-usecase1).

Here are the steps to do so:

Create the ADF application.

Create one JSF page, call it index.jsf.

Create the login page, the authentication backing bean.

Enable ADF Security and secure the page index.jsf, this will change web.xml.

Generate an Oracle JET application, using any template you want, I’ve used “navbar” template.

Copy the css and js folder, from src/ folder of the generated Oracle JET application, into the ViewController project public_html/ foder, from the ADF application.

Oracle JET application structure

ADF Project Structure after copying the resources

In the index.jsf page, from ADF Application, copy the code from src/index.html, from the Oracle JET application. Here you don’t have to copy all, see bellow how index.jsf should look like:

In order to solve the issue of loading the resources through faces/ servlet you have to adapt a bit the path to css/ and js/ Oracle JET resources. See the above code snippet, but you also have to add the following in web.xml (make sure you copied in the right location):

This will not work because Faces servlet is removing the HTML code from the JSF pages. There are two places where you have to change a bit the code, the template for the Oracle JET navigation needs to use <![CDATA[]]> to escape the code that utilize the HTML comment tags: