[[#wd Lookup TitleRecipe5 ]]

Overview

Many elements of a HTML page are shared between most, if not all, pages of a website. This recipe shows how you can use COAST to define common stuff just once and use it on every page.

Preconditions

-

Steps to do:

  1. Define the general page hierarchie. This has to be done in the config.any files /Pages item.
    For example :
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {
    		"/Pages {"
    		"	# Subpages of "Page""
    		"	/Page {"
    		"		"HomePage" "LoginPage""
    		"		/AccountPage {"
    		"			"BookingsPage" "BalancePage""
    		"		}"
    		"	}"
    		"}"
    	}
    }]]
    
    This defines the page hierarchie:
    Page
    |_HomePage
    |_LoginPage
    |_AccountPage
       |_BuchungsPage
       |_BalancePage
    
    Remarkable: mixed mode Anything - Slotnames and Values are defining pages !

  2. Specify the different parts, that should be shared amongst the pages (e.g. Header, Footer, NavBar etc). This is only a mental process.

  3. Specify a tag /PageLayout in the configuration file for the topmost page (normally Page.any), that declares a shared layout html-file.
    For Example like this:
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {
    		"/PageLayout {"
    		"	/HTML {"
    		"		/TemplateName "SharedPageLayout"    #uses the file SharedPageLayout.html"
    		"	}"
    		"}"
    	}
    }]]
    
    The file must be located in one of the directories that are specified in the /TemplateDir item below 'HTMLTemplateConfig' in Config.any.

  4. Create the shared layout html-file in the HTMLTemplates directory. Write the common overall Layout for all pages into this file, using Standard HTML and COAST Renderer tags.

    Important: Use ContextLookupsRenderers for the shared parts identified in step 2.
    The following example will give you a good start:

    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {
    		"<html>"
    		"	<head>"
    		"		<title>"
    		"			[[#wd Lookup PageTitle ]]"
    		"		</title>"
    		"	</head>"
    		"	<body background= [[#wd Image { /ImageName "backgrnd.gif" } ]] >"
    		"		[[#wd Lookup Header ]]"
    		"		[[#wd Lookup Body ]]"
    		"		[[#wd Lookup Footer ]]"
    		"	</body>"
    		"</html>"
    	}
    }]]
    
  5. Now you can easily define different renderers for the elements in Page.any.
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {
    		"/Header {"
    		"	/HTML {"
    		"		/Template {"
    		"			"[[#wd Image { /ImageName "MyLogo.gif" } ]]""
    		"			"<center>[[#wd Lookup Menu ]]</center><p>""
    		"			"<hr>""
    		"		}"
    		"	}"
    		"}"
    		" "
    		"/Footer {"
    		"	/HTML {"
    		"		/Template {"
    		"			"<hr><center>powered by COAST</center>""
    		"		}"
    		"	}"
    		"}"
    	}
    }]]
    
    As you can see, the Renderer specifications may also refer to more ContextLookupRenderer, which of course may be specified differently within subpages (e.g. Menu in Header). Only Renderer specifications that are shared have to be defined in the superpages configuration files. If you specify any of the renderers again in the configuration file of a subpage the definition of its superpage is overwritten on this page and all its subpages.
    AccountPage.any could look like this:
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {
    		"/Menu {"
    		"	/HTML {"
    		"		/Template {"
    		"			"<center>""
    		"			"[[#wd Lookup LinkBuchung ]]""
    		"			"[[#wd Lookup LinkBalance ]]""
    		"			"</center>""
    		"		}"
    		"	}"
    		"}"
    		" "
    		"/LinkBookings {"
    		"	/Link {"
    		"		/Label {"
    		"			/String {"
    		"				/Default "Bookings""
    		"			}"
    		"		}"
    		"		/Action "GoBookings""
    		"	}"
    		"}"
    		" "
    		"/LinkBalance {"
    		"	/Link {"
    		"		/Label {"
    		"			/String {"
    		"				/Default "Balance""
    		"			}"
    		"		}"
    		"		/Action "GoBalance""
    		"	}"
    		"}"
    	}
    }]]
    
    Any finally BalancePage.any just defines PageTitle and Body:
    [[#wd DisplayAnythingRenderer {
    	/AnythingInfo {
    		"/PageTitle	Balance"
    		" "
    		"/Body {"
    		"	/HTML {"
    		"		/Template {"
    		"			"You have ""
    		"			"[[#wd BalanceRenderer AccountKey ]]""
    		"			" on your account.""
    		"		}"
    		"	}"
    		"}"
    	}
    }]]
    
    Assume there is a BalanceRenderer that maybe fetch the Balance from a Database.

    The Balance page will look like this

    -------------------------------------------------------------------
    | Balance                                                         | BalancePage.any
    -------------------------------------------------------------------
    | ------                                                          | Page.any
    | |Logo|                  Bookings Balance                        | AccountPage.any
    | ------                  -------- -------                        |
    | --------------------------------------------------------------- |
    |                                                                 |
    | You have $1'000'000 billion on your account                     | BalancePage.any
    |                                                                 |
    | --------------------------------------------------------------- |
    |                         powered by COAST                        | Page.any
    |                                                                 |
    -------------------------------------------------------------------
    

Remarks

This recipe has not been implemented in the example application. Please see recipe 4.

Glossary

-

Related Topics