Template - js-lib-com/wood GitHub Wiki

Template component, for short template, is the WOOD equivalent for OOP inheritance. It allows a component to inherit layout; for example, a template for site pages may have navigation bar and footer that are inherited by all pages.

Template contains one or more editable elements that act as placeholders. Editable element has a name, unique per template and has no content.

In OOP sense, template is an abstract component and cannot be be used by itself to generate pages. Template needs content for his editable elements; this content is provided by external components known as content component.

Build tool gets the component path for content component and loads defined template; for that content component define a reference to parent template. Then build tool copy content to template editable identified by name. Resulting file contains both template inherited layout and injected editable content.

Template is live; all changes performed on a template are reflected into all implementing content components, of course on next build.

Template Anatomy

Template is a component and has the same files set on its own directory. The only particularity is that template layout file has editable elements.

Editable elements, for short editables, are merely placeholders and they should be empty. Editable has a name declared with wood:editable="editable-name" that should be unique per template. This name is used by content component to bind content to editable.

Content component layout file define the content for template editable. Content element and editable element should have the same tag name. Content element has a bind to the right editable using wood:content="editable-name" operator; of course editable name should match.

Content elements are wrapped in layout root element with embed tag that declare the template path using wood:template="template/path" operator. This root element is just a container for valid XML and is not included in resulting layout.

Build Process

Build tool gets the component path for content component and loads defined template; remember that content components has a reference to parent template. Then build tool copy content to template editable identified by name and takes care to merge attributes from content and editable elements. If an attribute is present on both, content element takes precedence.

Beside merging layout files build tool also copy scripts, styles and resources to site file system, for both template and content component.

Sample Code

Here is a page template that provides navigation bar, page title and footer. It has two editable elements for text section and a dialog box named text, respectiv dialog. Template path is template/page.

template/page/page.htm

<!-- template component -->
<body xmlns:wood="js-lib.com/wood">
	<nav><a href="home">Home</a><a href="about">About</a></nav>	
	<h1>Page Title</h1>
	<!-- editable element -->
	<section wood:editable="text"></section>
	<!-- editable element -->
	<div class="hidden" wood:editable="dialog"></div>
	<footer>copyright (c) 2022</footer>
</body>

Content component provides content for template editables. Layout root has embed tag and is not included into built layout.

page/index/index.htm

<!-- content component -->
<embed wood:template="template/page" xmlns:wood="js-lib.com/wood">
	<!-- content element -->
	<section wood:content="text">
		<h2>Section Title</h2>
		<p>Section content...</p>
	</section>
	<!-- content element -->
	<div class="dialog" wood:content="dialog">
		<div class="close"></div>
		<form>
			<input type="text" name="user-name" />
			<input type="password" name="password" />
		</form>	
		<button>Save</button>
	</div>
</embed>

And here is the resulting page:

<body>
	<nav><a href="home">Home</a><a href="about">About</a></nav>	
	<h1>Page Title</h1>
	<section>
		<h2>Section Title</h2>
		<p>Section content...</p>
	</section>
	<div class="dialog hidden">
		<div class="close"></div>
		<form>
			<input type="text" name="user-name" />
			<input type="password" name="password" />
		</form>	
		<button>Save</button>
	</div>
	<footer>copyright (c) 2022</footer>
</body>

Last updated 9/6/2022.