Modale Dialoge in APEX

31.
Januar
2013
Veröffentlicht von: Markus Dötsch

Im letzten Opens external link in new windowStatement of Direction für APEX vom November 2012 wird unter anderem der Einsatz von modalen Dialogen angekündigt. Wir könnten jetzt warten, bis diese neue Version zur Verfügung steht, wir können aber schon jetzt mit geringem Aufwand unsere Dialoge modal darstellen.

Im letzten Statement of Direction für APEX vom November 2012 wird unter anderem der Einsatz von modalen Dialogen angekündigt. Wir könnten jetzt warten, bis diese neue Version zur Verfügung steht, wir können aber schon jetzt mit geringem Aufwand unsere Dialoge modal darstellen.

Die erste Frage stellt sich gleich: was sind eigentlich modale Dialoge?

Dabei handelt es sich grundsätzlich um Formulare oder Anzeigen, die sich per "Klick" über den eigentlichen Bildschirm legen und in der Regel zu einer Eingabe oder Auswahl auffordern oder weitere Informationen anzeigen. Modal sind diese Dialoge dann, wenn der dahinterliegende Bildschirmbereich gesperrt ist und nicht mehr verwendet werden kann.

Ein berühmter Vertreter dieser Zunft ist die Alert-Box aus JavaScript in einem Browser unserer Wahl.

<script>
  alert('Das ist ein modaler Dialog');
</script>

Solange die Box aktiv ist kann mit dem Browser im Hintergrund nichts mehr getan werden. Nicht einmal der Wechsel zu einem anderen Tab ist mehr möglich.

Leider haben wir keinen Einfluss auf das Layout der Alert-Box und etwas anderes als Text bekommen wir auch nicht hin. Da nützen auch die Dialog-Brüder Confirm-Box für die Abfrage von OK und Abbrechen und die Prompt-Box für die Eingabe von Text nichts.

Also machen wir unseren eigenen modalen Dialog. Aber wo können wir so etwas gebrauchen? Wie wäre es mit einer Infoseite auf jeder Seite in der Applikation. Wir erstellen einen Eintrag in der Navigationsleiste und nennen diesen Impressum. Als Ziel geben wir URL und als URL-Ziel die Raute an. Das hat zur Folge, dass wir nun in der Applikation einen Impressum-Link rechts oben haben, der auf Klick erst einmal nichts macht. 

Damit das Impressum auf jeder Seite angezeigt werden kann, erstellen wir die Globale Seite (Page 0), wenn sie nicht bereits im Projekt enthalten ist. Darauf eine HTML-Region, die unser Impressum beeinhalten soll. Der Region verpassen wir eine Statische ID, damit wir sie mit jQuery einfach anfassen können. 

Da die Page 0 keinen JavaScript-Bereich wie die normalen Seiten hat, fügen wir in einem HTML-Bereich in der Region den folgenden Code ein. Wir könnten auch eine neue HTML-Region ohne Template für den JavaScript-Code anlegen.

<script>
 $(document).ready(function() {
  $('#impressum').dialog( {autoOpen: false, modal: true, width: 450});
  $("a:contains('Impressum')").click(function() {
   $('#impressum').dialog( 'open' );
  });
 });
</script>

Zuerst sorgen wir mit der Document-Ready-Function dafür, dass unser Code erst dann ausgeführt wird, wenn die komplette Seite fertig geladen wurde. Danach wandeln wir die Impressum-Region in einen Dialog um. Als Parameter geben wir mit, dass die Region standardmäßig nicht geöffnet wird, dass sie modal ist und eine Breite von 450 Pixeln haben soll.

Dann erstellen wir einen Event-Handler, der auf den Impressum-Link horcht und auf Klick den Dialog öffnet. Der Dialog verfügt über einen Schließ-Knopf, kann verschoben und in der Größe verändert werden. Diese Grundkonfiguration kann noch angepasst werden. Wie immer ist hier die Webseite von jQuery eine große Hilfe. 

Eine weitere Idee für einen modalen Dialog wäre ein Report, in dem sich in einer Spalte viel Text befindet. Anstatt den Report mit einer breiten Inhaltsspalte aufzublähen, gibt man nur die ersten X-Zeichen im Report an. Will ein Anwender den gesamten Text sehen kann er die Spalte anklicken und in einem modalen Dialog wird der gesamte Text dargestellt. Die jQuery-Dialog-Funktion passt sich in der Regel an die Größe des Inhalts an, damit lassen sich auch tausende von Zeichen elegant am Bildschirm darstellen.

Wenn Sie mehr über den Einsatz von jQuery in Ihren APEX Projekten erfahren möchten, dann besuchen Sie unsere APEX Opens internal link in current windowSchulungen oder laden Sie uns zu einem APEX Workshop in Ihr Haus ein.

Jede Menge Know-how für Sie!

In unserer Know-How Datenbank finden Sie mehr als 300 ausführliche Beiträge zu den Oracle-Themen wie DBA, SQL, PL/SQL, APEX und vielem mehr.
Hier erhalten Sie Antworten auf Ihre Fragen.