AJAX-Programmierung mit Application Express und der jQuery-Bibliothek

Mit Hilfe von JavaScript und der AJAX-Technologie lässt sich die Benutzeroberfläche einer Application Express-Anwendung massiv verbessern; im Internet findet man mittlerweile zahlreiche sehr intuitive Web-Oberflächen, welche auf dieser Technologie basieren. AJAX macht es möglich, Teile einer Application Express-Seite zu ändern, ohne die gesamte Seite nochmals neu laden zu müssen. Sehr gute Hintergrundinformationen zum Thema finden Sie im deutschsprachigen Wikipedia-Artikel zum Thema AJAX. Mit Hilfe von JavaScript werden die neuen Daten asynchron (also im Hintergrund) geladen und mittels DHTML-Technologie in die HTML-Seite eingebaut.

Mittlerweile hat sich die Verwendung der AJAX-Technologie so weit durchgesetzt, dass Sie als Entwickler nicht mehr den ganzen JavaScript-Code selbst implementieren müssen - es steht eine Vielzahl von fertigen Bibliotheken zur Verfügung. Eine davon - die frei verfügbare jQuery-Bibliothek (www.jquery.com) wird auch in diesem Tipp verwendet.

In diesem Tipp widmen wir uns einem Problem, vor dem nahezu jeder Application Express-Entwickler schon mal stand: abhängige Auswahllisten (cascading select lists). Dabei haben Sie zwei (oder mehr) Auswahllisten und abhängig von der getätigten Auswahl in einer werden die anderen (abhängigen) Auswahllisten automatisch gefiltert - und das mit AJAX, also ohne dass die ganze Anwendungsseite neu geladen werden muss.

Vorbereitungen

Bevor Sie mit der Nutzung der AJAX-Technologie in Ihren Application Express-Anwendungen beginnen, sind einige Vorbereitungen notwendig.

  • Laden Sie die jQuery-Bibliothek (www.jquery.com) herunter und machen Sie diese für Application Express verfügbar:
    • Wenn Sie Application Express mit dem Apache Webserver nutzen, kopieren Sie die heruntergeladene Datei jquery-[version].js in das Verzeichnis, in dem auch schon die anderen Application-Express-JavaScript-Dateien liegen. Typischerweise ist dies $APEX_HOME/images/javascript.
    • Wenn Sie das Embedded PL/SQL Gateway mit OracleXE oder Oracle11g verwenden, nutzen Sie den FTP-Zugang zum Datenbankrepository und laden Sie die Datei ins Verzeichnis /images/javascript/ hoch.
    • Natürlich können Sie die Datei auch bei den Gemeinsamen Komponenten Ihrer Anwendung als Statische Datei hochladen; dieser Weg ist allerdings nur zu empfehlen, wenn Sie die anderen Varianten nicht nutzen können - denn solche Bibliotheken sollten allen Workspaces global zur Verfügung gestellt werden.
  • JavaScript-Code läuft im Browser. Wenn Ihr JavaScript-Code Fehler enthält, treten diese demnach im Browser auf. Out-of-the-box sind Web-Browser nur mit sehr dürftigen Mitteln zur Fehlerdiagnose ausgestattet. Speziell der Microsoft Internet Explorer gibt sich sehr wortkarg bei auftretenden JavaScript-Fehlern. Für die Entwicklungsphase ist daher die Arbeit mit dem Firefox-Browser sehr zu empfehlen. Das allein reicht jedoch nicht aus: Laden Sie zusätzlich die Plugings Firebug und die Web Developer Toolbar herunter und installieren Sie diese in Ihrem Firefox-Browser. In den meisten Fällen sollte mit diesen Werkzeugen entwickelter Code auch im Microsoft Internet Explorer problemlos laufen. Zur Sicherheit sollten Sie Ihre Anwendung jedoch nach Abschluß der Entwicklung ausführlich in beiden Browsern testen.

Binden Sie als nächstes die jQuery-Bibliothek in Ihre Application Express-Anwendung ein. Wenn Sie auf allen oder auf sehr vielen Seiten AJAX- bzw. JavaScript-Code planen, können Sie die Einbindung im Seitentemplate im Bereich Header vornehmen, ansonsten im Seiten-Header der jeweiligen Anwendungsseite. Setzen Sie folgenden HTML-Code ein: 

