Welcome Guest, Not a member yet? Register   Sign In
A friendly template library
#1

[eluser]Ordos[/eluser]
Codeigniter template library

This template library for Codeigniter lets you build complex templates using layouts, partial views and widgets. It's built with the same method chaining support that we are seeing so often in Codeigniter so it feels familiar. This library loads a layout file that uses partial views. These partial view sections are internally represented by Partial Objects managed by the template library. These objects let you modify their content through method chaining.

Installation

Download the files from: https://github.com/segersjens/CodeIgnite...te-Library and copy the files to the corresponding folder.

Check the readme file for detailed configuration instructions.

Layout files

Layout files are loaded or parsed by Codeigniter and the partials are passed to them as data. You can easily load them like you would normally use data in your view files:

Code:
<head>
    <title><?php echo $title; ?></title>
    <?php echo $stylesheet; ?>
</head>
<body>
    <?php echo $content; ?>
</body>

Or when parsing is enabled you can use {content} etc.

However, I prefer to directly call the library's methods from inside the layout file to work around php's Undefined variable errors when you are not setting all partials. Calling these methods well replace non-existing partials with empty one's so you don't get any errors:

Code:
<head>
    <title><?php echo $this->template->title; ?></title>
    <?php echo $this->template->stylesheet; ?>
</head>
<body>
    <?php echo $this->template->content; ?>
</body>

These variables are in fact Partial Objects, so you can still manipulate them from inside the layout view file like this:

Code:
<?php echo $title->prepend("My Website - "); ?>

Partial manipulation methods will always return the partial object itself for further chaining or for displaying. So this is perfectly possible:

Code:
<?php echo $sidebar->cache(500)->widget("login")->prepend("Login: "); ?>

Partial manipulation

Partials have a few handy methods for manipulating their content such as:

Quote:$partial->set() - overwrites the content
$partial->append() - append something
$partial->add() - same as append (alias)
$partial->prepend() - prepend something
$partial->content() - gets the content
$partial->default() - only set content if empty

You can also load dynamic content inside partials from view files or widgets. The object named partial used in the method chaining below is the name of the partial you want to load the content into.

Code:
$this->template->partial->view()

Append or overwrite the partial with a view file with parameters.

Code:
$this->template->partial->view("view-file", array(), $overwrite=FALSE);

Append or overwrite the partial with a parsed view file with parameters.

Code:
$this->template->partial->parse("view-file", array(), $overwrite=FALSE);

Append or overwrite the partial with a widget's output.

Code:
$this->template->partial->widget("widget-name", array(), $overwrite=FALSE);

Publishing

The template class only has a few methods. I chose to do this because almost everything can be managed by using the flexible Partial Object. If you want to publish the entire template with the current partials to the output you can use the publish() method.

You can pass a custom layout file and optional data if wanted:

Code:
$this->template->publish("layout", array("title"=>"Title is overwritten!"));

Most of the time this will be empty using the layout file from the config:

Code:
$this->template->publish();

Triggers

Some partials have built in triggers:

Quote:stylesheet - you only need to pass the source
javascript - you only need to pass the source
meta - will convert the arguments to the right meta tag
title - converts special characters
description - will convert special characters just like the title

This is an example of what these built in triggers do:

Code:
$this->template->stylesheet->add("stylesheet.css");
//<link rel="stylesheet" type="text/css" href="http://myweb.com/stylesheet.css" />

$this->template->javascript->add("script.js");
//[removed][removed]

$this->template->meta->add("robots", "index,follow");
//<meta name="robots" content="index,follow" />

$this->template->title->set("Dad & Son");
//Dad & Son

You can set your own triggers for functions or methods for any partial object like this:

Code:
//function
$this->template->partial->set_trigger("strtoupper");

//method
$this->template->partial->set_trigger($this->typography, "auto_typography");

This will trigger the function or method whenever you manipulate the partial's content.

Widget

Widgets are intelligent partial objects. When their content is asked, their display() method is activated which will fill the content using codeigniter or partial object methods. Widgets classes are found inside the application/widgets folder. They extend the main Widget class which has the same methods as the Partial class. This is an example widget:

Code:
/* File: widgets/hero.php */
class hero_widget extends Widget {
     public function display($args = array()) {
         //$this->prepend("<h1>Slideshow:</h1>");

         $this->load->model("my_model");
         $data = $this->my_model->all();

         $this->view("widgets/hero", $data);
     }
}

And this is loaded from a controller like this:

Code:
$this->template->partial->widget("hero_widget", $args = array());

Read more about widges and caching from the readme file: (character limit)
https://github.com/segersjens/CodeIgnite...te-Library
#2

[eluser]lifran[/eluser]
Thank's for the info. I'm newbie in codeigniter template system. I have a question, where i have to place the 'demo' folder, so i can test the demo inside the template? Thank you...
#3

[eluser]Ordos[/eluser]
[quote author="lifran" date="1328509821"]Thank's for the info. I'm newbie in codeigniter template system. I have a question, where i have to place the 'demo' folder, so i can test the demo inside the template? Thank you...[/quote]
You need to place the content of the demo folder in your application folder.
#4

[eluser]goFrendiAsgard[/eluser]
Good, you even think about CSS, javascript and meta in the template. Sounds interesting
#5

