Skip to content
+49 (0) 721 619 017 0info@virtual7.de

NEWS     CONTACT     PORTFOLIO     DOWNLOADS

Google+LinkedinTwitterXING
 
virtual7 Blog
virtual7 Blog
ORACLE. EXPERTISE. PASSION.
  • COMPANY
    • PORTFOLIO
    • NEWS
    • EVENTS
    • FACTS & FIGURES
    • PARTNERS & MEMBERSHIPS
  • TECHNOLOGIES
    • DATABASE
    • MIDDLEWARE
    • BUSINESS INTELLIGENCE
    • CLOUD
  • BIG DATA
  • INTEGRATION
  • OPERATIONS & SUPPORT
  • MODERNISATION
  • ACADEMY
  • CAREER
    • CURRENT JOB VACANCIES
    • APPLICATION INFORMATION
    • WORKING AT VIRTUAL7
    • DEVELOPMENT OPPORTUNITIES
    • RECRUITING EVENTS
    • APPLICATION FAQ
  • English
  • Deutsch
  • COMPANY
    • PORTFOLIO
    • NEWS
    • EVENTS
    • FACTS & FIGURES
    • PARTNERS & MEMBERSHIPS
  • TECHNOLOGIES
    • DATABASE
    • MIDDLEWARE
    • BUSINESS INTELLIGENCE
    • CLOUD
  • BIG DATA
  • INTEGRATION
  • OPERATIONS & SUPPORT
  • MODERNISATION
  • ACADEMY
  • CAREER
    • CURRENT JOB VACANCIES
    • APPLICATION INFORMATION
    • WORKING AT VIRTUAL7
    • DEVELOPMENT OPPORTUNITIES
    • RECRUITING EVENTS
    • APPLICATION FAQ
  • English
  • Deutsch

Oracle JET: Real usage in ADF application – part 2

8. July 2016ADF, Oracle JETBy Ciprian N. Iancu

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:

XHTML
1
2
3
4
5
6
7
<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:

XHTML
1
2
3
4
5
6
<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:

CSS
1
2
3
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:

CSS
1
2
3
4
5
6
.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.

12cADFJETJSFOracle
About the author
Ciprian N. Iancu

Ciprian N. Iancu

Head of development at virtual7 Romania

Related posts
ADF Badge Button Reloaded
5. April 2018
ADF – usage of function key (eg. F5)
4. April 2018
JDeveloper: Info about the selected cell in an af:table
18. January 2018
ADF resource bundle with parameters
9. January 2018
ADF Badge Button Component
13. December 2017
ADF help provider link per fragment
6. November 2017
Tags
11.1.1.9 12c ADF ADF BC ADF Components ADF Rich Faces AMPA Angular APEX Application Development Framework background cloud Cloud Service conference context css feature Identity Asserter Interactive Grid JavaScript JCA JDeveloper JET JSF MAF Maven mcs mobile multi-user multiple npm Oracle Oracle ADF Oracle APEX Oracle BI Oracle Cloud Oracle Database Cloud Oracle JET Oracle SOA Oracle Weblogic Retry SOA thread users weblogic
Archives
  • April 2018
  • January 2018
  • December 2017
  • November 2017
  • September 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • November 2016
  • October 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
Categories
  • ADF
  • Angular
  • BI
  • DWH
  • general
  • Interactive Grid
  • Intern
  • Javascript
  • JDeveloper
  • MAF
  • Maven
  • Oracle Apex
  • Oracle BI Suite EE
  • Oracle Cloud
  • Oracle Database
  • Oracle JET
  • Oracle SOA Suite
  • Oracle Weblogic Server
  • Spring
  • WebCenter Content
  • WebCenter Portal
Category Specific RSS
  • ADF (22)
  • Angular (2)
  • BI (6)
  • DWH (2)
  • general (4)
  • Interactive Grid (1)
  • Intern (25)
  • Javascript (9)
  • JDeveloper (8)
  • MAF (7)
  • Maven (3)
  • Oracle Apex (8)
  • Oracle BI Suite EE (4)
  • Oracle Cloud (11)
  • Oracle Database (6)
  • Oracle JET (9)
  • Oracle SOA Suite (4)
  • Oracle Weblogic Server (5)
  • Spring (1)
  • WebCenter Content (3)
  • WebCenter Portal (3)
  • All Topics
virtual7 Blog

K O N T A K T   |   I M P R E S S U M   |   D A T E N S C H U T Z