<script type="text/javascript" src="#IMAGE_PREFIX#javascript/jquery-1.2.6.js"></script>

Wenn Sie den JavaScript-Code als Statische Datei in den Gemeinsamen Komponenten hochgeladen haben, verwenden Sie anstelle von #IMAGE_PREFIX# die Platzhalter #APP_IMAGES# oder #WORKSPACE_IMAGES#.

Ein erstes einfaches Beispiel

Fügen Sie Ihrer Anwendungsseite eine HTML-Region mit einer Auswahlliste und einem Textfeld hinzu. Die Auswahlliste P1_EMPNO soll, basierend auf der Tabelle EMP, alle dort eingetragenen Mitarbeiter anzeigen. Wird einer der Mitarbeiter ausgewählt, soll dessen Gehalt im Textfeld P1_SAL erscheinen und zwar mit Hilfe der AJAX-Technologie - ohne dass die Seite neu geladen werden muss.

Anwendungsseite mit Auswahlliste und Textfeld

Abbildung 1: Anwendungsseite mit Auswahlliste und Textfeld

Immer wenn Sie die APEX-Technologie verwenden, benötigen Sie einen "Server-Prozeß" und eine "Client-Komponente". Der Server-Prozeß stellt die gewünschten Daten (hier das Gehalt des Mitarbeiters) auf Anfrage bereit während die Client-Komponente (JavaScript-Code) das Ergebnis in die Anwendungsseite einbaut (DHTML). Der Code dieses Tipps soll "als zusätzliche Anforderung" generisch sein; also mit beliebigen Tabellen arbeiten können.

Die Tatsache, dass das Textfeld P1_SAL standardmäßig mit dem Gehalt des in P1_EMPNO ausgewählten Mitarbeiters belegt werden soll, können Sie mit normalen APEX-Bordmitteln direkt beim Element hinterlegen. Navigieren Sie zu den Elementeigenschaften und hinterlegen Sie die entsprechende SQL-Abfrage direkt bei der Regionsquelle (Abbildung 2). 

select sal from emp where empno = v('P1_EMPNO')
Hinterlegung der SQL-Abfrage direkt als Elementquelle

Abbildung 2: Hinterlegung der SQL-Abfrage direkt als Elementquelle

Achten Sie darauf, dass Sie in der WHERE-Klausel die "V-Syntax" (v('P1_EMPNO')) zum Einbinden des Elements P1_EMPNO erwenden. Wenn Sie die Seite nun neu starten, passiert noch gar nichts. Denn das Element P1_EMPNO trägt zu Beginn noch den Inhalt Null - dazu findet die SQL-Abfrage keine Tabellenzeile und das Element P1_SAL bleibt demzufolge leer.

1. AJAX-Beispiel: Serverseitige Komponenten erstellen (Anwendungsprozeß)

Als nächstes wird ein Anwendungsprozeß erstellt, der die soeben als Elementquelle hinterlegte SQL-Abfrage aus dem Application Express-Repository ausliest, ausführt und das Ergebnis zurückgibt. Der Prozeß ist also generisch und kann mit jedem beliebigen Element verwendet werden. Navigieren Sie also zu den Gemeinsamen Komponenten, dort zu den Anwendungsprozessen und erstellen Sie einen neuen Prozeß namens getElementDefault. Achten Sie darauf, dass er Bedarfsgesteuert ausgeführt wird (Abbildung 3).

Neuen bedarfsgesteuerten Anwendungsprozeß erstellen

Abbildung 3: Neuen bedarfsgesteuerten Anwendungsprozeß erstellen

Hinterlegen Sie folgenden PL/SQL-Code als Prozeßquelle: 

/*
 * Dieser Anwendungsprozeß führt die im APEX-Repository
 * hinterlegte Elementquelle aus und gibt das Ergebnis
 * zurück. Der Name des gewünschte Elements muss im Anwendungselement
 * APP_GETDEFAULT_FORITEM stehen.
 */
 
