Sloth Framework - View

Sloths shipping with a lot of builtin useful helpers

HTML Assets Tag Helpers

views/my-view-script.html.php

    <?= $this->scriptTag('/assets/javascripts/application.js') ?>
    <?= $this->stylesheetTag('/assets/stylesheets/application.css') ?>
    <?= $this->imageTag('/assets/images/pic.jpg') ?>

The output is:

    <script src="/assets/javascripts/application.js"></script>
    <link href="/assets/stylesheets/application.css" rel="stylesheet">
    <img src="/assets/images/pic.jpg">

Disable Caching Assets Tag

As you know, the assets tag might caching by the browser. For example, sometime you changes the javascript code, but you might need press Ctrl+F5 on Windows or Cmd+F5 on Mac to tell browser update your script code. Is is bad for end user, they don't know you was changes the script code. Solved that problem is very simple, just append the assert script source url with a increment parameter version number whenever you change the script code.

Commonly, I'm do that by this way: application/config/view.php

    \Sloths\View\Helper\AssetTag::setDefaultDisableCachingParam('v1'); // for all asset tags
    \Sloths\View\Helper\ScriptTag::setDefaultDisableCachingParam('v1'); // for all javascript tags
    \Sloths\View\Helper\StylesheetTag::setDefaultDisableCachingParam('v1'); // for all stylesheet tags
    \Sloths\View\Helper\ImageTag::setDefaultDisableCachingParam('v1'); // for all images tags

Changes v1 to v2, v3,.. whenever you change the script code.

And now you call asset tag helper like above, the output is:

    <script src="/assets/javascripts/application.js?v1"></script>
    <link href="/assets/stylesheets/application.css?v1" rel="stylesheet">
    <img src="/assets/images/pic.jpg?v1">

Or if you want to directive config per assert by calling: setDisableCachingParam('v1')

    <?= $this->scriptTag('/assets/javascripts/application.js')->setDisableCachingParam('v2') ?>
    <?= $this->stylesheetTag('/assets/stylesheets/application.css')->setDisableCachingParam('v3') ?>
    <?= $this->imageTag('/assets/images/pic.jpg')->setDisableCachingParam('v4') ?>

The output now is:

    <script src="/assets/javascripts/application.js?v2"></script>
    <link href="/assets/stylesheets/application.css?v3" rel="stylesheet">
    <img src="/assets/images/pic.jpg?v4">

For development mode, I recommend you to set the disable caching param value to time()

    \Sloths\View\Helper\AssetTag::setDefaultDisableCachingParam(time());

The output look like:

    <script src="/assets/javascripts/application.js?1400636934"></script>
    <link href="/assets/stylesheets/application.css?1400636934" rel="stylesheet">
    <img src="/assets/images/pic.jpg?1400636934">

Escape Helper

views/my-view-script.php

    <?= $this->escape('<div>'); ?>

output: <div>

FormatDateTime & FormatDate Helper

    <?= $this->formatDateTime('2014-05-21 01:48:54') ?>
    // Output: May 21, 2014 01:48:54 AM

    <?= $this->formatDate('2014-05-21') ?>
    // Output: May 21, 2014

    <?php \Sloths\View\Helper\FormatDateTime::setDefaultOutputFormat('c') ?>
    <?= $this->formatDateTime(date('Y-m-d H:i:s')) ?>
    // Output: 2014-05-21T01:48:54+00:00

    <?= $this->formatDateTime(date('Y-m-d H:i:s'))->setOutputFormat('r') ?>
    // Output: Wed, 21 May 2014 01:48:54 +0000

MailTo Helper

    $this->mailTo('prtran@gmail.com');
    // output: <a href="mailto:prtran@gmail.com">prtran@gmail.com</a>

    $this->mailTo(['prtran@gmail.com' => 'Ly Tran'], ['cc' => 'foo@example.com', 'bcc' => ['bar@example.com'], 'subject' => 'Subject', 'body' => 'Body'])
    //output: <a href="mailto:Ly%20Tran(prtran@gmail.com)?cc=foo%40example.com&bcc=bar%40example.com&subject=Subject&body=Body">Ly Tran(prtran@gmail.com)</a>

