http://www.opitz-consulting.com/go/3-4-11 APEX-Anwendungen können durch JavaScript eine Aufwertung erfahren. Beispiele sind Tastaturnavigation, fixe Tabellenheader, erweitertes Logging und vieles mehr. Neben der Verwendung von Dynamic Actions ist in diesem Zusammenhang für die Erstellung von browserunabhängigem Quellcode das standardmäßig in APEX eingebundene JavaScript-Framework jQuery eine gute Option. Doch die Mächtigkeit von JavaScript birgt die Gefahr von Inkompatibilitäten. JavaScript-Quellcode, der in einer bestimmte APEX-Version lauffähig ist, funktioniert nicht auch zwangsläufig in späteren APEXVersionen. Bei der Erstellung von JavaScript-Code inner- und außerhalb von Dynamic Actions ist die Sicherstellung der Aufwärtskompatibilität des Quellcodes somit eine Herausforderung, die es zu meistern gilt. Unser IT-Spezialist Hendrik Gossens stellte bei der Konferenz der Deutschen Oracle Anwendergruppe (DOAG e. V.) am 19.11.2014 verschiedene Pattern und Best Practices vor, die die Lauffähigkeit des eigenen JavaScript Codes in zukünftigen APEX-Versionen positiv begünstigen und die Gefahr von Inkompatibilitäten minimieren können. Auf diese Weise ist es möglich, das Nutzererlebnis von APEX durch eine Prise JavaScript abzurunden und zu verfeinern, ohne zukünftig die Lauffähigkeit der Anwendung zu gefährden. -- Über uns: Als führender Projektspezialist für ganzheitliche IT-Lösungen tragen wir zur Wertsteigerung der Organisationen unserer Kunden bei und bringen IT und Business in Einklang. Mit OPITZ CONSULTING als zuverlässigem Partner können sich unsere Kunden auf ihr Kerngeschäft konzentrieren und ihre Wettbewerbsvorteile nachhaltig absichern und ausbauen. Über unsere IT-Beratung: http://www.opitz-consulting.com/go/3-8-10 Unser Leistungsangebot: http://www.opitz-consulting.com/go/3-8-874 Karriere bei OPITZ CONSULTING: http://www.opitz-consulting.com/go/3-8-5

1. APEX und JavaScript
Beispiele, Pattern und Best
Practices
Hendrik Gossens
Consultant
OPITZ CONSULTING GmbH
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 1
Nürnberg, 20.11.2014

2. © OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 2
Agenda
1. „Pimp my APEX with JavaScript“ – Beispiele
2. JavaScript in APEX
3. Gefahren bei der Verwendung von JavaScript
4. Good Practice – Bad Practice
5. Fazit

3. 1 Pimp my APEX with JavaScript
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 3

4. Excelize my Tabular Form
 Verhalten der Tabular Form wird um aus Excel bekannte
Funktionalitäten angereichert
 Navigation in den Zellen über Tastaturpfeile und Enter-Taste
 Automatisches Ausfüllen von Zellen
 Vertikale Spaltenüberschriften
 Fixierte Spaltenüberschriften
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 4

5. Formsize my APEX
 Verhalten einer APEX-Maske wird um aus Oracle Forms
bekannte Funktionalitäten angereichert
 Hotkey-Support (z.B. Suche ausführen, Zeilen einfügen, ...)
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 5

6. User Experience
 Features, die das Nutzererlebnis steigern
 Inline-Validierungsmeldungen verschwinden beim Klick in das betreffende
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 6
Feld

7. Showcase
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 7

8. 2 JavaScript in APEX
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 8

9. JavaScript in APEX – Wie?
Nativer
JavaScript
Code
JavaScript Framework
basierter Code
(jQuery)
APEX JavaScript API
basierter Code
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 9

10. JavaScript in APEX – Aufruf
JS
Event-
Handler
Custom
event-based
Code
(jQuery Event-Handler)
Event-based -
Dynamic Actions
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 10

11. JavaScript in APEX - Mögliche Schwierigkeiten
 Datentypen
 Debugging
 Wartbarkeit
 Browserabhängig unterschiedliches Verhalten desselben
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 11
Codes
 Zusammenspiel einzelner Codeteile unklar (Event-Handler)
 Ein Syntaxfehler verhindert die komplette Ausführung (ohne
sichtbare Fehlermeldung)
 Code spezifisch für spezielle APEX oder Browser-Version
implementiert (Upgrade-Sicherheit?)

12. Datentypen
 JavaScript ist nicht typenstreng!
 Vergleiche von Variablen syntaktisch mittels == oder ===
möglich
 1 == “1“; // true
 1 === “1“; // false
=> Für Vergleiche immer === verwenden!
"If two operands are of the same type and value,
then === produces true and !== produces false."
- JavaScript: The Good Parts
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 12

13. Debugging
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 13
 Logging
 Client-seitiges Logging
 Logging in Datenbank-Tabelle
 Tool-Unterstützung
 Firefox: Firebug
 Chrome: Developer Tools
 IE: eher rudimentär
 Alle Browser: Konsole für Log-Ausgaben

14. Namespaces verwenden
 Eigenen Namespaces verwenden
 Fachliche Strukturierung des Quellcodes möglich
 Aufbau von Namespace-Hierarchien möglich
 Vermeidung von Konflikten mit anderen JavaScript Funktionen
 jQuery extend Funktion nutzen um nested namespaces /
