Als PDF Downloaden!

Tipps & Tricks: Februar 2013
Bereich:
APEX
Erstellung:
02/2013 MD
Versionsinfo:
ab 3.2
Letzte Überarbeitung:
02/2013 MD
Modale Dialoge in APEX
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.
Muniqsoft GmbH
Schulungszentrum, Grünwalder Weg 13a, 82008 Unterhaching, Tel. 089 / 679090-40
IT-Consulting & Support, Witneystraße 1, 82008 Unterhaching, Tel. 089 / 6228 6789-0
Seite 1 von 4
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>
Muniqsoft GmbH
Schulungszentrum, Grünwalder Weg 13a, 82008 Unterhaching, Tel. 089 / 679090-40
IT-Consulting & Support, Witneystraße 1, 82008 Unterhaching, Tel. 089 / 6228 6789-0
Seite 2 von 4
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.
Muniqsoft GmbH
Schulungszentrum, Grünwalder Weg 13a, 82008 Unterhaching, Tel. 089 / 679090-40
IT-Consulting & Support, Witneystraße 1, 82008 Unterhaching, Tel. 089 / 6228 6789-0
Seite 3 von 4
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 Schulungen oder laden Sie uns zu einem APEX Workshop in Ihr Haus ein.
Muniqsoft GmbH
Schulungszentrum, Grünwalder Weg 13a, 82008 Unterhaching, Tel. 089 / 679090-40
IT-Consulting & Support, Witneystraße 1, 82008 Unterhaching, Tel. 089 / 6228 6789-0
Seite 4 von 4