Dropdown menu in APEX

07-04-2013 door: Kees Vlek

Menu

Een van de eerste eisen van een nieuwe APEX applicatie is natuurlijk een “mooi” menu. De eisen, wensen en voorkeuren van een menu willen nog wel eens verschillen. De standaard binnen apex zijn de TABS. Ik persoonlijk vind deze tabs erg lastig en bewerkelijk om te gebruiken. Het zou handig zijn als je een menu kan realiseren met alleen CSS en html. In mijn eigen zoektocht om een goed en degelijk menu te vinden stuitte ik op diversen mogelijkheden maar het beste uitgangspunt was een presentatie die ik ooit gezien heb. In deze oplossing wordt gebruik gemaakt van het CSS Dropdown Menu Framework gecombineerd met een HTML list item en template.
Kijk hier voor een voorbeeld http://apex.oracle.com/pls/apex/f?p=14108:1 

 

CSS dropdown menu framework in het kort:

  • http://lwis.net/free-css-drop-down-menu/ 
  • Gratis framework (GNU GPL)
  • Theme support (maak je eigen theme)
  • Makkelijk in gebruik
  • Cross-Browser (werkt in alle browsers)
  • Super snel
  • De structuur en stijl van gescheiden van elkaar, hierdoor is het menu makkelijk aan te passen.
    • Structuur → HTML (List Item)
    • Stijl → CSS

 

Stappen

  1. Plaats het framework in de image directory van apex
    Ik heb het in de theme directory van mijn eigen theme gedaan
  2. Maak in apex een template voor een list
  3. Maak een list regio aan op de global page (in oudere apex versies pagina 0)

 

Template

Om met het menu te kunnen werken zal er een custom list template worden gemaakt.
Hier staat wat er in de diverse blokken van de template moet worden ingevuld. 

Before List Entry
List Template Before Rows
<link href=”#IMAGE_PREFIX#themes/theme_200/menu/css/dropdown/dropdown.css” rel=”stylesheet” type=”text/css” />
<link href=”#IMAGE_PREFIX#themes/theme_200/menu/css/dropdown/themes/default/default.advanced.css” rel=”stylesheet” type=”text/css” />
<ul id=”nav” class=”dropdown dropdownhorizontal”>
Template definition
 List Template Current
<li><a href=”#LINK#” class=”currentTab”>#TEXT#</a></li>
 List Template Current with Sublist Items
<li><a href=”#LINK#” class=”currentTab”>#TEXT#</a>
List Template Noncurrent
<li><a href=”#LINK#”>#TEXT#</a></li>
List Template Noncurrent with Sublist Items
<li><a href=”#LINK#”>#TEXT#</a
Before Sublist Entry
Sublist Template Before Rows
 <ul>
 Sublist Enry
 Sublist Template Current
<li><a href=”#LINK#”>#TEXT#</a></li>
 Sublist Template Current with Sublist Items
<li><a href=”#LINK#”>#TEXT# &gt;</a>
 Sublist Template Noncurrent
<li><a href=”#LINK#”>#TEXT#</a></li>
 Sublist Template Noncurrent with Sublist Items
<li><a href=”#LINK#”>#TEXT# &gt;</a>
 After Sublist Entry
Sublist Template After Rows
</ul></li>
 After List Entry
List Template After Rows
</li></ul>

 

 

Tips

  • Groepeer pagina’s in blokken van 100 (of 1000, 10000, etc) op basis van het hoofmenu item.
  • Vul bij het list entry van de hoofdmenu onderdelen de volgende gegevens in bij “Current List Entry”
List Entry Current for Pages Tpe 
Exist SQL Query
List Entry Current for Condition (voorbeeld voor pagina 200) 
select null from dual 
 where :app_page_id between 200 and 299
  • Om iedere pagina van 200 t/m 299 het hoofmenu item activeren als “Current”
Volg ons op

© Orcado B.V. | 1999 - 2013