JavaScript in Oracle Application Express (berufliche

JavaScript in Oracle Application Express
(berufliche Tätigkeitsbeschreibung)
Anna-Pia Lohfink
21. August 2009
Technische Facharbeit
Berufsbildende Schule 1 Gewerbe und Technik Mainz
Klasse FI07a
Ausbildender Betrieb
up to data professional services
Inhalt
1 Einleitung.......................................................................................................................2
2 JavaScript in ApEx.........................................................................................................2
2.1 Möglichkeiten und Vorteile von JavaScript in ApEx...............................................2
2.2 ApEx + JavaScript = AJAX?...................................................................................3
3 JavaScript Grundlagen..................................................................................................3
3.1 Übersicht über die Sprache....................................................................................3
3.2 Benötigte Befehle...................................................................................................4
3.2.1 JavaScript Bereiche Definieren......................................................................4
3.2.2 Funktionen und Variablen...............................................................................5
3.2.3 Event-Handler.................................................................................................5
3.2.4 Werte von Elementen einlesen und setzen....................................................6
3.2.5 Bedingungen...................................................................................................7
3.2.6 Öffnen eines PopUps......................................................................................7
4 Beispiele........................................................................................................................7
4.1 Elemente auf Basis einer Radiogroup anzeigen....................................................7
4.1.1 Aufbau der Seite.............................................................................................7
4.1.2 Steuerung über die Radiogroup......................................................................8
4.1.2.1 Wo kommt der JavaScript Code hin?......................................................8
4.1.2.2 Befehle.....................................................................................................8
4.1.2.3 Test des eingefügten Codes....................................................................9
4.1.3 Der onLoad Prozess.......................................................................................9
4.1.3.1 Wo kommt der JavaScript Code hin?......................................................9
4.1.3.2 Befehle...................................................................................................10
4.1.3.3 Test des eingefügten Codes..................................................................10
4.2 Automatische Berechnung...................................................................................11
4.2.1 Aufbau der Seite...........................................................................................11
4.2.2 Funktion zum Berechnen..............................................................................11
4.2.2.1 Befehle...................................................................................................11
4.2.2.2 Test des eingefügten Codes..................................................................12
4.3 PopUps.................................................................................................................12
4.3.1 Aufbau der Seiten.........................................................................................12
4.3.2 Aufruf des PopUps........................................................................................12
4.3.2.1 Befehle...................................................................................................12
4.3.2.2 Test des eingefügten Codes..................................................................13
5 Zeit und Kostenplan.....................................................................................................14
5.1 Zeitplan.................................................................................................................14
5.2 Kostenplan............................................................................................................14
6 Zusammenfassung......................................................................................................15
7 Quellenangaben..........................................................................................................16
7.1 Tabellen – und Bilderquellen................................................................................16
7.2 Textquellen...........................................................................................................16
8 Anhang.........................................................................................................................17
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 1 von 17
1 Einleitung
Der folgende Text behandelt verschiedene Möglichkeiten, von dem Einbau von
JavaScript-Code in eine ApEx Anwendung zu profitieren. Ziel des Textes ist, dass ApEx
Anwender mit PL/SQL- aber ohne JavaScript-Erfahrung die gegebenen Beispiele
nachvollziehen und nach dem Lesen in eigenen Applikationen anwenden können.
Zunächst werden verschiedene Möglichkeiten, JavaScript in ApEx zu verwenden
erläutert und die Frage behandelt, ob JavaScript-Code in ApEx bereits AJAX ist.
Anschließend werden dem Leser ausgewählte Grundlagen der Sprache JavaScript
vermittelt. Auf Basis dieser Grundlagen folgen drei Beispiele, die im Detail und mit CodeBeispielen die Einbettung von JavaScript-Code in eine ApEx Anwendung erklären.
Am Ende des Textes findet sich eine Sammlung nützlicher Links, um das in diesem
Text erlangte Wissen zu erweitern und auszubauen.
Vereinbarung:
Quellcode und Syntax für Quellcode befindet sich immer in solchen Kästen.
/*Kommentare innerhalb des Quellcodes sind grün*/
//und mit den in JavaScript gültigen Kommentarzeichen markiert
2 JavaScript in ApEx
ApEx-Applikationen als datenbankgestützte Web-Anwendungen bestehen auf der Seite
des Anwenders aus HTML und JavaScript-Code, der von dem Browser des Anwenders
interpretiert wird. Aus diesem Grund ist es möglich, an vielen Stellen in einer Applikation
eigenen JavaScript-Code zu hinterlegen, der in den generierten Quellcode der Seite
eingebettet und ebenfalls interpretiert wird.
2.1 Möglichkeiten und Vorteile von JavaScript in ApEx
Natürlich ist es in den meisten Fällen möglich, eine ApEx-Applikation ohne selbst
eingebundenen JavaScript-Code zu erstellen, die den Anforderungen gerecht wird.
Allerdings ist es in vielen Fällen möglich, eine solche „Standard-Applikation“ mit kurzen
JavaScript-Blöcken wesentlich anwenderfreundlicher zu gestalten. Beispielsweise
häufiges Nachladen (Submit) der Seite kann mit JavaScript verhindert werden, um
Wartezeiten deutlich zu verkürzen. Die Seite wird zu einer dynamischen Seite, deren
Code nicht nur dynamisch generiert wird, sondern die noch auf dem Bildschirm des
Anwenders ihr Aussehen und Verhalten ändern kann, ohne dass erneut eine Seite vom
Server angefordert und geladen werden muss. Mit diesem Schritt von einer statischen
zu einer dynamischen Seite eröffnen sich zahlreiche Möglichkeiten, die auf einer
statischen Seite nicht bestehen.
Berechnungen können direkt auf dem Computer des Nutzers durchgeführt werden, so
dass Ergebnisse bereits beim Ändern einer Zahl erscheinen, nicht erst nach einem
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 2 von 17
Druck auf einen Button und warten auf das Neuladen der Seite. Mit Hilfe von PopUps ist
es möglich die Seite anwenderfreundlicher und übersichtlicher zu gestalten. Zusätzlich
ist es möglich, Regionen und Elemente auf der Basis ausgewählter oder eingegebener
Werte darzustellen, ohne die Seite neu zu laden. Dies gibt der Applikation eine
wesentlich höhere Flexibilität. Es ist möglich, mehrfach zwischen verschiedenen
Optionen hin und her zu schalten, um eine Wahl zu treffen, ohne dabei ständig mit
einem Neu-Aufbau der Seite konfrontiert zu werden, der mit manchen NetzwerkVerbindungen und Servern sehr zeitaufwändig sein kann.
2.2 ApEx + JavaScript = AJAX?
Auf Basis der Veröffentlichung des Artikels „ApEx + JavaScript = AJAX“ von Denes
Kubicek am 26. April 2007 in seinem ApEx Blog [1] gab es einige Diskussionen zu dem
Thema AJAX in ApEx. Als direkte Reaktion auf Denes Kubiceks These wurde in
„Laurent's Weblog“ der Artikel „What the fuck is AJAX and ApEx“ veröffentlicht, der ApEx
als eine Plattform darstellt, auf der es unmöglich sei effizient mit AJAX zu arbeiten:
„AJAX in APEX is possible but costs a lot, and we lose significantly in productivity.“ [2]
Besonders wurde kritisiert, dass Denes Kubicek seinem Artikel Beispiele hinterlegte, die
zwar auf in ApEx eingebundenem JavaScript-Code basieren, aber nicht auf dem für
AJAX typischen XMLHttpRequest-Objekt. Somit ist die Definition von AJAX als
„Asynchronous JavaScript and XML“ nicht erfüllt.
Dass es entgegen der Aussage in „Laurent's Weblog“ möglich ist, AJAX effektiv in ApEx
zu nutzen, wurde unter anderem von der ApEx Gemeinschaft in zahlreichen Anleitungen
und Veröffentlichungen dargelegt und bewiesen. Es sind also nicht alle Anwendungen
von JavaScript in ApEx gleich AJAX, aber es ist möglich AJAX in ApEx zu nutzen, indem
man bestimmten JavaScript-Code in die Applikation einbettet.
Im Anhang dieses Textes befinden sich für interessierte Leser Adressen einiger
Webseiten die den Einsatz von AJAX in ApEx erläutern.
3 JavaScript Grundlagen
In diesem Kapitel werden die Sprache JavaScript vorgestellt und Grundlagen für die
folgenden Beispiele vermittelt.
3.1 Übersicht über die Sprache
Im Gegensatz zu vielen anderen Skript-Sprachen wird JavaScript vorwiegend clientseitig
eingesetzt. Speziell für die Einbettung in HTML entwickelt, wird JavaScript von jedem
modernen Browser verstanden.
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 3 von 17
Da JavaScript-Code sowohl in separaten Dateien gespeichert als auch direkt in dem
Code einer HTML Seite eingebettet werden kann, bietet sich JavaScript für die
Benutzung innerhalb einer Oracle Application Express-Anwendung an. An vielen
verschiedenen Stellen in der Anwendung kann direkt Einfluss auf den Inhalt des HTMLCodes einer Seite genommen und so JavaScript-Code eingebettet werden.
Die Sprache JavaScipt ist eine objektorientierte Sprache. Allerdings ist es möglich
sowohl objektorientiert als auch prozedural mit JavaScript zu programmieren. Da
JavaScript direkt auf dem Computer desjenigen läuft, der sich die Internetseite ansieht,
wurde es in vielen Möglichkeiten, besonders betreffend das Öffnen, Lesen und
Verändern von Dateien, wesentlich eingeschränkt. Dies verhindert, dass JavaScriptCode auf fremde Computer zugreifen und diese eventuell beschädigen kann.
Obwohl es durch JavaScript viele neue Möglichkeiten für eine Website gibt, sollte man
es mit Vorsicht benutzen. Es gibt kaum nervenaufreibendere Internetseiten als die, die
schon beim Start der Seite drei PopUps öffnen.
3.2 Benötigte Befehle
In diesem Abschnitt werden einige JavaScript-Befehle, die in den folgenden Beispielen
benötigt werden, erläutert. Dieser Text ist kein Tutorial für JavaScript. Links zu
Internetseiten, die sich tiefergehend mit der Sprache beschäftigen, sind im Anhang
angegeben.
Im Gegensatz zu PL/SQL sind alle Befehle in JavaScript Case-sensitive, auch
übergebene Namen von Elementen müssen genau so geschrieben werden, wie sie in
der Applikation vorliegen. Wie in PL/SQL wird in JavaScript jeder Befehl mit einem
Semikolon abgeschlossen.
3.2.1 JavaScript Bereiche definieren
JavaScript-Code, der in eine HTML Datei eingebunden wird, muss als solcher gekennzeichnet werden um von dem Browser korrekt interpretiert werden zu können. Hierzu
wird ein spezieller Bereich definiert. Es ist zwar nicht vorgeschrieben, wo sich dieser
Bereich befinden muss, allerdings ist es ein ungeschriebenes Gesetz, dass er in dem
HTML Header zu finden ist. Dies stellt sicher, dass der Code zu dem Zeitpunkt, zu dem
er ausgeführt werden soll bereits von dem Browser eingelesen wurde.
JavaScript Bereiche werden wie folgt definiert:
<script type="text/javascript">
//JavaScript Code
</script>
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 4 von 17
3.2.2 Funktionen und Variablen
Wie in PL/SQL gibt es in JavaScript Funktionen, denen Werte übergeben werden
können und die Werte zurückliefern. Im Gegensatz zu PL/SQL muss eine JavaScript
Funktion keine „return“-Anweisung enthalten. Ist keine „return“-Anweisung vorhanden,
gibt die Funktion automatisch ein „true“ bzw. ein „false“ im Fehlerfall zurück.
Entsprechend PL/SQL-Funktionen werden übergebene Parameter in Klammern hinter
dem Funktionsnamen angegeben und beim Aufruf auch entsprechend übergeben.
Allgemeine Syntax für die Deklaration von Funktionen:
Function <Funktionsname> ([<Parameter1>,<Parameter2>,...])
{
[return(<Rückgabewert>)]
}
JavaScript-Code in der HTML-Datei, der außerhalb einer Funktion steht wird direkt beim
Laden der Seite ausgeführt und kann danach nicht mehr referenziert werden.
Im Gegensatz zu PL/SQL sind Variablen in JavaScript wesentlich freier. Als Variablentyp
gibt es nur nummerische und nicht-nummerische Variablen. Der Typ einer Variablen
wird auf Basis der zugewiesenen Werte festgelegt und muss in der Deklaration nicht
angegeben werden. Variablen kann bereits in der Deklaration ein Wert zugewiesen
werden, dies ist allerdings nicht notwendig.
Beispiel für die Deklaration von Variablen:
Var nummer;
Var nonNummer = „Wert“; //Strings in doppelten Anführungszeichen
nummer = 3;
NonNummer = „3“;
Allgemeine Syntax für den Aufruf einer Funktion:
[Var <Variablenname> = ]<Funktionsname>([<Parameter1>,<Parameter2>,...]);
3.2.3 Event-Handler
Eine weitere Möglichkeit JavaScript-Code in einer HTML-Seite einzubetten sind EventHandler. Mit Hilfe dieser Handler ist es Möglich den Code direkt an Elemente zu hängen,
ohne dass ein spezieller JavaScript Bereich dafür definiert werden muss.
Event-Handler sind dafür zuständig den JavaScript-Code, der ihnen folgt, zu einem
bestimmten Zeitpunkt auszuführen, also abhängig von „Events“.
Beispiel für die Benutzung eines Event-Handlers:
onLoad = „Befehl1; Befehl2; “;
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 5 von 17
Der Event-Handler „onLoad“ verursacht, dass Befehl1 und Befehl2 direkt beim Laden
(onLoad) des Elements, an das dieser Code gehängt wurde, aufgerufen werden. Die
Befehle selbst werden jeweils mit Semikolon abgeschlossen und werden als StringArgument an den Event-Handler übergeben. Dieser gesamte Befehl wird ebenfalls mit
einem Semikolon abgeschlossen.
Da nicht alle Events bei allen Elementen auftreten ist der Einsatz von Event-Handlern
von Element zu Element unterschiedlich eingeschränkt (Tabelle 1).
Event-Handler
onBlur
onChange
onLoad
Aktivierung
Einsatzmöglichkeiten
Beim Verlassen des Elements mit dem
Buttons, Auswahllisten,
Cursor (z.B. Klicken außerhalb der
Textboxen, Textfelder
Textbox nachdem dort etwas eingegeben
wurde)
Beim Verändern des Wertes eines
Elements
Auswahllisten, Textboxen,
Textfelder
Beim Laden des Elements (beim Aufruf
der Seite und bei einem Neuladen der
Seite vom Server)
Alle Elemente, auch im
Body der HTML-Seite
Tabelle 1: Übersicht über einige Event-Handler
3.2.4 Werte von Elementen einlesen und setzen
Um auf Elemente innerhalb der HTML-Seite zugreifen zu können stellt JavaScript einen
speziellen Syntax zur Verfügung. Da JavaScript eine objektorientierte Sprache ist, hat
jedes Element auf der Seite ein Objekt in JavaScript als Entsprechung. Mit Hilfe dieser
Objekte ist es möglich, bestimmte Attribute von Elementen auszulesen und zu
verändern.
Beispiel für die Manipulation des Wertes einer Textbox mit Hilfe von JavaScript:
<Variable> = document.getElementById('<PX_TEXTBOX>').value;
//die Variable enthält nun den aktuellen Wert der Textbox
document.getElementById('<PX_TEXTBOX>').value = <Variable> * 5
//die Textbox enthält nun den eingegebenen Wert mal 5
Mit diesem Code wird der Wert der Textbox erst gelesen und anschließend mit fünf
multipliziert. Hätte in der Textbox zu Anfang 5 gestanden stünde dort nach dem Aufruf
dieses Codes 25.
Dieses Statement kann für jedes Element auf der Seite zum Auslesen jedes Attributes
des Elementes angepasst werden. Ein Beispiel für das Auslesen anderer Attribute ist in
Beispiel 1 anhand von dem ausgewählten Wert einer Checkbox gegeben.
Zusätzlich zu den standard-JavaScript Befehlen stehen in ApEx zusätzliche Befehle zur
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 6 von 17
Verfügung. Ein Link zu einer Dokumentation dieser Befehle findet sich im Anhang .
3.2.5 Bedingungen
Wie in PL/SQL gibt es natürlich auch in JavaScript Bedingungen. Der „if“ und der „else“
Block sind jeweils mit geschweiften Klammern begrenzt, die Bedingung steht in runden
Klammern. JavaScript bietet keinen speziellen Syntax für „else if“ und es wird kein „then“
benötigt. Außer dem „gleich“ sind die Vergleichsoperatoren die Selben wie in PL/SQL.
Allgemeiner Syntax für Bedingungen in JavaScript:
if (a != b) {
Befehl1;
} else {
If (a == b){
Befehl2;
}
}
//a ungleich b
//a gleich b
3.2.6 Öffnen eines PopUps
Ein PopUp kann mit dem folgenden Befehl geöffnet werden:
w = open(Url,"Titel","width=Breite,height=Höhe");
Dieser Befehl öffnet die Seite, die in der URL angegeben ist. Das PopUp wird den Titel
der in „Titel“ angegeben ist tragen. Alle weiteren Zusätze sind optional. Allerdings hat
das PopUp ohne eine zusätzliche Angabe von Höhe und Breite in Pixeln die selbe
Größe wie das Browserfenster. Es gibt noch einige weitere Optionen, die das Aussehen
des geöffneten Fensters beeinflussen. Eine Auflistung ist in der im Anhang
angegebenen JavaScript-Dokumentation zu finden.
4 Beispiele
In Folge werden drei Beispiele für die Einbindung von JavaScript-Code in ApEx
gegeben. Die Beispiele sind nur ein kleiner Teil aus einem großen Anwendungsfeld und
zeigen verschiedene, häufig genutzte und bei Endnutzern beliebte Funktionalitäten von
Applikationen.
4.1 Elemente auf Basis einer Radiogroup anzeigen
Dieses Beispiel beschäftigt sich mit der Möglichkeit, Elemente abhängig von gewählten
Werten in Radiogroups anzuzeigen, ohne die Seite neu laden zu müssen.
4.1.1 Aufbau der Seite
Für das folgende Beispiel wird eine Seite mit unbedingtem Branch auf sich selbst und
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 7 von 17
einer leeren HTML Region benötigt.
Außerdem werden die folgenden Elemente genutzt:
●
eine Auswahlliste mit beliebig hinterlegten Daten (ohne Submit),
●
eine Radiogroup (ohne Submit) mit der statischen Werteliste
STATIC2:oben;1,unten;0
mit dem Defaultwert 1 und ohne Null Option,
●
eine Textbox (ohne Submit),
●
ein Button ohne hinterlegte Befehle.
Werden die Elemente in der angegebenen Reihenfolge erstellt, so sollte der Aufbau der
Region dem in Abbildung 1 ähneln.
Abb.1: Für Beispiel 4.1 benötigter Aufbau
4.1.2 Steuerung über die Radiogroup
Da die Radiogroup kein Neuladen verursacht (ohne Submit) ist es nicht möglich, die
Anzeige der Auswahlliste und der Textbox über einen Seiten-Prozess oder Anzeigebedingungen zu steuern. Der Code, der die Anzeige der Elemente regelt, muss also
nicht bei einem Submit aufgerufen werden, sondern sobald der Wert der Radiogroup
verändert wird.
4.1.2.1 Wo kommt der JavaScript-Code hin?
Wie bereits erwähnt, können die Elemente nicht von einen Seitenprozess oder eine
Anzeige-Bedingung ausgeblendet werden. Der Code muss schon bei dem ersten
Aufrufen der Seite in dem HTML Code, den der Browser des Benutzers erhält,
eingebettet sein und ohne ein Submit ausgeführt werden. Um dies zu erreichen, wird
JavaScript-Code in den HTML Form Element Attributen in dem Bereich „Element“ des
Elementes Radiogroup eingefügt.
4.1.2.2 Befehle
Damit der hinterlegte Code aufgerufen wird, sobald der Wert der Radiogroup von dem
Benutzer geändert wird, wird der Event-Handler onChange genutzt (siehe Kapitel 3.2.3).
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 8 von 17
Außerdem wird die Funktion $f_Show_On_Value_Item_Row genutzt, um das gesamte
Element abhängig von den gewählten Werten anzuzeigen und auszublenden.
Folgenden JavaScript-Code wird in die HTML Form Element Attribute eingetragen :
onChange = "$f_Show_On_Value_Item_Row(this,'<PX_TEXTBOX>',0);
$f_Show_On_Value_Item_Row(this,'<PX_AUSWAHLLISTE>',1);";
Wobei für die Felder <PX_Textbox> und <PX_Auswahlliste> die entsprechenden Namen
der beiden Elemente eingesetzt werden. Die Textbox und die Auswahlliste müssen mit
ihrem exakten Namen und komplett in Großbuchstaben referenziert werden. (siehe
Kapitel 3.1)
Das Textfeld wird durch diesen Code nur angezeigt, wenn die Radiogroup, die mit „this“
referenziert wird, den Wert 0 hat, also „unten“ ausgewählt wurde. Die Auswahlliste wird
dementsprechend angezeigt, wenn der Wert „oben“ ausgewählt wurde.
4.1.2.3 Test des eingefügten Codes
Nun wird der eingefügte Code getestet, indem die Applikation ausgeführt wird.
Schon direkt nach dem Starten wird der erste Fehler deutlich: egal auf welchem Wert die
Radiogroup zu Beginn steht, es werden immer sowohl das Textfeld als auch die
Auswahlliste angezeigt. Der in der Radiogroup hinterlegte Code ist zu diesem Zeitpunkt
noch nicht aufgerufen worden, da der Wert der Radiogroup noch nie verändert wurde.
Durch ein Ändern des Wertes der Radiogroup zeigt sich, dass der Code, sobald er
aufgerufen wird, wie erwartet funktioniert.
Ein weiteres Problem zeigt sich, wenn man auf den Button klickt. Da die Seite komplett
neu vom Server geladen wird, ist sie wieder in dem Zustand, in dem sie zu Beginn war.
Das heißt es werden wieder beide Elemente angezeigt, unabhängig von dem aktuellen
Wert der Radiogroup.
4.1.3 Der onLoad Prozess
Um zu verhindern, dass bei jedem Laden der Seite beide Elemente angezeigt werden,
muss eine JavaScript-Funktion dem HTML Code mitgegeben werden, die bei jedem
Laden der Seite das entsprechende Element versteckt und zwar abhängig von dem
aktuellen Wert der Radiogroup.
4.1.3.1 Wo kommt der JavaScript-Code hin?
Da der JavaScript-Code beim Neu-Laden der gesamten Seite unabhängig von
Elementen ausgeführt werden soll wird er in den HTML Header Bereich der Seite
geschrieben. Mit Hilfe des onLoad Evenhandlers kann er aus dem HTML Body der Seite
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 9 von 17
aufgerufen werden (siehe Kapitel 3.2.3, Tabelle 1).
4.1.3.2 Befehle
Da der JavaScript-Code außerhalb des HTML Bodys stehen wird (im HTML Header)
wird ein JavaScript Bereich mit einer Funktion benötigt (siehe Kapitel 3.2.1).
Der folgende Code wird in den HTML Header der Seite eingetragen:
<script language="JavaScript" type="text/javascript"> //Anfang Javascript Bereich
function hide () { //Anfang der Funktion „hide“
if (document.getElementById('<PX_RADIOGROUP>')
.getElementsByTagName('input')[0].checked == true)
//Auslesen des ersten Wertes der Radiogroup.
{ //ist der erste Wert (also „oben“, bzw. 1) ausgewählt:
html_HideItemRow('<PX_TEXTBOX>'); //die Textbox wird ausgeblendet
}
else
{ /*ist der erste Wert nicht ausgewählt, also zwangsläufig der
zweite (also „unten“, bzw. 2):*/
html_HideItemRow('<PX_AUSWAHLLISTE>'); //die Auswahlliste wird ausgeblendet
}
} //Endeder Funktion „hide“
</script> //Ende Javascript Bereich
Auch hier werden die Felder <PX_Textbox> und <PX_Auswahlliste> durch die
entsprechenden Namen der Elemente in Großbuchstaben ersetzt.
Diese Funktion würde jetzt allerdings noch nicht ausgeführt werden da sie noch nicht
aufgerufen wird. Der Aufruf für die Funktion wird die HTML Body Attributes der Seite
eingetragen:
OnLoad = „hide()“
Zusätzlich zu der Eingabe der Befehle ist es notwendig, das automatische Fokussieren
des Mauszeigers auf der Seite auszuschalten da diese Funktion (die selbst ein onLoad
Prozess in JavaScript ist) mit einem zusätzlich eingegebenen onLoad Prozess in Konflikt
tritt. Dies ist in den Display Attributen der Seite möglich.
4.1.3.3 Test des eingefügten Codes
Der hinzugefügte Code wird wieder durch ausführen der Applikation getestet.
Gleich zu beginn wird deutlich, dass der in Kapitel 4.1.2.3 beim Starten der Seite
festgestellte Fehler durch den hinzugefügten onLoad Prozess beseitigt wurde. Der
Prozess wurde direkt beim Laden der Seite aufgerufen und hat das der Auswahl
entsprechende Element ausgeblendet.
Ändert man den Wert der Radiogroup und klickt auf den Button, so wird bei einem
Submit der Seite der onLoad Prozess erneut aufgerufen und die Elemente bleiben der
aktuellen Auswahl entsprechend ausgeblendet.
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 10 von 17
4.2 Automatische Berechnung
Dieses Beispiel beschäftigt sich mit der Möglichkeit, Berechnungen direkt auf dem
Client Computer und nicht erst nach dem Klicken auf einen Button auszuführen.
4.2.1 Aufbau der Seite
Für das folgende Beispiel wird wieder eine Seite mit unbedingtem Branch auf sich selbst
und einer leeren HTML Region benötigt.
Außerdem werden die folgenden Elemente genutzt:
●
Eine Textbox (ohne Submit) ohne Label,
●
Eine Textbox (ohne Submit) mit dem Label ' x ',
●
Eine Textbox (ohne Submit) mit dem Label ' = '.
Werden die Elemente ohne Zeilenumbruch dazwischen erstellt, so sollte der Aufbau der
Region dem in Abbildung 2 ähneln.
Abb.2: Für Beispiel 4.2 benötigter Aufbau
4.2.2 Funktion zum Berechnen
Um sie ohne ein erneutes Laden der Seite ausführen zu können, muss die Routine zur
Berechnung des Ergebnisses als JavaScript-Code dem HTML Code mitgegeben
werden.
4.2.2.1 Befehle
Wie bereits in Kapitel 4.1.3 erwähnt ist der richtige Platz für JavaScript Funktionen
außerhalb des Bodys im HTML Header der Seite. Hier wird der folgende Code
eingetragen:
<script>
function Produkt(){
vFaktor1 = document.getElementById('<PX_TEXTBOX1>').value;
//die erste Textbox wird ausgelesen
vFaktor2 = document.getElementById('<PX_TEXTBOX2>').value;
//die zweite Textbox wird ausgelesen
document.getElementById('<PX_TEXTBOX3>').value = vFaktor1*vFaktor2;
/*Beide Werte werden multipliziert,
das Ergebnis wird in die dritte Textbox geschrieben*/
}
</script>
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 11 von 17
Auch diese Funktion muss erst aufgerufen werden um aktiv zu werden. Allerdings wäre
diesmal ein onLoad Aufruf nicht sinnvoll, da der Code nicht beim Laden der Seite
ausgeführt werden soll. Der Code soll ausgeführt werden, sobald in das zweite Feld ein
Wert eingegeben wurde (ausgehend von der Annahme, dass die Zahlen von links nach
rechts eingegeben werden). Hierfür kann anstelle eines onChange auch ein onBlur
Event-Handler genutzt werden, der immer dann den Code ausführt, wenn die zweite
Textbox verlassen wird (Siehe Kapitel 3.2.3, Tabelle 1). Diesmal werden die HTML
Form Element Attribute des zweiten Textfeldes genutzt, um die Funktion aufzurufen:
OnBlur = „Produkt()“
4.2.2.2 Test des eingefügten Codes
Nun können in der gestarteten Applikation Werte in die Textboxen eingegeben werden.
Wird die zweite Textbox verändert und danach verlassen, so wird das Ergebnis aus der
Multiplikation der eingegebenen Werte errechnet und in die dritte Textbox eingetragen.
Bleiben die erste oder die zweite Textbox leer so ist das Ergebnis gleich Null, werden in
die erste oder zweite Textbox Buchstaben eingegeben, so erscheint als Ergebnis NaN.
Diese nützliche Regelung ist JavaScript intern.
4.3 PopUps
Dieses Beispiel beschäftigt sich mit dem öffnen und Arbeiten mit PopUps in Oracle
Application Express mit Hilfe von JavaScript.
4.3.1 Aufbau der Seiten
Da ein PopUp in den meisten Fällen nicht die selbe Größe hat, wie das Browser-Fenster
aus dem es geöffnet wird, sollte eine Seite die als PopUp geöffnet wird möglichst wenige
Elemente und, falls nötig, nur platzsparende Reports enthalten. In den Seiten Attributen
ist ein spezielles PopUp Template verfügbar.
Für Beispiel 3 wird eine PopUp Seite mit einer Textbox benötigt.
Außerdem wird eine Seite benötigt, von der aus das PopUp aufgerufen wird. Diese Seite
benötigt einen unbedingten Branch auf sich selbst und einen Report auf beliebigen
Daten. Eine Spalte des Reports ist ein Spalten-Link.
4.3.2 Aufruf des PopUps
4.3.2.1 Befehle
In dem Header der Seite, von der aus das PopUp aufgerufen werden soll wird die
folgende Funktion eingefügt:
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 12 von 17
<script>
function PopUp(Auswahl) {
var url;
url = 'f?p=&APP_ID.:<PopUpNr>:&APP_SESSION.::::<PX_TEXTBOX>:'+Auswahl;
//die URL der Seite die als PopUp aufgerufen werden soll
w = open(url,"Auswahl","Scrollbars=0,resizable=0,width=450,height=100");
//hier wird die URL in einem neuen Fenster geöffnet
}
</script>
Die Felder <PopUpNr> und <PX_TEXTBOX> werden mit der Seitenzahl der Seite, die
als PopUp geöffnet werden soll und dem Namen der Textbox in dem PopUp (in
Großbuchstaben) ersetzt. An das Element <PX_TEXTBOX> wird über den Aufruf der
URL der Wert der Variable „Auswahl“ übergeben. Weitere Informationen zu dem f?p
Syntax in Oracle Application Express enthält die ApEx-Hilfe.
Auch diese Funktion benötigt einen Aufruf da sie momentan noch nicht ausgeführt wird.
Innerhalb dieses Aufrufs muss diesmal ein Parameter, nämlich die Kennung des
ausgewählten Datensatzes, übergeben werden.
Hierzu wird der folgende Aufruf in das URL Ziel des Spalten-Links eingetragen:
javascript:PopUp('#<Wert>#');
Für das Feld <Wert> wird in Großbuchstaben der Name der Spalte eingegeben, deren
Wert an das PopUp übergeben werden soll.
4.3.2.2 Test des eingefügten Codes
Wählt man nun in der gestarteten Applikation einen Datensatz durch Klick auf den
Spalten-Link aus, so öffnet sich das PopUp und zeigt den übergebenen Wert
entsprechend der gewählten Spalte an (Abb.3).
Abb. 3 Ausführung von Beispiel 3
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 13 von 17
5 Zeit und Kostenplan
5.1 Zeitplan
Aktivität
Geschätzte
Dauer
Durcharbeiten des Fachtextes durch einen Entwickler/ eine
Entwicklerin mit PL/SQL- und ApEx-Erfahrung
Anwenden der erlernten Inhalte einzelner Beispiele auf beliebige
ApEx-Applikationen
Summe
2h
ca. 15 min pro
Seite, pro Beispiel
Mindestens 2 h
5.2 Kostenplan
Möglichkeit 1
(Datenbank lokal, ein Benutzer,
lokaler Zugriff)
Möglichkeit 2
(Datenbank auf Server, mehrere
Benutzer, Zugriff über Netzwerk)
Hardwarekosten
Personal Computer mit mindestens
4GB Speicherplatz und einer CPU
mit 1GB Arbeitsspeicher, 3 Jahre
vor-Ort-Service und Zubehör
Server mit mindestens 4GB
Speicherplatz und einer CPU mit
1GB Arbeitsspeicher, 3 Jahre vorOrt-Service
500,00 €
500,00 €
Softwarekosten
Betriebssystem
meist inklusive bzw. freie Software
z.B. Apache HTTP Server
0,00 €
0,00 €
Datenbank
Oracle DB Personal Edition, ApEx
inklusive
Oracle DB Standard Edition One,
ApEx inklusive (5 Benutzer)
300,00 €
3.733,00 €
je zusätzlichem Benutzer: 225,00 €
900,00 €
Mindestens 4233,00 €
Zwischensumme
Personalkosten
Fixe Kosten
Durcharbeiten des Fachtextes durch einen Entwickler/ eine Entwicklerin
mit PL/SQL und ApEx-Erfahrung
200,00 €
Variable
Kosten
Kosten pro Seite, die auf Grund des erworbenen Wissens mit JavaScript
verbessert werden soll
25,00 €
Zwischensumme
Mindestens 200,00 €
Summe
Mindestens 1100,00 €
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Mindestens 4433,00 €
Seite 14 von 17
6 Zusammenfassung
JavaScript erlaubt es ohne tiefere Kenntnisse, kurzen, funktionstüchtigen Code zu erstellen. Da sich JavaScript als Möglichkeit zur Erweiterung von HTML im Internet weitgehend durchgesetzt hat, wird es von allen modernen Browsern verstanden. Auch
Oracle Application Express tut nichts anderes, als HTML-Seiten zu erstellen. Deshalb
können Applikationen, die mit ApEx erstellt werden, leicht mit JavaScript-Code ergänzt
und verbessert werden.
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 15 von 17
7 Quellenangaben
7.1 Tabellen- und Abbildungsquellen
Abbildung 1- Für Beispiel 4.1 benötigter Aufbau
Selbst erstellt mit Oracle Application Express Version 3.0.0.20:
APL 6.2.2009
Abbildung 2- Für Beispiel 4.2 benötigter Aufbau
Selbst erstellt mit Oracle Application Express Version 3.0.0.20:
APL 19.3.2009
Abbildung 3- Ausführung von Beispiel 3
Selbst erstellt mit Oracle Application Express Version 3.0.0.20:
APL 20.3.2009
Tabelle 1- Übersicht über einige Event-Handler
Selbst erstellt: APL 19.3.2009
Für alle erstellten Abbildungen wurde Oracle Application Express auf einer von up to
data professional services lizensierten Oracle 10 Enterprise Edition genutzt.
7.2 Textquellen
[1] Denes Kubicek ApEx BLOG: ApEx + JavaScript = Ajax.
http://deneskubicek.blogspot.com/2007/04/apex-JavaScript-ajax.html,
4.2.2009, 15:34
[2] Laurent's Weblog: What The Fuck is AJAX and APEX.
http://laurentbois.com/2007/10/23/ajax-in-apex-quite-shitty/,
4.2.2009, 16:08
Wikipedia Deutschland: JavaScript
http://de.wikipedia.org/wiki/Java_Script
19.03.2009, 15:23
SelfHTML: Einführung in JavaScript und DOM
http://de.selfhtml.org/JavaScript/intro.htm
19.03.2009, 15:35
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 16 von 17
8 Anhang
Hilfreiche Links:
ORACLE Deutschland: AJAX und die HTML DB: 1. Ein einfaches Beispiel
http://www.oracle.com/global/de/community/tipps/ajax-01/index.html
Beispiel-Applikation von Carl Backstrom zu verschiedenen ApEx Themen
http://htmldb.oracle.com/pls/otn/f?p=11933:49
Beispiel-Anwendung von Denes Kubicek zu verschiedenen ApEx Themen
http://htmldb.oracle.com/pls/otn/f?p=31517:127:6193008213473956::NO
In ApEx verfügbare JavaScript APIs
http://udot.utah.gov/i/doc/AEAPI/javascript_api.htm
Einführung in die htmldb_get Methode, die für AJAX Anwendungen in ApEx
benötigt wird
http://apex.oracle.com/pls/otn/f?p=11620:63:220561608132957::NO:::
SelfHTML: Komplette Einführung in JavaScript
http://de.selfhtml.org/Javascript/intro.htm
JavaScript in Oracle Application Express
von Anna-Pia Lohfink
Seite 17 von 17