© OPITZ CONSULTING GmbH 2012 Seite 1APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Hendrik Gossens

Consultant

OPITZ CONSULTING GmbH

Beispiele, Pattern und Best Practices

Nürnberg, 20.11.2014

APEX und JavaScript

© OPITZ CONSULTING GmbH 2012 Seite 2APEX und JavaScript – Beispiele, Pattern und Best Pr actices

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

© OPITZ CONSULTING GmbH 2012 Seite 3APEX und JavaScript – Beispiele, Pattern und Best Pr actices

1 Pimp my APEX with JavaScript

© OPITZ CONSULTING GmbH 2012 Seite 4APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Excelize my Tabular Form

� Verhalten der Tabular Form wird um aus Excel bekannt e 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 GmbH 2012 Seite 5APEX und JavaScript – Beispiele, Pattern und Best Pr actices

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 GmbH 2012 Seite 6APEX und JavaScript – Beispiele, Pattern und Best Pr actices

User Experience

� Features, die das Nutzererlebnis steigern� Inline-Validierungsmeldungen verschwinden beim Klick in das betreffende

Feld

© OPITZ CONSULTING GmbH 2012 Seite 7APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Showcase

© OPITZ CONSULTING GmbH 2012 Seite 8APEX und JavaScript – Beispiele, Pattern und Best Pr actices

2 JavaScript in APEX

© OPITZ CONSULTING GmbH 2012 Seite 9APEX und JavaScript – Beispiele, Pattern und Best Pr actices

© OPITZ CONSULTING GmbH 2012 Seite 10APEX und JavaScript – Beispiele, Pattern und Best Pr actices

JavaScript in APEX – Wie?

APEX JavaScript APIbasierter Code

JavaScript Framework basierter Code

(jQuery)

Nativer JavaScript

Code

© OPITZ CONSULTING GmbH 2012 Seite 11APEX und JavaScript – Beispiele, Pattern und Best Pr actices

JavaScript in APEX – Aufruf

Event-based -Dynamic Actions

Custom event-based

Code(jQuery Event-Handler)

JSEvent-

Handler

© OPITZ CONSULTING GmbH 2012 Seite 12APEX und JavaScript – Beispiele, Pattern und Best Pr actices

JavaScript in APEX - Mögliche Schwierigkeiten

� Datentypen

� Debugging

� Wartbarkeit

� Browserabhängig unterschiedliches Verhalten desselb en Codes

� Zusammenspiel einzelner Codeteile unklar (Event-Han dler)

� Ein Syntaxfehler verhindert die komplette Ausführun g (ohne sichtbare Fehlermeldung)

� Code spezifisch für spezielle APEX oder Browser-Ver sion implementiert (Upgrade-Sicherheit?)

© OPITZ CONSULTING GmbH 2012 Seite 13APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Datentypen

� JavaScript ist nicht typenstreng!

� Vergleiche von Variablen syntaktisch mittels == ode r === 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 GmbH 2012 Seite 14APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Debugging

� 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

© OPITZ CONSULTING GmbH 2012 Seite 15APEX und JavaScript – Beispiele, Pattern und Best Pr actices

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 GmbH 2012 Seite 16APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Namespaces verwenden

// top-level namespacevar myApp = myApp || {};myApp.library = {

foo:function(){ /*..*/}};

// deep extend/merge namespace$.extend(true, myApp, {

library: {bar: function() {

/*..*/}

}});

© OPITZ CONSULTING GmbH 2012 Seite 17APEX und JavaScript – Beispiele, Pattern und Best Pr actices

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 GmbH 2012 Seite 18APEX und JavaScript – Beispiele, Pattern und Best Pr actices

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 GmbH 2012 Seite 19APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Good Practice/*** Loggt eine Message auf der JavaScript Konsole des Browsers und gibt * dabei an, aus welcher Methode heraus das Logging a ufgerufen 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.call ee.name,

daher den Funktionsnamen aus dem Caller-Objekt extr ahieren(Läuft browserübergreifend!) */

var szCallerName = arguments.callee.caller.toString(); var szMessage = message;

// Aufrufende Methode als Präfix, falls diese ermit telt werden kannif (typeof szCallerName != "undefined") {

szCallerName = szCallerName.match(/function ([^\(]+)/ )[1];szMessage = "[" + szCallerName + "]: " + szMessage;

}console.log(szMessage);

}}

© OPITZ CONSULTING GmbH 2012 Seite 20APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Exception Handling

� Nicht abgefangene Fehler führen dazu, dass der gesa mte 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 GmbH 2012 Seite 21APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Bad Practice

var badFunction = function(x) {

doSomething(x);

}

© OPITZ CONSULTING GmbH 2012 Seite 22APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Not That Bad Practice

var notThatBadFunction = function(x) {

try {

if(isNaN(x)) {

throw "not a number";

}

doSomething(x);

}

catch(error) {

alert (error);

}

}

© OPITZ CONSULTING GmbH 2012 Seite 23APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Good Practicevar goodFunction = function(x) {

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

© OPITZ CONSULTING GmbH 2012 Seite 24APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Upgrade-Sicherheit

� Wenn möglich Seitenelemente immer über die ID, nich t die Struktur, adressieren� wo möglich statische ID in APEX definieren: z. B. für Regions

� Abstrahierende Technologien nativem JavaScript vorz iehen� APEX JavaScript API� jQuery� Dynamic Actions

© OPITZ CONSULTING GmbH 2012 Seite 25APEX und JavaScript – Beispiele, Pattern und Best Pr actices

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 GmbH 2012 Seite 26APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Not That Bad Practice

� jQuery� Item Wer 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 Co de u.U. nicht mehr!

© OPITZ CONSULTING GmbH 2012 Seite 27APEX und JavaScript – Beispiele, Pattern und Best Pr actices

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 ak tuellen Wert oder setzt diesen.

© OPITZ CONSULTING GmbH 2012 Seite 28APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Fazit

� JavaScript kann die Funktionalität von APEX erhebli ch erweitern!

� Abstraktion von nativem JavaScript Code durch Dynam ic Actions und Frameworks wie jQuery => Code bleibt auc h bei Updates / Browserwechsel lauffähig!

� JavaScript nur ergänzend zur APEX Standardfunktiona lität verwendet werden, diese aber nicht ersetzen oder nachbauen!

� Pattern und Best Practices machen den Code lesbarer und wartbarer!

© OPITZ CONSULTING GmbH 2012 Seite 29APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Fragen und Antworten

© OPITZ CONSULTING GmbH 2012 Seite 30APEX und JavaScript – Beispiele, Pattern und Best Pr actices

Kontakt

Hendrik GossensConsultant Oracle Based Solutions

OPITZ CONSULTING GmbHKirchstr. 6 | 51647 GummersbachTel. +49 (2261) 60 01-0hendrik.gossens@opitz-consulting.com

youtube.com/opitzconsulting

@OC_WIRE

slideshare.net/opitzconsulting

xing.com/net/opitzconsulting