Seitenregionen organisieren: Region Display Selector und mehr ...

Hat man APEX-Anwendungsseiten mit vielen Regionen, so entsteht oft der Wunsch, etwas aufzuräumen, und bestimmte Regionen nur per Klick sichtbar zu machen. Seit der Version 5.0 bietet APEX hierfür mehrere Möglichkeiten an - dieser Tipp stellt die Arbeit mit dem Region Display Selector, dem Tabs Container und dem Carousel Container vor.

Abbildung 1: Ausgangssituation: Viele Regionen auf einer Seite

Variante 1: Region Display Selector

Die erste und naheliegenste Möglichkeit ist sicherlich der Region Display Selector. Dieser steht sowohl im Universal Theme, ab APEX 5.0, als auch in den anderen "Legacy"-Themes zur Verfügung. Ziehen Sie diese Region auf Ihre Seite - am besten möglichst nach oben (Abbildung 2).

Abbildung 2: Region vom Typ "Region Display Selector" hinzufügen

Um eine Region mit dem Region Display Selector "schalten" zu können, muss deren Attribut Region Display Selector (im Bereich Advanced) auf Yes gestellt werden. Die Region darf keine Sub-Region des Display Selectors sein - ob sie vor oder nach dem Region Display Selector angeordnet ist, spielt keine Rolle. In der Praxis ist es natürlich sinnvoll, den Region Display Selector zuerst und die anzuzeigenden Regionen danach anzuordnen (Abbildung 3). Region Display Selectoren können nicht geschachtelt werden.

Abbildung 3: In der Praxis sinnvolle Anordnung eines Region Display Selector und der Regionen

Wenn Sie im Page Designer zu den Attributen des Region Display Selectors navigieren, können Sie noch einige Einstellungen vornehmen (Abbildung 4).

Abbildung 4: Einstellungen für den Region Display Selector

• Die Auswahlliste Mode können Sie auf Show Single Region oder Scroll Window einstellen. Wenn Sie Scroll Window auswählen, sind stets alle Regionen sichtbar, bei Auswahl einer Region wird das Browserfenster automatisch zum Beginn derselben gescrollt. Wenn Sie das Universal Theme verwenden, achten Sie darauf, den Region Display Selector in diesem Fall in die Breadcrumb Bar oder den Dialog Header (für modale Dialoge) zu platzieren, damit er auch dann noch sichtbar ist, wenn das Browserfenster oder der Dialog sehr weit nach unten gescrollt wird (Abbildung 5).
  
  

  Abbildung 5: Für "Scroll Window" sollte der Display Selector in der Breadcrumb Bar platziert sein

• Include Show All ist nur sichtbar, wenn Mode auf Show Single Region eingestellt ist; die Auswahl des Region Display Selectors enthält dann noch einen Menüpunkt zur Anzeige aller Regionen.
• Wenn Sie Remember Last Selection auf Yes stellen, merkt sich der Browser die Regionsauswahl: Wenn der Endbenutzer die APEX-Seite verlässt und wieder zurückkommt, wird die Regionsauswahl wiederhergestellt. Die Information selbst wird nicht auf dem Server, sondern im Session-Storage des Browsers abgelegt. Informationen im Session Storage bleiben solange erhalten, bis der Browserfenster oder das Browser-Tab geschlossen werden.

Variante 2: Regionstemplate "Tabs Container"

Wenn Sie das Universal Theme verwenden, können Sie, als Alternative zum Region Display Selector, eine normale Region vom Typ Static Content mit dem Regions-Template Tabs Container versehen und die zu selektierenden Regionen als Sub-Regions anordnen. Auch hier können alle Regionstypen verwendet werden. Ein Tabs Container ist komplett unabhängig von anderen "Tabs Container"-Regionen; es lassen sich so also durchaus mehrere "Region Display Selectors" pro Seite einrichten und bei Bedarf auch schachteln. Allerdings steht diese Variante in den älteren Themes nicht zur Verfügung.

Abbildung 6: Das Regionstemplate "Tabs Container" erlaubt mehrere "Region Display Selectors" pro Seite

Auch eine Region mit dem Template Tabs Container bietet Einstellungsmöglichkeiten an; diese sind in den Template Options zu finden (Abbildung 7).

Abbildung 7: Template Options für Tabs Container Template

Wenn Sie Remember Active Tab einstellen, merkt der Browser sich die letzte Auswahl, wie beim zuvor erläuterten Region Display Selector. Und wie bei diesem, wird die Information im Session Storage des Browsers abgelegt.