declare
  v_source APEX_APPLICATION_PAGE_ITEMS.ITEM_SOURCE%TYPE;
  v_result varchar2(32767);
begin
  -- Auslesen der Quelldefinition des gefragten Elements
  begin
   select item_source into v_source 
   from APEX_APPLICATION_PAGE_ITEMS
   where application_id = :APP_ID and item_name = :APP_GETDEFAULT_FORITEM;
  exception 
   when NO_DATA_FOUND then 
    v_source := null;
  end;
  -- Ausführen der Quelldefinition und Übernahme des Ergebnis in die 
  -- Variable "v_result"
  if v_source is not null then 
   begin
     execute immediate v_source into v_result;
   exception 
     when NO_DATA_FOUND then 
       v_result := null;
   end;
  else 
   v_result := 'N/A';
  end if;
  -- Ausgabe des Ergebnis
  htp.p(v_result);
end;

Im Code können Sie erkennen, dass der Name des Elements, für welches der Wert ermittelt werden soll, durch das Anwendungselement APP_GETDEFAULT_FORITEM bestimmt wird. Aus der Application-Express-Dictionary-View APEX_APPLICATION_PAGE_ITEMS wird die vorhin von Ihnen hinterlegte SQL-Abfrage ausgelesen, mit EXECUTE IMMEDIATE ausgeführt und das Ergebnis mit HTP.P zurückgegeben. Das Anwendungselement APP_GETDEFAULT_FORITEM muss nun allerdings noch erstellt werden - tun Sie dies bei den Anwendungelementen in den Gemeinsamen Komponenten.

1. AJAX-Beispiel: Browserkomponenten erstellen (JavaScript)

Als nächstes geht es daran, die JavaScript-Funktion zu erstellen, welche den Anwendungsprozeß per AJAX-Technologie aufruft und das Ergebnis mit DHTML in das Textfeld einträgt. Navigieren Sie zu den Seitenattributen und hinterlegen Sie folgenden HTML- und JavaScript-Code im Seiten-Header. 

<script type="text/javascript">

/*
 * Funktion refreshElement(p_targetItem, p_submitItems)
 *   p_targetItem:  Name des APEX-Elements, welches aktualisiert werden soll
 *   p_submitItems: Array mit anderen Elementen, welche an APEX gesendet werden sollen
 */
function refreshElement(p_targetItem, p_submitItems) {

 // AJAX-Request-Objekt erstellen mit JavaScript-Klasse "htmldb_Get"
 // 1. Parameter: Für 'Partial Page Refresh' bestimmt, wird hier nicht benötigt
 // 2. Parameter: Ermittelt die aktuelle Anwendungs-ID 
 // 3. Parameter: Legt den aufzurufenden Anwendungsprozeß fest
 // 4. Parameter: Für 'Partial Page Refresh': wird hier nicht benötigt
 var get = new htmldb_Get(
   null,
   $v('pFlowId'), 
   'APPLICATION_PROCESS=getElementDefault', 
   0
 );
 // Name des "Zielelement" zum Request hinzufügenn
 get.add('APP_GETDEFAULT_FORITEM', p_targetItem);

 // Array mit anderen zu übergebenden Elementen him Request hinzufügen
 if (p_submitItems) {
  for (var i=0;i<p_submitItems.length;i++) {
   get.add(p_submitItems[i], $v(p_submitItems[i]));
  }
 }
 
 // Request ausführen
 gReturn = get.get();

 // Zielelement mit dem Ergebnis setzen
 if(gReturn) {
  $s(p_targetItem, gReturn);  
 } else {
  $s(p_targetItem, 'N/A');
 }
 get = false;
}
</script>

Der Code stellt die JavaScript-Funktion refreshElement() bereit. Als Parameter wird der Name des aufzufrischenden Elements und ein Array mit Elementnamen übergeben. In diesem Array müssen alle Elemente übergeben werden, deren Inhalte für die Auffrischung nötig sind. In unserem Beispiel wird P1_SAL aktualisiert und die ausgewählte EMPNO ( P1_EMPNO) wird dazu benötigt. Der Aufruf muss dann also wie folgt lauten: 

refreshElement('P1_SAL', new Array('P1_EMPNO'));

