© Excellent backgrounds/Shutterstock.com
Ein Tutorial für Oracle-JET-Anwendungen

Single-Page-Anwendungen einfach erstellen


Auf der JavaOne 2015 veröffentlichte Oracle ein neues UI-Framework für die Entwicklung von Webanwendungen: Oracle JET [1]. Das JavaScript- Framework, das firmenintern bereits seit einiger Zeit erfolgreich für die Anwendungsentwicklung eingesetzt wurde, bringt viele nützliche Features mit. Vor allem das automatische Unterstützen von Internationalisierung und Accessibility machen es zu einem interessanten Werkzeug für die Enterprise-Entwicklung. Hier stellen wir das Framework vor, und zeigen, wie Sie damit ganz einfach auch in Java-Anwendungen arbeiten können.

Auch für Java-Entwickler wird es immer interessanter, direkt mit HTML und JavaScript zu arbeiten statt über Abstraktionen wie JSF oder GWT. Diese bieten gegenüber der abstrahierten Plattform wenig Vorteile und machen Anpassungen der View übermäßig kompliziert. Durch das direkte Verwenden von HTML/JavaScript können solche Aufgaben auch viel leichter an Webdesigner ausgelagert werden.

epple_oracle_jet_1.tif_fmt1.jpgAbb. 1: So soll die fertige Beispielanwendung am Ende aussehen

Oracle stellt das JET-Framework kostenlos und quelloffen zur Verfügung. Wir sehen uns das Framework anhand eines kleinen Beispiels an. Im Anschluss zeige ich dann, wie man die Businesslogik komplett in Java entwickeln kann. Als Beispiel baue ich eine kleine Dashboard-Anwendung (Abb. 1) für die Überwachung eines GlassFish-/Payara-Servers. Das Backend basiert dabei auf Adam ­Biens Lightfish-Projekt [2]. Das komplette Beispielprojekt mit Anleitungen zum Bau finden Sie auf GitHub [3].

Bekannte Libraries neu kombiniert

Die JET-Entwickler verwenden bekannte und etablierte Bibliotheken und kombinieren sie zu einem neuen Ganzen. Das erleichtert den Einstieg, da man bereits einen Teil der Komponenten kennt. Und so findet man auch zu vielen Problemen schnell Hilfe, z. B. bei Stack Overflow, obwohl das Framework noch sehr neu ist. Für die Modularisierung des Frameworks ist RequireJS [4] zuständig. Data Binding wird mithilfe von Knockout [5] realisiert, und Crossroads.js [6] wird für das Routing verwendet. Für den Entwickler sind das die wichtigsten Komponenten. Daneben werden Hammer.js [7] für Touchunterstützung und jQuery [8] mit jQuery UI [9] für DOM-Manipulationen, Components und Animationen eingesetzt. Darauf aufbauend bietet JET eigene Widgets, die zugänglich und internationalisierbar sind.

Überblick verschaffen

Eine gute Übersicht über die verfügbaren Komponenten bietet das JET Cookbook (Abb. 2). Hier werden alle Komponenten übersichtlich mit Codebeispielen vorgestellt. Es gibt eine solide Auswahl an Basiskomponenten für Formulare und Menüs sowie komplexere Komponenten zur Datenpräsentation wie Datagrids, Treetables und Charts.

epple_oracle_jet_2.tif_fmt1.jpgAbb. 2: Das Oracle JET Cookbook enthält viele Beispiele

Responsives Layout für alle Größen

Das Layout basiert auf einem responsiven Mobile-first-Grid mit zwölf Spalten. Es existieren Klassen für small, medium, large und xlarge, um je nach Screengröße das Layout anzupassen oder einzelne Komponenten zu verstecken (Abb. 3). Auch einzelne Controls sind responsiv. So kann man abhängig von der Screengröße bei einem Button das Label ändern. Es besteht auch die Möglichkeit, für verschiedene Media Queries komplett unterschiedliche HTML-Templates zu laden.

epple_oracle_jet_3.tif_fmt1.jpgAbb. 3: Das Layout basiert auf einem zwölfspaltigen Grid

