Weblog of: Derek Keats
Blog Quick Search
Type a search term into the text box to perform simple searches through all blog posts
Follow me on Twitter Follow me on Twitter
Friend me on Facebook Add me on Facebook
Chisimba Facebook group Chisimba Facebook group


Related tweets
Login




Remember me

Forgot your password?
YES, HELP ME LOGIN

Block-based dynamic canvas in #Chisimba
466 days ago

In keeping with the idea of greater object orientation in which objects are accessible for reuse by users, in 2010, we did some work on Chisimba to improve the way in which it renders its look and feel, as well as the way in which it parses templates to render content. Everything is backward compatible, of course. This content was first published at the time, and it is being reposted here in response to a request from one of the developers working for Kenga.

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.