Creating a Free and Open Source Software ecosystem to facilitate government FOSS policy implementation
by Derek Keats
Using the present to create the future: How can we move South Africa from consumer to producer of web technologies
by Derek Keats
An ecosystem approach to building mobile opportunities into a business strategy
by Derek Keats
Following on from the idea of dynamic canvases, we made it possible for Chisimba to render an entire template based on functionality of Chisimba that we call blocks. There are two types of blocks in Chisimba, narrow blocks and wide blocks. Narrow blocks work on the side columns of 2 and 3 column layout, and wide blocks work on the middle area of 1, 2 and 3 column layout. Of course, this is a rule of thumb, there is nothing to stop a developer from lacing two narrow blocks side by side in a wide column or in a single column layout.
To use blocks to make a template, it may be necessary to use output buffering. To do this, add the following to the top of the template:
<?php
ob_start();
?>
Then add the following to the bottom of the template:
<?php
// Get the contents for the layout template
$pageContent = ob_get_contents();
ob_end_clean();
$this->setVar('pageContent', $pageContent);
?>
You then need a layout template in your module that contains:
<?php
$objBlocks = $this->getObject('blockfilter', 'dynamiccanvas');
$pageContent = $this->getVar('pageContent');
$pageContent = $objBlocks->parse($pageContent);
echo $pageContent;
?>
In your controller, for methods that will render the block-based dynamic canvas, you need to ensure that you enable the layout template using:
$this->setLayoutTemplate('demo_layout.php');
For this to work, you need a version 3.0+ skin, and you need to use the Chisimba Canvas layout, which is as follows:
<div id="Canvas_Content_Body_Region1"></div>
<div id="Canvas_Content_Body_Region3"></div>
<div id="Canvas_Content_Body_Region2"></div>
Note that Canvas_Content_Body_Region2 is the middle, but needs to be presented last in order for the columns to float and align correctly.
For 2-column layouts this would be:
<div id="Canvas_Content_Body_Region1"></div>
<div id="Canvas_Content_Body_Region2"></div>
Blocks are inserted using JSON syntax as follows:
{
"display" : "block",
"module" : "modulename",
"block" : "blockname",
"blocktype" : "blocktype",
"titleLength" : "titlelength",
"wrapStr" : 0|1,
"showToggle" : 0|1,
"hidden" : "value,
"showTitle" : 0|1,
"cssClass" : "cssClass",
"cssId " : "cssId"
}
Thus, adding the above block to the left column in such a template would consist of including it in the Canvas_Content_Body_Region1 div as follows:
<div id="Canvas_Content_Body_Region1">
{
"display" : "block",
"module" : "modulename",
"block" : "blockname",
"blocktype" : "blocktype",
"titleLength" : "titlelength",
"wrapStr" : 0|1,
"showToggle" : 0|1,
"hidden" : "value,
"showTitle" : 0|1,
"cssClass" : "cssClass",
"cssId " : "cssId"
}
</div>
Everything except display, module and block are optional.
A template made up in this way might look like:
Note that the lines
$objFix = $this->getObject('cssfixlength', 'htmlelements');
$objFix->fixThree();
are there to equalize the columns.
For a working example of this, see the dynamiccanvas module.