Adding your own views

There are usually several scenarios when there is a need to create your own view. Let's look into the situations and analyze them

Special page layout

Remember that "Page" class also based on AbstractView and therefore has a template. Suppose your designer wants to put something special on one of your application pages. Redefine defaultTemplate() of your page first:

class page_test extends Page {
    function 
init(){
        
parent::init();
        
$this->add('LoremIpsum');
    }
    function 
defaultTemplate(){
        return array(
'page/test');
    }
}

Put the code designer asked you to use inside templates/default/page/test.html, but don't forget to add <?$Content?> tag. It's recommended that you also use the id="<?$_name?> for the top-most element of template. That's not mandatory but will enable event binding and reloading.

Re-usable HTML chunk of code

Perhaps you need to put a piece of HTML code on several of your pages. To do that, you might be able to get away with simply using "View" class:

$page->add('View',null,'corner',array('view/snippet'));

HTML snippet with enabled logic

What if your HTML code needs some additional logic? It's then better to create a separate class for your view:

class Alex extends View {
    public 
$float='right';
    function 
init(){
        
parent::init();
        
$this->setElement('img');
        
$this->setAttr('src',$this->api->url('template','images/PinkElephant.jpg'));
    }
    function 
render(){
        
$this ->addStyle('float',$this->float);
        
parent::render();
    }
    function 
align($side){
        
$this->float=$side;
        return 
$this;
    }
}

Alternative implementation using AbstractView and Template

class Alex extends AbstractView {
    function 
align($side){
        
$this->template->set('side',$side);
        return 
$this;
    }
    function 
defaultTemplate(){
        return array(
'view/alex');
    }
}

Template:

<img id="<?$_name?>" src="<?template?>images/PinkElephant.jpg<?/?>" float="<?side?>right<?/?>"/>