APEX und JavaScript 
Beispiele, Pattern und Best 
Practices 
Hendrik Gossens 
Consultant 
OPITZ CONSULTING GmbH 
© OPITZ C...
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 2 
Agenda 
1. „Pimp my APEX...
1 Pimp my APEX with JavaScript 
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 S...
Excelize my Tabular Form 
 Verhalten der Tabular Form wird um aus Excel bekannte 
Funktionalitäten angereichert 
 Naviga...
Formsize my APEX 
 Verhalten einer APEX-Maske wird um aus Oracle Forms 
bekannte Funktionalitäten angereichert 
 Hotkey-...
User Experience 
 Features, die das Nutzererlebnis steigern 
 Inline-Validierungsmeldungen verschwinden beim Klick in da...
Showcase 
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 7
2 JavaScript in APEX 
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 8
JavaScript in APEX – Wie? 
Nativer 
JavaScript 
Code 
JavaScript Framework 
basierter Code 
(jQuery) 
APEX JavaScript API ...
JavaScript in APEX – Aufruf 
JS 
Event- 
Handler 
Custom 
event-based 
Code 
(jQuery Event-Handler) 
Event-based - 
Dynami...
JavaScript in APEX - Mögliche Schwierigkeiten 
 Datentypen 
 Debugging 
 Wartbarkeit 
 Browserabhängig unterschiedlich...
Datentypen 
 JavaScript ist nicht typenstreng! 
 Vergleiche von Variablen syntaktisch mittels == oder === 
möglich 
 1 ...
Debugging 
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 13 
 Logging 
...
Namespaces verwenden 
 Eigenen Namespaces verwenden 
 Fachliche Strukturierung des Quellcodes möglich 
 Aufbau von Name...
Namespaces verwenden 
// top-level namespace 
var myApp = myApp || {}; 
myApp.library = { 
foo:function(){ /*..*/} 
© OPIT...
Wartbarkeit 
 Sprechende Namespaces verwenden 
 Sprechende Methodennamen verwenden 
 Sprechende Variablennamen verwende...
Bad Practice 
function doSomething(msg) { 
if (console) { 
var cname = arguments.callee.caller.toString(); 
var msgout = m...
Good Practice 
/** 
* Loggt eine Message auf der JavaScript Konsole des Browsers und gibt 
* dabei an, aus welcher Methode...
Exception Handling 
 Nicht abgefangene Fehler führen dazu, dass der gesamte 
Code nicht mehr ausgeführt wird! 
 try-catc...
Bad Practice 
var badFunction = function(x) { 
doSomething(x); 
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Patter...
Not That Bad Practice 
var notThatBadFunction = function(x) { 
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern...
Good Practice 
var goodFunction = function(x) { 
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Prac...
Upgrade-Sicherheit 
 Wenn möglich Seitenelemente immer über die ID, nicht die 
Struktur, adressieren 
 wo möglich statis...
Bad Practice 
 Pure JavaScript 
 Item Wert setzen 
var textElement = document.getElementById('P1_TEXT')); 
var textEleme...
Not That Bad Practice 
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 25 
...
Good Practice 
 APEX JavaScript API 
 Item Wert setzen: $s('P1_TEXT', 'Neuer Wert'); 
 Item Wert auslesen: $v('P1_TEXT'...
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 27 
Fazit 
 JavaScript kan...
© OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 28 
Kontakt 
Hendrik Gossen...
Nächste SlideShare
Wird geladen in …5
×

APEX und JavaScript - Beispiele, Pattern und Best Practices

774 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
774
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
26
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • JS Event Handler: z.B. onClick()
  • Der gleiche Code, wie auf der vorherigen Folie, bloß dass die Punkte
    Sprechender Namespace- und Funktionsname
    JSDoc
    Quellcode-Kommentare
    berücksichtigt sind (Alle fettgedruckten Bestandteile)

    => Lesbarer
  • Problem hier: Es wird direkt error ausgegeben. Bei nicht selbst geschmissenen Exceptions(in doSomething(x) würde dann aber soetwas wie Object object ausgegeben. Grund: error.name und error.messge beinhalten per Definition die entsprechenden Angeben innerhalb eines error-Objekts!
  • Problem hier: Es wird direkt error ausgegeben. Bei nicht selbst geschmissenen Exceptions(in doSomething(x) würde dann aber soetwas wie Object object ausgegeben. Grund: error.name und error.messge beinhalten per Definition die entsprechenden Angeben innerhalb eines error-Objekts!
  • Error-Objekt wird benutzt
  • Hinweis zu „statische ID vergeben“: Bei normalen Page Items entspricht die ID dem Namen
  • APEX und JavaScript - Beispiele, Pattern und Best Practices

    1. 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. 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. 3. 1 Pimp my APEX with JavaScript © OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 3
    4. 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. 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. 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. 7. Showcase © OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 7
    8. 8. 2 JavaScript in APEX © OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 8
    9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. Bad Practice var badFunction = function(x) { doSomething(x); © OPITZ CONSULTING APEX und JavaScript – Beispiele, Pattern und Best Practices GmbH 2012 Seite 20 }
    21. 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. 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. 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. 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. 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. 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. 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. 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

    ×