10 minutes reading time (1917 words)

Joomla 3. Що нового для розробників. Практична частина.

May

Wednesday, 01 May 2013

14365 Hits

Joomla 3 є перехідною версіює перед LTS-версією 3.5, і тому вона дещо специфічна. Як не мене, вона переслідує дві мети: показати розробникам напрямок руху системи і випробувати на практиці нові підходи. Підходи ж ці настільки нові, що в самих вбудованих компонентах вони поки що не використуються. Тому дана стаття розділена на дві частини. В першій я розповім про практичні аспекти створення та адаптації розширень для нової версії. Друга — теоретична, в ній я розповім про нову концепцію MVC.

Почнемо з реальних проблем і особливостей з якими стикаються розробники при адаптації існуючих чи створенні нових розширень під Joomla 3.

Нові системні вимоги

PHP 5.3.1
MySQL 5.1
register_globals off
magic_quotes_gpc off

Twitter Bootstrap

З метою спрощення життя верстальникік в Joomla 3 впроваждено фрейморк Twitter Bootstrap, а разом з ним jQuery та jQuery UI. Тепер Mootools не є основною js-бібліотекою, більше того, в поточній версії вона залишена лише заради сумісності з попередніми і, ймовірно, в наступних її буде виключено зі складу. Поки що деякі js-скрипти самої Joomla все ще вимагають наявності Mootools, однак в наступних версіях вони будуть портовані.

Twitter Bootstrap — це html/css/js фреймворк, який спрошує та прискорює верстку. Також він включає js-скрипти для багатьох часто використовуваних задач, наприклад: випадаючі меню, закладки, акордеон і т.п. Фреймворк використовує less — динамічну мову стилів. Вона розширяє звичні css змінними, вкладеними блоками, міксами, опараторами та фукнціями. Все це робить написання стилів зручнішим і, головне, гнучкішим. Less-файли можуть бути скомпільовані в css як на сервері так і на стороні клієнта. Однак на готовому сайті рекомендується віддавати клієнту вже скомпільовані файли.

Окрім того, сама Joomla CMS тепер містить ряд функцій для використання компонентів фреймворку без написання JavaScript чи ще чогось.

Шаблони

Як ви вже зрозуміли, в Joomla тепер є вбудований фреймворк для верстки і тим, хто бажає спростити її не обов’язково використовувати для цього сторонні розширення. Використання старих шаблонів все ще можливое. В версії 3 можна встановлювати шаблони з версії 2.5. А формально навіть 1.6. Можливо знадобиться деяка адаптація, в основному пов’язана з тим, що в новій Joomla використовуються інші класи та ідентифікатори, але в цілому, вони працюватимуть. Також можна створювати нові шаблони користуючись старими підходами. Та все ж рекомендованим є побудова шаблонів на Bootstrap. Окрім спрошення і здешевлення розробки, буде кращою взаємодія зі сторонніми розшиереннями та підтримка з боку CMS. Так, наприклад, в налаштуваннях модулів є спеціальна опція “ширина модуля в bootstrap”.

Що ж в новій версії є для сторення шаблонів на Twitter Bootsrap? Звичайно сам Bootsrap. Він знаходиться у каталозі media/jui. JUI розшифровується як Joomla User Interface. В середині розширений для роботи з Joomla Twitter Bootsrap, який представлений у двох варіантах:

скомпільовані css у каталозі css
less-файли у каталозі less

Також в склад системи входить клас JHtmlBootstrap, який допомогає при використанні компонентів Twitter Bootsrap.

Вбудовані компоненти та модулі адаптовані для роботи з Twitter Bootsrap. Тобто, якщо раніше створюючи шаблон на основі Twitter Bootsrap потрібно було створювати власні шаблони для вбудованих компонентів, то тепер навпаки, створювати їх доведеться, якщо шаблон не на bootstrap. Нові сторонні компоненти будуть використовувати JUI, а його основою є bootstrap.

Взагалі Joomla рухається до стандартизації інтерфесів і в її рамках діє проект JUX, метою якого і є покращення і стандартизація інтерфейсів.

В якості зразка того, як створювати шаблони на базі Twitter Bootsrap можна викорисовувати новий шаблон Protostar, що входить до складу CMS. Однак звернути увагу потрібно не на каталог css, який містить скомпільований css, а на каталог less. Саме тут містяться файли редагуючи які, можна керувати стилями шаблону. Файл variables.less містить налаштування для Twitter Bootsrap, такі як: кольори фону та тексту, шрифти, розміри деяких елементів і т.п. Icomoon.less — налаштування іконок. А файл template.less містить підключення необхідних компонентів JUI (включаючи Bootstrap) та стилі шаблону. Такий підхід дозволяє використовувати лише необхідні частини JUI та задати необхідні налаштування для Twitter Bootsrap, що не зробиш при використанні уже скомпільованих css-файлів. Така структура не є обов’язковою, і можна використовувати будь-яку іншу, наприклад винести в окремий файл стилі шаблону.

