#951 Provide layout(template)-injection page composition

[Rocks Wang]

I think in current architecture, the layout component is an invasive design, it is something like table-based layout vs. DIV+CSS layout. Developer have to
1) mix up the layout code and real business logic, and
2) memorize many layout related tags, and
3) it's not flexible to change the layout dynamically,
a use case here is to use column layout for pc browser, whilst use flow layout for mobile browser

Why don't use a layout-injection design, just like Swing and SWT? is there any special consideration about this?

[Henri Chen]

Provide a utility Initiator class org.zkoss.zk.ui.util.Composition that do the layout composition automatically.

1. Provide a template.zul. Use ZK annotation self="@{insert(xyz)}" to specify the insert point; where the xyz is the insert join id.

2. Then use the Composition initiator to compose the visit page. The parts to be inserted into the insert point are defined as root components of the visit page with proper ZK annotation self="@{define(xyz)}"; where the xyz is the insert join id.

3. Root components defined with the same join id will be inserted into the template insert point as its child and form the final visited page.

4. Note that the insert point join id must be unique in template while it is not restricted among defined root components. Defined root components with the same join Id will be added as the child component of the insert point one by one per the defined sequence.

Following is the example:

/WEB-INF/layout/template.zul
----
<vbox>
<hbox self="@{insert(content)}"/>
<hbox self="@{insert(detail)}"/>
</vbox>

index.zul
----
<?init class="org.zkoss.zk.ui.util.Composition" arg0="/WEB-INF/layout/template.zul"?>
<zk>
<window self="@{define(content)}" title="window1" width="100px"/>
<window self="@{define(content)}" title="window2" width="200px"/>
<grid self="@{define(detail)}" width="300px"/>
</zk>

This example would form a page like following

<vbox>
<hbox>
<window title="window1" width="100px"/>
<window title="window2" width="200px"/>
</hbox>
<hbox>
<grid/>
</hbox>
</vbox>

[Henri Chen]

Ready since Nov. 3, 2008.