Interessant sind hier die JavaScript-Funktionen $v, $s und htmldb_Get. Alle drei werden von Application Express zur Verfügung gestellt. $v liefert den Wert des APEX-Formularelementes zurück, $s setzt denselben (nur im Browser) und htmldb_Get führt AJAX-Requests zum Server durch.

Nun muss die Funktion jedesmal aufgerufen werden, wenn sich der in der Auswahlliste selektierte Wert ändert. Navigieren Sie dazu zu den Eigenschaften des Elements P1_EMPNO, dort zu den HTML Form Elementattributen und hinterlegen Sie den folgenden JavaScript-Event-Handler. 

onChange="javascript:refreshElement('P1_SAL', new Array('P1_EMPNO'));"

Starten Sie die Seite nun und wählen Sie in der Auswahlliste etwas aus; Sie stellen fest, dass das Element P1_SAL sich automatisch mit dem Gehalt (SAL) des ausgewählten Mitarbeiters füllt.

Zweites Beispiel: Abhängige Auswahllisten

Als zweites Beispiel kommen wir nun zum Thema: Nun erfahren Sie, wie Sie zwei (oder mehr) voneinander abhängige Auswahllisten mit der AJAX-Technogie realisieren können. Fügen Sie der Anwendungsseite eine neue Auswahlliste P1_DEPTNO hinzu. Verwenden Sie select dname, deptno from dept als Wertelistenabfrage (Abbildung 4).

Zwei Auswahllisten, die zweite hängt von der ersten ab

Abbildung 4: Zwei Auswahllisten, die zweite hängt von der ersten ab

Wenn in der ersten Auswahlliste eine Abteilung ausgewählt wird, soll die zweite Auswahlliste sich (ohne erneutes Laden der Seite) auf die Mitarbeiter dieser Abteilung einschränken. Wiederum nutzen wir das APEX-Repository zum Hinterlegen der Abhängigkeiten zwischen den Auswahllisten. Navigieren Sie zur Wertelisten-Abfrage der Auswahlliste P1_EMPNO und ändern Sie die Quellabfrage wie folgt um:

Geänderte SQL-Abfrage für die Werteliste "P1_EMPNO"

Abbildung 5: Geänderte SQL-Abfrage für die Werteliste "P1_EMPNO"

Achten Sie (wie im ersten Beispiel) darauf, die "V-Syntax" anstelle der "Doppelpunkt-Syntax" zu verwenden. Die Oder-Verknüpfung in der WHERE-Klausel dient dazu, alle Mitarbeiter anzuzeigen, wenn keine Abteilung ausgewählt wurde. Achten Sie auch darauf, dass (bei allen Ihren Auswahllisten, also auch bei P1_DEPTNO) die Option Null anzeigen aktiviert ist und die Felder Null-Anzeigewert und Null-Rückgabewert mit sinnvollen Werten belegt sind. Wenn Sie abhängige Auswahllisten per AJAX implementieren, tun Sie sich so wesentlich leichter.

2. AJAX-Beispiel: Serverseitige Komponenten erstellen (Anwendungsprozeß)

Nun wird der Anwendungsprozeß erstellt: Dieser liest (wie im ersten Beispiel) die als Wertelisten-Quelle hinterlegte SQL-Abfrage aus dem Application-Express-Repository aus, führt sie aus und gibt die Ergebnisse zurück. Der wesentliche Unterschied zum ersten Beispiel ist, dass hier nicht ein skalarer Wert, sondern eine Werteliste zurückgegeben wird. Navigieren Sie also zu den Gemeinsamen Komponenten, dort zu den Anwendungsprozessen und erstellen Sie einen neuen Prozeß namens getLOV. Hinterlegen Sie folgenden PL/SQL-Code als Prozeßquelle (Achten Sie darauf, dass er Bedarfsgesteuert ausgeführt wird). 

/*
 * Dieser Anwendungsprozeß führt die im APEX-Repository
 * hinterlegte Wertelisten-Abfrage aus und gibt das Ergebnis
 * zurück. Der Name des gewünschte Elements muss im Anwendungselement
 * APP_GETDEFAULT_FORITEM stehen.
 */
 