З недоліків, в Joomla немає вбудованої можливості компілювання less-файлів на ходу. І взагалі в ній немає ніякого компілятора для less. Це турбота розробника. Знайти інструменти для компілювання less в css можна на офіційному сайті less. Однак компілювати less-файли після кожної правки доволі складно, тому в процесі розробки раджу користуватися плагіном Less Compiler, або офіційним скриптом less.js, який компілює less у браузері. Користуватися ним дуже просто:

<link rel="stylesheet/less" type="text/css" href="/styles.less">
<script src="/less.js" type="text/javascript"></script>

По закінченню роброзки потнібно не забути скомпілювати less-файли та підключити замість них отриманий css-файл.

Зміни у файлі шаблону index.php пов'язані з переходом на Twitter Bootstrap. Звернути увагу потрібно на рядок:

JHtml::_('bootstrap.framework');

Який підключає фреймворк до шаблону.

Також зауважте на фрагмент:

<!--[if lt IE 9]>
<script src="/<?php echo $this->baseurl ?>/media/jui/js/html5.js"> </script>
<![endif]-->

Який потрібен, щоб старі версії IE розуміли нові теги html5.

Спільні слої (layouts)

Іноді буває потрібно щоб один і той же фрагмент сторінки відображався в різних видах розширення, або навіть у кількох різних розширеннях. Наприклад відображення одного й того ж фрагменту в адмінці і на сайті, або в кількох різних модулях. До версії 3.0 це була складна задача. Тепер її допомогає вирішувати пакет JLayout. Він використовуюється для відображення підменю та фільтрів у адміністранивній частині більшості компонентів.

Пакет складається з:

інтерфесу JLayout
базового класу JLayoutBase
класу JLayoutFile, який і є найбільш застосувауваним.

Простий приклад використання:

$layout = new JLayoutFile('joomla.sidebars.submenu', $basePath = null);
$sidebarHtml = $layout->render($data);

Даний код завантажить слой, передасть у нього дані і виповнить рендеринг.
Перший параметр 'joomla.sidebars.submenu' вказує який слой потрібно завантажити, а не обов’язковий параметр $basePath, звідки його завантажувати. По замовчуванню з каталогу layouts в корені сайту.

Якщо потрібно завантажити слой з компоненту, то це можна зробити так:

$layout = new JLayoutFile('my_layout', JPATH_ROOT .'/components/com_something/layouts');
$html = $layout->render($data);

Крім того, слої можна заміщати в шаблоні. Метод render перевіряє наявність слою в поточному шаблоні, у каталозі layouts, і при наявності використовує його. Так, наприклад, замістити слой для підменю можна у файлі /administrator/templates/<шаблон>/html/layouts/joomla/sidebars/submenu.php

Необхідно зауважити, що в адміністративній і користувацьких частинах використовуються різні шаблони.

Змерігатися шаблони можуть де завгодно, оскільки місце можна вказати при використанні. Однак рекомендованими є зберігання у каталозі layouts розширення:

/administrator/components/com_example/layouts
/components/com_example/layouts
/plugins/content/example/layouts
/modules/mod_example/layouts

Каталог layouts в корені сайту зарезервований для самої Joomla.

Для того, щоб в шаблоні можна було замістити слой, всередині каталогу layouts рекомендується сворити підкаталог по назві розширення, наприклад:
/components/com_example/layouts/com_example

Файли слоїв розміщувати в цьому каталозі (при потребі всередині цього катологу можна створювати ще підкаталоги і розміщувати файли у них). Завдяки цьому шлях до слою можна задати як com_example.my_layout і система не плутатиме його з іншим my_layout при заміщенні в шаблоні.

Адаптивний дизайн

Завдяки використанню Twitter Bootstrap стало можливим доволі просто створювати шаблони з адаптивним дизайном, які зручно використувати на різноманітних пристроях: настільних ком’ютерах, планшетах, смартфонах та інших. Для цього достатньо підключити компонент Twitter Bootstrap responsive. Окрім розміщення блоків він також містить спеціальну версію навігаційного меню для використання на мобільних пристроях.

Доречі, адміністративна панель нової Joomla уже адаптована для використання на мобільних пристроях і тепер керувати сайтом можна з мобільного телефону.

Модулі та плагіни

Що стосується модулів та плагінів, то ніяких суттєвих змін тут не відбулося. Але це не означає, що всі старі плагіни і модулі прицюватимуть. Проблеми можуть виникнути, однак їх причиною будуть зміни у фреймворку.

На що варто звернути увагу при розробці (або виникнені проблем зі старими) плагінів, то це на те, що в події onContentBeforeSave і onContentAfterSave параметр $article передається тепер по значенню, а не по посиланню. Що може стати причиною важко відловлюваних помилок.

Компоненти

З компонентами ситуація склалася неоднозначна. Всі вбудовані, і всі сторонні компоненти, які я переглянув, використовують режим сумісності з Joomla 2.5. Тобто в Joomla 3 є новий фрейморк з новою MVC, але компонентів, якіб його використовували, поки що немає (мені вдалося знайти лише один експерементальний, власне на якому і випробовують нову MVC, але й він ще на початковій стадії). Розробники Joomla обіцяють перейти на використання нового фреймворку за рік-два. І саме через це я розділив лекцію на практичну і теоретичну частини. Тут я розповім про практичні відмінності компонентів під Joomla 3.

