Template : DooViewBasic

[RichardM]

For i to j
Use this sort of for loop if you need to iterate over something a known number of times.

Code: Select all

For 1 to 10<br />
<ul>
{% for a from 1 to 10 %}
   <li class="">
      Value: {{a}}
   </li>
{% endfor %}
</ul>

For 1 to var1 [1 to 12]<br />
<ul>
{% for b from 1 to var1 %}
   <li class="">
      Value: {{b}}
   </li>
{% endfor %}
</ul>

For add(var1, var1) to sum([var1, var1, var1]) [24 to 42]<br />
<ul>
{% for c from add(var1, var1) to sum([var1, var7.c]) %}
   <li class="">
      Value: {{c}}
   </li>
{% endfor %}
</ul>


If you want to go in reverse order you can do

Code: Select all

For 10 to 1<br />
<ul>
{% for d from 10 to 1 %}
   <li class="">
      Value: {{d}}
   </li>
{% endfor %}
</ul>


If you want to move by more than one on each iteration you can define the step. The step value should always be positive for example '2' and if the range is meant to increase (1 to 10) then it will increment up in steps of 2. If the ranges decreases (10 to 1) then it will decrease by 2 on each iteration.

Code: Select all

For 1 to 10<br />
<ul>
{% for e from 1 to 10 step 2 %}
   <li class="">
      Value: {{e}}
   </li>
{% endfor %}
</ul>

For 20 to 7<br />
<ul>
{% for f from 20 to 7 step 3 %}
   <li class="">
      Value: {{f}}
   </li>
{% endfor %}
</ul>


These will compile down to:

Code: Select all

For 1 to 10<br />
<ul>
<?php foreach(range(1, 10, 1) as $data['a']):?>
   <li class="">
      Value: <?php echo $data['a']; ?>
   </li>
<?php endforeach; ?>
</ul>

For 1 to var1<br />
<ul>
<?php foreach(range(1, $data['var1'], 1) as $data['b']):?>
   <li class="">
      Value: <?php echo $data['b']; ?>
   </li>
<?php endforeach; ?>
</ul>

For add(var1, var1) to sum([var1, var1, var1])<br />
<ul>
<?php foreach(range(TemplateTag::add($data['var1'],$data['var1']), TemplateTag::sum(array($data['var1'],$data['var7']['c'])), 1) as $data['c']):?>
   <li class="">
      Value: <?php echo $data['c']; ?>
   </li>
<?php endforeach; ?>
</ul>

For 10 to 1<br />
<ul>
<?php foreach(range(10, 1, 1) as $data['d']):?>
   <li class="">
      Value: <?php echo $data['d']; ?>
   </li>
<?php endforeach; ?>
</ul>

For 1 to 10<br />
<ul>
<?php foreach(range(1, 10, 2) as $data['e']):?>
   <li class="">
      Value: <?php echo $data['e']; ?>
   </li>
<?php endforeach; ?>
</ul>

For 20 to 7<br />
<ul>
<?php foreach(range(20, 7, 3) as $data['f']):?>
   <li class="">
      Value: <?php echo $data['f']; ?>
   </li>
<?php endforeach; ?>
</ul>


[RichardM]

Array: Iterate over an array
We need to add another line to our MainController for this example. Add this just before the $this->render() line

Code: Select all

$data['var9'] = array(new TestObj('foo', 'bar'), new TestObj('abc', 'def'), new TestObj('xyz', 'zyx'));


Now we can add some more tags to our index.html file

Code: Select all

Iterate over an array<br />
<ul>
{% for var3 as element %}
   <li class="">
      Value: {{element}}
   </li>
{% endfor %}
</ul>

Iterate over an array of objects
<ul>
{% for var9 as element %}
   <li class="">
      Values::: a:{{element->a}} :: b:{{element->b}}
   </li>
{% endfor %}
</ul>


These will output:

Code: Select all

Iterate over an array
Value: A
Value: B
Value: C
Value: D
Value: E
Iterate over an array of objects
Values::: a:foo :: b:bar
Values::: a:abc :: b:def
Values::: a:xyz :: b:zyx


