APEX 4.0 definiert die Nutzung der AJAX-Technologie in APEX-Anwendungen völlig neu. Mit AJAX ist es möglich, Teile der Anwendungsseite zu verändern, ohne die komplette Webseite neu laden zu müssen - die Anwendung wirkt dadurch wesentlich intuitiver, flüssiger und kommt beim Endanwender besser an. Problematisch war bislang allerdings die JavaScript-Programmierung, die dafür nötig war. Selbst wenn man das nötige Know How hat, erhöht sich der Projektaufwand durch die Verwendung der verschiedenen Technologien (SQL, PL/SQL, HTML, JavaScript) doch enorm.

APEX 4.0 schafft hier Abhilfe. Mit den neuen Dynamic Actions kann die AJAX-Technologie genutzt werden, ohne auch nur eine Zeile JavaScript programmieren zu müssen. Die AJAX-Komponenten werden (wie alle anderen APEX-Komponenten) deklarativ erzeugt und im APEX-Repository gespeichert. Wie das geht, zeigt dieser Tipp.

Zum Thema AJAX in APEX-Anwendungen exisiert schon eine ganze Reihe von Community-Tipps. Im Inhaltsverzeichnis stehen diese im Bereich Benutzeroberflächen entwickeln und dort unter AJAX: Bessere Oberflächen. Mit APEX 4.0 sind diese Tipps obsolet geworden - Dinge wie das Textfeld mit Autocomplete, Abhängige Auswahllisten oder Subregions zum "Aufräumen" großer Formulare mit Reiterkarten stehen nun out-of-the-box bereit. Andere Dinge wie das manuelle Auffrischen von Berichten sind mit den neuen Dynamic Actions wesentlich einfacher geworden. Verwenden Sie die alten Tipps nur noch, wenn Sie auf APEX 3.x arbeiten.

Inhalte dynamisch in ein Textfeld laden

Wir beginnen mit einem einfachen Beispiel: Eine Anwendung enthält eine Auswahlliste und ein Textfeld (Abbildung 1). Das Beispiel besiert auf den bekannten Tabellen EMP und DEPT. Wenn in der Auswahlliste (P1_EMP) ein Name selektiert wird, soll der Inhalt der Spalte SAL abgerufen und in das Textfeld (P1_SAL) geladen werden.

Abbildung 1: Anwendungsseite mit Auswahlliste und Textfeld

Zu diesem Zweck erzeugen wir nun eine neue Dynamic Action. Suchen Sie dazu das Seitenelement P1_EMP in der Baumansicht heraus und klicken Sie im Kontextmenü auf Create Dynamic Action (Abbildung 2).

Abbildung 2: Neue Dynamic Action erstellen

Obwohl die Aufgabe einfach anmutet, ist Sie in APEX dennoch eine Dynamic Action vom Typ Advanced (Abbildung 3).

Abbildung 3: Erstellung einer "Advanced" Dynamic Action

Geben Sie der neuen Dynamic Action dann einen Namen.

Abbildung 4: Die Dynamic Action erhält den Namen "SAL aus EMP holen"

Legen Sie als nächstes fest, wann die Dynamic Action ausgelöst werden soll.

• Unter Event stellen Sie ein, was passieren muss, damit die Aktion ausgelöst werden soll. Ein Seitenelement oder eine Komponente müssen sich verändern (Change).
• Unter Selection Type stellen Sie ein, auf welche Art von Komponente sich die Dynamic Action beziehen soll. In unserem Fall ist das ein APEX-Element. Dynamic Actions können auch auf APEX-Regionen oder HTML-Elemente ganz allgemein gelegt werden.
• Die Veränderung muss auf dem Element P1_EMP stattfinden (Item(s)).
• Tragen Sie is not null als Condition) ein. Diese Condition hat eine besondere Bedeutung: Die Dynamic Action wird in jedem Fall ausgelöst - ist die Bedingung erfüllt, so wird die True Action, andernfalls die False Action ausgeführt.

Abbildung 5: Es wird festgelegt, wann die Dynamic Action ausgelöst werden soll

Legen Sie als nächstes fest, was genau passieren soll, wenn die Dynamic Action ausgelöst wird. Die True Action legt fest, was passieren soll, wenn die im vorigen Dialog festgelegte Bedingung (Condition) erfüllt ist.

