[[#wd Lookup TitleRecipe10 ]]

Overview

This recipe shows you how you can implement a navigation aid in the form of a menu bar.
Ideally it should be context-sensitive by showing which page a user is looking at.

Preconditions

Steps to do:

  1. Define some standard template for your page.
    Sample (could be in SharedPageLayout.html):
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {
    		"<html>"
    		"	<head>"
    		"		<title>"
    		"			[[#wd Lookup PageTitle ]]"
    		"		</title>"
    		"	</head>"
    		"	<body>"
    		"		[[#wd Lookup Header ]]"
    		"		[[#wd Lookup Body ]]"
    		"		[[#wd Lookup Footer ]]"
    		"	</body>"
    		"</html>"
    	}
    }]]
    
    If you have decided that your menu bar is always on the top, then you have to implement it somewhere in the Renderer defining the 'Header'.

  2. Define your subtags for the chosen location of the navigation bar.
    Sample:
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {
    		"/Header {"
    		"	/HTML {"
    		"		/Template {"
    		"			"[[#wd Lookup NavigationBar ]]""
    		"		}"
    		"	}"
    		"}"
    	}
    }]]
    
    Now you can do several things, every page can overwrite the tag NavigationBar or you can define also a standard structure for NavigationBar and the pages just complement it or redefine substructures of the bar.

  3. Sample for complete overwrite (not in the application example):
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {
    		"/NavigationBar {"
    		"	/HTML {"
    		"		/Template {"
    		"			"[[#wd Lookup GoAdminHome ]]""
    		"			"[[#wd Lookup GoServerKill ]]""
    		"			"[[#wd Lookup GoConnectionsAllow ]]""
    		"			"[[#wd Lookup GoLogout ]]""
    		"			"[[#wd Lookup GoLogging ]]""
    		"			"[[#wd Lookup GoTransTest ]]""
    		"		}"
    		"	}"
    		"}"
    	}
    }]]
    
    You have to define each subtag in the bar e.g. a link.
    Sample:
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {
    		"/GoServerKill {"
    		"	/Link {"
    		"		/Action "ServerKill""
    		"		/Label {"
    		"			/Lookup {"
    		"				/LookupName Admin.serverKill_L"
    		"			}"
    		"		}"
    		"	}"
    		"	/Target	"_top""
    		"}"
    	}
    }]]
    
    or no link to show where you are
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {
    		"/GoAdminHome {"
    		"	/Lookup {"
    		"		/LookupName	Admin.adminHome_L"
    		"	}"
    		"}"
    	}
    }]]
    
    The complete overwrite solution is easier for small samples. You have full control of the navigation bar on each page. This is easy to customize but hard to standardize and error prone if you want to have a defined look and feel on each page.

  4. In the defined structure case you just define the structure of the navigation bar. For each structural element you have to define its implementation.
    Sample (e.g. in Page.any):
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {
    		"/NavigationBar {"
    		"	/HTML {"
    		"		/TemplateName "NavigationBar""
    		"	}"
    		"}"
    	}
    }]]
    
    And then in NavigationBar.html:
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {
    		"[[#wd Lookup StartPagePage ]]"
    		"[[#wd Lookup RecipesListPage ]]"
    		"[[#wd Lookup Example1Page ]]"
    		"[[#wd Lookup Example2Page ]]"
    		"[[#wd Lookup ConfirmPagePage ]]"
    		"[[#wd Lookup ShowInputPagePage ]]"
    	}
    }]]
    
    If you want to give feedback about the page you are on, you have to render the links conditionally depending on the page you are at. This requires, that you have some sort of bookkeeping or use the page hierarchy directly to determine the state of the navigation bar.
    Sample for conditional renderer:
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {		
    		"/InfoLink {"
    		"	/ConditionalRenderer {"
    		"		/ContextCondition AtInfoPage"
    		"		/True {"
    		"			/Lookup {"
    		"				/LookupName Info.infoHome_L"
    		"			}"
    		"		}"
    		"		/False {"
    		"			/Link {"
    		"				/Action "GoInfo""
    		"				/Label {"
    		"					/Lookup {"
    		"						/LookupName Info.infoHome_L"
    		"					}"
    		"				}"
    		"			}"
    		"		}"
    		"	}"
    		"}"
    	}
    }]]
    
    Sample for page hierarchy:
    (e.g. you can just overwrite your link from page.any in the Confirmpage.any)
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {		
    		"/ConfirmPagePage {"
    		"	/String {"
    		"		/Default "Confirmation Page""
    		"	}"
    		"}"
    	}
    }]]
    

Remarks

There is no predefined concept that supports the navigation bar directly.
You are of course free to define a customized renderer if you want to have another behaviour.

Glossary

Related Topics

HTML-Templates, ConditionalRenderering