How to Use Views

As you have already seen, adding views is quite simple. Once you perform the adding operation, you can then interact with the view to achieve different things.

Below are a few simple views bundled with Agile Toolkit

LoremIpsum and reloading objects on the page

Tired of copy-pasting lorem ipsum on your page? Use the LoremIpsum view, which automatically generates placement text. You can define how much text you want.

Result

MinMax

Imputo cui damnum. Nimis validus tego mauris comis antehabeo. Exerci velit comis? Molior vulpes populus ratis letalis jus abbas amet illum modo. Fere sed validus caecus at. Eum nutus populus vero damnum paulatim pagus.

 

Code


$form
=$page->add('Form');
$form
    
->addField('Slider','words')
    ->
setRange(10,150)
    ->
set(30)
    ->
js('change',
        
$form->js()->submit());

$len=$_GET['words'];
if(!
$len)$len=30;
if(
$len>150)$len=150;
if(
$len<10)$len=10;

$l=$page->add('LoremIpsum');
$l->setLength(1,$len);

if(
$form->isSubmitted()){
    
$l->js()
        ->
reload(array(
            
'words'=>$form->get('words')))
        ->
execute();
}

The above sample demonstrates quite a few things. Let's go through it step by step. Firstly, there are 2 views: the first is the form, and the second is the LoremIpsum. The Form view has another view: the slider field.

The form is added in a very simple way: addField() adds a new view inside the form of type form_field_slider, and returns an instance of that view. setRange() is a slider method. Finally we bind an action to the change event, which will submit the whole form when the slider value is changed.

When the form is submitted, it will not refresh the page. Instead, it will send an AJAX request to the server, with the form values. That request goes through the initialization of the same page, however it doesn't go through rendering. Inside the initialization, the same form identifies the submit request and the isSubmitted() function returns true

The script then creates a JavaScript chain for a "LoremIpsum" object, which instructs the browser to reload the view from the server. Any view can be reloaded like that. Here, in addition we are passing an argument to reload, which will be found inside the _GET arguments.

If you have developed with AJAX before, you might find it unusual how objects interract with themselves, and the same piece of code is executed 3 times - on initial display, on form submit and on lorem ipsum reload. What's important is that adding objects on the page is an inexpensive operation. Objects which are not supposed to be rendered, will not consume CPU cycles.

HtmlElement

This view can be used for any single-element view. In fact, it has many direct descendants, such as H1, H2 and so on. You can easily create more on your own, if you need them.

Result

Subtitle

Link Element
 

Code


class MyTitle extends HtmlElement {
    function 
init(){
        
parent::init();
        
$this->setElement('h4');
        
$this->addStyle('float','right');
    }
}


$page->add('MyTitle')->set('Subtitle');


$page->add('HtmlElement')
    ->
setElement('a')
    ->
setAttr('href''#yo')
    ->
set('Link Element');

The same as with any other view, you can add them to other views. Let's create a div and add an image inside.

Result

 

Code

$div=$page->add('HtmlElement')
    ->
setStyle('padding','4px')
    ->
setStyle('border','1px dashed black');

$div->add('HtmlElement')
    ->
setElement('img')
    ->
setAttr('src',$this->api->locateURL('template','images/PinkElephant.jpg'))
    ->
set('');

Your view can actually incorporate other views inside itself - either standard ones, or ones you have defined.

Result

 

Code

class MyCompositeView extends View {
    public 
$b1,$b2,$b3;

    function 
init(){
        
parent::init();

        
$this->b1=$this->add('Button')->set('Hello');
        
$this->b2=$this->add('Button')->set('Cruel');
        
$this->b3=$this->add('Button')->set('World');
    }
}

$cc=$page->add('MyCompositeView');
$cc->b3->set('Earth');
$cc->b2->destroy();

As you can see, even if the composite view adds sub-elements you can still interact with them from outside the view, and even destroy them. You can add a complex view to the page, and then interact with elements inside that view.

Views with templates

If we were to add an object for every HTML tag, then the performance of Agile Toolkit would be appalling. Single-element views are the exception rather than the rule. In many cases you would want a view to contain a template. You will find more information on how to build such a view under Templates and Rendering section.