Regionen ein- und ausblenden - wie im Application Builder

Beginnend mit Application Express 2.2 können die einzelnen Regionen im Application Builder wie in Abbildung 1 dargestellt, über die obere Menüleiste bequem ein- und ausgeblendet werden. Nun wäre es interessant, eine solche Menüleiste auch in eigenen Application Express-Anwendungen nutzen zu können. Leider gibt es kein entsprechendes Regions-Template. Zwar ist in nahezu allen Themes ein Template Show/Hide Region enthalten - diese erzeugen jedoch nicht die obere Menüleiste.

Abbildung 1: Einzelne Regionen ein- und Ausblenden im Application Builder

Im Folgenden wird daher dargestellt, wie Sie sich die Funktionalität mit ein wenig JavaScript-Code selbst bauen können: Erzeugen Sie eine Anwendung und darin eine Seite mit vier Regionen. Die erste Region soll die Menüleiste enthalten - Geben Sie als Regionsquelle den in Abbildung 2 dargestellten Code <div id="menuholder"></div> ein.

Abbildung 2: HTML-Code der Menüleisten-Region

Der Inhalt der anderen Regionen ist Ihnen überlassen - Sie können übrigens neben HTML-Regionen auch Berichte, Charts oder andere Regionstypen verwenden. Achten Sie darauf, dass alle Regionen das gleiche Regions-Template verwenden. Wenn Sie verschiedene Regions-Templates verwenden, müssen Sie die weiteren Schritte, die im Regions-Template stattfinden, entsprechend öfter durchführen.Das Ergebnis sollte wie in Abbildung 3 aussehen:

Abbildung 3: Anwendungsseite mit 4 Regionen

Das Ein- und Ausblenden der Regionen sowie das Erzeugen der Menüleiste erledigt JavaScript. Navigeren Sie daher zu den Gemeinsamen Komponenten und dort zu den statischen Dateien. Laden Sie die Datei ShowHide.js (Code) wie in Abbildung 4 dargestellt, hoch.

Abbildung 4: JavaScript-Code in Application Express hochladen

Anschließend muss der JavaScript-Code in die Anwendung eingebunden werden. Am einfachsten geschieht dies in der Definition des Seitentemplate. Navigieren Sie in der Seitenbearbeitung zu den Templates und in die Bearbeitung des Seitentemplates. Binden Sie den JavaScript-Code im Template-Header, wie in Abbildung 5 dargestellt, ein.

<script type="text/javascript" src="#WORKSPACE_IMAGES#ShowHide.js"></script>

Abbildung 5: JavaScript-Code im Seitentemplate einbinden

Für die Menüleiste wird nun noch eine CSS-Klasse benötigt - diese entscheidet, wie die einzelnen Menueinträge dargestellt werden. Diese lässt sich über eine eigene CSS-Datei oder über einen Eintrag direkt im Seitentemplate einbinden. Der Einfachheit halber wird die Klasse in diesem Beispiel einfach im HTML-Code des Seitentemplate definiert. Geben Sie (wiederum im Template-Header) innerhalb des <STYLE>-Tags zusätzlich folgenden Code ein (Abbildung 6):

.menu:link {
  text-decoration: none;
  font-family: Helvetica, Sans Serif;
  font-weight: bold;
  color: red;
  padding: 1px;
}
.menu:hover {
  text-decoration: none;
  font-family: Helvetica, Sans Serif;
  font-weight: bold;
  color: white;
  background-color: red;
  padding: 1px;
}
.menu:visited {
  text-decoration: none;
  font-family: Helvetica, Sans Serif;
  font-weight: bold;
  color: red;
  padding: 1px;
}
.menu:focus {
  text-decoration: none;
  font-family: Helvetica, Sans Serif;
  font-weight: bold;
  color: white;
  background-color: red;
  padding: 1px;
}

Abbildung 6: Definition der CSS-Klasse "menu"

Nun geht es daran, dass sich jede Region in der Menüleiste registriert. Dazu sind zwei Schritte erforderlich. Navigieren Sie zuerst zur Definition des Regions-Template welches Ihre Regionen verwenden. Am einfachsten erreichen Sie es, indem Sie in der Seitenbearbeitung rechts unter Templates auf den Namen des Regions-Templates klicken (kleines Bild rechts).

Ändern Sie die Template-Definition wie in Abbildung 7 dargestellt. Natürlich kann dieses Beispiel auch mit anderen Templates als dem in Abbildung 7 dargestellten erfolgen. Wichtig ist, dass der JavaScript-Code am Ende eingefügt wird.

Abbildung 7: JavaScript-Code in die Definition des Regions-Template einfügen

Der Vollständigkeit halber hier nochmals der JavaScript-Code, welcher in der Template-Definition am Ende angehangen wird. Er sorgt dafür, dass die Region in der Menüleiste registriert wird.

<script type="text/javascript">
<!--
  register(document.getElementById("#REGION_ID#"));
//-->
</script>

Damit die Registrierung auch tatsächlich erfolgt, muss der Region allerdings noch etwas Code hinzugefügt werden. Zum ersten muss festgelegt werden, welcher Text für den Menü-Eintrag verwendet werden soll. Zum zweiten ist es u.U. nicht erwünscht, wirklich jede Region, die das Template verwendet, auch in die Menüleiste aufzunehmen. Tatsächlich registriert werden also nur die Regionen, welche zusätzlich das im Folgenden beschriebene <a>-Tag enthalten.

Navigieren Sie daher für alle Regionen, welche Sie in die Menüleiste aufnehmen möchten, zu den Regionseigenschaften (Region bearbeiten). Im Bereich Header und Footer tragen Sie bei Regions-Header den in Abbildung 8 dargestellten HTML-Code ein. Das Attribut name erhält dabei den Eintrag, so wie er in der Menüleiste erscheinen soll - das Attribut class="menuDummyClass" sollte exakt übernommen werden, daran erkennt die Menüleiste das <a>-Tag.

<a name="[Eintragsname]" class="menuDummyClass">

Abbildung 8: Region mit <a>-Tag für die Menuleiste kennzeichnen

Gehen Sie zum Abschluß in die Seitendefinition und stellen Sie mit einem letzten JavaScript-Aufruf sicher, dass das Menü auch tatsächlich auf dem Bildschirm dargestellt wird. Navigieren Sie zu den Eigenschaften der Seite und tragen Sie dort unter Header und Footer bei Footer folgenden JavaScript-Code ein:

<script type="text/javascript">
<!--
  buildMenu(document.getElementById("menuholder"),"menu");
//-->
</script>

• "menuholder" haben Sie bereits in Abbildung 2 verwendet - es kennzeichnet die Region, welche die Menüleiste aufnimmt. Wichtig ist, dass dieser Code in der Seite ziemlich am Ende steht - daher steht er am besten im Seiten-Footer.
• Die CSS-Klasse "menu" haben Sie im Seitentemplate definiert (Abbildung 6); natürlich können Sie hier auch eine andere CSS-Klasse verwenden.

Abbildung 9: Seiten-Footer: Menüleiste erzeugen per JavaScript

Damit sind Sie fertig. Starten Sie ihre Seite und betrachten Sie das Ergebnis. Es sollte wie in der nachfolgenden Abbildung 10 aussehen.

Abbildung 10: Das Ergebnis

Zurück zur Community-Seite