Oracle JET: Real usage in ADF application

This article is the second part of a series of articles, which explains how to do a real integration of JET in ADF and solves the issues that come with this task.

In this part I will create an ADF application, which contains a JSF page (home.jsf); I will change the trinidad-config.xml to use the Alta skin. This way the ADF application will have the same look and feel like the Oracle JET components. Now I will copy the JET resources under the location:

ViewController/public_html/resources/ojet/

At this location I also have the viewModels and the views folder where I will develop the JET module.The name of the JET module that I want to integrate in ADF is testView.

After I refresh my application in JDeveloper,it looks like this:

In the home.jsf page you have to add a reference to the main.js and to include some CSS and JS files by using the following code:

<link id="jetCss" rel="stylesheet" href="resources/ojet/css/libs/oj/v2.0.1/alta/oj-alta-min.css" type="text/css"/>
<link id="overrideCss" rel="stylesheet" href="resources/ojet/css/override.css" type="text/css"/>
<script type="text/javascript" data-main="resources/ojet/js/main" src="resources/ojet/js/libs/require/require.js"
        xmlns="http://www.w3.org/1999/xhtml"></script>
<div id="container" style="padding: 10px;" xmlns="http://www.w3.org/1999/xhtml">
    <div id="mainContent" role="main" class="oj-panel oj-margin oj-flex-item" data-bind="ojModule: router.moduleConfig"></div>
</div>

xmlns="http://www.w3.org/1999/xhtml"></script>

</div>

Running the application in the current state generates the following errors:

Let’s deal first with the “Failed to decode font” issue. We already see in the user interface that something is not right, that some icons are missing:

I’m using two components from JET: ojTable and ojCombobox; both components are using some icons, which have failed to load. The same issues will appear to every JET component that uses icons from this font.

The problem is that ADF is adding the _afrLoop parameter to the HTPP request that gets the font from the /faces/resources/ directory. The browser will try to identify that parameter as font version. You will see that this issue doesn’t exist in Firefox, but it exists in Chrome and IE browsers.

TIP: When using JET with ADF make sure you don’t have requests that go through /faces/.

With this in mind let’s change the paths in home.jsf, which will look like this:

<af:panelGroupLayout inlineStyle="min-width:900px">
<link id="jetCss" rel="stylesheet" href="../resources/ojet/css/libs/oj/v2.0.1/alta/oj-alta-min.css" type="text/css"/>
<link id="overrideCss" rel="stylesheet" href="../resources/ojet/css/override.css" type="text/css"/>
<script type="text/javascript" data-main="../resources/ojet/js/main" src="../resources/ojet/js/libs/require/require.js"
        xmlns="http://www.w3.org/1999/xhtml"></script>
<div id="container" style="padding: 10px;" xmlns="http://www.w3.org/1999/xhtml">

<af:panelGroupLayout inlineStyle="min-width:900px">

xmlns="http://www.w3.org/1999/xhtml"></script>

Running the application, we will see that the font is loaded correctly and we don’t have the issue with the “Failed to parse SourceMap” anymore.

This looks good, but another issue is visible when opening the ojCombobox. Some <div> layer pushes the ADF interface; see the issue in the following image:

To solve this, you have to create a skin that extends Oracle Alta skin and add the following code:

div[role='presentation'] {
    position: absolute !important;
}

div[role='presentation'] {

position: absolute !important;

}

When putting a date component, ojInputDate, the following issue will be generated:

The fix for this is to put the following code in override.css:

.oj-datepicker-content {
    background-color: white !important;
    border: 1px solid #c4ced7;
    border-top: 0;
    box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.35);
}

.oj-datepicker-content {

background-color: white !important;

border: 1px solid #c4ced7;

border-top: 0;

box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.35);

}

After refreshing the application, the date component renders properly:

Tip: Before using any JET component in ADF applications, make sure that they are rendered properly. If not, find out what styles they are missing and put them in the skin or in the override.css.

In the next part of this series, I will talk about how to test your JET application with real data without the need to have the REST calls implemented.