Шаблоны компонента

На данный момент наш компонент практически готов, осталось создать шаблоны.

Шаблона требуется два – один для вывода всех сообщений гостевой книги (com_guestbook_view_all.tpl), другой с формой добавления сообщения (com_guestbook_add.tpl).

Давайте вспомним участок кода контроллера который отправляет массив сообщений в шаблон:

    // ...
    // получаем шаблонизатор
    $smarty = $inCore->initSmarty('components', 'com_guestbook_view_all.tpl');
 
    // передаем в шаблон список сообщений и флаг администратора
    $smarty->assign('messages', $messages);
    $smarty->assign('is_admin', $is_admin);
 
    // выводим шаблон на экран
    $smarty->display('com_guestbook_view_all.tpl');
    // ...

Мы передаем шаблону две переменных – $messages (массив сообщений) и $is_admin (является ли пользователь администратором).

Теперь создайте файл /templates/_default_/components/com_guestbook_view_all.tpl и поместите в него следующий код:

<h1 class="con_heading">Гостевая книга</h1>
 
<div class="messages">
 
    {foreach key=id item=message from=$messages}
        <div class="message">
            <p><strong>{$message.title}</strong></p>
            <p>{$message.message}</p>
            <p><small>Автор: {$message.author} | Дата: {$message.pubdate}</small></p>
 
            {if $is_admin}
                <p><a href="/guestbook/delete{$message.id}.html">Удалить сообщение</a></p>
            {/if}
        </div>
    {/foreach}
 
</div>
<p><a href="/guestbook/add.html">Добавить сообщение</a></p>

Здесь мы с помощью цикла foreach перебираем массив $messages, рассматривая каждый его элемент как $message. Внутри цикла для каждого сообщения строим <div> и заполняем данными – тема, сообщение, автор, дата. Также при выводе каждого сообщения мы проверяем переменную $is_admin чтобы узнать, является ли пользователь администратором и можно ли ему показывать ссылку на удаление сообщения. В конце списка сообщений мы выводим ссылку на форму добавления нового.

Создайте файл /templates/_default_/components/com_guestbook_add.tpl и поместите в него следующий код:

<h1 class="con_heading">Добавить сообщение</h1>
 
<form action="" method="post">
 
    <div>Тема сообщения:</div>
    <div>
        <input type="text" name="title" />
    </div>
 
    <div>Текст сообщения:</div>
    <div>
        <textarea name="message"></textarea>
    </div>
 
    <p>
        <input type="submit" name="send" value="Отправить" />
    </p>
 
</form>

Мы не заполняем аттрибут action формы, т.к. показ формы и обработка данных из нее происходит в одном и том же действии контроллера (т.е. по одному адресу страницы). Все остальное вполне стандартно.

Теперь перейдите по адресу site.ru/guestbook. Если все было сделано правильно, вы увидите пустой список сообщений. Попробуйте добавить несколько сообщений и посмотреть как они выводятся в списке.

Внутри tpl-шаблонов компонента вы можете подключать к странице произвольные CSS и JavaScript-файлы.

Подключение CSS:

{add_css file="templates/my-template/css/style.css"}

Подключение JS:

{add_js file="templates/my-template/js/script.js"}

Пути к файлам лучше не прописывать жестко, как в двух примерах выше, т.к. это привяжет файлы к определенному шаблону. Рекомендуется определять путь к текущему шаблону и нужному файлу внутри контроллера с помощью такого кода:

$inConf = cmsConfig::getInstance();
$template_dir = 'templates/' . $inConf->template . '/';
$my_css = $template_dir . 'styles.css';

Затем передавать переменную $my_css в шаблон и подключать файл таким образом:

{add_css file=$my_css}

Тогда CSS-файл всегда будет браться из текущего шаблона, установленного пользователем.

Подробнее о синтаксисе шаблонизатора Smarty вы можете узнать в официальном мануале (русский).

← К оглавлению | Часть 7: Установка компонента →