Partial & PartialLoop Helper

views/partial.html.php

    Name: <?= $name ?>

views/my-view-scripts.php

    <h3>My View</h3>

<?= $this->partial('partial') ?>

<ul>
    <?= $this->partialLoop('item', $items) ?>
</ul>

routes/my-route.php

    $this->get('/', function() {
        return $this->render('my-view-script', [
            'name' => 'Ly Tran',
            'items' => [
                ['name' => 'Foo'],
                ['name' => 'Bar']
            ]
        ]);
    });

Output:

    <h3>My View</h3>

Name: Ly Tran
<ul>
    <li>Foo</li>
<li>Bar</li>
</ul>

Capture Helper

views/_layouts/default.html.php

    <html>
        <head>
            <title><?= $this->capture('title') ?></title>
            <?= $this->capture('stylesheets') ?>

            <?= $this->capture('javascripts')->setRenderer([$this, 'scriptTag']) ?>

        </head>
        <body>
            <?= $this->content() ?>

        </body>
    </html>

views/content.html.php

    <?php $this->capture('title', 'My Site Title') ?>
<?php $this->capture('stylesheets', $this->stylesheetTag('/assets/stylesheets/application.css')) ?>
<?php $this->capture('javascripts', ['/assets/javascripts/foo.js', '/assets/javascripts/bar.js']) ?>
<p>Content</p>

routes/my-route.php

    $this->get('/', function() {
        $this->setLayout('default');
        return $this->render('content');
    });

Output:

    <html>
        <head>
            <title>My Site Title</title>
            <link href="/assets/stylesheets/application.css" rel="stylesheet">
            <script src="/assets/javascripts/foo.js"></script><script src="/assets/javascripts/bar.js"></script>
        </head>
        <body>
            <p>Content</p>
        </body>
    </html>

Url Helper

    <?php \Sloths\View\Helper\Url::setDefaultUrl('/foo/bar?foo=bar') ?>

    <?= $this->url(['search' => 'foo']) ?> // /foo/bar?foo=bar&search=foo
    <?= $this->url('/posts', ['search' => 'foo']) ?> // /posts?search=foo

Paginate Helper

$paginator = new \Sloths\Pagination\Paginator($adapter);

$adapter can be:

\Sloths\Pagination\DataAdapter\ArrayAdapter
\Sloths\Pagination\DataAdapter\DbSelect
\Sloths\Pagination\DataAdapter\ModelCollection
Array
\Sloths\Db\Sql\Select
\Sloths\Db\Model\Collection

routes/my-route.php


    $this->get('/', function() {
        \Sloths\View\Helper\Url::setDefaultUrl('#');
        // In the real work, it should be:
        // \Sloths\View\Helper\Url::setDefaultUrl($this->request->getUrl());

        $posts = [];
        for ($i = 0; $i < 100; $i++) {
            $posts[] = ['title' => 'post ' . $i];
        }

        $paginator = new \Sloths\Pagination\Paginator($posts);
        $paginator->setItemsCountPerPage(5);
        $paginator->setCurrentPage(8);

        return $this->render('posts/list', ['posts' => $posts]);
    });

views/posts/list.html.php

    <ul>
        <? foreach ($posts as $post): ?>
        <li><?= $post['title'] ?></li>
        <? endforeach ?>
    </ul>
    <?= $this->paginate($posts) ?>

Output:

post 35
post 36
post 37
post 38
post 39

View Helpers

HTML Assets Tag Helpers

Disable Caching Assets Tag

Escape Helper

FormatDateTime & FormatDate Helper

MailTo Helper

Partial & PartialLoop Helper

Capture Helper

Url Helper

Paginate Helper