declare
  type cursor_t is ref cursor;

  v_source APEX_APPLICATION_PAGE_ITEMS.ITEM_SOURCE%TYPE;
  v_lov_d varchar2(4000);
  v_lov_v varchar2(4000);
  v_null   APEX_APPLICATION_PAGE_ITEMS.LOV_DISPLAY_NULL%TYPE;  
  v_null_v APEX_APPLICATION_PAGE_ITEMS.LOV_NULL_VALUE%TYPE;  
  v_null_d APEX_APPLICATION_PAGE_ITEMS.LOV_NULL_TEXT%TYPE;  
  v_lov_n  APEX_APPLICATION_PAGE_ITEMS.LOV_NAMED_LOV%TYPE;  
  lov_cur cursor_t;
begin
  -- Auslesen der Quelldefinition des gefragten Elements
  begin
   select lov_definition, lov_null_text, lov_null_value, lov_display_null, lov_named_lov
   into v_source, v_null_d, v_null_v, v_null, v_lov_n
   from APEX_APPLICATION_PAGE_ITEMS
   where application_id = :APP_ID and item_name = :APP_GETDEFAULT_FORITEM;
  exception 
   when NO_DATA_FOUND then 
    v_source := null;
  end;

  -- Wird eine "Named LOV" angesprochen ...? Dann in View APEX_APPLICATION_LOVS nachsehen
  if v_lov_n is not null then 
   begin
    select LIST_OF_VALUES_QUERY into v_source
    from APEX_APPLICATION_LOVS 
    where 
     lov_type='Dynamic' and 
     LIST_OF_VALUES_NAME = v_lov_n and
     application_id = :APP_ID;
   exception 
    when NO_DATA_FOUND then 
     v_source := null;
   end;
  end if;
    
  -- Ausführen der Quelldefinition und Ausgabe der Werteliste
  -- als HTML-Code
  if v_source is not null then 
   -- Wenn im APEX-Repository "NULL anzeigen" aktiviert ist, dann hinzufügen
   if v_null = 'Yes' then
     htp.prn('<option value="' || v_null_v || '">' || v_null_d || '</option>');
   end if;
   open lov_cur for v_source;
   loop
     fetch lov_cur into v_lov_d, v_lov_v;
     exit when lov_cur%NOTFOUND;
     htp.prn('<option value="' || v_lov_v || '">' || v_lov_d || '</option>');
   end loop;
   close lov_cur;
  else 
   htp.p('<option value="ERROR">NO LOV FOUND</option>');
  end if;
end;

Der Prozeß arbeitet nach dem gleichen Prinzip wie der im ersten Beispiel; nur dass diesmal anstelle eines einzigen Wertes die ganze Werteliste abgerufen wird. Außerdem kann die Wertelistenabfrage nicht nur direkt beim Formularelement, sondern auch als Benannte Werteliste hinterlegt werden. Diese Fälle muss der PL/SQL-Code berücksichtigen, daher ist er ein wenig umfangreicher. Seine Ergebnisse gibt die Werte als HTML-Code so zurück, dass dieser anschließend direkt per DHTML in die Anwendungsseite eingebaut werden kann.

2. AJAX-Beispiel: Browserkomponenten erstellen (JavaScript)

Anschließend wird die JavaScript-Funktion erstellt. Navigieren Sie zum Seiten-Header und hinterlegen Sie zusätzlich zum schon vorhandenen den folgenden HTML- und JavaScript-Code. Hier wird die eingangs erwähnte OpenSource-Bibliothek jQuery verwendet. 

<script type="text/javascript" src="#IMAGE_PREFIX#javascript/jquery.js"></script>
<script type="text/javascript">

/*
 * Funktion refreshElement(p_targetItem, p_submitItems)
 *   p_targetItem:  Name des APEX-Elements, welches aktualisiert werden soll
 *   p_submitItems: Array mit anderen Elementen, welche an APEX gesendet werden sollen
 */
