четверг, 15 декабря 2011 г.

Создание расширения для CMS Joomla 1.7. Часть 7. Дизайн административного (backend) интерфейса.

Итак, продолжаем наращивать функционал нашего компонента для CMS Joomla. В предыдущей статье мы добавили к нашему компоненту функции работы с базой данных, если Вы ее не прочитали, то я рекомендую обратиться к статье “Создание расширения для CMS Joomla 1.7. Часть 6. Работа с базой данных.”. В этой статье наша основная цель поменять дизайн нашего компонента в административной части нашего сайта. Правда, никакой функциональной нагрузки это нести не будет. Мы будем менять только дизайн. А дизайн это сила ))). Ну ладно хватит лирики, давайте приступим...

Как я уже писал выше, например в статье “Создание расширения для CMS Joomla 1.7. Введение.” CMS Joomla основана на принципе MVC Model-View-Controller. И для решения нашей задачи нам понадобиться реализовать данный принцип. Тут  я хотел бы обратить внимание, что в административной (backend) части мы строим свою MVC, а для сайта мы строим свою.
Давайте изменим интерфейс нашего компонента, при переходе в настройки этого компонента в административной части сайта.
Откроем нашу папку с компонентом. Если кто-то только начал с нами создавать компонент, то я рекомендую вернуться к первой части данного цикла статей и начать создавать расширение для CMS Joomla сначала, для нетерпеливых Вы можете отсюда скачать компонент на базе которого мы продолжаем изучать создание расширения для CMS Joomla.
Изменим в папке admin файл helloworld.php следующим образом:
<?php
// права доступа
defined('_JEXEC') or die('Restricted access');

// импортируем библиотеку контроллеров
jimport('joomla.application.component.controller');

// Получаем экземпляр контроллераHelloWorld
$controller = JController::getInstance('HelloWorld');

// Выполняем запрос задачи
$controller->execute(JRequest::getCmd('task'));

// перенаправляем на установленный контролер
$controller->redirect();
Отлично, теперь нам необходимо создать сам контроллер. В папке admin создаем файл controller.php и помещаем в него следующих код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted access');

// импортируем библиотеку controller
jimport('joomla.application.component.controller');

/**
* Создаем наш контроллер HelloWorld
*/
class HelloWorldController extends JController
{
   function display($cachable = false)
   {
       // задаем view по умолчани, если другого не задано
       JRequest::setVar('view', JRequest::getCmd('view', 'HelloWorlds'));

       // поведение при вызове
       parent::display($cachable);
   }
}
Теперь у нас есть точка входа и контроллер, теперь нам осталось создать view и шаблон.
В папке admin создаем папку views, в папке views создаем папку helloworlds, а в папке helloworlds создаем файл view.html.php, в который добавляем следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted access');

// импорт библиотеки view
jimport('joomla.application.component.view');

/**
* HelloWorlds View
*/
class HelloWorldViewHelloWorlds extends JView
{

   function display($tpl = null)
   {
       // Получаем данные из модели
       $items = $this->get('Items');
       $pagination = $this->get('Pagination');

       // Проверяем на наличие ошибок.
       if (count($errors = $this->get('Errors')))
       {
           JError::raiseError(500, implode('<br />', $errors));
           return false;
       }
       // Вывод данных для просмотра
       $this->items = $items;
       $this->pagination = $pagination;

       // Показывам шаблон
       parent::display($tpl);
   }
}
Итак обработчик view написали. И завершающий этап создание шаблона. Для этого в папке helloworlds создаем папку tmpl. В папке tmpl создаем файл default.php, а в него уже добавляем следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted Access');

// загрузка подсказок поведения
JHtml::_('behavior.tooltip');
?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld'); ?>" method="post" name="adminForm">
   <table class="adminlist">
       <thead><?php echo $this->loadTemplate('head');?></thead>
       <tfoot><?php echo $this->loadTemplate('foot');?></tfoot>
       <tbody><?php echo $this->loadTemplate('body');?></tbody>
   </table>
</form>
Тут наверное необходимо отметить, что шаблон нашего компонента в админ части сайта мы разбили на три составляющие: head, foot и body. Для каждой составляющей сосздадим свой файл. В папке tmpl создаем файл default_head.php, который отвечает за вывод верхней части нашего расширения и в него добавим следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted Access');
?>
<tr>
   <th width="5">
       <?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_ID'); ?>
   </th>
   <th width="20">
       <input type="checkbox" name="toggle" value="" onclick="checkAll(<?php echo count($this->items); ?>);" />
   </th>            
   <th>
       <?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING'); ?>
   </th>
