Layouts and Widgets
===============
## Widgets
Extension helps using widgets in convenient way converting their syntax to function calls:
```
{{ use('yii/bootstrap') }}
{{ nav_bar_begin({
'brandLabel': 'My Company',
}) }}
{{ nav_widget({
'options': {
'class': 'navbar-nav navbar-right',
},
'items': [{
'label': 'Home',
'url': '/site/index',
}]
}) }}
{{ nav_bar_end() }}
```
In the template above `nav_bar_begin`, `nav_bar_end` or `nav_widget` consists of two parts. First part is widget name
converted to lowercase and underscores: `NavBar` becomes `nav_bar`, `Nav` becomes `nav`. `_begin`, `_end` and `_widget`
are the same as `::begin()`, `::end()` and `::widget()` calls of a widget.
One could also use more generic `widget_end()` that executes `Widget::end()`.
Twig ideology don`t accept use php-code in template. So if you need use anonymous function in widget configuration,
that function should be passed to the template as variable.
```php
/**
* Site controller
*/
class SiteController extends Controller
{
public function actionIndex()
{
$dataProvider = new ArrayDataProvider();
$dataProvider->setModels([
[
'id' => 1,
'name' => 'First',
'checked' => false,
],
[
'id' => 2,
'name' => 'Second',
'checked' => true,
],
[
'id' => 1,
'name' => 'third',
'checked' => false,
],
]);
$someFunction = function ($model) {
return $model['checked'] === true ? 'yes' : 'no';
};
return $this->render('index.twig', [
'dataProvider' => $dataProvider,
'someFunction' => $someFunction
]);
}
}
```
```twig
{{ use('yii/grid/GridView') }}
{{ grid_view_widget({
'dataProvider': dataProvider,
'columns': [
{'class': '\\yii\\grid\\SerialColumn'},
'id',
'name',
{
'attribute': 'checked',
'value': someFunction
}
]
})
}}
```
## Main layout
Here is an example of `views/layouts/main.twig` file to replace `views/layouts/main.php`.
In order to change default layout add public variable inside `SiteController`:
```php
/**
* Site controller
*/
class SiteController extends Controller
{
// ..
public $layout = 'main.twig';
// ..
```
Here is code inside file `views/layouts/main.twig`:
```twig
{{ register_asset_bundle('frontend/assets/AppAsset') }} {# asset root for yii advanced template #}
{{ void(this.beginPage()) }}
{{ html.encode(this.title) }}
{{ html.csrfMetaTags | raw }}
{{ void(this.head) }}
{{ void(this.beginBody()) }}
{# header content #}
{{ content | raw}}
{{ void(this.endBody()) }}
{{ void(this.endPage()) }}
```
If you don't want to use a layout in controller, you must set `$layout` property to `false`.
You can also change the layout globally in application config:
```php
[
'layout' => 'main.twig',
// or disable it:
'layout' => false,
]
```
## Navigation bar
Beforehand let's add `global` inside config file:
```php
'renderers' => [
'twig' => [
'class' => 'yii\twig\ViewRenderer',
'cachePath' => '@runtime/Twig/cache',
// Array of twig options:
'options' => [
'auto_reload' => true,
],
'globals' => [
//..
'url' => ['class' => '\yii\helpers\Url'], // new global
//..
],
'uses' => ['yii\bootstrap'],
],
],
```
Here is `navigation` bar code with login/logout dynamic variants:
```twig
{{ nav_bar_begin({
'brandLabel': '
',
'brandUrl' : app.homeUrl,
'options' : {
'class' : 'header navbar navbar-fixed-top',
}
}) }}
{% set menuItems = [] %}
{% if app.user.isGuest == false %}
{% set menuItems = menuItems|merge([
{'label' : 'Main', 'url' : ['/site/index']},
{'label' : 'About', 'url' : ['/site/about']},
{# Other ones #}
{
'label' : 'logout (' ~ app.user.identity.username ~ ')',
'url' : ['/site/logout'],
'linkOptions' : {'data-method' : 'post'}
}
])
%}
{% else %}
{% set menuItems = menuItems|merge([
{'label' : 'login', 'url' : ['/site/login']},
{# Other ones #}
])
%}
{% endif %}
{{ nav_widget({
'options': {
'class': 'navbar-nav navbar-right',
},
'items': menuItems
}) }}
{{ nav_bar_end() }}
```
## Footer
Here is an example how to convert basic Yii footer code from PHP to twig.
In order to show `Powered by Yii framework` add `global` inside config file:
```php
'renderers' => [
'twig' => [
//..
'globals' => [
//..
'Yii' => ['class' => '\Yii'],
//..
],
'uses' => ['yii\bootstrap'],
//..
],
],
```
Here is a footer code:
```
```
## Forms
You can build forms the following way:
```
{{ use('yii/widgets/ActiveForm') }}
{% set form = active_form_begin({
'id' : 'login-form',
'options' : {'class' : 'form-horizontal'},
}) %}
{{ form.field(model, 'username') | raw }}
{{ form.field(model, 'password').passwordInput() | raw }}
 ~'/images/png/logo.png){kind=logo}