Cумісність

Не зважаючи на скарги про недостатню підтримку сумісності з попередніми версіями, в Joomla присутня підтримка не лише попередніх версій, але й наступних. І саме прихована підтримка попередніх версій призводить до того, що якесь розширення працює з версії у версію, розвивається, але раптом перестає функціонувати і виявляється, що під поточну версію Joomla потрібно писати все зовсім по іншому.

Основна зміну, яку необхідно внести щоб компоненти для версії 2.5 працювали під 3.0 — замінити класи JController, JModel та JView на JControllerLegacy, JModelLegacy та JViewLegacy. Якщо подивитися на вбудовані компоненти версії 2.5, то вони вже використовували ці класи. Це і є сумісність вперед. В версії 2.5 класи з суфіксом Legacy повторювали звичайні і були введені лише для того, щоб розробники могли створювати розширення, які з мінімальною кількістю змін зможуть функціонувати під Joomla 3.

У вбудованих компонентах ці зміни зовсім невеликі. Основні з них:

JRequest замінено на JFactory::getApplication()->input
(в контролері $this->input).
JRequest все ще підтримується, але оголошено застарілим.
У виглядах замість $this->assignRef використовується присвоєння значень властивостям $this (шаблони тепер працюють в контексті виду і всі властивості і методи вигляду їм доступні).
Замість JDispatcher використовується JEventDispatcher.
Внутрішні шаблони розширень переписані під Twitter Bootstap.

В адміністративній частині підменю тепер відображається не зверху, а зліва, і про його відображення потрібно потурбуватися самостійно. В код виду потрібно добавити рядок:

$this->sidebar = JHtmlSidebar::render();

В решті коду потрібно замість JSubMenuHelper використовувати JHtmlSidebar.

А в шаблон компоненту вставити:

<?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;?>

Сам же шаблон адмніністративної частини компоненту тепер повинен використовувати JUI та Twitter Bootstrap.

Joomla Platform 12.1

Найбільше проблем сумісності виникне через зміни у фреймворку. Тут я вкажу лише найбільш помітні зміни.

Видалено константу DS

Можна використовувати DIRECTORY_SEPARATOR:

if(!defined('DS')){
        define('DS',DIRECTORY_SEPARATOR);
}

Також деякі глобальні константи перенесено в класи, з якими вони логічно пов’язані.

Наслідування від JObject

В попередніх версіях майже всі класи наслідувалися від JObject. Це було необхідно для того, щоб з об’єктами цих класів можна було оперувати в стилі PHP5. Оскільки мінімальною вимогою для версї 3.0 є PHP 5.3, то потреба в цьому відпала.

JObject

В Самому JObject видалено метод toString() тепер використовується __toString().

Впорядкування назв

Деякі класи переіменовано. Наприклад, JFTP тепер називається JClientFtp.
Багато властивостей та методів раніше починализя із символа “_”. Цей прийом прийшов із PHP4 і застосовувався для позначення їх “приватності”. Тепер в цьому відпала необхідність.

Класи, назви яких складалися з прописних літер, переіменовані по принципу CamelCase. Однак автозавантажувач все ще розумію написання прописними.

Перехід з MooTools на jQuery

Замість JHtmlBehavior::mootools() тепер використовується JHtmlBehavior::framework().

В якості бази даних можливе використання не лише mySQL

Замість JDate::toMysql() тепер Jdate::toSql().

SendMail

JUtility::sendMail() видалено. Використовуйте JMail::sendMail(), а замість JUtility::sendAdminMail() - JMail::sendAdminMail()

Обробка помилок

В разі помилки більшість методів тепер не повертає false, об’єкт JError або JException, а викликає виключення. Самі ж класи JError і JException оголошено застарілим. Замість них рекомендовано викорисовувати виключення.

Аргументи багатьох методів змінено

Joomla 3.1 і теги

На момент підготовки статті вже було випущено Joomla 3.1b3.

Найбільш помітна зміна — введення тегів. Це довгоочікувана функція. Теги в джумлі багатофункціональні, передбачена вкладеність і багатомовні сть. Використовувати їх можна не лише у вбудованих компонентах, а й впроваджувати у власних. Для цього достатньо використати поле типу tag.
Вибір тегів може працювати у двох режимах: вибір з наявного переліку, або з автопідбором — автор вводить кілька перших букв і лише після цього з’являється перелік, з якого можна вибрати потрібний варіант, або ввести свій. Окрім самех тегів, окремим плагіном присутнє поле з автопідбором значення, і його можна використовувати окремо.

І в цій версії вперше застосовано новий MVC, поки що лише в інсталяторі, який є окремою аплікацією, тому дослідити на його основі створення розширень не получиться. А от подивитися як створювати окремі веб-додатки можна.