function refreshLOV(p_targetItem, p_submitItems) {

 // AJAX-Request-Objekt erstellen mit JavaScript-Klasse "htmldb_Get"
 // 1. Parameter: Für 'Partial Page Refresh' bestimmt, wird hier nicht benötigt
 // 2. Parameter: Ermittelt die aktuelle Anwendungs-ID 
 // 3. Parameter: Legt den aufzurufenden Anwendungsprozeß fest
 // 4. Parameter: Für 'Partial Page Refresh': wird hier nicht benötigt
 var get = new htmldb_Get(
   null,
   $v('pFlowId'), 
   'APPLICATION_PROCESS=getLOV', 
   0
 );
 // Name des "Zielelement" zum Request hinzufügenn
 get.add('APP_GETDEFAULT_FORITEM', p_targetItem);

 // Array mit anderen zu übergebenden Elementen him Request hinzufügen
 if (p_submitItems) {
  for (var i=0;i<p_submitItems.length;i++) {
   get.add(p_submitItems[i], $v(p_submitItems[i]));
  }
 }
 
 // Request ausführen
 gReturn = get.get();

 // Werteliste mit den vom Server erhaltenen Daten neu füllen
 // mit jQuery: $("P1_EMPNO").html()
 if(gReturn) {
  $("#"+p_targetItem).html(gReturn);  
 } else {
  $("#"+p_targetItem).empty();
 }
 // Selektierten Wert zurücksetzen
 $s(p_targetItem, null);
 get = false;
}
</script>

Die Funktion wird genauso benutzt wie die im ersten Beispiel. Nun muss sie nur noch jedesmal aufgerufen werden, wenn sich der in der Auswahlliste P1_DEPTNO selektierte Wert ändert. Navigieren Sie dazu zu den Eigenschaften des Elements P1_DEPTNO, dort zu den HTML Form Elementattributen und hinterlegen Sie den folgenden JavaScript-Event-Handler. 

onChange="javascript:refreshLOV('P1_EMPNO', new Array('P1_DEPTNO')); refreshElement('P1_SAL', new Array('P1_EMPNO'));"

Achten Sie darauf, dass die Funktion aus dem ersten Beispiel hier ebenfalls aufgerufen wird, denn wenn sich Auswahlliste P1_EMPNO nun automatisch gefiltert wird, wird deren Auswahl auf "Bitte wählen" zurückgesetzt. Demnach muss auch das Textfeld P1_SAL geleert werden, damit die Oberfläche wieder konsistent ist.

Nun haben Sie einmalig PL/SQL- und JavaScript-Code hinterlegt, mit dem Sie beliebige Auswahllisten als AJAX Cascading Select Lists in Ihre Anwendung einbauen können. Es können auch mehr als zwei Auswahllisten miteinander verknüpft werden - Gehen Sie dazu wie folgt vor.

  • Erzeugen Sie die Werteliste mit der entsprechenden SQL-Abfrage. Achten Sie dabei auf die Einstellungen zu den Null-Werten. Wichtig ist, dass der Datentyp des NULL-Rückgabewertes dem des Rückgabewerts der LOV-Abfrage entspricht. Nehmen Sie also einen numerischen Wert, wenn Ihre LOV numerische Werte zurückliefert. Verwenden Sie außerdem in der Wertelistenabfrage stets die V-Syntax für Elemente.
  • Fügen Sie den onChange-Header, mit dem Sie die nachgeordneten Auswahllisten aktualisieren, hinzu. Er wird immer bei der "auslösenden" Auswahlliste eingetragen. Für jede nachgeordnete Auswahlliste benötigen Sie im onChange-Handler einen JavaScript-Aufruf.

3. Die jQuery-Bibliothek nutzen: Der jQuery "DatePicker"

Als letztes Beispiel sei ein Feature der jQuery-Bibliothek vorgestellt: der jQuery DatePicker. Die Datumsauswahl von Application Express hat den Nachteil, dass dazu ein eigenes (wenn auch kleines) Browserfenster geöffnet wird; dieser Ablauf wirkt für den Endbenutzer ein wenig träge. Eine Lösung wäre das DatePicker-Widget der jQuery-UI-Bibliothek.

