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:

jet_app_01

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>

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

jet_error_02

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:

jet_font_error_03

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">

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.

jet_font_fix_04

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:

jet_error_05

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;
}

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

jet_error_06

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);
}

After refreshing the application, the date component renders properly:

jet_fix_07

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.

Wir bleiben für Sie da!

In unserem neusten Blog-Beitrag sprechen wir mit zwei neuen Mitarbeitern, die Mitten in der Corona-Krise bei virtual7 angefangen haben.

Welche Eigenheiten und Herausforderungen einen Jobwechsel in dieser Zeit bedeuten und wie ihr erster Arbeitstag im Home-Office ausgesehen hat, erfahren Sie in diesem Beitrag.