Layout Parameters - js-lib-com/wood GitHub Wiki

A reusable component, template or child component, can be designed for in place component customization. For that it defines named value placeholders using parameter references - @param/name. Layout parameter references are a type of at-meta reference.

Parameter reference is text replaced by build tool and can be defined anywhere XML allows a text to appear.

<h2 title="@param/toolip">@param/title</h2>

Parent component should define values for all parameter references, using wood:param="name:value;*" operator. This operator accepts as argument a list of parameters separated by semicolon. A parameter is a (name, value) tuplu separated by colon. Semicolon at the list end is optional.

Is parent component responsibility to match parameter names and number. Order is not relevant.

Inclusion

Reusable child component compo/section is created with customizable section title; parameter name is title.

compo/section/section.htm

<!-- child component -->
<section class="section">
	<!-- parameter reference -->
	<h2>@param/title</h2>
</section>

Parent component compo/article uses child reference element to declare layout parameter value, with name title (the name defined by child component compo/section).

compo/article/article.htm

<!-- parent component -->
<article xmlns:wood="js-lib.com/wood">
	<!-- child reference element -->
	<section wood:compo="compo/section" wood:param="title:Section Title"></section>
</article>

Builder tool text replace parameter reference from child component with value provided by parent component.

<article>
	<section>
		<h2>Section Title</h2>
	</section>
</article>

Template

Reusable template component template/page is created with customizable page title; parameter name is title.

template/page/page.htm

<!-- template component -->
<body xmlns:wood="js-lib.com/wood">
	<!-- parameter reference -->
	<h1>@param/title</h1>
	<!-- editable element -->
	<section wood:editable="section1"></section>
	<!-- editable element -->
	<section wood:editable="section2"></section>
</body>

Content component page/index uses component root element to declare layout parameter value, with name title (the name defined by template component template/page).

page/index/index.htm

<!-- content component -->
<embed wood:template="template/page" wood:param="title:Page Title" xmlns:wood="js-lib.com/wood">
	<!-- content element -->
	<section wood:content="section1"></section>
	<!-- content element -->
	<section wood:content="section2"></section>
</embed>

Builder tool text replace parameter reference from template component with value provided by content component.

<body>
	<h1>Page Title</h1>
	<section></section>
	<section></section>
</body>

Template Fragment

Reusable template component template/page is created with customizable page title; parameter name is title.

template/page/page.htm

<!-- template component -->
<body xmlns:wood="js-lib.com/wood">
	<!-- parameter reference -->
	<h1>@param/title</h1>
	<!-- editable element -->
	<section wood:editable="section"></section>
</body>

Content component page/index uses component root element to declare layout parameter value, with name title (the name defined by template component template/page).

page/index/index.htm

<!-- content component -->
<section wood:template="template/page#section" wood:param="title:Page Title" xmlns:wood="js-lib.com/wood"></section>

Builder tool text replace parameter reference from template component with value provided by content component.

<body>
	<h1>Page Title</h1>
	<section></section>
</body>

Inline Template

Reusable template component template/article is created with customizable article title; parameter name is title.

template/article/article.htm

<!-- template component -->
<article xmlns:wood="js-lib.com/wood">
	<!-- parameter reference -->
	<h2>@param/title</h2>
	<!-- editable element -->
	<section wood:editable="section1"></section>
	<!-- editable element -->
	<section wood:editable="section2"></section>
</article>

Parent component page/article uses inline template element to declare layout parameter value, with name title (the name defined by template component template/article).

page/article/article.htm

<!-- parent component -->
<body xmlns:wood="js-lib.com/wood">
	<!-- inline template element -->
	<article wood:template="template/article" wood:param="title:Article Title">
		<!-- inline content element -->
		<section wood:content="section1"></section>	
		<!-- inline content element -->
		<section wood:content="section2"></section>	
	</article>
</body>

Builder tool text replace parameter reference from template component with value provided by parent component.

<body>
	<article>
		<h2>Article Title</h2>
		<section></section>
		<section></section>
	</article>
</body>

Inline Fragment

Inline fragment is an inline template with a single editable referred from parent component with template fragment syntax.