Home
WOOD stands for Web Object Oriented Development and is a command line build tool for user interfaces, based on W3C technologies: HTML and CSS, and plain ECMA Script. Its main goal is to move runtime components consolidation on build time. For that WOOD tool delivers a standard W3C site.
It is based on HTML components, linked in structures of arbitrary complexity by only six WOOD operators. Operators are declared using well known HTML attributes syntax. There is no programing language mixed in the HTML components using some fancy syntax - just pure HTML. Final HTML pages are created by build tool at development phase, not on runtime.
WOOD promotes an object oriented development paradigm using decomposition of complex user interfaces into user interface components - for short, components. Component is the base unit for code reusability that keeps all its files together, in the component directory. A component can inherit from a component with editable elements - named template, and can include child components. A child component can be reused between multiple parent components.
A page is just a component that has the <body> element.
There is no formal limitation on templates inheritance hierarchy. A template can inherit from another template creating an arbitrary long templates chain. The same goes for child components. A component can include more that one single child component that can include its own components, creating a tree of not restricted complexity. And since template is indeed a component it can include its own components tree.
Components can be exported and imported to / from another projects and can be distributed in libraries. Moving components around is just a mater of copying the component directory.
WOOD builder creates site files from project components - resulting files being standard HTML and related styles, scripts and media files. Build process reads component source files and resources from project, consolidates them into pages and write to the target file system. Target file system defines the directories structure for the site files. Different file systems structures are supported but a default implementation exists.
The two OOP relations, inheritance and aggregation, supported by WOOD are declared with operators. In WOOD parlance these OOP terms are called template, respective inclusion.
Use wood:editable to declare editable elements on template, and wood:template to declare template path on component that extends the template. For child components inclusion use wood:compo operator. There is also the option to define layout parameters with wood:param when declare template or child components. Layout parameters are used on template and child component allowing customizing a component reused in multiple places.
WOOD builder first includes child components tree, in depth-first order, then inject content into editable areas from templates chain, bottom-up. Top template should have <body> element.
Here is the HTML code for above diagram. Note that WOOD actually codes components relations into component layout files.
We talk about component relations but strictly speaking is about layout relations. Anyway, since component has one and only one layout file we can apply layout files relations to components.
- 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>- compo/dialog/dialog.htm
<!-- child component -->
<div>
<div class="close"></div>
<!-- parameter reference -->
<h3>@param/title</h3>
<form>
<input type="text" name="user-name" />
<input type="password" name="password" />
</form>
<button>Save</button>
</div>- page/home/home.htm
<!-- content component for template/page -->
<!-- parent component for compo/dialog -->
<section wood:template="template/page#section" wood:param="title:Page Title" xmlns:wood="js-lib.com/wood">
<h2>Section Title</h2>
<p>Section content...</p>
<!-- child reference element -->
<div wood:compo="compo/dialog" wood:param="title:Dialog Title"></div>
</section>And here is the resulting page:
<body>
<h1>Page Title</h1>
<section>
<h2>Section Title</h2>
<p>Section content...</p>
<div>
<div class="close"></div>
<h3>Dialog Title</h3>
<form>
<input type="text" name="user-name" />
<input type="password" name="password" />
</form>
<button>Save</button>
</div>
</section>
</body>To sum-up, WOOD tools uses major object oriented features:
| OOP | WOOD |
|---|---|
| encapsulation | by keeping all component files in a single directory that act as name space |
| privacy | build and preview processes does search for resources only in component and global asset directories |
| inheritance | via editable elements from templates |
| aggregation | using child components that can also have own child components, in tree of not restricted complexity |
| unit test | unit testing is not strictly speaking specific to OOP but is well supported by encapsulation |
Below is a more complex example. It is a contrived example but helps in getting the big picture.
It focuses on component relations that are represented as arrows, simple arrow for inheritance and arrow with diamond for aggregation. Note that inheritance is also know as IS A relation whereas aggregation is a HAS A relation. Also, a component that implements content for an editable area is known as content component, whereas a component that has child components is named parent component.
Last updated 9/5/2022.