Wählen Sie SetValue als Aktion aus - damit werden APEX-Elemente mit einem neuen Wert belegt. Als Typ wählen Sie SQL Statement, denn das Gehalt (SAL) soll aus der Tabelle EMP selektiert werden. Geben Sie dann die SQL-Abfrage wie in Abbildung 6 ein und hinterlegen Sie P1_EMP bei Page Items to Submit - denn APEX (auf dem Server) muss die Änderung an der Auswahlliste ja mitbekommen. Achten Sie darauf, dass das Häkchen bei Fire On Page Load aktiviert ist; dann wird die Dynamic Action auch beim Laden der Seite ausgelöst; das ist wichtig, wenn die Auswahlliste per APEX-URL vorbelegt wird.

Abbildung 6: Definition der "True Action"

Legen Sie im nächsten Dialog die False Action fest. Diese Aktion wird ausgeführt, wenn die Dynamic Action ausgelöst wurde, die hinterlegte Bedingung (Condition) aber nicht erfüllt ist. Wiederum wird die SetValue -Aktion verwendet; diesmal wird allerdings keine SQL-Abfrage, sondern ein statischer Wert ("nichts") verwendet. Achten Sie auch hier darauf, dass das Häkchen bei Fire On Page Load gesetzt ist.

Abbildung 7: Definition der "False Action"

Legen Sie zum Schluß fest, auf welche APEX-Komponenten die Aktion angewendet werden soll - hier wird zunächst der Typ Element (Item) und dann konkret das Element P1_SAL ausgewählt. Schließen Sie das Erstellen der Dynamic Action schließlich mit Klick auf Create bzw. Erstellen ab (Abbildung 8).

Abbildung 8: Die Dynamic Action verändert das Element P1_SAL

Probieren Sie es aus: Sobald Sie in der Auswahlliste einen Eintrag auswählen, wird der entsprechende Inhalt der Tabellenspalte SAL in das Textfeld geladen - mit AJAX-Mitteln. Und dazu musste nicht eine Zeile JavaScript programmiert werden. Analog dazu können Sie Regionen oder Elemente ein- und ausblenden, aktivieren oder deaktivieren, Berichte auffrischen und vieles mehr.

Berichtsregionen per Dynamic Action aktualisieren

Als nächstes soll der Seite ein Bericht hinzugefügt werden; dieser soll die Zeilen der Tabelle EMP anzeigen, welche die gleiche DEPTNO haben, wie die aktuelle Auswahl in der Auswahlliste P1_EMP. Wurde hier nichts ausgewählt, soll der Bericht ausgeblendet werden.

Erzeugen Sie zunächst den Bericht mit folgender SQL-Abfrage. Sie können einen "klassischen" oder interaktiven Bericht nehmen - ganz nach Wunsch.

select * from emp where deptno in (select deptno from emp where empno = :P1_EMP)

Danach sieht die Seite wie in Abbildung 9 aus.

Abbildung 9: Ein Bericht (interaktiv) wurde hinzugefügt

Erzeugen Sie nun eine weitere Dynamic Action auf dem Seitenelement P1_EMP (Abbildung 2). Nehmen Sie wiederum den Typ Advanced. Geben Sie der Aktion dann (wie vorhin) einen Namen (Bericht aktualisieren) und legen Sie fest, dass die Aktion bei einem Change-Event auf dem Element P1_EMP ausgelöst werden soll. Als Bedingung nehmen Sie ebenfalls wie vorhin is not null. Legen Sie Show als True Action (Abbildung 10) und Hide als False Action fest. Achten Sie wiederum darauf, dass die Aktion auch beim Laden der Seite ausgeführt wird.

Abbildung 10: Festlegung von "Show" als "True Action"

Als Betroffenes Element (Affected Element) wählen Sie nun zunächst Region, dann den soeben erzeugten Bericht aus (Abbildung 11).

Abbildung 11: Festlegung von "Show" als "True Action"

