Creating your own Views with custom Templates

If you don't know how to create your own View class, it's done like this:

class View_Disclaimer extends AbstractView {
}

To make your view use a different template, redefine defaultTemplate function. You do not need to call parent's defaultTemplate().

class View_Disclaimer extends AbstractView {
    function 
defaultTemplate(){
        return array(
'view/textblocks','Disclaimer');
    }
}

You will also need to create templates/default/view/textblocks.html file with tag <?Disclaimer?> containing the actual disclaimer text and markup. View will ignore everything except Disclaimer region.

Next you might want to define init() method and possibly to auto-fill some of the template tags.

    function init(){
        
parent::init();
        
$this->add('Button',null,'MoreInfo')
            ->
setLabel('More Info')
            ->
js('click')
                ->
univ()
                ->
frameURL('Full Disclaimer Text',$this->api->getDestinationURL('disclamier/moreinfo'));

        
$this->template->trySet('company_name',$this->api->getConfig('owner/company_name','The Company'));
    }

This code will add a button on all the disclaimers you might have across the system with a popup directed to a separate page. This code requires your template to have empty tag named "MoreInfo".

Tag company_name will be set to the value from configuration file.

Unique object names

When defining custom templates for your views, you must be mindful that JavaScript binding will only work if you define id= properly. The empty tag "_name" will have the unique name of the object filled into the template automatically. Here is a typical template for your disclaimer.


<div class="disclaimer-box" id="<?$_name?>">
  <div class="disclaimer-text">
    Any expressions of opinion on this site belongs to the individual writers and not to <?$company_name?>.
  </div>
  <div class="disclaimer-button">
    <?MoreInfo?>
  </div>
</div>

It's always recommended to properly set id=. Although it can be the ID of any element, the use of <div> is advised.

Custom dynamic CSS

Normally your objects CSS (such as disclaimer-box) will be defined inside atk-custom.css. If your view, however, requires additional CSS files, you can load them dynamically by placing this inside init() method:

$this->js(true)->_css('disclaimer'); // loads from templates/defaults/css/disclaimer.css

This is handy if you do not want this CSS to be loaded initially, but only if the object is being displayed. The CSS will be properly loaded even if your object has been loaded through AJAX. However due to the way that CSS inclusion works, any referenced images will be loaded relative to webroot. We advise not to use dynamic CSS loading if it relies on images.

Remember that you can add includes into shared.html file by appending to the region of "js_include" in API's template:

$this->api->append("js_include",'<link rel="stylesheet" type="text/css" href="'.
        
$this->api->locateURL('css','disclaimer.css').
        
'"/>');