Variante 2: Regionstemplate "Carousel Container"

Eine etwas andere Darstellungsvariante ist der Carousel Container; damit können Sie die Regionen als eine Art Slide Show darstellen. Wie der Tabs Container zuvor, steht auch diese Variante nur im Universal Theme zur Verfügung. Nehmen Sie, wie beim "Tabs Container", eine Region vom Typ Static Content , wählen Sie Carousel Container als Regions-Template und ordnen Sie die zu selektierenden Regionen als Sub-Regions ein. Wie mit den Tabs Container, können Sie auch mit dem Carousel Container Regionen vom Typ Chart, Report oder andere darstellen.

Abbildung 8: Regions-Template "Carousel Container" auswählen

Als Ergebnis bekommen Sie eine "Slideshow" ...

Abbildung 9: Slide Show mit dem "Carousel Container"

Ein Carousel Container ist natürlich vor allem zur Darstellung von Bildern auf der Startseite einer Anwendung geeignet - wie man an Abbildung 9 sehen kann, ist die Darstellung von Textregionen eher ungeeignet. Aber an der Darstellung lässt sich durchaus noch etwas verbessern: Navigieren Sie dazu zu den Template Options des Carousel Containers (Abbildung 10).

Abbildung 10: Template Options des "Carousel Container"

Sie können, wie bei den bisher erläuterten Varianten, einstellen, ob der Browser sich den letzten Slide merken soll. Darüber hinaus kann eingestellt werden, wie das konkrete Wechseln des Slide erfolgen soll (Animation), ob Buttons zum manuellen Wechseln vorhanden sein sollen und mehr. Probieren Sie hier am besten ein wenig aus.

In der Praxis dürfte es sicherlich sinnvoll sein, den Regions-Header unsichtbar zu machen (Hidden oder Hidden, but accessible), denn bei einer Slide Show wird dieser sicherlich nicht benötigt. Das (vorläufige) Ergebnis sieht dann wie in Abbildung 11 aus.

Abbildung 11: Der Regions-Header des Carousel Containers wurde ausgeblendet

Das ist schon etwas besser, allerdings wird der Regions-Inhalt immer noch von den Buttons zum Vor- und Zurückschalten überlagert. Hierfür gibt es leider keine Template-Option, die man einfach ein- oder ausschalten könnte. Die Lösung ist aber sehr einfach: Aktivieren Sie den Theme Roller per Klick in der Developer Toolbar, navigieren Sie im Theme Roller zum Bereich Custom CSS und tragen Sie dort folgenden CSS-Code ein (Abbildung 12).

div.t-Region--carousel div.a-Region-carouselItem {
   padding: 10px 40px 20px 40px;
}

Abbildung 12: Styling-Anweisungen als "Custom CSS" im Theme Roller eintragen

Mit diesen CSS-Anweisungen werden alle Sub-Regions eines Carousel Containers, also alle "Slides", angewiesen, etwas Abstand zur Parent-Region zu halten. Der Abstand wird groß genug gewählt, dass die Buttons den Inhalt nicht mehr überlagern. Speichern Sie die Einstellungen mit dem Theme-Roller ab und setzen Sie den so gespeicherten Theme Style als neuen Current Style. Nach einem Refresh der Seite sollten Sie folgendes Ergebnis haben (Abbildung 13).

Abbildung 13: Ergebnis: Carousel Container mit inneren Abständen

Natürlich können Sie die Template Options der Sub-Regions ebenfalls verändern und so deren Aussehen beeinflussen. Nehmen Sie sich ruhig ein wenig Zeit und spielen Sie mit den verschiedenen Möglichkeiten herum.

Fazit

APEX bietet, aus dem Stand, viele Möglichkeiten an, Regionen auf einer Anwendungsseite zu organisieren. Der Regionstyp Region Display Selector steht in allen Anwendungsthemes zur Verfügung, kann also auch in älteren Anwendungen verwendet werden. Anwendungen, die das Universal Theme nutzen, haben aber noch mehr Möglichkeiten: Mit dem Tabs Container lassen sich mehrere, voneinander unabhängige Region Display Selectors realisieren; der Carousel Container erlaubt das schnelle und einfache Einrichten einer Slideshow auf der APEX-Seite. Probieren Sie die Möglichkeiten aus.

Zurück zur Community-Seite