and they where compiled down to:

Code: Select all

Iterate over an array<br />
<ul>
<?php foreach($data['var3'] as $data['element']):?>
   <li class="">
      Value: <?php echo $data['element']; ?>
   </li>
<?php endforeach; ?>
</ul>

Iterate over an array of objects
<ul>
<?php foreach($data['var9'] as $data['element']):?>
   <li class="">
      Values::: a:<?php echo $data['element']->a; ?> :: b:<?php echo $data['element']->b; ?>
   </li>
<?php endforeach; ?>
</ul>


[RichardM]

Arrays: Iterate over an associative array and get its keys
If you want to iterate over an array and have access to the keys of the associative array at the same time you will need to use this version of the for loop. Additionally for this demo you will need to add the following line to our MainController in the same way we have done so for the other demos.

Code: Select all

$data['var10'] = array('a'=>new TestObj('foo', 'bar'), 'b'=>new TestObj('abc', 'def'), 'c'=> new TestObj('xyz', 'zyx'));


Now in our template we can do the following:

Code: Select all

Iterate over an array with key<br />
<ul>
{% for var4 as key=>element %}
   <li class="">
      Value: {{element}}
   </li>
{% endfor %}
</ul>

Iterate over an array of objects with key
<ul>
{% for var10 as abc=>element %}
   <li class="">
      Key: {{abc}}<br />
      Values::: a:{{element->a}} :: b:{{element->b}}
   </li>
{% endfor %}
</ul>


The output of running these are:

Code: Select all

Iterate over an array with key
 Value: value 1
 Value: value 2
 Value: value 3
Iterate over an array of objects with key
 Key: a
 Values::: a:foo :: b:bar
 Key: b
 Values::: a:abc :: b:def
 Key: c
 Values::: a:xyz :: b:zyx


And the compiled code looks something like:

Code: Select all

Iterate over an array with key<br />
<ul>
<?php foreach($data['var4'] as $data['key']=>$data['element']):?>
   <li class="">
      Value: <?php echo $data['element']; ?>
   </li>
<?php endforeach; ?>
</ul>

Iterate over an array of objects with key
<ul>
<?php foreach($data['var10'] as $data['abc']=>$data['element']):?>
   <li class="">
      Key: <?php echo $data['abc']; ?><br />
      Values::: a:<?php echo $data['element']->a; ?> :: b:<?php echo $data['element']->b; ?>
   </li>
<?php endforeach; ?>
</ul>


[RichardM]

Arrays: Enable Meta Data
It is now possible to have the template engine make available meta data for the for loops. These allow you access to information including:

• length - How many elements are there in total
• first - Is this the first element of the array
• last - Is this the last element of the array
• index - Start from 1 and goes up to count
• index0 - Starts at 0 and goes up to count-1

This meta data is accessed through a global doo data array as follows

Code: Select all

doo.for.ELEMENT_ID.first
doo.for.ELEMENT_ID.last
doo.for.ELEMENT_ID.index
doo.for.ELEMENT_ID.index0
doo.for.ELEMENT_ID.length


Where ELEMENT_ID is replaced with the name you use for the elements you iterate over. This can be seen in the demos below.

Because this information is not always required every time you run a loop you have the option to enable it when its needed. This will save the performance penalty of having such information to hand but gives you the option to have this data when it will be of benefit.

To use the meta data you need to adapt your for statements to end " with meta" which will instruct the template engine to include such data. Below are some of the samples you saw earlier modified to use such information and also combining this with the if statements already covered:

Code: Select all

For 1 to 10<br />
<ul>
{% for a from 1 to 10 with meta %}
   <li class="{% if (doo.for.a.first) %} first{% endif %}{%if(doo.for.a.last)%} last{%endif%}">
            Index0: {{doo.for.a.index0}} -- Index: {{doo.for.a.index}} -- Value: {{a}}
         </li>
{% endfor %}
</ul>

Iterate over an array of objects
<ul>
{% for var9 as element with meta %}
   <li class="{% if (doo.for.element.first) %} first{% endif %}{%if(doo.for.element.last)%} last{%endif%}">
      Index0: {{doo.for.element.index0}} -- Index: {{doo.for.element.index}}<br />
      Values::: a:{{element->a}} :: b:{{element->b}}
   </li>
{% endfor %}
</ul>

Iterate over an array of objects with key
<ul>
{% for var10 as abc=>element with meta %}
   <li class="{% if (doo.for.element.first) %} first{% endif %}{%if(doo.for.element.last)%} last{%endif%}">
      Index0: {{doo.for.element.index0}} -- Index: {{doo.for.element.index}}<br />
      Key: {{abc}}<br />
      Values::: a:{{element->a}} :: b:{{element->b}}
   </li>
{% endfor %}
</ul>

Example Output:
[code]
For 1 to 10
Index0: 0 -- Index: 1 -- Value: 1
Index0: 1 -- Index: 2 -- Value: 2
Index0: 2 -- Index: 3 -- Value: 3
Index0: 3 -- Index: 4 -- Value: 4
Index0: 4 -- Index: 5 -- Value: 5
Index0: 5 -- Index: 6 -- Value: 6
Index0: 6 -- Index: 7 -- Value: 7
Index0: 7 -- Index: 8 -- Value: 8
Index0: 8 -- Index: 9 -- Value: 9
Index0: 9 -- Index: 10 -- Value: 10
Iterate over an array of objects
Index0: 0 -- Index: 1
Values::: a:foo :: b:bar
Index0: 1 -- Index: 2
Values::: a:abc :: b:def
Index0: 2 -- Index: 3
Values::: a:xyz :: b:zyx
Iterate over an array of objects with key
[/code]

And the compiled code for this:
[code]
For 1 to 10<br />
<ul>
<?php $_dooTemplateRangeForLoop_6591 = range(1, 10, 1);
$data['doo']['for']['a']['length'] = count($_dooTemplateRangeForLoop_6591);
$data['doo']['for']['a']['index']  = 0;
$data['doo']['for']['a']['index0'] = -1;
foreach($_dooTemplateRangeForLoop_6591 as $data['a']):
$data['doo']['for']['a']['index']++;
$data['doo']['for']['a']['index0']++;
$data['doo']['for']['a']['first'] = ($data['doo']['for']['a']['index0']) == 0 ? true : false;
$data['doo']['for']['a']['last']  = ($data['doo']['for']['a']['index']) == $data['doo']['for']['a']['length'] ? true : false;
?>
   <li class="<?php if(($data['doo']['for']['a']['first'])): ?> first<?php endif; ?><?php if(($data['doo']['for']['a']['last'])): ?> last<?php endif; ?>">
            Index0: <?php echo $data['doo']['for']['a']['index0']; ?> -- Index: <?php echo $data['doo']['for']['a']['index']; ?> -- Value: <?php echo $data['a']; ?>
         </li>
<?php endforeach; ?>
</ul>

Iterate over an array of objects
<ul>
<?php $data['doo']['for']['element']['length'] = count($data['var9']);
$data['doo']['for']['element']['index']  = 0;
$data['doo']['for']['element']['index0'] = -1;
foreach($data['var9'] as $data['element']):
$data['doo']['for']['element']['index']++;
$data['doo']['for']['element']['index0']++;
$data['doo']['for']['element']['first'] = ($data['doo']['for']['element']['index0']) == 0 ? true : false;
$data['doo']['for']['element']['last']  = ($data['doo']['for']['element']['index']) == $data['doo']['for']['element']['length'] ? true : false;
?>
   <li class="<?php if(($data['doo']['for']['element']['first'])): ?> first<?php endif; ?><?php if(($data['doo']['for']['element']['last'])): ?> last<?php endif; ?>">
      Index0: <?php echo $data['doo']['for']['element']['index0']; ?> -- Index: <?php echo $data['doo']['for']['element']['index']; ?><br />
      Values::: a:<?php echo $data['element']->a; ?> :: b:<?php echo $data['element']->b; ?>
   </li>
<?php endforeach; ?>
</ul>

Iterate over an array of objects with key
<ul>
<?php $data['doo']['for']['element']['length'] = count($data['var10']);
$data['doo']['for']['element']['index']  = 0;
$data['doo']['for']['element']['index0'] = -1;
foreach($data['var10'] as $data['abc']=>$data['element']):
$data['doo']['for']['element']['index']++;
$data['doo']['for']['element']['index0']++;
$data['doo']['for']['element']['first'] = ($data['doo']['for']['element']['index0']) == 0 ? true : false;
$data['doo']['for']['element']['last']  = ($data['doo']['for']['element']['index']) == $data['doo']['for']['element']['length'] ? true : false;
?>
   <li class="<?php if(($data['doo']['for']['element']['first'])): ?> first<?php endif; ?><?php if(($data['doo']['for']['element']['last'])): ?> last<?php endif; ?>">
      Index0: <?php echo $data['doo']['for']['element']['index0']; ?> -- Index: <?php echo $data['doo']['for']['element']['index']; ?><br />
      Key: <?php echo $data['abc']; ?><br />
      Values::: a:<?php echo $data['element']->a; ?> :: b:<?php echo $data['element']->b; ?>
   </li>
<?php endforeach; ?>
</ul>


[RichardM]

Include a View
If you want to include another view within your template you can do it using the following code.

First define a new view in protected/view/example.html

Code: Select all

Check this out. Its been included from another view file!


In your index.html template add the following tag

Code: Select all

{% include '/example' %}


This will then compile and subsequently include the view file within your index.html view when its called. Note it will not recompile the included view file if it changes unless index.html has also been updated since the last time the file was compiled.

You can also assign the view file to a variable in $data['include_this_file'] = '/example'; then do:

Code: Select all

{% include include_this_file %}


These both compile down to:

Code: Select all

<?php include '/Users/foo/bar/protected/viewc/example.php'; ?>


Note: As of revision 430 dynamic includes have changed. For more information see Dynamic Includes

[RichardM]

Partial Page Cacheing
You can use the partial page cacheing in much the same way as you did with DooView. You are required to provide an ID for the cache and optionally a duration in which the cache is fresh. See the 2 samples below:

Code: Select all

{% cache('some_dynamic_id_' . VAR1) %}
   Lots of template rendering logic here
{% endcache %}

OR if you want to specify a cache time out then
{% cache('abc', 12) %}
   Lots of template rendering logic here
{% endcache %}


