Dynamik in Apex mit Javascript und JQuery

26 Pages·2011·1.4 MB·German

by  Beatrice Wächter

Vortrag zur DOAG Konferenz 2011
Mehr Dynamik in Apex mit
Javascript und JQuery

Alexander Scholz
its-people
Copyright its-people® 1
Javascript Elemente JQuery
Thema Vorstellung Reports erweitern Abschluss
einbinden aktualisieren verwenden
Ablauf
Thema Vorstellung des Vortragsthemas
Motivation
Besonderheit
Vorstellung Vorstellung des Referenten
Alexander Scholz
its-people®
Javascript
Javascript einbinden
einbinden
Wie kann Javascript in Apex verwendet werden?
Was ist dabei zu beachten?
Elemente
Elemente aktualisieren
aktualisieren
Elemente dynamisch verstecken und anzeigen
Select Listen automatisch aktualisieren
JQuery
JQuery verwenden
verwenden
Modalen Dialog öffnen
Rating Element anzeigen
Reports erweitern Reports erweitern
Reports mit Dynamic Actions aktualisieren
Javascript in interaktiven Reports verwenden
Abschluss Abschluss
Zusammenfassung
Fragen
Copyright its-people® 2
Javascript Elemente JQuery
Thema Vorstellung Reports erweitern Abschluss
einbinden aktualisieren verwenden
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
Javascript Elemente JQuery
Thema Vorstellung Reports erweitern Abschluss
einbinden aktualisieren verwenden
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
Javascript Elemente JQuery
Thema Vorstellung Reports erweitern Abschluss
einbinden aktualisieren verwenden
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
Javascript Elemente JQuery
Thema Vorstellung Reports erweitern Abschluss
einbinden aktualisieren verwenden
its-people® auf einen Blick
Das Team
Unternehmensphilosophie Leistungsangebot Stärken
◼ RITe-Ealxep Geretemne ainlss cUhnatfet rsneelbhsmtäenr diger PlattforOmr &a cAlenw Teencdhunngosloengtiwei cklung se tmgM ◼Kauosm ppreatketniszc, hEexrz Eerllfeanhzru unngd Qualität
◼ Auftritt unter der gemeinsamen cive- ◼Partnerschaft auf Gegenseitigkeit
Marke als mitarbeitende Best Practice ERP reSsae ◼Kundenorientierung auf höchster
Gesellschafter Mediation, Integration, Migration tleR Ebene
◼ Firmenverbund spezialisierter nes -, ◼Intern und extern gerichteter Werte-
◼ CSyonmeprgeiteeenfcfeek Ctee dneterr I T-Experten ArBchuisteinkteusr,s D Ienstiegnll i&g eImncplee m&e DntWieruHn g megatätilau ◼kNoädheex z aulsm G Keusncdheänft sgrundlage
nQ
Unternehmensdaten Business Process Mgmt / SOA aMtk -, ◼Dienstleistungen von Menschen für
e Menschen
◼ Gründung: 2003 Prozessberatung, Architektur & Design, TIjor
Implementierung P ◼Fachlichkeit und Unternehmerschaft
◼ Anzahl der Experten: 70 in Vertrieb und Leistungserbringung

Planung, Konzeption, Implementierung, Support
its-people Frankfurt GmbH its-people ERP Beratungs- GmbH its-people Hochtaunus GmbH
Competence Center "Oracle-Technologie/ Competence-Center “ERP“ Competence-Center “BI & DWH &
IT- Management Services" BPM/SOA"
Büdesheimer Str. 17, 61130 Nidderau Lyoner Str. 44-48, 60528 Frankfurt am Main Lyoner Straße 44-48, 60528 Frankfurt am Main
Tel.: [phone] - 0 Tel.: [phone] Tel: [phone]
E-Mail: [email protected] E-Mail: [email protected] E-Mail: [email protected]

Gemeinsame Besuchsadresse: Lyoner Str. 44-48, 60528 Frankfurt am Main. 8. OG
Copyright its-people® 6
Javascript Elemente JQuery
Thema Vorstellung Reports erweitern Abschluss
einbinden aktualisieren verwenden
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
Javascript Elemente JQuery
Thema Vorstellung Reports erweitern Abschluss
einbinden aktualisieren verwenden
Vergleich der unterschiedlichen Methoden
HTTP Server Statische Datei Apex Seite
Referenzierung <script <script <script>
src="/i/mehr_dynamik.js"> src="#WORKSPACE_IMAGES# function
</script> mehr_dynamik.js> schreibe()
<script> {alert("Hallo");}
</script>
Verfügbarkeit beim Direkt verfügbar Muss über Apex geladen Wird beim
Seitenaufbau werden Seitenaufbau
geladen
Quellcode einsehbar Nein Nein Ja
Entwickler benötigt Zugriff Ja Nein Nein
auf Webserver
Änderungen sofort Nein Nein Ja
möglich
Portierung auf anderen Dateien müssen kopiert Durch Export und Import in Apex Durch Export und
Server werden Import in Apex
Längenbegrenzung Nein Nein 4000 / 32000
Zeichen
Copyright its-people® 8
Javascript Elemente JQuery
Thema Vorstellung Reports erweitern Abschluss
einbinden aktualisieren verwenden
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
Javascript Elemente JQuery
Thema Vorstellung Reports erweitern Abschluss
einbinden aktualisieren verwenden
Elemente verstecken und anzeigen (Beispiel)
Copyright its-people® 10