JavaScript in Oracle Application Express. (berufliche Tätigkeitsbeschreibung) Anna-Pia Lohfink 21. August 2009

Transkript

1 (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

2 Inhalt 1 Einleitung JavaScript in ApEx Möglichkeiten und Vorteile von JavaScript in ApEx ApEx + JavaScript = AJAX? JavaScript Grundlagen Übersicht über die Sprache Benötigte Befehle JavaScript Bereiche Definieren Funktionen und Variablen Event-Handler Werte von Elementen einlesen und setzen Bedingungen Öffnen eines PopUps Beispiele Elemente auf Basis einer Radiogroup anzeigen Aufbau der Seite Steuerung über die Radiogroup Wo kommt der JavaScript Code hin? Befehle Test des eingefügten Codes Der onload Prozess Wo kommt der JavaScript Code hin? Befehle Test des eingefügten Codes Automatische Berechnung Aufbau der Seite Funktion zum Berechnen Befehle Test des eingefügten Codes PopUps Aufbau der Seiten Aufruf des PopUps Befehle Test des eingefügten Codes Zeit und Kostenplan Zeitplan Kostenplan Zusammenfassung Quellenangaben Tabellen und Bilderquellen Textquellen Anhang...17 von Anna-Pia Lohfink Seite 1 von 17

3 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 Code- Beispielen 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 von Anna-Pia Lohfink Seite 2 von 17

4 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 Netzwerk- Verbindungen 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. von Anna-Pia Lohfink Seite 3 von 17

5 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 HTML- Codes 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 JavaScript- Code 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 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> von Anna-Pia Lohfink Seite 4 von 17

6 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>,...]); Event-Handler Eine weitere Möglichkeit JavaScript-Code in einer HTML-Seite einzubetten sind Event- Handler. 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; ; von Anna-Pia Lohfink Seite 5 von 17

7 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 String- Argument 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 Aktivierung Einsatzmöglichkeiten onblur onchange onload Beim Verlassen des Elements mit dem Cursor (z.b. Klicken außerhalb der Textbox nachdem dort etwas eingegeben wurde) Beim Verändern des Wertes eines Elements Beim Laden des Elements (beim Aufruf der Seite und bei einem Neuladen der Seite vom Server) Buttons, Auswahllisten, Textboxen, Textfelder Auswahllisten, Textboxen, Textfelder Alle Elemente, auch im Body der HTML-Seite Werte von Elementen einlesen und setzen Tabelle 1: Übersicht über einige Event-Handler 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 von Anna-Pia Lohfink Seite 6 von 17

8 Verfügung. Ein Link zu einer Dokumentation dieser Befehle findet sich im Anhang 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 Öffnen eines PopUps Ein PopUp kann mit dem folgenden Befehl geöffnet werden: 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 Aufbau der Seite w = open(url,"titel","width=breite,height=höhe"); Für das folgende Beispiel wird eine Seite mit unbedingtem Branch auf sich selbst und von Anna-Pia Lohfink Seite 7 von 17

9 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 Steuerung über die Radiogroup Abb.1: Für Beispiel 4.1 benötigter Aufbau 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 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 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). von Anna-Pia Lohfink Seite 8 von 17

10 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 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 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 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 von Anna-Pia Lohfink Seite 9 von 17

11 aufgerufen werden (siehe Kapitel 3.2.3, Tabelle 1) 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 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 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. von Anna-Pia Lohfink Seite 10 von 17

12 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 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 Funktion zum Berechnen Abb.2: Für Beispiel 4.2 benötigter Aufbau 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 Befehle Wie bereits in Kapitel 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> von Anna-Pia Lohfink Seite 11 von 17

13 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() 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 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 Aufruf des PopUps Befehle In dem Header der Seite, von der aus das PopUp aufgerufen werden soll wird die folgende Funktion eingefügt: von Anna-Pia Lohfink Seite 12 von 17

14 <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 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 von Anna-Pia Lohfink Seite 13 von 17

15 5 Zeit und Kostenplan 5.1 Zeitplan Aktivität 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 Geschätzte Dauer 2 h ca. 15 min pro Seite, pro Beispiel Mindestens 2 h 5.2 Kostenplan Datenbank Fixe Kosten Variable Kosten Betriebssystem Zwischensumme Zwischensumme Möglichkeit 1 (Datenbank lokal, ein Benutzer, lokaler Zugriff) Hardwarekosten Personal Computer mit mindestens 4GB Speicherplatz und einer CPU mit 1GB Arbeitsspeicher, 3 Jahre vor-ort-service und Zubehör 500,00 500,00 Softwarekosten meist inklusive bzw. freie Software 0,00 0,00 Oracle DB Personal Edition, ApEx inklusive Möglichkeit 2 (Datenbank auf Server, mehrere Benutzer, Zugriff über Netzwerk) Server mit mindestens 4GB Speicherplatz und einer CPU mit 1GB Arbeitsspeicher, 3 Jahre vor- Ort-Service z.b. Apache HTTP Server Oracle DB Standard Edition One, ApEx inklusive (5 Benutzer) 300, ,00 je zusätzlichem Benutzer: 225,00 900,00 Mindestens 4233,00 Personalkosten Durcharbeiten des Fachtextes durch einen Entwickler/ eine Entwicklerin mit PL/SQL und ApEx-Erfahrung 200,00 Kosten pro Seite, die auf Grund des erworbenen Wissens mit JavaScript verbessert werden soll 25,00 Mindestens 200,00 Summe Mindestens 1100,00 Mindestens 4433,00 von Anna-Pia Lohfink Seite 14 von 17

16 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. von Anna-Pia Lohfink Seite 15 von 17

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 : APL Abbildung 2- Für Beispiel 4.2 benötigter Aufbau Selbst erstellt mit Oracle Application Express Version : APL Abbildung 3- Ausführung von Beispiel 3 Selbst erstellt mit Oracle Application Express Version : APL Tabelle 1- Übersicht über einige Event-Handler Selbst erstellt: APL 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 , 15:34 [2] Laurent's Weblog: What The Fuck is AJAX and APEX , 16:08 Wikipedia Deutschland: JavaScript , 15:23 SelfHTML: Einführung in JavaScript und DOM , 15:35 von Anna-Pia Lohfink Seite 16 von 17

18 8 Anhang Hilfreiche Links: ORACLE Deutschland: AJAX und die HTML DB: 1. Ein einfaches Beispiel Beispiel-Applikation von Carl Backstrom zu verschiedenen ApEx Themen Beispiel-Anwendung von Denes Kubicek zu verschiedenen ApEx Themen In ApEx verfügbare JavaScript APIs Einführung in die htmldb_get Methode, die für AJAX Anwendungen in ApEx benötigt wird SelfHTML: Komplette Einführung in JavaScript von Anna-Pia Lohfink Seite 17 von 17