Wallogit.com
2017 © Pedro Peláez
Simple html template engine for ffcms on native php-html syntax
Templex - native php template system build on top of php plates framework: thephpleague/plates. Templex used in phpffcms as a basic template engine with pack of html helpers that makes posible fast build html-code output., (*1)
Using composer:, (*2)
composer require phpffcms/ffcms-templex
To see complete examples please take a look on /example directory., (*3)
Here you can see a simple example of template system initialization:, (*4)
$loader = require __DIR__ . '/vendor/autoload.php';
// initialize template engine
$tpl = new \Ffcms\Templex\Engine(__DIR__ . '/tpl');
// load default ffcms html helpers as extensions
$tpl->loadDefaultExtensions();
// render /tpl/block.body.php example
echo $tpl->render('block/body', ['test' => 'some value']);
The major feature of any template system is a layouts. Plates provide a complete feature to use layouts in templating:, (*5)
$this->layout('path/to/file', ['var' => 'value']);
Section allow you to make dynamic templates with block override features. To understand how section extending works take a look at simple example:, (*6)
/tpl/block/body.php, (*7)
layout('layout', ['title' => 'My first title']);
?>
start('body') ?>
Hello, world!
This is my first template, (*8)
stop(); ?>
and /tpl/layout.php:, (*9)
<doctype html>
<html lang="en">
<head>
<title><?= $title ?></title>
<body>
= $this->section('body'); ?>
</body>
</head>
</html>
After initialization and executing $tpl->render('block/body') the output will be:, (*10)
<doctype html>
<html lang="en">
<head>
<title>My first title</title>
<body>
Hello, world!
This is my first template, (*11)
</body>
</head>
</html>
The body section in layout.php after rendering accept the result from start('body') ... stop() section. You can make a multiple extend by section using ->push('name') instead of ->start('name')., (*12)
Templex provide simple and clear php-based html code generator. The main part of developing process in any application is to build html output of tables, listing, grids and forms., (*13)
In this section you will see the main features of html code generator helpers., (*14)
To draw a simple listing you should use $this->listing('type', [properties]) and then call li([items], [properties]) to add each one <li></li> element., (*15)
Listing can be used inline or as named factory object. Inline object usage are prefered for pre-defined elements that should be displayed "right here":, (*16)
echo $this->listing('ul')
->li('item 1')
...
->li('item n')
->display()
Named object can be defined for more complex usage. For example - add elements of listing in cycle:, (*17)
$listing = $this->listing('ul');
for ($i = 0; $i < 100; $i++) {
$listing->li('Item #' . $i);
}
echo $listing->display();
Complete example with some "magic":, (*18)
echo $this->listing('ul', ['class' => 'my-listing'])
->li('Text item')
->li(['text' => 'Google link', 'link' => ['https://google.com']])
->li(['text' => 'Local link', 'link' => ['controller/action', ['id' => 1]], 'properties' => ['class' => 'li-item']])
->display();
````
will compile to output:
```html
Tables often used to display structured data. Templex provide helper to draw table simple & fast. To draw table you should use $this->table([properties]) instance and then implement thead ->head([properties], [items]) features and tbody ->row([items], order) items and finally call ->display() to get html output., (*19)
As a listings, table can be used in inline or names style (careful! code below is symbolic):, (*20)
// inline call:
echo $this->table([properties])
->head([properties], [titles])
->row([items1])
->row([items2])
->display();
// named call:
$table = $this->table([properties]);
$table->head([properties], [titles])
for ($i = 0; $i < 100; $i++) {
$table->row([elements]);
}
echo $table->display();
So take a look at complete example:, (*21)
echo $this->table(['class' => 'table'])
->head(['class' => 'table-header'], [
['text' => 'column1'],
['text' => 'column2'],
['text' => 'column3'],
])
->row([
['text' => 'row 1, <strong>column1</strong>', 'html' => true], // html allowed
['text' => 'row 1, column2', 'properties' => ['class' => 'alert alert-danger']],
['text' => 'row 1, column3']
])
->row([
['text' => 'row 2, column1'],
['text' => 'row 2, <em>column2</em>'], // html not allowed!
['text' => 'row 2, column3'],
'properties' => ['class' => 'alert alert-success']
])
->display();
lead to output:, (*22)
<table class="table">
<thead class="table-header">
<tr><th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, <strong>column1</strong></td>
<td class="alert alert-danger">row 1, column2</td>
<td>row 1, column3</td>
</tr>
<tr class="alert alert-success">
<td>row 2, column1</td>
<td>row 2, <em>column2</em></td>
<td>row 2, column3</td>
</tr>
</tbody>
</table>
If you want to use html syntax in text property you should pass 'html' = true in item array., (*23)
Table helper provide feature to display multiple checkboxes at table column index. If you want to add at each element of column checkbox input field, use selectize:, (*24)
$this->table([properties])
->selectize(index, name)
Note, that ->selectize() should be used before ->head() or ->row() called., (*25)
If you want to sort data in tables you can use sorter helper of table building. Sorter add up/down arrow at defined column index with named link., (*26)
$this->table([properties])
->sortable([
0 => 'getname' // will build ?getname=1 and ?getname=2 links as asc/desc sorting query
])
Form helper provide features of fast form field building, styling and display., (*27)
Simple html template engine for ffcms on native php-html syntax
MIT
template php bootstrap native html5 template-engine
Simple html template engine for ffcms on native php-html syntax
MIT
template php bootstrap native html5 template-engine