apex und javascript - doag.org fileggf. mit kennzeichnung des datentypen da javascript nicht...
Post on 06-Aug-2019
213 Views
Preview:
TRANSCRIPT
© 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
top related