Namespace Hierarchien aufzubauen
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 14

15. Namespaces verwenden
// top-level namespace
var myApp = myApp || {};
myApp.library = {
foo:function(){ /*..*/}
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 15
};
// deep extend/merge namespace
$.extend(true, myApp, {
library: {
bar: function() {
/*..*/
}
}
});

16. Wartbarkeit
 Sprechende Namespaces verwenden
 Sprechende Methodennamen verwenden
 Sprechende Variablennamen verwenden
 ggf. mit Kennzeichnung des Datentypen da JavaScript nicht typenstreng ist
 Camel-Case Notation => Neues Wort mit Großbuchstabe beginnen lassen
 Sinnvolle Kommentare verwenden
 Annotationen (z. B. JSDoc)
 Was macht die Funktion?
 Welche Parameter werden erwartet
 Was wird zurückgegeben?
 Wer ist Ansprechpartner?
 ...
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 16

17. Bad Practice
function doSomething(msg) {
if (console) {
var cname = arguments.callee.caller.toString();
var msgout = msg;
if (typeof cname != "undefined") {
cname = cname.match(/function ([^(]+)/)[1];
msgout = "[" + cname + "]: " + msgout;
}
console.log(msgout);
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 17
}
}

18. Good Practice
/**
* Loggt eine Message auf der JavaScript Konsole des Browsers und gibt
* dabei an, aus welcher Methode heraus das Logging aufgerufen wurde
*
* @param {string} message - Die zu loggende Message
* @author Hendrik Gossens
* @version 1.0
*/
Logger.log = function(message) {
if (console) {
/* IE kennt nicht in allen Versionen arguments.callee.name,
daher den Funktionsnamen aus dem Caller-Objekt extrahieren
(Läuft browserübergreifend!) */
var szCallerName = arguments.callee.caller.toString();
var szMessage = message;
// Aufrufende Methode als Präfix, falls diese ermittelt werden kann
if (typeof szCallerName != "undefined") {
szCallerName = szCallerName.match(/function ([^(]+)/)[1];
szMessage = "[" + szCallerName + "]: " + szMessage;
}
console.log(szMessage);
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 18
}
}

19. Exception Handling
 Nicht abgefangene Fehler führen dazu, dass der gesamte
Code nicht mehr ausgeführt wird!
 try-catch-Blöcke im Code verwenden
 Fehler/Warnungen loggen
 Fehler anzeigen, falls sie die weitere Verarbeitung
unmöglich machen
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 19

20. Bad Practice
var badFunction = function(x) {
doSomething(x);
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 20
}

21. Not That Bad Practice
var notThatBadFunction = function(x) {
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 21
try {
if(isNaN(x)) {
throw "not a number";
}
doSomething(x);
}
catch(error) {
alert (error);
}
}

22. Good Practice
var goodFunction = function(x) {
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 22
try {
if(isNaN(x)) {
throw {
name: "Ungültiger Wert",
message: x + " ist keine Zahl!"
};
}
doSomething(x);
}
catch(error) {
alert (error.name + ': ' + error.message);
}
}
Error Objekt

23. Upgrade-Sicherheit
 Wenn möglich Seitenelemente immer über die ID, nicht die
Struktur, adressieren
 wo möglich statische ID in APEX definieren: z. B. für Regions
 Abstrahierende Technologien nativem JavaScript vorziehen
 APEX JavaScript API
 jQuery
 Dynamic Actions
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 23

24. Bad Practice
 Pure JavaScript
 Item Wert setzen
var textElement = document.getElementById('P1_TEXT'));
var textElementValue = textElement.value;
 Item Wert auslesen
var textElement = document.getElementById('P1_TEXT'));
textElement.value = 'Neuer Wert';
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 24

25. Not That Bad Practice
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 25
 jQuery
 Item Wert setzen: $('#P1_TEXT').val('Neuer Wert');
 Item Wert auslesen: $('#P1_TEXT').val();
 Diese Vorgehensweise adressiert das Item über seine ID.
Ändert sich intern der Aufbau des Items (v.a. bei
komplexeren Items als Textfeldern), so läuft der Code u.U.
nicht mehr!

26. Good Practice
 APEX JavaScript API
 Item Wert setzen: $s('P1_TEXT', 'Neuer Wert');
 Item Wert auslesen: $v('P1_TEXT');
 Die APEX JavaScript API kann mit den verschiedenen Item
Typen umgehen und ermittelt (upgrade-sicher) den aktuellen
Wert oder setzt diesen.
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 26

27. © OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 27
Fazit
 JavaScript kann die Funktionalität von APEX erheblich
erweitern!
 Abstraktion von nativem JavaScript Code durch Dynamic
Actions und Frameworks wie jQuery => Code bleibt auch bei
Updates / Browserwechsel lauffähig!
 JavaScript nur ergänzend zur APEX Standardfunktionalität
verwendet werden, diese aber nicht ersetzen oder
nachbauen!
 Pattern und Best Practices machen den Code lesbarer und
wartbarer!

28. © OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 28
Kontakt
Hendrik Gossens
Consultant Oracle Based Solutions
OPITZ CONSULTING GmbH
Kirchstr. 6 | 51647 Gummersbach
Tel. +49 (2261) 60 01-0
hendrik.gossens@opitz-consulting.com
youtube.com/opitzconsulting
@OC_WIRE
slideshare.net/opitzconsulting
xing.com/net/opitzconsulting