Documentation
Introduction
Views are just web pages where your headers,menus,sidebar,contents and footers resides. Cygnite's follows MVC patterns, views are neither called directly nor passed any parameters into it, views should be called only via controllers.
In the controller's documentation we have mentioned creating a basic controller, now let us create views and render it using controller's action.
Use Plain PHP or Twig Template
Typically views are stored in the src/Apps/Views/ directory. By default Cygnite provides two different way to render view page, you can either use plain PHP or twig template engine. Cygnite provides built in support for beautiful twig template engine. PHP layouts provides flexibility to use different themes over different view page and extend its blocks. You are also also allowed to create small widgets and render into your layout.
Basic View Page
Using Plain PHP:
Your view filename should be prefixed with .view.php. Consider your controller "UserController" and your view name is "index", then it should be stored "/src/Apps/Views/user/index.view.php". Every view page will dynamically renders into specific layout specified into your controller. Sample layout and views shipped with the skeleton project.
Using twig template:
By default Cygnite make use of popular template engine "Twig". Activating twig template for your view is just easy, simply making $templateEngine property as true. Every twig view page should be prefixed with .html.twig by default. However you can override and use your own extension for twig templates simply configuring in your controller.
namespace Apps\Controllers;
use Cygnite\Mvc\Controller\AbstractBaseController;
class HomeController extends AbstractBaseController
{
// Active Twig template engine
protected $templateEngine = true;
// Change default template extension
//protected $templateExtension = '.html.twig';
protected $autoReload = true;
// Enable twig debugger
protected $twigDebug = true;
public function __construct()
{
parent::__construct();
}
public function indexAction()
{
//Apps/Views/home/index.html.twig
$content = $this->render('bar.index', ['title' => 'Welcome to Twig Template'], true);
return Response::make($content); // Send response back to browser
}
public function renderAction()
{
//Apps/Views/home/index.html.twig
$this->render('bar.index', ['title' => 'Welcome to Twig Template']);
}
}
In the above example, making $templateEngine property as true system will understand you are trying to render Twig templates instead php layouts and other properties are for twig configuration. The render method can be used two different ways.
i. You can make use of render method to display content directly into browser. See in the above example renderAction action method.
ii. Pass third parameter as true into render method to return template content and make use of Response object to send response back to the browser. Using Response object rendering view is always advisable. See in above example indexAction action method.
Extending Twig Layouts
Extending twig templates is easier and more convenient for theming. Unlike php layouts in Cygnite, you can make use of twig layouts for extending it's blocks and apply different themes.
// src/Apps/Views/home/index.html.twig
{% extends 'layouts/main/base.html.twig' %}
{% block title %}
Cygnite Framework - Simple Crud Operation
{% endblock %}
{% block content %}
Your Contents goes here
{% endblock %}
{% block footer %}
Your footer section if you want to override parent layout
{% endblock %}
For more details please read documentation of Twig templates on official page.
Using PHP Layouts & Theming
Beautiful layouts feature of Cygnite helps to perform theming over different controller or views. Activating layout for the controller is simple, just by simply providing the name of the layout in $layout property in your controller. You can change layout as convenient. See below example for rendering a view page into layout.
namespace Apps\Controllers;
use Cygnite\Mvc\Controller\AbstractBaseController;
class ProductController extends AbstractBaseController
{
// Plain php layout src/Apps/Views/layouts/base.view.php
protected $layout = 'layout.base';
public function __construct()
{
parent::__construct();
}
/**
* Your index view page will render into the base layout
*/
public function indexAction()
{
// Apps/Views/product/index.view.php
$view = View::create('Apps.Views.product.index', ['title' => 'Welcome To Product Home Page']);
return Response::make($view);
}
}
Basic PHP Layout page
Below basic layout page to render view into it.
<?php
use Cygnite\AssetManager\Asset;
use Cygnite\AssetManager\AssetCollection;
use Cygnite\Foundation\Application;
use Cygnite\Common\UrlManager\Url;
$asset = AssetCollection::make(function($asset)
{
$asset->add('style', array('path' => 'assets/twitter/bootstrap/css/bootstrap-theme.min.css'))
->add('style', array('path' => 'assets/css/cygnite/table.css'))
->add('style', array('path' => 'assets/js/tablesorter/css/theme.default.css'))//Pick a theme, load the plugin & initialize plugin
->add('style', array('path' => 'assets/css/cygnite/style.css'))
->add('script', array('path' => 'assets/js/cygnite/jquery.js'))
->add('script', array('path' => 'assets/js/custom.js'))
->add('script', array('path' => 'assets/twitter/bootstrap/js/bootstrap.js'))
->add('script', array('path' => 'assets/js/tablesorter/js/jquery.tablesorter.min.js'));
return $asset;
});
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $this->title; ?></title>
<?php $asset->dump('style');// Style block ?>
</head>
<body>
<div class='container'>
<?php echo $yield;//your content block ?>
</div>
<?php
//Script block. Scripts will render here
$asset->dump('script');
?>
<style type="text/css">
tr:hover { background-color: #4DC7EB !important; }
</style>
</body>
</html>
Sometimes you may also wish to create small widgets like sidebar, footer separate and use it into layout. In such case you can make use of Cygnite's Widget class to render blocks of content into layout. Read more about Widget below.
Well! We are done. The src/Apps/Views/home/index.view.php view page will render in the $yield; section of layout. For reference you can also find sample code snippet shipped with skeleton project. You may wish to create crud application, using "generate:crud" command via Cygnite CLI can quickly create crud application with necessary controller, model, view, forms etc.
For more details about rendering assets into the view page have a look at Asset Manager documentation.
View Data
Passing Data To Views
As you can see in previous examples, we can pass array of data into views.
// Apps/Views/product/index.view.php
$view = View::create('Apps.Views.product.index', ['name' => 'Angelina']);
return Response::make($view);
You can also make use of compose which is alias method of create with callback feature.
$data = ['name' => 'Tom Hardy'];
// Apps/Views/product/index.view.php
$view = View::compose('Apps.Views.product.index', $data);
// Or
list($view, $content) = View::compose('view-name', $data, function ($v, $content)
{
$v->setLayout('layouts.base');
$v['name'] = 'Jennifer';
return [$v, $content];
});
show($view->getData()); // display all data stored into view
In the above example you can see we passed $data array in the view page. It should be key/value pair. And inside in your view page you can access each value using corresponding key. See example below.
echo $name; // Tom Hardy
Using Widget Views
Widgets are similar as views and useful in different ways.
i. Use Widget to render a small view page inside Routes Closure callback.
ii. Use Widgets in the HMVC module's controller action to return block of content to parent controller.
iii. Use Widget inside layout/view page for modularity and Create many block section to perform set of task.
Rendering Widget Into HMVC Modules
use Cygnite\Mvc\View\Widget;
use Cygnite\Foundation\Http\Response;
// Using Widget into the modules
$content = Widget::make('product:index', ['name' => 'Apple IPhone'], function ($w)
{
// Will look into src/Apps/Views/product/index.view.php
return $w->render();
});
or
$widget = Widget::make('Acme:user', ['name' => 'Apple IPhone'], function ($w)
{
// Will look into src/Apps/Modules/Acme/Views/user.view.php
return $w->render(true); // If you pass true Widget will understand you are trying to access module widget
});
return Response::make($widget);
Sometime you want to create a much modular architecture for the application, then make use of HMVC modules, call from parent controller to access its content and pass into view page to render.
Rendering Widget Without Parameter
//It will look into src/Apps/Views/home/welcome.view.php
echo Widget::make('home:welcome');
//It will look into src/Apps/Views/layouts/widgets/navbar.view.php
echo Widget::make('layouts:widgets:navbar');
Setting & Accessing Parameters To Widgets
Simply pass second parameter as key/value pair array into Widget::make function, which are accessible into your widget by echoing the corresponding key. Simple example below.
$widget = Widget::make('home:index', ['greet' => 'Hello! Widget'], function ($w)
{
// Passing true into render function will make Widget identify that you
// are trying to invoke module widgets
return $w->render();
});
echo $greet; //Access your params in your widget view page
That's all about views and widgets.