Erstellen Sie die neue Dynamic Action schließlich mit dem Klick auf Erstellen bzw. Create. Vielleicht überlegen Sie gerade, ob das Ein- und Ausblenden der Region in den Bereich Bedingungen der jeweiligen Region gehört hätte. Aber alles, was Sie mit AJAX-Technologie realisieren möchten (also ohne Neu-Laden der gesamten APEX-Seite), muss mit Dynamic Actions gemacht werden - die Bedingungen auf Regionsebene werden nur beim Page Load beachtet, also dann, wenn die gesamte APEX-Seite neu geladen wird.

Sie sind aber noch nicht ganz fertig. Bislang haben Sie nur festgelegt, dass der Bericht ausgeblendet werden soll, wenn in der Auswahlliste nichts ausgewählt wurde und dass er andernfalls sichtbar sein soll. Allerdings soll der Bericht stets die "Kollegen" aus der Abteilung des ausgewählten "Employee" zeigen. Wenn also von einem Namen auf den anderen gewechselt wird, muss der Bericht zusätzlich aktualisiert werden. Navigieren Sie dazu in der Baumansicht zur gerade erzeugten Dynamic Action und wählen Sie Create TRUE Action im Kontextmenü aus (Abbildung 12).

Abbildung 12: Eine weitere "True Action" hinzufügen

Wie Abbildung 13 zeigt, kann es durchaus mehrere True Actions und mehrere False Actions geben. Wie immer legt die Sequenznummer die Ausführungsreihenfolge fest. Tragen Sie also ein, dass die Region mit dem Bericht aktualisiert werden soll (Refresh).

Abbildung 13: Berichtsregion aktualisieren als weitere "True Action"

Speichern Sie die neue True Action ab und probieren Sie es aus. Wenn Sie "nichts" in der Auswahlliste selektieren stellen, verschwindet der Bericht; wenn Sie dagagen etwas auswählen, zeigt der Bericht die passenden Tabellenzeilen an. Und auch dies haben Sie völlig ohne JavaScript-Programmierung realisiert.

Abbildung 14: Das Ergebnis: Der Bericht wird bei Änderung der Auswahlliste aktualisiert

Abhängige Auswahllisten

Zum Abschluß kommen wir zu den oft benötigten abhängigen Auswahllisten ( Cascading LOV). Dies geht sogar noch einfacher - eine Dynamic Action brauchen Sie gar nicht: Abhängige Auswahllisten stellt APEX standardmäßig bereit. Legen Sie eine Auswahlliste namens P1_DEPT mit folgender SQL-Abfrage an.

select dname d, deptno r from dept order by 1 

Nehmen Sie "5" als Sequenznummer, so dass diese neue Auswahlliste über der bereits vorhandenen erscheint. Suchen Sie dann im Navigationsbaum die bereits vorhandene Auswahlliste P1_EMP heraus und wählen Sie Bearbeiten bzw. Edit im Kontextmenü aus (Abbildung 15).

Abbildung 15: Vorhandene Auswahlliste P1_EMP bearbeiten

Navigieren Sie dann in den Bereich List Of Values und ändern Sie die SQL-Abfrage, wie in Abbildung 16 dargestellt, um. Wichtig ist die Angabe des Parent Item (hier: P1_DEPT). Schalten Sie (speziell für dieses Beispiel) die Refresh-Optimierung (Optimize Refresh) ab. Mehr Informationen dazu enthält die Kontexthilfe.

Abbildung 16: List Of Values-Definition der Auswahlliste P1_EMP ändern

Speichern Sie die Änderungen ab und starten Sie die Seite neu. Sie können nun beobachten, wie sich die Inhalte der Auswahlliste P1_EMP ändern, wenn Sie in P1_DEPT eine Auswahl tätigen. Und das findet alles mit AJAX-Technologie statt - sie benötigen keinen JavaScript-Code.

Abbildung 17: Das Ergebnis: Abhängige Auswahllisten

Fazit

Mit APEX 4.0 ist die AJAX-Technologie für jeden APEX-Entwickler problemlos einsetzbar. Die neuen Abhängigen Auswahllisten finden sich sicherlich in nahezu jeder Anwendung ein passendes Einsatzgebiet. Generell ist der Einsatz dieser Technologie doch sehr zu empfehlen, erhöht sie doch massiv die Benutzerfreundlichekeit und damit die Akzeptanz von APEX-Anwendungen.

Zurück zur Community-Seite