[eluser]lifran[/eluser]
hi Ordos, i have do what you tell me, and now it works. Smile Many thanks...
#6

[eluser]seanloving[/eluser]
Please take a look at my use of this template library and how my first prototype is organized. Suggestions, comments and criticism welcome.

I also have a specific question about each view partial having its own stylesheet. See below.


File Structure

application
libraries
Template.php
modules
users
controllers
users.php
views
templates
admin.php
admin
head.php
body.php
header.php
main.php
footer.php

assets
themes
admin
css
reset.css
layout.css
header.css
main.css
footer.css

The name of my template / theme is "admin"

Here is my login() controller which is a method of the users.php class
application/modules/users/controllers/users.php (login method)
Code:
function login()
{
  $data['heading']='Login';
  $this->template->stylesheet->add('assets/themes/admin/css/reset.css');
  $this->template->stylesheet->add('assets/themes/admin/css/layout.css');
  
  // step 1 collect assets in the various &lt;body&gt; partials
  $this->template->body->view('templates/admin/body', $data);
  
  // step 2 include assets in the &lt;head&gt;
  $this->template->head->view('templates/admin/head');
  
  // step 3 generate and display the html
  $this->template->publish('admin');
    
} // function login()


views/templates/admin.php
Code:
&lt;?php echo $this->template->doctype->set('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'); ?&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;?php echo $this->template->head; ?&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;?php echo $this->template->body; ?&gt;
    &lt;/body&gt;
&lt;/html&gt;


views/templates/admin/head.php
Code:
&lt;title&gt;&lt;?php echo $this->template->title->set('Login Page'); ?&gt;&lt;/title&gt;
&lt;?php echo $this->template->stylesheet; ?&gt;


views/templates/admin/body.php
Code:
<div id="header">
        &lt;?php echo $this->template->header->view("templates/admin/header"); ?&gt;
    </div>&lt;!-- // end #header --&gt;
  
    <div id="main">
        &lt;?php echo $this->template->main->view("templates/admin/main"); ?&gt;
    </div>&lt;!-- // end #main --&gt;
  
    <div id="footer">
        &lt;?php echo $this->template->footer->view("templates/admin/footer"); ?&gt;
    </div>&lt;!-- // end #footer --&gt;


views/templates/admin/header.php
Code:
&lt;?php $this->template->stylesheet->add('assets/themes/admin/css/header.css'); ?&gt;
<div> some html here </div>


views/templates/admin/main.php
Code:
&lt;?php $this->template->stylesheet->add('assets/themes/admin/css/main.css'); ?&gt;
<div> some html here </div>


views/templates/admin/footer.php
Code:
&lt;?php $this->template->stylesheet->add('assets/themes/admin/css/footer.css'); ?&gt;
<div> some html here </div>


I don't like how my controller has to calculate the &lt;body&gt; before the &lt;head&gt;, and has to include some stylesheets in the controller itself, just to achieve the desired order of stylesheets in the &lt;head&gt;

Page Source
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Login Page&lt;/title&gt;
        &lt;link rel="stylesheet" href="http://localhost/mysite.com/assets/themes/admin/css/reset.css" /&gt;
        &lt;link rel="stylesheet" href="http://localhost/mysite.com/assets/themes/admin/css/layout.css" /&gt;
        &lt;link rel="stylesheet" href="http://localhost/mysite.com/assets/themes/admin/css/header.css" /&gt;
        &lt;link rel="stylesheet" href="http://localhost/mysite.com/assets/themes/admin/css/main.css" /&gt;
        &lt;link rel="stylesheet" href="http://localhost/mysite.com/assets/themes/admin/css/footer.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt; some html here &lt;/body&gt;
&lt;/html&gt;

The generated output looks good, but...
Is there a better way to collect all the stylesheets into the page &lt;head&gt;?
#7

[eluser]Mauricio de Abreu Antunes[/eluser]
Use an array with your style files.
Foreach your array, adding your files to view, calling add method.
Consider to build a method for this Smile
#8

[eluser]Ordos[/eluser]
[quote author="Mauricio de Abreu Antunes" date="1329225366"]Use an array with your style files.
Foreach your array, adding your files to view, calling add method.
Consider to build a method for this Smile[/quote]
You can now do stuff like:

Code:
$styles = array("reset.css", "layout.css");
$this->template->stylesheet->add($styles);

or even:

Code:
$stuff = array("Hello ", "there");
$this->template->message->add($stuff);
#9

[eluser]seanloving[/eluser]
Instead of a test in the view file:

Code:
if( $this->template->header ) echo $this->template->header;
else $this->load->view('default/header');

I wish the set_default() method would NOT set the contents of the partial if the partial already exists. This way, if the controller does not set the partial then the default view will be used, which makes the view file more friendly, and the library easier to use:
Code:
// echo default view unless header was already set in the controller
echo $this->template->header->set_default( $this->load->view('default/header') );

Do you think this is useful and would you make this change? Or am I overlooking an obvious or built-in way to do this?
#10

[eluser]Mauricio de Abreu Antunes[/eluser]
Anybody does has a solid example about the usage for this library?
Thanks in advance!




Theme © iAndrew 2016 - Forum software by © MyBB