Урок 5: Настройка INVO

Для завершения подробного объяснения INVO мы объясним, как настроить INVO, добавив элементы пользовательского интерфейса и изменив заголовок в соответствии с исполняемым контроллером.

Компоненты пользователя

Все элементы пользовательского интерфейса и визуальный стиль приложения в основном достигнуты с помощью Bootstrap. Некоторые элементы, такие как навигационная панель, изменяются в зависимости от состояния приложения. Например, в правом верхнем углу ссылка «Вход / Регистрация» изменяется на «Выход», если пользователь вошел в приложение.

Эта часть приложения реализована в компоненте «Элементы» (app/library/Elements.php).

use Phalcon\Mvc\User\Component;

class Elements extends Component
{
    public function getMenu()
    {
        // ...
    }

    public function getTabs()
    {
        // ...
    }
}

Этот класс расширяет Phalcon\Mvc\User\Component. Не обязательно расширять компонент с помощью этого класса, но он помогает быстрее получить доступ к службам приложения. Теперь мы зарегистрируем наш первый компонент пользователя в контейнере служб:

// Register a user component
$di->set(
    "elements",
    function () {
        return new Elements();
    }
);

Как контроллеры, плагины или компоненты внутри представления, этот компонент также имеет доступ к зарегистрированным в контейнере службам, просто обращаясь к атрибуту с тем же именем, что и ранее зарегистрированная служба:

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <a class="brand" href="#">INVO</a>

            {{ elements.getMenu() }}
        </div>
    </div>
</div>

<div class="container">
    {{ content() }}

    <hr>

    <footer>
        <p>&copy; Company 2015</p>
    </footer>
</div>

Важная часть:

{{ elements.getMenu() }}

Динамическое изменение заголовка

При переходе между одним вариантом и другим вы увидите, что заголовок динамически изменяется, показывая, над чем мы работаем в данный момент. Это достигается в инициализаторе каждого контроллера:

class ProductsController extends ControllerBase
{
    public function initialize()
    {
        // Set the document title
        $this->tag->setTitle(
            "Manage your product types"
        );

        parent::initialize();
    }

    // ...
}

Обратите внимание, что метод parent::initialize() также вызывается, он добавляет больше данных в заголовок:

use Phalcon\Mvc\Controller;

class ControllerBase extends Controller
{
    protected function initialize()
    {
        // Prepend the application name to the title
        $this->tag->prependTitle(
            "INVO | "
        );
    }

    // ...
}

Наконец, заголовок отображается в главном представлении (app/views/index.volt):

<!DOCTYPE html>
<html>
    <head>
        <?php echo $this->tag->getTitle(); ?>
    </head>

    <!-- ... -->
</html>

© 2011–2017 Phalcon Framework Team
Licensed under the Creative Commons Attribution License 3.0.
https://docs.phalconphp.com/en/latest/reference/tutorial-invo-4.html