Unser Hello-World-Projekt

Beginnen wir mit einem Hello-World-Projekt. Oracle stellt dazu einige Templates zur Verfügung, seit Kurzem auch mithilfe von Yeoman. Normalerweise ist es am bequemsten, mit dem QuickStart-Template zu beginnen, da hier bereits vieles vorkonfiguriert ist. Um auch die wichtigen Grundlagen zu zeigen, verwende ich hier jedoch das Oracle JavaScript Extension Toolkit „Base Distribution“ von der JET-Downloadseite [10].

Das ist ein einfaches ZIP-Archiv mit drei Ordnern. Unter scss liegen wie zu erwarten die SCSS-Dateien, aus denen mit Sass [11] die CSS Style Sheets generiert werden. Hier können Sie das Styling anpassen. Unter css liegen die daraus generierten Dateien, und unter js finden Sie die JavaScript Libraries. Hier werden wir auch gleich die Hauptkonfigurationsdatei anlegen (Listing 1).

Listing 1: main.js

requirejs.config({ paths: { 'knockout': 'libs/knockout/knockout-3.3.0', 'jquery': 'libs/jquery/jquery-2.1.3.min', 'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.11.4.min', 'ojs': 'libs/oj/v1.1.2/min', 'ojL10n': 'libs/oj/v1.1.2/ojL10n', 'ojtranslations': 'libs/oj/v1.1.2/resources', 'signals': 'libs/js-signals/signals.min', 'crossroads': 'libs/crossroads/crossroads.min', 'text': 'libs/require/text', 'promise': 'libs/es6-promise/promise-1.0.0.min', 'hammerjs': 'libs/hammer/hammer-2.0.4.min' } //... Auslassung, den kompletten Code finden Sie auf GitHub }); require(['ojs/ojcore', 'knockout', 'jquery', "ojs/ojmodule", 'ojs/ojknockout', 'ojs/ojbutton', 'ojs/ojtoolbar', 'ojs/ojmenu'],  // hier kann man weitere JET-Module hinzufügen function (oj, ko, $) // dieser Callback wird ausgeführt, wenn alle // Module geladen sind { function RootViewModel() { } $(document).ready( function () { ko.applyBindings(new RootViewModel()); } ); } );

RequireJS ist ein Loader für JavaScript-Dateien und -Module. Er hilft beim Verwalten der vielen JavaScript-Bibliotheken, die Übersicht zu behalten und die Ladereihenfolge sicherzustellen. Unter paths werden die verwendeten Module unter ihren Rufnamen registriert. Weiter unten werden diese Namen in einer require-Funktion verwendet. Diese Funktion wird beim Anwendungsstart automatisch aufgerufen. Wenn alle im Methodenaufruf gelisteten Module geladen sind, wird die Callback-Funktion ausgeführt und das RootViewModel der Anwendung erzeugt. Diese main.js-Datei ist normalerweise die einzige JavaScript-Datei, die Sie in einer JET-Anwendung in einer HTML-Datei direkt referenzieren. Ab hier übernimmt dann RequireJS.

Ein Modul anlegen

Für unser Hello World bauen wir jetzt selbst ein Modul. Jedes View-Modul besteht aus der View in Form einer HTML-Datei und dem ViewModel, einer JavaScript-Datei. Diese verwalten wir in den zwei Ordnern views und viewModels. Im Ordner views landen dann die HTML-Templates. Die Hello-World-Versionen sind in Listing 2 und 3 zu sehen.

Listing 2: helloworld.html

<h1>Hello World!</h1>

Listing 3: helloworld.js

define(['ojs/ojcore', 'knockout'], function (oj, ko) { function homeContentViewModel() { var self = this; } return homeContentViewModel; });

Hier wird define statt require verwendet. require sorgt nur für die richtige Ladereihenfolge, define registriert den Code als Modul, damit es von anderen Modulen referenziert werden kann. Als Modulname wird automatisch der Name der Datei verwendet, hier also helloworld. Somit haben wir JET konfiguriert und ein View-Modul definiert. N...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang