View Generics

View generics are an easy way to generate commonly used HTML structures with fully custom data content. View generics are extensions of Alloy\View\Template with custom methods added to more easily render custom content where needed.

Most view generics use PHP 5.3 closures to enable the use of fully custom content blocks with native PHP code, just like for normal views. Using PHP closures in this way eliminates the need for custom template syntax or tags, parsers, or using template partials in a loop. As a result, closure templates are both much more efficient, and easy to use because there is no new syntax beyond what is already required by PHP 5.3.

DataGrid

The datagrid view generic renders a full HTML table with custom columns and cell content through the use of closure templates.

<?php
// Datagrid to display Blog posts
$table = $view->generic('datagrid')

    // Set data to use - must be Traversible and Countable
    ->data($posts)

    // Define columns with custom content
    ->column('Title', function($item) {
        return $item->title;
    })
    ->column('Published', function($item) use($view) {
        return $view->toDate($item->date_publushed);
    })
    ->column('Edit', function($item) use($view) {
        return $view->link('edit', array(
            'module' => 'Blog',
            'action' => 'edit',
            'item' => $item->id
            ), 'module_item_action');
    })
    ->column('Delete', function($item) use($view) {
        return $view->link('delete', array(
            'module' => 'Blog',
            'action' => 'delete',
            'item' => $item->id
            ), 'module_item_action');
    })

    // Message if dataset is empty
    ->noData(function() {
        return "<p>No blog posts found.</p>";
    });

// Render full HTML table for all items
echo $table->content();
?>

DataGrid Generated HTML

The resulting HTML from the above code for a datagrid assuming two blog posts in the dataset would produce the folowing HTML:

<table cellpadding=="0" cellspacing="0" border="0" class="app_datagrid"> 
  <thead> 
    <tr> 
            <th>Title</th> 
            <th>Published</th> 
            <th>Edit</th> 
            <th>Delete</th> 
          </tr> 
  </thead> 
  <tbody> 
      <tr class="app_datagrid_row even"> 
          <td class="app_datagrid_cell">New Blog Post</td> 
          <td class="app_datagrid_cell">Mar 02, 2011</td> 
          <td class="app_datagrid_cell"><a href="http://localhost/projects/alloy-example-blog/www/blog/1/edit" title="edit">edit</a></td> 
          <td class="app_datagrid_cell"><a href="http://localhost/projects/alloy-example-blog/www/blog/1/delete" title="delete">delete</a></td> 
        </tr> 
      <tr class="app_datagrid_row odd"> 
          <td class="app_datagrid_cell">Alloy Generics are Awesome!</td> 
          <td class="app_datagrid_cell">Mar 02, 2011</td> 
          <td class="app_datagrid_cell"><a href="http://localhost/projects/alloy-example-blog/www/blog/2/edit" title="edit">edit</a></td> 
          <td class="app_datagrid_cell"><a href="http://localhost/projects/alloy-example-blog/www/blog/2/delete" title="delete">delete</a></td> 
        </tr> 
      </tbody> 
</table>

Note the generic app_datagrid_* CSS classes that have been applied to the generated HTML elements. This allows you to style view generics to make them look like a native part of your site with relative ease.

Fork me on GitHub