Variables - js-lib-com/wood GitHub Wiki

Variables hold name/value pairs that can be referenced from component source files. In addition to having a name, variable belongs to a type; so to fully refer a variable one need to know both type and name. Variables references are defined using at-meta reference syntax.

For example, variable @string/title for a page heading has type string and name title; it is text replaced by build tool with variable value declared into a variables definition file.

  • page/index/index.htm
<body>
	<!-- variable reference -->
	<h1>@string/title</h1>
</body>

A variables has a scope; its name is private to a component. Is legal for variables from different component to have the same name. Beside component private variables there are project asset variables; these are global and visible on all components so their name should be unique per project.

Component variable can overwrite a global variable. Value retrieving logic attempts first to get variable value from component variables and only on value miss tries project asset variables. Also, when multi-language is requested, attempt first to retrieve that language and if not found uses default.

Definition File

Variables referenced by component sources should be defined into a variables definition file. It is a XML file with variable type as root element tag; this implies that all variables from a file have the same type.

The name of the variables definition file is not constrain but usually is variables type or at least should suggest this type. Anyway, this file name supports file variants, especially useful for localization.

Here is a string variables definition file inside the component page/index. We have here a variable title with value Index Page. This variable is referenced by above component layout file - page/index/index.htm.

  • page/index/string.xml
<string>
	<!-- variable definition -->
	<title>Index Page</title>
</string>

Build tool will text replace variable reference @string/title from above component layout file with value from definition file. Resulting layout snippet:

  • site/index.htm
<BODY>
	<H1>Index Page</H1>
</BODY>

Variable Types

A variable has a type that constrains the variable value pattern. Currently supported types are listed below.

Type Description
link Links references to local or third part resources, mainly for href attribute.
string Plain string values mainly for multi-languages support.
text Same as string but allows for HTML format.
tip Tooltip value, usually for elements supporting title attribute.

Link Variables

Links references to local or third part resources, mainly for href attribute.

  • page/index/string.xml
<link>
	<!-- link variable definition -->
	<account>account.htm</account>
</link>
  • page/index/index.htm
<body>
	<!-- anchor with link variable reference -->
	<a href="@link/account">@string/account</a>
</body>
  • site/index.htm
<BODY>
	<A href="account.htm">Account</A>
</BODY>

String Variables

Plain string values mainly for multi-languages support.

  • page/index/string.xml
<string>
	<!-- string variable definition -->
	<title>Index Page</title>
</string>
  • page/index/index.htm
<body>
	<!-- string variable reference -->
	<h1>@string/title</h1>
</body>
  • site/index.htm
<BODY>
	<H1>Index Page</H1>
</BODY>

Text Variables

Same as string but allows for HTML format.

  • page/index/text.xml
<text>
	<!-- HTML text definition -->
	<call-to-action>
		<h3>Become member of @string/logo-type community.</h3>
		<ul>
			<li>Be a pro-active part of community driven development process.</li>
			<li>Control learning circle for your self or help less experienced followers.</li>
		</ul>
	</call-to-action>
</text>
  • page/index/index.htm
<body>
	<!-- HTML text reference -->
	<section>@text/call-to-action</section>
</body>
  • site/index.htm
<BODY>
	<SECTION>
		<H3>Become member of kids (a)cademy community.</H3>
		<UL>
			<LI>Be a pro-active part of community driven development process.</LI>
			<LI>Control learning circle for your self or help less experienced followers.</LI>
		</UL>
	</SECTION>
</BODY>

Tooltip Variables

Tooltip value, usually for elements supporting title attribute.

  • page/index/tip.xml
<tip>
	<!-- tooltip definition -->
	<top-search>search knowledge database</top-search>
</tip>
  • page/index/index.htm
<body>
	<!-- search action with tooltip -->
	<img src="@image/action/search" title="@tip/top-search" />
</body>
  • site/index.htm
<BODY>
	<IMG SRC="media/asset_action_search.svg" TITLE="search knowledge database" />
</BODY>

Localization

A variables definition file, like any other project file, supports variants.

Variants can be used to declare variables definition files for specific language; for example page/index/string_en-US.xml file for strings using US English.

Be it a page component with a string variable reference.

  • page/index/index.htm
<body>
	<!-- string variable reference -->
	<h1>@string/app-name</h1>
</body>

On the same component we have two string variable definition files, for en-US and for ro-RO.

  • page/index/string_en-US.xml
<string>
	<!-- string variable definition for en-US -->
	<app-name>The Big App</app-name>
</string>
  • page/index/string_ro-RO.xml
<string>
	<!-- string variable definition for ro-RO -->
	<app-name>Aplicația cea mare</app-name>
</string>

Build tool will create two identical sites but with different string content. Note subdirectories site/en-US/ and site/ro-RO/.

  • site/en-US/index.htm
<BODY>
	<H1>The Bog App</H1>
</BODY>
  • site/ro-RO/index.htm
<BODY>
	<H1>Aplicația cea mare</H1>
</BODY>

Last updated 9/15/2022.

⚠️ **GitHub.com Fallback** ⚠️