Joomla 3Що нового для розробників

Доповідач:Віталій Маренковadmin@mavik.com.uaSkype: vitaliy.marenkovСтудія mAvik

Сьогодні розглянемо

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

● Twitter Bootstrap та приціл на мобільні пристрої

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

● Компоненти

● Joomla 3.1 і теги

● Нова концепія MVC

● Нові корисні бібліотеки

● Чого чекати в майбутньому

Практична частина Теоретична частина

Шаблона HTML

Короткий екскурс в історію

Joomla 1.0

ЯдроPHP+HTML

КомпонентPHP+HTML

КомпонентPHP+HTML

Короткий екскурс в історіюКороткий екскурс в історію

Joomla 1.5

Ядро

КомпонентPHP

Шаблон сайтуHTML

ПлагіниШаблон

КомпонентуHTML

КомпонентPHP

ШаблонКомпоненту

HTML

Короткий екскурс в історію

Joomla 2.5

Joomla CMS

КомпонентPHP

Шаблон сайтуHTML

Плагіни

ШаблонКомпоненту

HTML

КомпонентPHP

ШаблонКомпоненту

HTML

Joomla Platform

Короткий екскурс в історію

Joomla 3

● Версії 3.0, 3.1, 3.2 — перекідні до LTS-версії 3.5

● Стандартизація користвувацького інтерфейсу

● Нова версія Joomla Platform

● Нова концепція MVC

Практична частина

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

●PHP 5.3.1

●MySQL 5.1

●register_globals off

●magic_quotes_gpc off

Twitter Bootstrap

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

Використовує LESS - динамічну мову стилів, яка розширює звичні CSS змінними, вкладеними блоками, міксами, опараторами та фукнціями.

Основною JS-бібліотекою тепер є jQuery.

LESS@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) { box-shadow: @style @c; -webkit-box-shadow: @style @c; -moz-box-shadow: @style @c;}

.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha));}

.box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) }}

Шаблони

● Базуються на Twitter Bootstrap.● Joomla User Interface — бібліотека найбільш

вживаних елементів користувацького інтерфейсу.● Класс JHtmlBootstrap допогає використовувати

компоненти Twitter Bootsrap.● Вбудовані компоненти та модулі адаптовані для

роботи з Twitter Bootsrap.● В якості зразка можна використовувати шаблон

Protostar.

JUI

media/jui● css● fonts● img● js● less

Шаблони. Використання LESS

● Стилі шаблонів задаються в less-файлах.● В папку css файли потрапляють при компіляції less.● У файлі template.less відвувається «збирання»

стилів з необхідних компонентів JUI.● Використовуючи власний файл variables.less можна

налаштовувати Twitter Bootstrap.● Використання less.js для компіляції less на стороні

клієнта:

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

Шаблони. Використання LESS

Файл variables.less (фрагмент):

// Grays// -------------------------@black: #000;@grayDarker: #222;@grayDark: #333;@gray: #555;@grayLight: #999;@grayLighter: #eee;

// Accent colors// -------------------------@blue: #049cdb;@blueDark: #0064cd;

Шаблони. Використання LESS

Файл icomoon.less (фрагмент):.icon-home:before {

content: "\21";}.icon-user:before {

content: "\22";}.icon-checkedout:before,.icon-lock:before,.icon-locked:before {

content: "\23";}.icon-comment:before,.icon-comments:before {

content: "\24";}

Шаблони. Використання LESS

Файл template.less (фрагмент):// CSS Reset@import "../../../media/jui/less/reset.less";

// Core variables and mixins@import "variables.less"; // Custom for this template@import "../../../media/jui/less/mixins.less";

// Grid system and page structure@import "../../../media/jui/less/scaffolding.less";@import "../../../media/jui/less/grid.less";@import "../../../media/jui/less/layouts.less";

// Base CSS@import "../../../media/jui/less/type.less";@import "../../../media/jui/less/code.less";@import "../../../media/jui/less/forms.less";

Шаблони

Файл index.php● Підключення Twitter Bootstrap:JHtml::_('bootstrap.framework');

● Використання HTML5 у старих версіх IE:<!--[if lt IE 9]><scriptsrc="<?php echo $this->baseurl ?>/media/jui/js/html5.js"> </script> <![endif]-->

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

● Пакет JLayouts дозволяє використовувати слої (розмітки) спільно різними видами розширення, або, навіть, кількома розширеннями.

● Пакет JLayouts скадається з:● інтерфесу JLayout,● базового класу JLayoutBase,● класу JLayoutFile, який і є найбільш

застосувауваним.

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

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

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

● Приклад використання у власному розширенні:

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

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

● Приклад заміщення слою в шаблоні:/administrator/templates/{template}/html/layouts/joomla/sidebars/submenu.php

