Getting started with the Cell Templates
From Wiki
|
|
|
A Cell is the Grid container of units, sub pages and sub grids. A Cell Template can be used to create a unique template for several elements (e.g. two different units) and treat them in the same template (e.g. a single unit).
Here's a Layout XML of a cell containing two data units:
<layout:Cell xmlns:layout="http://www.webratio.com/2006/WebML/Layout" _sel="t">
<layout:Unit unitId="dau15" label="Offer of the day" _sel="t" layout:expanded="true" id="dau15" name="Offer of the day"
entity="ent4" xmlns:gr="http://www.webratio.com/2006/WebML/Graph" gr:x="120" gr:y="3"
displayAttributes="att5 att7 att6" unitTagName="DataUnit">
<layout:Attribute attribute="att5" _sel="t" name="name" id="att5" type="string"
xmlns:db="http://www.webratio.com/2006/WebML/Database" db:column="name"/>
<layout:Attribute attribute="att7" _sel="t" name="photo" id="att7" contentType="image" type="blob"
xmlns:db="http://www.webratio.com/2006/WebML/Database" db:column="photo"/>
<layout:Attribute attribute="att6" _sel="t" name="price" id="att6" type="float"
xmlns:db="http://www.webratio.com/2006/WebML/Database" db:column="price"/>
<layout:Link link="ln29" _sel="t" id="ln29" name="More.." to="dau12" type="normal" automaticCoupling="true" validate="true"/>
<Selector booleanOperator="and" defaultPolicy="fill" id="dau15sel" _sel="t">
<AttributesCondition id="cond3" attributes="att22" name="highlight" implied="false" value="true" booleanOperator="or"
predicate="eq" _sel="t"/>
</Selector>
<Link id="ln29" name="More.." to="dau12" type="normal" automaticCoupling="true" validate="true" _sel="t"/>
</layout:Unit>
<layout:Unit unitId="dau16" _sel="t" layout:expanded="true" id="dau16" name="Product of the day" entity="ent1"
xmlns:gr="http://www.webratio.com/2006/WebML/Graph" gr:x="0" gr:y="0" displayAttributes="att10 att11 att12"
unitTagName="DataUnit">
<layout:Attribute attribute="att10" _sel="t" name="name" id="att10" type="string"
xmlns:db="http://www.webratio.com/2006/WebML/Database" db:column="name"/>
<layout:Attribute attribute="att11" _sel="t" name="price" id="att11" type="float"
xmlns:db="http://www.webratio.com/2006/WebML/Database" db:column="price"/>
<layout:Attribute attribute="att12" _sel="t" name="thumbnail" id="att12" contentType="image" type="blob"
xmlns:db="http://www.webratio.com/2006/WebML/Database" db:column="thumbnail"/>
<layout:Link link="ln30" _sel="t" id="ln30" name="More..." to="dau1" type="normal" validate="true" keywordOrder="par60">
<LinkParameter id="par58" name="OID_dau1key [OID]" source="data.attN2F94A6" target="dau1key.attN2F94A6" _sel="t"/>
<LinkParameter id="par60" name="name_KEYWORD" keyword="true" source="data.att10" _sel="t"/>
</layout:Link>
<Selector booleanOperator="and" defaultPolicy="fill" id="dau16sel" _sel="t">
<AttributesCondition id="cond4" attributes="att23" name="highlight" implied="false" value="true" booleanOperator="or"
predicate="eq" _sel="t"/>
</Selector>
<Link id="ln30" name="More..." to="dau1" type="normal" validate="true" keywordOrder="par60" _sel="t">
<LinkParameter id="par58" name="OID_dau1key [OID]" source="data.attN2F94A6" target="dau1key.attN2F94A6" _sel="t"/>
<LinkParameter id="par60" name="name_KEYWORD" keyword="true" source="data.att10" _sel="t"/>
</Link>
</layout:Unit>
</layout:Cell>
The Layout XML of a Cell is composed of the Layout XML of all the elements in it. In a Cell template, using a Groovy scriplet, it is possible to access to the structure of every element and treat it as a single element in the template. In the following example we use a Cell Template to print in a single table the first two attributes of the two Data Units.
We can use the Groovy methods selectSingleNode and selectNodes to process the Cell Layout XML (stored in the implicit variable "cell") in order to retrieve the information regarding each unit contained in the cell, using different criteria (by position, by type, by name, etc.). All this criteria are expressed using the XPath language.
#?delimiters [%, %], [%=, %]
[%
setHTMLOutput()
//select the first unit in the cell
def firstUnit = cell.selectSingleNode("layout:Unit[1]")
//select the first attribute of the first unit in the cell
def firstUnitFirstAttribute = firstUnit.selectSingleNode("layout:Attribute[1]")
//select the second attribute of the first unit in the cell
def firstUnitSecondAttribute = firstUnit.selectSingleNode("layout:Attribute[2]")
//select the second unit in the cell
def secondUnit = cell.selectSingleNode("layout:Unit[2]")
//select the first attribute of the second unit in the cell
def secondUnitFirstAttribute = secondUnit.selectSingleNode("layout:Attribute[1]")
//select the second attribute of the second unit in the cell
def secondUnitSecondAttribute = secondUnit.selectSingleNode("layout:Attribute[2]")
%]
<wr:Frame>
<table>
<tr>
<!--print the label of firstUnitFirstAttribute-->
<th>
<wr:Label context="firstUnitFirstAttribute"/>
</th>
<!--print the value of firstUnitFirstAttribute-->
<td>
<wr:Value context="firstUnitFirstAttribute"/>
</td>
</tr>
<tr>
<th>
<wr:Label context="firstUnitSecondAttribute"/>
</th>
<td>
<wr:Value context="firstUnitSecondAttribute"/>
</td>
</tr>
<tr>
<th>
<wr:Label context="secondUnitFirstAttribute"/>
</th>
<td>
<wr:Value context="secondUnitFirstAttribute"/>
</td>
</tr>
<tr>
<th>
<wr:Label context="secondUnitSecondAttribute"/>
</th>
<td>
<wr:Value context="secondUnitSecondAttribute"/>
</td>
</tr>
<tr>
<!--print all the links defined in firstUnit-->
<wr:Iterate var="l" context="firstUnit" select="layout:Link">
<td><wr:Link/></td>
</wr:Iterate>
</tr>
<tr>
<!--print all the links defined in secondUnit-->
<wr:Iterate var="l" context="secondUnit" select="layout:Link">
<td><wr:Link/></td>
</wr:Iterate>
</tr>
</table>
</wr:Frame>
Note the use of the context attribute in wr:Label and wr:Value tags, using the variables previously defined in a Groovy scriplet and the use of the wr:Iterate tags with the two variables "firstUnit" and "secondUnit", printing all the links defined in the units. Moreover, it's important to specify that normally Cell templates are not intended for general use, but are developed basing on a specified and particular need (in this case, this cell template works only with two data units with at least two attributes each).
By placing the two units in a single cell, it is possible to write a Cell Template in order to create the "tab-style" index. Here is the Cell Template code:
#?delimiters [%, %], [%=, %]
[%
setHTMLOutput()
//the first Index Unit (showing the products)
def products = cell.selectSingleNode("layout:Unit[1]")
//the first attribute of the products index (product name)
def productsName = products.selectSingleNode("layout:Attribute[1]")
//the second Index Unit (showing the combinations)
def combinations = cell.selectSingleNode("layout:Unit[2]")
//the first attribute of the combination index (combination name)
def combinationsName = combinations.selectSingleNode("layout:Attribute[1]")
//the first (and unique) link of the products index (the search link)
def searchLink = products.selectSingleNode("layout:Link")
%]
<wr:Frame>
<table>
//the first row contains all the products names
<tr>
<c:forEach var="current" varStatus="status" items="${[%=products['id']%].data}">
<c:set var="index" value="${status.index}"/>
<td class="link">
//creates an anchor using the search link and showing the products name
<a href="<wr:URL context="searchLink"/>" class="link">
//the product name is rendered as a link, by clicking on it, the search link is followed
<wr:Value context="productsName"/>
</a>
</td>
</c:forEach>
</tr>
//in the second row there's the list of related combinations
<tr>
//the index variable (defined in the forEach tag) is used to set the colspan
<td colspan="${index +1}">
<table width="100%">
<c:forEach var="current" varStatus="status" items="${[%=combinations['id']%].data}">
<c:set var="index" value="${status.index}"/>
<tr>
<td>
//clicking follows the search link and computes the second index unit, showing all the related combinations name
<wr:Value context="combinationsName"/>
</td>
</tr>
</c:forEach>
</table>
</td>
</tr>
</table>
</wr:Frame>
| Related articles: |
