Twig view response

Twig views are the default response of charm.

Views are based on twig views. They are easy to use and you can create awesome views with them.

In a controller you will return a view. Variables can be passed there. The naming scheme is the usual dot-notation. A view called by return View::make('pages.static.legal')->(...) will be found at app/Views/pages/static/legal.twig.

To return a view of a specific module, use: return View::make('ModuleName#pages.static.legal')->(...).

The usage is very easy:

namespace App\Controllers;

use Charm\Vivid\C;
use Charm\Vivid\Controller;
use Charm\Vivid\Kernel\Output\View;

class BasicController extends Controller
{
    public function getIndex()
    {
        $name = C::Request()->get('name', 'Rudi');
        return View::make('pages.index')->with([
            'foo' => 'bar',
            'name' => $name
        ]);
    }
}

This will render the twig view at app/Views/pages/index.twig.

Twig views are built exactly like written in the official twig docs.

Charm only adds more functionality to them.

Extending views

In most cases only the content itself changes. All other parts of the page are mostly the same (base layout, nav bar, footer, ...). You can easily create your main layout and extend it on every view.

This is the base view, located at app/Views/_base/main.twig. Some parts like the header are split in own files, like app/Views/_base/header.twig for the header.

You define your own blocks which you will fill with content on each sub-view.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <title>{% block title %}{% endblock %} | My fancy page</title>

    {% include "_base/header.twig" %}

    {% block css %}{% endblock %}

    {{ charm.head|raw }}
</head>

<body class="layout layout-vertical">

<main>

<div id="wrapper">
    {% include "_base/nav.twig" %}
    <div id="content">
        {% block content %}{% endblock %}
    </div>
</div>

</main>

{{ charm.body|raw }}
</body>
</html>

A single view based on this is easily created:

{% extends "_base/main.twig" %}

{% block title %}My page title{% endblock %}

{% block content %}
<div class="page-content">

<div class="row">
    <div class="col-12">
        <div class="card">
            <h4 class="card-header">Test</h4>
            <div class="card-body">
                Hello World!
            </div>
        </div>
    </div>
</div>

</div>
{% endblock %}

Documentation missing...

This part of the documentation needs more content, which will follow soon.

You can always help us expanding the charm framework - also by expanding our documentation, just contact us.