● Рекомендовані каталоги для зберігання слоїв:● /administrator/components/com_example/layouts

● /components/com_example/layouts

● /plugins/content/example/layouts

● /modules/mod_example/layouts

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

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

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

● В роботі модулів змін не відбулося.● Плагіни:

onContentBeforeSave і onContentAfterSave параметр $article передається теперпо значенню, а не по посиланню

Компоненти

● В Joomla 3 новий фреймворк і нова MVC.● Всі наявні компоненти під Joomla 3, включаючи

вбудовані, використовують режим сумісності з 2.5.

Компоненти. Сумісніть.

● В Joomla 3 є пакет сумісності з 2.5.● Joomla 2.5 має сумість вперед — для версії 3.● Класи JController, JModel та JView необхідно

замінити на JControllerLegacy, JModelLegacy та JViewLegacy.

● Вбудовані компоненти 2.5 вже використовували JControllerLegacy, JModelLegacy та JViewLegacy.

Компоненти. Сумісніть.

Основн і зміни у вбудованих компонентах:● JRequest замінено на JFactory::getApplication()->input

В контролері $this->input.JRequest все ще підтримується, але оголошено застарілим.

● У виглядах замість $this->assignRef використовується присвоєння значень властивостям $this.

● Замість JDispatcher використовується JEventDispatcher.

● Внутрішні шаблони розширень переписані під Twitter Bootstap.

Компоненти. Сумісніть.

Адміністративна частина.● В адміністративній частині підменю тепер відображається не

зверху, а зліва.

● Про відображення підменю потрібно потурбуватися самостійно:

● В код виду потрібно добавити рядок:$this->sidebar = JHtmlSidebar::render();

● В шаблон добавити код для відображення підменю.

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

● Шаблон адмніністративної частини компоненту тепер повинен використовувати JUI та Twitter Bootstrap — це стандарт.

Joomla Platform 12.1

● Видалено константу DSМожна використовувати DIRECTORY_SEPARATOR.

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

● Більшість класів не наслідуються від JObject.

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

● Деякі класи переіменовано. Наприклад, JFTP тепер називається JClientFtp.

● У багатьох властивостей та методів видалено символа “_” на початку назви.

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

Joomla Platform 12.1

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

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

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

● Більшість методів тепер не повертає false, об’єкт JError або JException, а викликає виключення.

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

Joomla 3.1 і теги

● В Joomla 3.1 добавлено теги.

● Теги впроваджено в усі вбудовані компоненти.

● Теги можна впроваджувати у власних компонентах. Для цього достатньо добавити поле типу tag.

● Добавлено плагін для поля з автопідбором значення.

Теоретична частина

Нова концепія MVC

● JController, JModel та JView тепер лише інтерфейси.

● Нові базові класи: JModelBase , JViewBase і JControllerBase.

● Нові котролери однозадачні.

● Розширені класи JModelAdmin , JModelForm , JModelItem і JModelList є частиною пакету сумісності.

Контролер

class MyController extends JControllerBase{

public function execute(){

$model = new MyModel();$paths = new SplPriorityQueue;$paths->insert(JPATH_BASE.'/view/item/tmpl', 1);$view = new MyView($model, $paths);

return $view->render();

// Для AJAX останній рядок можна замінити на:// return json_encode($model->getItems());

}}

Модель

● Базовий клас JModelBase.● Базовий клас для моделі, що використовую базу даних,

JModelDatabase.

/** * Модель без використання бази даних */class MyModel extends JModelBase{

public function getTime(){

return time();}

}

Модель

/** * Модель що використовує базу даних */class MyModel extends JModelDatabase{

public function getItems(){

$q = $this->db->getQuery(true);$q->select('*') ->from($q->qn('#__mytable'));$this->db->setQuery($q);

return $this->db->loadResult();}

}

Вид

● Інтерфейс JView вимагає наявності лише методів escape і render.

● Базовий клас JViewBase не містить реалізації методу render.

● Базовий клас: JViewHtml містить реалізаці методу render для використання з шаблонами.

● Згідно нового стандарту файли видів повинні іменуватися html.php, xml.php і т.д. відповідно до формату вихідних даних.

Вид

/** * Вид для виводу JSON */class MyJsonView extends JViewBase{

public function render(){

$data = array('items' => $this->model->getItems()

);

return json_encode($data);}

}

Нові корисні бібліотеки

● Google для роботи з Google API.Забезпечую взаємодію з сервісами Google, такими як: календар, Picaso, Google+, картами.

● Клієнт для протоколу OAuth2

Чого чекати в майбутньому

● Цього року вийде Joomla Platform 13

● Ведуться роботи над Joomla Framework, в якому буде:

● простір імен

● відхід від моноліту і побудову фреймворку на окремих компонентах

● встановлення за допомогою Composer