Zusätzlich zur zu Beginn bereits angesprochenen jQuery-Bibliothek benötigen Sie dazu die Erweiterung jQuery UI. Laden Sie diese von ui.jquery.com herunter und machen Sie die JavaScript-Dateien, wie eingangs beschrieben, für Application Express verfügbar. Da der Download ein ZIP-Archiv mit vielen Dateien ist, empfiehlt sich das Hochladen in den Workspace als statische Datei hier nicht. Besser ist es, das Archiv ins Verzeichnis $APEX_HOME/images/javascript (bei Verwendung des Apache mit mod_plsql) oder (bei Verwendung des PL/SQL Embedded Gateway) ins Verzeichnis /images/javascript des Datenbank-Repositorys auszupacken. Achten Sie beim nachfolgenden HTML-Code darauf, die Pfade ggfs. an Ihre Umgebung anzupassen.

Binden Sie nun die jQuery-UI-Bibliothek in Ihre Application Express-Seite ein. Hinterlegen Sie dazu entweder im Seitentemplate oder im Seiten-Header folgende HTML-Anweisungen: 

<!-- Diese Zeile für die jQuery-Basis-Bibliothek haben Sie schon zu Beginn eingefügt -->
<script type="text/javascript" src="#IMAGE_PREFIX#javascript/jquery.ui/jquery-1.2.6.js"></script>
<!-- jQuery UI Core-Bibiothek (wird immer benötigt)-->
<script type="text/javascript" src="#IMAGE_PREFIX#javascript/jquery.ui/ui/ui.core.js"></script>
<!-- jQuery UI DatePicker-Bibiothek-->
<script type="text/javascript" src="#IMAGE_PREFIX#javascript/jquery.ui/ui/ui.datepicker.js"></script>

Binden Sie zusätzlich das mitgelieferte Stylesheet (CSS) für den Date-Picker ein: 

<link rel="stylesheet" type="text/css" href="#IMAGE_PREFIX#javascript/jquery.ui/themes/ui.datepicker.css"/>

Nun geht es los: Erzeugen Sie ein neues Textfeld namens P1_DATUM, navigieren Sie dann zum Seiten-Footer und hinterlegen Sie (für einen ersten Test) folgenden JavaScript-Code: 

<script type="text/javascript">
$("#P1_DATUM").datepicker();
</script>

Starten Sie die Seite und klicken Sie in das neu erzeugte Textfeld. Es wird sich sofort ein Datumsauswahlfeld öffnen ...

jQuery UI Date Picker in Aktion

Abbildung 6: jQuery UI Date Picker in Aktion"

Dieses Feld müsste noch ein wenig konfiguriert werden: Um die deutsche Sprache zu aktivieren, laden Sie zunächst im Seiten-Header zusätzlich zu den bereits vorhandenen jQuery-Bibliotheken die entsprechende Datei. 

<!-- deutsche Sprache für jQuery UI DatePicker -->
<script type="text/javascript" src="#IMAGE_PREFIX#javascript/jquery.ui/ui/i18n/ui.datepicker-de.js"></script>

Die deutsche Sprache wird sofort aktiv. Das folgende Beispiel fügt ein kleines Kalender-Symbol hinzu und legt den Montag als "ersten Tag der Woche" fest. Ändern Sie den Code im Seiten-Footer wie folgt: 

<script type="text/javascript">
$("#P1_DATUM").datepicker({
 firstDay: 1, 
 showOn: "both", 
 buttonImage: "/i/asfdcldr.gif", 
 buttonImageOnly: true
});
</script>
Angepasster jQuery UI Date Picker in Aktion

Abbildung 7: Angepasster jQuery UI Date Picker in Aktion"

Es gibt zahlreiche weitere Elemente und Konfigurationsmöglichkeiten; auf der jQuery-Webseite finden Sie eine umfangreiche Dokumentation der gesamten Bibliothek und zahlreiche Tutorials: So gibt es auch eine Seite mit den Konfigurationsmöglichkeiten für den Date Picker. JavaScript-Bibliotheken wie jQuery und jQuery UI geben Ihnen die Möglichkeit, Ihre Benutzeroberflächen mit ausgefeilten, intuitiven Elementen auszustatten, ohne dass Sie in die Feinheiten der JavaScript- und DHTML-Programmierung einsteigen müssen.

Zurück zur Community-Seite