one of the common features in the web applications is to highlight the menu item that corresponds to the current page so that users know where they are in the application.
here is how:
In decoratee, define the page’s menu information in meta data:
<head>
<meta name=”menu” content=”home” />
<meta name=”refreshInterval” content=”1″ />
</head>
In decorator, make sure to include the decoratee’s header and retrieve the value:
<html>
<head><decorator:head /></head>
…
<!– Script to select the active page’s button –>
<script>
//get the selected page’s menu
var selected = ‘<decorator:getProperty property=’meta.menu’ />’;
select(selected);
function select(buttonId) {
var myButton = document.getElementById(buttonId);
if(myButton != null) {
//change the button’s class to highlighted as defined in css
myButton.class=’highlightedMenu’;
}
}
</script>
<body>
…
<decorator:body />
</body>
