Oracle JET: Reale Nutzung in einer ADF-Anwendung – Teil 2

Dieser Artikel ist der zweite Teil einer Reihe von Artikeln, die erklären, wie man eine echte Integration von JET in ADF durchführt und Lösungen für Probleme bietet, die bei diesem Vorgang auftreten.

Ich werde nachfolgend eine ADF-Anwendung erstellen, die eine JSF-Seite (home.jsf) enthält. Um die Alta-Skin zu benutzen, werde ich die trinidad-config.xml ändern. Auf diese Weise wird die ADF-Anwendung so aussehen, wie die Oracle JET-Komponenten und sich auch genauso bedienen lassen. Ich kopiere nun die JET-Ressourcen unter den Speicherort:

• ViewController/public_html/resources/ojet/

An diesem Speicherort habe ich auch die viewModels and den view-Ordner, wo ich das JET-Modul entwickeln werde. Der Name des JET-Moduls, das ich in ADF integrieren möchte, ist testView.

Nachdem ich meine Anwendung in JDeveloper aktualisiert habe, sieht sie folgendermaßen aus:

In der home.jsf Seite müssen Sie einen Verweis auf die main.js hinzufügen und einige CSS- und JS-Dateien mit dem folgenden Code einfügen:

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

Das Ausführen der Anwendung im aktuellen Zustand erzeugt folgende Fehler:

Lass uns zunächst das Problem “Failed to decode font” (Schriftart konnte nicht dekodiert werden) angehen. Wir sehen schon an der Benutzeroberfläche, dass etwas nicht stimmt, einige Icons fehlen:

Ich benutze zwei Komponenten von JET: ojTable und ojCombobox; beide Komponenten verwenden einige Icons, die nicht geladen werden konnten. Die gleichen Probleme erscheinen für jede JET-Komponente, die Symbole dieser Schriftart verwendet.

Das Problem ist, dass ADF den Parameter _afrLoop der HTPP-Anforderung hinzufügt, die die Schriftart aus dem /faces/resources/-Verzeichnis erhält. Der Browser wird versuchen, diesen Parameter als Font-Version zu identifizieren. Du wirst sehen, dass es dieses Problem nicht in Firefox gibt, es existiert jedoch in Chrome und IE-Browsern

Tipp: Stellen Sie bei der Verwendung von JET mit ADF sicher, dass Sie keine Anfragen haben, die /faces/ durchlaufen.

 

Dementsprechend ändern wir die Pfade in home.jsf, die wie folgt aussehen werden:

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

Wenn wir die Anwendung ausführen, werden wir feststellen, dass die Schriftart korrekt geladen ist und das Problem “Failed to parse SourceMap” nicht mehr auftritt.

Das sieht gut aus – allerdings wird ein anderes Problem beim Öffnen der ojCombobox sichtbar. Eine <div> -Ebene verschiebt die ADF-Schnittstelle; das Problem wird in folgendem Bild illustriert:

Um dies zu lösen, musst du eine Skin erstellen, die Oracle Alta Skin erweitert, und den folgenden Code hinzuzufügen:

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

Wenn du eine Datumsangabe ojInputDate hinzufügst, wird folgendes Problem generiert:

Du kannst es lösen, indem du den folgenden Code in : override.css einfügst:

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

Nach der Aktualisierung der Anwendung, wird die Datumsangabe korrekt angezeigt:

Tipp: Bevor du eine JET-Komponente in ADF-Anwendungen verwendest, stelle  sicher, dass sie ordnungsgemäß wiedergegeben werden. Wenn nicht, finde heraus, welche Styles dir fehlen und füge diese der Skin oder override.css hinzu.

Im nächsten Teil dieser Serie werde ich darauf eingehen, wie du Ihre JET-Anwendung mit echten Daten testen kannst, ohne dass die REST-Calls implementiert werden müssen.