Notice in the example above I have used a . to concatenate the string identifier for this cache with some variable (for example a users ID. For this to work you MUST leave a space either side of the full stop. If you put 'some_dynamic_id_'.VAR1 it will not be able to distinguish it against an attempt to access an array element.

These compile down to:

Code: Select all

<?php if (!Doo::cache('front')->getPart('some_dynamic_id_'.$data['var1'])): ?>
<?php Doo::cache('front')->start('some_dynamic_id_'.$data['var1']); ?>
   Lots of template rendering logic here

<?php Doo::cache('front')->end(); ?>
<?php endif; ?>

OR if you want to specify a cache time out then
<?php if (!Doo::cache('front')->getPart('abc',12)): ?>
<?php Doo::cache('front')->start('abc',12); ?>
   Lots of template rendering logic here

<?php Doo::cache('front')->end(); ?>
<?php endif; ?>


[RichardM]

How to render a given view
If you want to actually use any of these features you must call the render functions of the view object. DooViewBasic currently provides a number of functions for rendering views depending on your needs. The first of these is render(...).

You should use render when you plan to have ALL of the markup for your page defined within your view (Although you can use the include tag for a standard header / footer). It will process a single view file and compile it down to the native php and then load this page. If the page has been compiled already and the view file is not newer it will ignore the compile step.

To create a simple test page create a new html file in protected/view/example.html and enter the following:

Code: Select all

<html>
   <head>
      <title>Test Site</title>
   </head>
   <body>
      <div id="header">
         <h1>Hello World Example</h1>
      </div>
      <div id="content">
         <p>Hello, World!</p>
      </div>
      <div id="footer">
         <span>Copyright 2010</span>
      </div>   
   </body>
</html>


As you can see we have defined the whole page markup. This could have included any of the template tags discussed so far but for simplicity its just plain html markup.

To render this page we simply call the following from our controllers action as follows:

Code: Select all

class MainController extends DooController {
public function index() {
$this->view->render('example', array());
}
}


If we wanted to separate out our views into subfolders we could have placed our example.html file in protected/view/some/sub/folder/example.html and then in the render method we would replace 'example' with 'some/sub/folder/example'.

Notice that the name of the view to render should never start with a / and should never having the ending .html extension. The view engine will handle this for you.

[RichardM]

How to render a view based on a layout?
You will have noticed in the previous example using render() we had to define our entire page markup in a single view file for that page. This is fine when we only have a few pages but what do you do when you have hundreds of views in your application and need to change the markup of the header? You would need to go through and update potentially ALL of the view files in your application.

This was improved upon by DooView which had a renderLayout method added. This allowed you to specify a single layout file and within this layout you could define place holders. An example of this might be:

Code: Select all

<html>
   <head>
      <title>Test Site</title>
   </head>
   <body>
      <div id="header">
         <!-- placeholder:header -->
            <h1>Default Header</h1>
         <!-- endplaceholder -->
      </div>
      <div id="content">
         <!-- placeholder:content -->
            <p>No content defined</p>
         <!-- endplaceholder -->
      </div>
      <div id="footer">
         <!-- placeholder:footer -->
            <span>Copyright 2010</span>
         <!-- endplaceholder -->
      </div>   
   </body>
</html>


With the setup in DooView you could define several of these layout's each containing the provided placeholders you needed. If you then wanted to override any part of the place holder you could define blocks within your view file. For each placeholder in the layout a check would be made for that block within your view file and if found the placeholder would be replace with the compiled version of this view file. However you could not have templates being inherited. That means that if you had a sub section of the site with its own view file /support/x/y/z then any views in x, x/y and x/y/z would all need to have this change made in there views.

Therefore I have updated how layouts work in DooViewBasic with the main change here being inheritance support for placeholders.

To get started we must first define a layout.html file which outlines all the components which can be extended. To do this we will create the following file: /protected/view/layout.html and copy the following html into it:

Code: Select all

<html>
   <head>
      <title>Test Site</title>
   </head>
   <body>
      <div id="header">
         <!-- placeholder:header -->
            <h1>Default Header</h1>
         <!-- endplaceholder -->
      </div>
      <div id="content">
         <!-- placeholder:content -->
            <p>No content defined</p>
         <!-- endplaceholder -->
      </div>
      <div id="footer">
         <!-- placeholder:footer -->
            <span>Copyright 2010</span>
         <!-- endplaceholder -->
      </div>   
   </body>
</html>


Its important to note that the layout file must always be in the root of the active view root folder (in this case protected/view/) or it will not be found / work.

Now we have defined our layout file it important to understand how DooViewBasic decides what to put into each placeholder.

In order to use DooViewBasics renderLayout you must parse it a view to be rendered in much the same way as you do for render. This might be "example" for example but unlike with render where we would have a file protected/view/example.html it should be a folder instead. So we might have the folder protected/view/example/

Within the views folder we can define a series of files. These files should be named in accordance with the placeholder names defined in our layout. In the example we are using the place holders are header, footer and content. Therefore the files should be header.html, footer.html and content.html.

However we do not have to place all of these in the folder /example/ as renderLayout will automatically attempt to find these files in the parent folders of the view so it would try in this case protected/view/example/header.html and then try protected/view/header.html. If it finds a file it will stop looking further up. It will then try the same for content and then footer trying protected/view/example/ and then protected/view/.

If it does find a suitable match it will swap out the placeholder for the contents of the .html file corresponding to the placeholder. If no match is found though it will replace the placeholder with the content within the placeholders definition within the layout.

The recursive searching means that child views can inherit not only the layouts view but further more each of its parents views with it always using the closest parent version. So if we had a view of "blog/post/view" we might want a different header for people looking at blog/post and blog/post/view so we could define the new header file in protected/view/blog/post/header.html and this would be used by both blog/post and blog/post/view.

To try this all out create some new view files as defined below

view/header.html

Code: Select all

<h1>I am the main site title</ha>


view/index/content.html

Code: Select all

<p>Welcome to the home page. No content has been written yet!</p>


view/blog/content.html

Code: Select all

<p>This would be a blog listing</p>
<ul>
<li>Post 1</li>
<li>Post 2</li>
<li>Post 3</li>
</ul>


view/blog/post/header.html

Code: Select all

<h1>Some Site Header : Viewing Blog Post</h1>


view/blog/post/content.html

Code: Select all

<p>This is a blog post</p>


view/blog/post/comment/content.html

Code: Select all

<p>Post a comment on this post</p>


view/blog/post/comment/footer.html

Code: Select all

<span>Notice your data will be the property of example.com</span>


Now you have some views it times to call them. Rather than showing how to define a whole lot of routes and actions of a controller (example exist on doing this) I will just give you some examples of the render command you could try out.

Code: Select all

class MainController extends DooController {
public function index() {
$data = array();
// uncomment 1 of these at a time
$this->view()->renderLayout('index', $data);
//$this->view()->renderLayout('blog', $data);
//$this->view()->renderLayout('blog/post', $data);
//$this->view()->renderLayout('blog/post/comment', $data);
}
}


Each of the views being loaded have full access to the $data array and additionally the layouts and views can all contain the template tags within them.

Hopefully all of this renderLayout stuff makes some sense. I will hopefully incorporate some of this into the To Doo List Manager tutorial when I have a chance to finish it off.

One finally note while I remember. Unlike with the render() method renderLayout does not check if ALL the various view files have changed since the view was last compiled. Therefore if you are busy coding you are better to use the force compile setting. You might also want to write a function you can call to clear your compiled view folder therefore forcing views to be recompiled again.

[RichardM]

Supporting Multiple Templates
So you have one set of templates setup based on a given layout but you want to add another one. Or possibly you just don't want to save your view files in /protected/view/ ? or have your compiled views stored in /protected/viewc/ ?

If this is the case you now have the option to redefine there locations. In my own projects I define a renderAction() function which can be called to render an action and this gives an example of how you might dynamically make use of templates

Code: Select all

class BaseController extends DooController {

   /**
    * A simple tender function to render a provided view
    * @param string $view the actions view file (class should also define the viewsFolder)
    * @param bool $useLayout Should the view be rendered without the use of layout?
    */
   protected function renderAction($view, $useLayout = true) {
      $templateName = 'MobileTheme'; // May come from user profile or browser detection
      $userLanguage = 'en'; // I am using the DooTranslator and so want views stored by translation

      $this->view()->setDefaultRootViewPath(Doo::conf()->SITE_PATH . 'templates/' . $templateName . '/');
      $this->view()->setRootCompiledPath(Doo::conf()->SITE_PATH . Doo::conf()->PROTECTED_FOLDER . "viewc/$userLanguage/$templateName/");

      if ($useLayout) {
         $this->view()->renderLayout($view, $this->data, NULL, Doo::conf()->TEMPLATE_COMPILE_ALWAYS);
      } else {
         $this->view()->render($view, $this->data, NULL, Doo::conf()->TEMPLATE_COMPILE_ALWAYS);
      }
   }
}


What will this do? It will look up which template the current user is using. This could however be hardcoded. This is used to determine where the view files should be found. Additionally it gets the users current language so we can get an instance of DooTranslater setup. The language is also used along with the template name to ensure the different templates and language files can be compiled into there own folders. This means that the compile always setting need not be left on all the time.

[RichardM]

If array not empty ... else ... is empty
So you know how to write a for loop but what do you do when you want to do something different if the array was empty?

Simply make use of the ifempty tag within the for loop (and finish it with endif). How does this work?

Code: Select all

{% for myArray as element %}
     {{element}}
{% ifempty %}
     myArray was empty
{% endif %}


You just write the 'for' part the same as you do in all the other examples. Then remove the 'endfor' tag and replace it with the 'ifempty' tag and then the 'endif' tag. As per the example above. To enable this the for tag has been modified to wrap the for statement with an if(!empty(foo)) and this is the case for all for statements.