-
Главная
-
Joomla
-
Создание компонента
- Адаптация выходных данных под Joomla 3
Адаптация выходных данных под Joomla 3
Несмотря на то, что цикл статей по созданию компонента касается Joomla 2.5, я старался учитывать в коде возможность несложной адаптации под Joomla 3. Все, что касается классов и их взаимодействия должно без проблем работать на Joomla 3.x. Но с выводом данных есть сложность - здесь код Joomla 2.5 отличается от Joomla 3.x, поэтому я решил посветить отдельную часть именно адаптации выходных данных компонента под Joomla 3.
Итак, Joomla 3 принесла нам мобильность и стандартизацию в лице Bootstrap и в тоже время довольно сильно измененные выходные данные. Шаблоны (как на сайте, так и в панели администратора) используют новые элементы, новые css-классы и имеют совершенно иную структуру. Соответственно некоторые функции в нашем компоненте вообще перестали работать, а отображение данных оставляет желать лучшего. Именно поэтому нам необходимо внести определенные изменения в существующий код компонента и сделать его работоспособным в Joomla 3. Стоить отметить, что все изменения будут касаться вывода данных (шаблонов) компонента в панели администратора, так как на фронт-энде наш компонент выводит минимальное количество информации без использования специфичных css-классов и элементов.
Сначала разберемся с подменю. В Joomla 3 подменю выводится не сверху, а в левой боковой панели с помощью нового класса JHtmlSidebar. Причем эта боковая панель не выводится в режиме редактирования записи. Поэтому нам необходимо добавить вывод боковой панели только в представление списка записей admin/views/helloworlds/view.html.php. Сразу после $this->addToolbar(); добавляем:
// Устанавливаем боковую панель. $this->sidebar = JHtmlSidebar::render();
И еще одно небольшое изменение необходимо внести в хелпер admin/helpers/helloworld.php - везде в коде меняем JSubMenuHelper на JHtmlSidebar. С подменю разобрались.
Далее вносим изменения в файл шаблона списка записей admin/views/helloworlds/tmpl/default.php. Находим код:
JHtml::_('behavior.tooltip');
меняем на
JHtml::_('bootstrap.tooltip');
Добавляем форме id="adminForm":
<form action="<?php echo JRoute::_('index.php?option=com_helloworld'); ?>"
method="post" name="adminForm" id="adminForm">
Также добавляем вывод боковой панели:
<?php if (!empty($this->sidebar)): ?>
<div id="j-sidebar-container" class="span2">
<?php echo $this->sidebar; ?>
</div>
<div id="j-main-container" class="span10">
<?php else : ?>
<div id="j-main-container">
<?php endif;?>
Меняем у таблицы css-класс adminlist на два css-класса table table-striped. В итоге файл admin/views/helloworlds/tmpl/default.php должен выглядеть следущим образом:
<?php
// Запрет прямого доступа.
defined('_JEXEC') or die;
// Загружаем тултипы.
JHtml::_('bootstrap.tooltip');
?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld'); ?>"
method="post" name="adminForm" id="adminForm">
<?php if (!empty($this->sidebar)): ?>
<div id="j-sidebar-container" class="span2">
<?php echo $this->sidebar; ?>
</div>
<div id="j-main-container" class="span10">
<?php else : ?>
<div id="j-main-container">
<?php endif;?>
<table class="table table-striped">
<thead><?php echo $this->loadTemplate('head');?></thead>
<tbody><?php echo $this->loadTemplate('body');?></tbody>
<tfoot><?php echo $this->loadTemplate('foot');?></tfoot>
</table>
<div>
<input type="hidden" name="task" value="" />
<input type="hidden" name="boxchecked" value="0" />
<?php echo JHtml::_('form.token'); ?>
</div>
</div>
</form>
С этим файлом мы закончили. Следующее совсем небольшое изменение внесем в файл admin/views/helloworlds/tmpl/default_head.php. Код
<th width="20">
<input type="checkbox" name="toggle" value="" onclick="checkAll(<?php echo count($this->items); ?>);" />
</th>
меняем на
<th width="1%" class="hidden-phone">
<input type="checkbox" name="checkall-toggle" value="" title="<?php echo JText::_('JGLOBAL_CHECK_ALL'); ?>"
onclick="Joomla.checkAll(this)" />
</th>
С этим файлом тоже все. Как видите, мы вносим небольшие изменения, которые в основном представляют собой добавление новых css-классов и элементов, что позволяет Joomla 3 корректно взаимодействовать с этими элементами на странице. В общем-то со списком записей мы закончили и теперь список выглядит по стандарту Joomla 3:
Наиболее объемные изменения необходимо внести в шаблон формы редактирования записи admin/views/helloworld/tmpl/edit.php. Я не буду разбирать каждое отдельное изменение, а сразу приведу код адаптированной под Joomla 3 версии этого файла:
<?php
// Запрет прямого доступа.
defined('_JEXEC') or die;
// Загружаем тултипы.
JHtml::_('bootstrap.tooltip');
// Загружаем проверку формы.
JHtml::_('behavior.formvalidation');
// Загружаем украшательства формы.
JHtml::_('formbehavior.chosen', 'select');
// Получаем параметры из формы.
$params = $this->form->getFieldsets('params');
?>
<script type="text/javascript">
Joomla.submitbutton = function(task) {
if (
task == 'helloworld.cancel' ||
document.formvalidator.isValid(document.id('helloworld-form'))
)
{
Joomla.submitform(task, document.getElementById('helloworld-form'));
}
}
</script>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld&layout=edit&id='.
(int)$this->item->id); ?>"
method="post" name="adminForm" id="helloworld-form" class="form-validate">
<div class="row-fluid">
<div class="span12 form-horizontal">
<ul class="nav nav-tabs">
<li class="active"><a href="#general" data-toggle="tab">
<?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_DETAILS');?></a></li>
<?php foreach ($params as $name => $fieldset): ?>
<li><a href="#params-<?php echo $name;?>" data-toggle="tab">
<?php echo JText::_($fieldset->label);?></a></li>
<?php endforeach; ?>
<?php if ($this->canDo->get('core.admin')): ?>
<li><a href="#permissions" data-toggle="tab">
<?php echo JText::_('COM_HELLOWORLD_FIELDSET_RULES');?></a></li>
<?php endif ?>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="general">
<fieldset class="adminform">
<div class="control-group form-inline">
<?php foreach ($this->form->getFieldset('details') as $field): ?>
<?php echo $field->label; ?> <?php echo $field->input; ?>
<?php endforeach; ?>
</div>
</fieldset>
</div>
<?php foreach ($params as $name => $fieldset): ?>
<div class="tab-pane" id="params-<?php echo $name;?>">
<?php if (isset($fieldset->description) && trim($fieldset->description)): ?>
<p class="tip">
<?php echo $this->escape(JText::_($fieldset->description));?>
</p>
<?php endif;
foreach ($this->form->getFieldset($name) as $field) : ?>
<div class="control-group">
<?php echo $field->label; ?>
<div class="controls">
<?php echo $field->input; ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
<?php if ($this->canDo->get('core.admin')): ?>
<div class="tab-pane" id="permissions">
<fieldset>
<?php echo $this->form->getInput('rules'); ?>
</fieldset>
</div>
<?php endif; ?>
</div>
</div>
<div>
<input type="hidden" name="task" value="helloworld.edit" />
<?php echo JHtml::_('form.token'); ?>
</div>
</div>
</form>
В глаза сразу бросается совсем другой стиль разметки. Навигация осуществляется с помощью вкладок (табов) <ul class="nav nav-tabs">, содержимое всех вкладок помещено в <div class="tab-content">, а содержимое каждой отдельной вкладки в свою очередь заключено в <div class="tab-pane"> с уникальным id. Именно этот id используется в ссылках вкладок навигации и таким образом осуществляется переключение между этими вкладками.
Также обратите внимание на этот JavaScript код:
<script type="text/javascript">
Joomla.submitbutton = function(task) {
if (
task == 'helloworld.cancel' ||
document.formvalidator.isValid(document.id('helloworld-form'))
)
{
Joomla.submitform(task, document.getElementById('helloworld-form'));
}
}
</script>
Он предоставляет нам универсальную валидацию формы. Это позволяет нам избавиться от более громоздкого файла валидации admin/views/helloworld/submitbutton.js, который нес в себе такую же функцию. Так что если Вы используете Joomla 3, то можете смело выкидывать следующую строчку из файла представления admin/views/helloworld/view.html.php:
$document->addScript(JURI::root() . "/administrator/components/com_helloworld"
. "/views/helloworld/submitbutton.js");
JText::script('COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE');
Теперь вносим изменения в файл формы admin/models/forms/helloworld.xml:
<?xml version="1.0" encoding="utf-8"?>
<form
addrulepath="/administrator/components/com_helloworld/models/rules"
>
<fieldset name="details">
<field
name="id"
type="hidden"
/>
<field
name="greeting"
type="text"
label="COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC"
size="40"
class="input-xlarge validate-greeting"
validate="greeting"
required="true"
default=""
labelclass="control-label"
/>
<field
name="catid"
type="category"
extension="com_helloworld"
class="inputbox"
default=""
label="COM_HELLOWORLD_HELLOWORLD_FIELD_CATID_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_FIELD_CATID_DESC"
>
<option value="0">JOPTION_SELECT_CATEGORY</option>
</field>
</fieldset>
<fields name="params">
<fieldset
name="params"
label="JGLOBAL_FIELDSET_DISPLAY_OPTIONS"
>
<field
name="show_category"
type="radio"
class="btn-group"
label="COM_HELLOWORLD_HELLOWORLD_FIELD_SHOW_CATEGORY_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_FIELD_SHOW_CATEGORY_DESC"
default=""
labelclass="control-label"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
</fieldset>
</fields>
<fieldset name="accesscontrol">
<field name="asset_id" type="hidden" filter="unset" />
<field name="rules"
type="rules"
label="JFIELD_RULES_LABEL"
translate_label="false"
filter="rules"
validate="rules"
class="inputbox"
component="com_helloworld"
section="message"
/>
</fieldset>
</form>
Здесь мы добавили некоторым полям дополнительный атрибут labelclass="control-label", поменяли у поля "greeting" css-класс inputbox на input-xlarge, а также поменяли тип поля "show_category" с list на radio, придав этому полю стандартизированный вид с помощью css-класса btn-group. Вот как стал выглядеть режим редактирования записи:
На этом всё - адаптация компонента под Joomla 3 завершена и теперь он полностью работоспособен. Если я что-то упустил или где-то ошибся, то дайте об это знать в комментариях.