</tr>
Теперь создадим в папке tmpl файл default_body.php, который будет отвечать за тело нашего компонента и поместим туда следующий код:
<?php
// Права доступа
defined('_JEXEC') or die('Restricted Access');
?>
<?php foreach($this->items as $i => $item): ?>
   <tr class="row<?php echo $i % 2; ?>">
       <td>
           <?php echo $item->id; ?>
       </td>
       <td>
           <?php echo JHtml::_('grid.id', $i, $item->id); ?>
       </td>
       <td>
           <?php echo $item->greeting; ?>
       </td>
   </tr>
<?php endforeach; ?>
И осталось создать только файл, отвечающий за нижнюю область шаблона для нашего расширения. В папке tmpl создадим файл default_foot.php и поместим туда следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted Access');
?>
<tr>
   <td colspan="3"><?php echo $this->pagination->getListFooter(); ?></td>
</tr>
Небольшой совет, разбивайте шаблон расширения так, чтобы в верхней (default_head.php) и нижней (default_foot.php) частях были неизменяемые данные, в теле (default_body.php) уже оставьте изменяемые. Да, конечно не всегда это получается, но старайтесь придерживаться данного принципа.
Вот мы практически и подошли к цели нашего поста, единственное мы не создали саму модель. Давайте это исправим. В папке admin/models создадим файл helloworlds.php и добавим в него следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted access');
// загружаем библиотеку modellist
jimport('joomla.application.component.modellist');
/**
* создаем model HelloWorldList
*/
class HelloWorldModelHelloWorlds extends JModelList
{
   protected function getListQuery()
   {
       // создаем новый объект запроса        
       $db = JFactory::getDBO();
       $query = $db->getQuery(true);
       // выбираем необходимые поля
       $query->select('id,greeting');
       // Из таблицы hello, которую мы создали в предыдущем уроке
       $query->from('#__helloworld');
       return $query;
   }
}
Все на этом создание дизайна административного интерфейса для нашего компонента закончен. Осталось немного изменить наш файл helloworld.xml, следующим образом:
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="1.7.0" method="upgrade">

    <name>Hello World!</name>
    <!-- Данные о разработчике -->
    <creationDate>2011</creationDate>
    <author>zloykolobok</author>
    <authorEmail></authorEmail>
    <authorUrl>http://zloykolobok.blogspot.com</authorUrl>
    <copyright>Copyright Info</copyright>
    <license>License Info</license>
    <!--  Версия продукта-->
    <version>0.0.7</version>
    <!-- Описание компонента-->
    <description>Продолжение статей по созданию расширений для CMS Joomla</description>
   
    <install> <!-- Будет выполнено при установке компонента-->
       <sql>
           <file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
       </sql>
    </install>
    <uninstall> <!-- Будет выполнено при удалении компонента -->
       <sql>
           <file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
       </sql>
    </uninstall>
    <update> <!-- Будет исполнено при обновлении. Доступно с версии 1.6 -->
       <schemas>
           <schemapath type="mysql">sql/updates/mysql</schemapath>
       </schemas>
    </update>

    <!-- Копирование файлов в секцию site-->
    <files folder="site">
       <filename>index.html</filename>
       <filename>helloworld.php</filename>
       <filename>controller.php</filename>
       <folder>views</folder>
       <folder>models</folder>
    </files>

    <administration>
       <!-- меню в административном разделе-->
       <menu>Hello World!</menu>
       <!-- Копирование сайтов в секцию Administration  -->
       <files folder="admin">
           <filename>index.html</filename>
           <filename>helloworld.php</filename>
           <filename>controller.php</filename>
           <!-- папка для SQL файлов -->
           <folder>sql</folder>
           <!-- папка tables -->
           <folder>tables</folder>
           <!-- папка models -->
           <folder>models</folder>
           <!-- папка views -->
           <folder>views</folder>
       </files>
    </administration>

</extension>
И все создаем zip-архив и можем приступить к проверке нашего компонента для CMS Joomla 1.7. Скачать готовый компонент данного поста Вы можете по данной ссылке.
Устанавливаем компонент. Если установка прошла успешно, то перейдя по пункту меню “Компоненты” ->”hello-world”


Вы должны увидеть следующее:
 На этом я заканчиваю данный пост. В следующих статьях мы поговорим о добавлении языков, о добавлении некоторых action  в админку для нашего компонента и о многом другом. Для того, чтобы не пропустить выход новых материалов подпишитесь на мой блог или следите за мной в twitter. Станица о CMS Joomla в G+.
Всем удачной разработки.


Понравилась статья? Поблагодарить автора:

Введите e-mail адрес:



3 комментария: