Mehr Dynamik in Apex mit Javascript und JQuery
Werbung
Vortrag zur DOAG Konferenz 2011 Mehr Dynamik in Apex mit Javascript und JQuery Alexander Scholz its-people Copyright its-people® 1 Vorstellung Thema Elemente aktualisieren Javascript einbinden JQuery verwenden Reports erweitern Abschluss Ablauf Thema Vorstellung des Vortragsthemas Motivation Besonderheit Vorstellung Vorstellung des Referenten Alexander Scholz its-people® Javascript einbinden Javascript einbinden Elemente aktualisieren Elemente aktualisieren JQuery verwenden JQuery verwenden Reports erweitern Reports erweitern Wie kann Javascript in Apex verwendet werden? Was ist dabei zu beachten? Elemente dynamisch verstecken und anzeigen Select Listen automatisch aktualisieren Modalen Dialog öffnen Rating Element anzeigen Reports mit Dynamic Actions aktualisieren Javascript in interaktiven Reports verwenden Abschluss Abschluss Zusammenfassung Fragen Copyright its-people® 2 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Motivation ◼ Intensive Nutzung von JQuery in meinen Projekten ◼ Dynamische Seitendarstellung ist "State of the Art" ◼ wenig Dokumentation zum Einsatz von JQuery mit Apex vorhanden ◼ Einbindung beliebiger Darstellungselemente oder Javascriptbibliotheken in Apex Das ist doch einen Vortrag wert Copyright its-people® 3 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Besonderheit ◼ Darstellung verschiedener Einsatzmöglichkeiten von JQuery in Apex ◼ Die Beispiele sind voneinander unabhängig haben unterschiedliche Komplexität beschränken sich auf das wesentliche Copyright its-people® 4 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Vorstellung des Referenten ◼ Alexander Scholz ◼ Seit 6 Jahren selbständiger Berater ◼ Gesellschafter bei its-people ◼ Themenschwerpunkte: Apex, PL/SQL, Geodaten ◼ Wiesbaden ◼ 37 Jahre ◼ Verheiratet, 1 Kind Copyright its-people® 5 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss its-people® auf einen Blick Das Team ◼ ◼ ◼ Reale Gemeinschaft selbständiger IT-Experten als Unternehmer Auftritt unter der gemeinsamen Marke als mitarbeitende Gesellschafter Firmenverbund spezialisierter Competence Center Synergieeffekte der IT-Experten Oracle Technologie Plattform & Anwendungsentwicklung Best Practice ERP Mediation, Integration, Migration Business Intelligence & DWH Architektur, Design & Implementierung Unternehmensdaten ◼ ◼ Gründung: 2003 Anzahl der Experten: 70 Business Process Mgmt / SOA Prozessberatung, Architektur & Design, Implementierung Stärken IT Management Services ◼ Leistungsangebot Projekt-, Qualitäts-, Release-Mgmt Unternehmensphilosophie ◼ Kompetenz, Exzellenz und Qualität aus praktischer Erfahrung ◼ Partnerschaft auf Gegenseitigkeit ◼ Kundenorientierung auf höchster Ebene ◼ Intern und extern gerichteter Wertekodex als Geschäftsgrundlage ◼ Nähe zum Kunden ◼ Dienstleistungen von Menschen für Menschen ◼ Fachlichkeit und Unternehmerschaft in Vertrieb und Leistungserbringung Planung, Konzeption, Implementierung, Support its-people Frankfurt GmbH Competence Center "Oracle-Technologie/ IT- Management Services" its-people ERP Beratungs- GmbH Competence-Center “ERP“ its-people Hochtaunus GmbH Competence-Center “BI & DWH & BPM/SOA" Büdesheimer Str. 17, 61130 Nidderau Tel.: +49 6187 605 999 - 0 E-Mail: [email protected] Lyoner Str. 44-48, 60528 Frankfurt am Main Tel.: +49 69 2475198-0 E-Mail: [email protected] Lyoner Straße 44-48, 60528 Frankfurt am Main Tel: +49 69 247521-00 E-Mail: [email protected] Gemeinsame Besuchsadresse: Lyoner Str. 44-48, 60528 Frankfurt am Main. 8. OG Copyright its-people® 6 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Methoden ◼ Javascript kann auf die folgenden Arten in Apex eingebunden werden Kopieren der Javascript Datei in das Image Verzeichnis des HTTP Servers Hochladen der Javascript Datei als statische Datei in Apex Eintragen des Quellcodes direkt auf einer Apex Seite Copyright its-people® 7 Thema Javascript einbinden Vorstellung Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Vergleich der unterschiedlichen Methoden HTTP Server Statische Datei Apex Seite Referenzierung <script src="/i/mehr_dynamik.js"> </script> <script src="#WORKSPACE_IMAGES# mehr_dynamik.js> <script> <script> function schreibe() {alert("Hallo");} </script> Verfügbarkeit beim Seitenaufbau Direkt verfügbar Muss über Apex geladen werden Wird beim Seitenaufbau geladen Quellcode einsehbar Nein Nein Ja Entwickler benötigt Zugriff auf Webserver Ja Nein Nein Änderungen sofort möglich Nein Nein Ja Portierung auf anderen Server Dateien müssen kopiert werden Durch Export und Import in Apex Durch Export und Import in Apex Längenbegrenzung Nein Nein 4000 / 32000 Zeichen Copyright its-people® 8 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Elemente verstecken und anzeigen ◼ Ziel: Eine Region soll mit Hilfe eines onmouseover Events angezeigt oder versteckt werden. ◼ Vorgehensweise: Die Region bekommt eine statische ID zugewiesen hier im Beispiel registrieren Die Region wird beim Seitenaufbau zunächst versteckt. style="display:none" in Region Attribute eintragen Einem Item in einer anderen Region ein onmouseover Event zuweisen onmouseover="anzeigen();" in HTML Form Element Attributes eintragen Die Javascript Funktion anzeigen definieren function anzeigen(){ document.getElementById("registrieren").style.display="inline"; } Copyright its-people® 9 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Elemente verstecken und anzeigen (Beispiel) Copyright its-people® 10 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Select Listen aktualisieren ◼ Ziel: Die Werte einer Selectliste werden in Abhängigkeit der Auswahl aus einer anderen Selectliste angepasst ◼ Besonderheiten: In Apex 3 nur über Javascript und ondemand Prozess möglich In Apex 4 Standardfunktionalität ◼ Vorgehensweise: Bei der zu aktualisierenden Selectliste in das Feld Cascading LOV Parent Items(s) den Namen des übergeordneten Items eintragen Copyright its-people® 11 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Select Listen aktualisieren (Beispiel) Copyright its-people® 12 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Select Listen aktualisieren (Beispiel) Copyright its-people® 13 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Modalen Dialog einbauen ◼ Ziel: Durch Drücken eines Buttons wird ein modaler Dialog erstellt. ◼ Besonderheiten: Modale Dialoge gehören zum Standard von JQuery und sind daher auch Bestandteil von Apex 4. Eine zusätzliche Einbindung von JQuery in Apex ist nicht notwendig. Copyright its-people® 14 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Modalen Dialog einbauen ◼ Vorgehensweise: In einer HTML Region im Feld Region Source ein DIV Tag erstellen <div id="modal"></div> In einem Button Attributes das onclick Event definieren onclick="open_modal();" Im Template des Buttons muss #BUTTON_ATTRIBUTES# eingetragen sein Die Javascript Funktion open_modal() muss auf der Seite verfügbar sein function open_modal(){ $("#modal").html('<div id="in_modal">Dies ist ein modales Dialogfenster</div>'); $("#modal").dialog({modal:true}); } Copyright its-people® 15 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Modalen Dialog einbauen (Beispiel) Copyright its-people® 16 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Rating Element erzeugen ◼ Ziel: Anzeige eines Radio oder Selectlist Items als Rating Star Element ◼ Besonderheiten: Rating Star ist ein Plugin für JQuery und muss in Apex eingebunden werden ◼ Vorgehensweise: Javascript, Style Definitionen und Bilder des Plugin auf den Webserver kopieren oder in Apex hochladen. Style Definitionen müssen bezüglich der Image URL angepasst werden Radio Item erstellen und in DIV Element durch Pre und Post Text einbinden Pre Element Text: <div id="stars_wrapper"> Post Element Text: </div> Bei Laden der Seite das Plugin aufrufen <script> $(document).ready(function(){ $("#stars_wrapper“).stars();}) </script> Copyright its-people® 17 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Rating Element erzeugen (Beispiel) Copyright its-people® 18 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Reports automatisch mit Dynamic Actions aktualisieren ◼ Ziel: Automatische Aktualisierung eines Reports bei Änderung einer Select Liste. ◼ Vorgehensweise: Selectlist Item erstellen und in HTML Form Element Attributes ein onchange Event definieren onchange="get_select_list_wert(this);" Hidden Item erstellen Per Javascript den Wert des ausgewählten Selectlist Eintrages in das Hidden Item kopieren und ein Change Event für das Hidden Item auslösen function get_selectlist_wert(elem){ var company_id=elem.options[elem.selectedIndex].value; alert("ausgewählte Firmennummer: "+company_id); $("#P40_FIRMEN_NR").val(company_id); $("#P40_FIRMEN_NR").change(); } Copyright its-people® 19 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Reports automatisch mit Dynamic Actions aktualisieren ◼ Vorgehensweise (Fortsetzung): Dynamic Action erstellen, die auf das Change Event reagiert. Die Dynamic Action besteht aus 2 Aktionen 1. Eintragen des ausgewählten Wertes in die Session 2. Aktualisieren des Reports Das Eintragen des Wertes in die Session erfolgt über einen leeren PL/SQL Block, bei dem in das Feld Page Item to Submit der Name des Hidden Items eingetragen wird. Copyright its-people® 20 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Reports automatisch mit Dynamic Actions aktualisieren (Beispiel) Copyright its-people® 21 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Javascript in Interaktiven Reports verwenden ◼ Ziel: Ein interaktiver Report enthält eine Spalte, die bei einem onmouseover Event weitere Details des Datensatzes anzeigt. ◼ Vorgehensweise: Die SQL Abfrage wird um eine Spalte ergänzt, die als String ein HTML DIV Tag erzeugt. Diesem DIV Tag wird als ID der Primärschlüsselwert zugeordnet. SELECT vorname, nachname, '<div id="f01_'||to_char(ansprechpartner_id)||'" onmouseover="zeige_details(this)">mehr</div>' Details FROM firmen_kontakte Damit die Spalte im Report nicht als String, sondern als HTML angezeigt wird, muss der Display Type für die Spalte auf Standard Report Column eingestellt werden. Copyright its-people® 22 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Javascript in Interaktiven Reports verwenden ◼ Vorgehensweise (Fortsetzung): Aktionen wie Filtern oder Sortieren für die HTML Spalte ausschalten Javascript Funktion einbinden, die bei onmouseover aufgerufen wird function zeige_details(elem){ id=elem.getAttribute("id",0); startpos=id.indexOf("_")+1; alert("User ID:"+id.substr(startpos)); } Copyright its-people® 23 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Javascript in Interaktiven Reports verwenden (Beispiel) Copyright its-people® 24 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Zusammenfassung ◼ Javascript kann durch verschiedene Methoden in Apex eingebunden werden ◼ Elemente können dynamisch, das heißt ohne einen erneuten Seitenaufbau versteckt, angezeigt oder aktualisiert werden ◼ JQuery und JQuery Plugins können in Apex verwendet werden ◼ Durch Dynamic Actions können Javascript und PL/SQL kombiniert werden ◼ Reports können durch Javascript ergänzt werden ◼ Auch komplexe Anwendungslogik kann in Javascript ausgeführt werden ◼ Alles was mit Javascript möglich ist, kann in Apex integriert werden Copyright its-people® 25 Thema Vorstellung Javascript einbinden Elemente aktualisieren JQuery verwenden Reports erweitern Abschluss Fragen Alexander Scholz its-people Hochtaunus GmbH Lyoner Straße 44-48 60528 Frankfurt am Main Tel: 069-24752100 [email protected] www.its-people.de Copyright its-people® 26
