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
- Plaats het framework in de image directory van apex
Ik heb het in de theme directory van mijn eigen theme gedaan - Maak in apex een template voor een list
- 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# ></a> |
Sublist Template Noncurrent |
<li><a href=”#LINK#”>#TEXT#</a></li> |
Sublist Template Noncurrent with Sublist Items |
<li><a href=”#LINK#”>#TEXT# ></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”