Создание динамических интерфейсов и AJAX-приложений промышленного класса с помощью Dojo Toolkit и Zend Framework Георгий Туревич, Wizartech

Немного о себе Ведущий веб-программист компании Wizartech Более 7-и лет использования PHP и JavaScript Более 2-х лет использования Zend Framework Около 1-го года активного использования Dojo Toolkit (с момента заключения партнерства с Zend Framework) и создания индивидуальных компонентов Принимаю активное участие в развитии сообщества ZendFramework.ru (с момента создания) Модератор русскоязычной группы рассылки «RU DojoToolkit JS Framework» на Google Groups

Промышленный? Богатый функционал Гибкая архитектура Проверенный код – Код библиотек покрыт тестами – Собственный инструментарий для тестирования Постоянное развитие и ясное будущее – Поддержка от Zend Technologies и Sitepen Мощное сообщество – Zend Framework: Adobe, Google, Sitepen, Microsoft, Nirvanix, Strikiron – Dojo Toolkit: Sun, IBM, Google, AOL, Uxebu, Sitepen Лицензирование – Zend Framework: New BSD License – Dojo Toolkit: Modified BSD license \ The Academic Free License 2.1

Dojo Toolkit

Где взять Dojo? Скачайте напрямую Subversion / Git / Bazaar CDN (Google, AOL, …)

Архитектура Dojo Toolkit

Вкратце о Core и Base Полезные утилиты Обработка событий Ajax (Restful XHR, script, iframe) Манипулирование узлами Интернационализация Перетаскивание Анимация Абстракция данных Имитация классов и наследования

Dojo Toolkit Core и Base

Инициализация Dojo HELLO PHPCONF 2009 !!! Также можно использовать: Другие CDN (помимо AOL и Google можно использовать собственные XD-сборки) Локальные копии Dojo Toolkit

Конфигурирование Конфигурировать возможно прямо в тэге : Или программным способом (для соответствия стандартам): var djConfig = {isDebug: true, parseOnLoad: true}

Система управления пакетами и зависимостями dojo.require("dojo.fx"); dojo.require("dojo.io.script"); dojo.registerModulePath("wlib", "/js/wlib/"); dojo.require("wlib.Example"); // /js/wlib/Example.js var exampleObj = new wlib.Example();

Система управления пакетами и зависимостями dojo.provide("wlib.Example"); dojo.declare("wlib.Example", null, { constructor: function() { console.log("HELLO! It is example!"); } }); /js/wlib/Example.js Вывод в консоли Firebug Lite (упрощенный аналог плагина для FF):

dojo.addOnLoad() dojo.addOnUnload() var onLoadFunc = function() { console.log('Да! Страница загружена!'); } dojo.addOnLoad(onLoadFunc); var onUnloadFunc = function() { alert('Закрываем страницу'); } dojo.addOnUnload(onUnloadFunc); Интересное в Base и Core События

dojo.connect() Все на конференцию dojo.connect(dojo.byId('link'),'onclick', function(evt) { dojo.stopEvent(evt); console.log('Вы щелкнули на ссылку!'); });

Интересное в Base и Core События dojo.connect() / dojo.disconnect() function foo() { console.log('Вызвана функция foo') } function bar() { console.log('Вызвана фукция bar') } var conn = dojo.connect('foo', bar); foo(); console.log('--- Удаляем соединение --- '); dojo.disconnect(conn); foo();

Интересное в Base и Core События dojo.connect() / dojo.disconnect()

Интересное в Base и Core События dojo.subscribe(), dojo.unsubscribe(), dojo.publish() function handlerFirst(data) { console.log("Функция handlerFirst, Данные:", data); } function handlerSecond(data) { console.log("Функция handlerSecond, Данные:", data); } var subscrFirst = dojo.subscribe('mySubscribe', null, handlerFirst); var subscrSecond = dojo.subscribe('mySubscribe', null, handlerSecond);

Интересное в Base и Core События dojo.subscribe(), dojo.unsubscribe(), dojo.publish() dojo.publish("mySubscribe", ["Привет всем!"]); dojo.publish("mySubscribe", ["Пока всем!"]); console.log(" --- Очищаем subscrFirst --- "); dojo.unsubscribe(subscrFirst); dojo.publish("mySubscribe", ["Привет всем!"]); dojo.publish("mySubscribe", ["Пока всем!"]);

Интересное в Base и Core События dojo.subscribe(), dojo.unsubscribe(), dojo.publish()

Интересное в Base и Core Ajax Полный Restful набор функций: dojo.xhrGet() dojo.xhrPost() dojo.xhrPost({ url: "./test.php", handleAs: "text", content: {a: "1111", b: "2222"}, load: function(response, ioArgs) { console.log(response); return response; } }); dojo.xhrPut() dojo.xhrDelete()

Интересное в Base и Core Ajax test.php

Интересное в Base и Core Ajax dojo.Deffered (позволяет создавать цепочки функций обратного вызова) function firstCallback(response, ioArgs) { console.log("Вызван firstCallback:", response); return response; } function secondCallback(response, ioArgs) { console.log("Вызван secondCallback:", response); return response; }

Интересное в Base и Core Ajax var deffered = dojo.xhrPost({ url: "./test_deffered.php", handleAs: "json", content: {a: "1111", b: "2222"}, load: function(response, ioArgs) {} }); deffered.addCallback(firstCallback); deffered.addCallback(secondCallback); dojo.Deffered Также есть возможность добавлять: Исключительно обработчики ошибок (addErrback метод) Универсальные обработчики (addBoth метод)

Интересное в Base и Core Ajax test_deffered.php

Имитация классов и наследования dojo.declare() dojo.declare("wlib.ExampleParentFirst", null, { constructor: function() { console.log("Вызов конструктора"); } }); dojo.declare("wlib.ExampleParentSecond", null, { say: function(message) { console.log(message) } });

Имитация классов и наследования dojo.declare( "wlib.ExampleParentChild", [wlib.ExampleParentFirst, wlib.ExampleParentSecond], { sayBy: function() { this.say("Всем пока!") } ); var child = new wlib.ExampleParentChild(); child.sayBy(); dojo.declare()

Имитация классов и наследования dojo.declare()

Имитация классов и наследования dojo.extend() dojo.extend(wlib.ExampleParentChild, { sayHello: function() { this.say("Всем привет!"); } }); var child = new wlib.ExampleParentChild(); child.sayHello(); child.sayBy();

Имитация классов и наследования dojo.mixin() var obj = { firstName: "Иван", lastName: "Петров" }; var emp = dojo.mixin(obj, { sayName: function() { console.log( "Меня зовут " + this.firstName + " " + this.lastName ); } }); emp.sayName();

Имитация классов и наследования dojo.hitch() function sayName() { console.log( "Меня зовут " + this.firstName + " " + this.lastName ); } var obj = { firstName: "Иван", lastName: "Петров" }; var callback = dojo.hitch(obj, sayName); callback();

Dojo Toolkit Dijit

Что такое Dijit? Система виджетов Dojo Богатый набор готовых виджетов – Элементы форм (текстовые поля, кнопки, выпадающие элементы, слайдеры и т.д.)

Элементы форм

Что такое Dijit? Система виджетов Dojo Богатый набор готовых виджетов – Элементы форм (текстовые поля, кнопки, выпадающие элементы, слайдеры и т.д.) – Виджеты компоновки (Content pane, Accordion / Tab / Stack / Border-контейнеры)

Виджеты компоновки

Что такое Dijit? Система виджетов Dojo Богатый набор готовых виджетов – Элементы форм (текстовые поля, кнопки, выпадающие элементы, слайдеры и т.д.) – Виджеты компоновки (Content pane, Accordion / Tab / Stack / Border-контейнеры) – Виджеты приложения (деревья, прогресс-бар, диалоги, меню, WYSIWYG и т.д.)

Виджеты приложения

Что такое Dijit? Система виджетов Dojo Богатый набор готовых виджетов – Элементы форм (текстовые поля, кнопки, выпадающие элементы, слайдеры и т.д.) – Виджеты компоновки (Content pane, Accordion / Tab / Stack / Border-контейнеры) – Виджеты приложения (деревья, прогресс-бар, диалоги, меню, WYSIWYG и т.д.) Доступность (Accessibility (a11y)) Шаблонность (встроенный шаблонизатор) Готовые темы оформления (tundra, soria, nihilo, noir)

Инициализация виджетов dojo.require("dijit.form.Button"); В секции : Устанавливаем parseOnLoad в true Подключаем нужные виджеты Подключаем тему оформления

Инициализация виджетов Щелкни по мне! var button = new dijit.form.Button({ label: "Привет!", name: "programmatic" }, "buttonHello"); В секции :

Инициализация виджетов Одна кнопка инициализирована программным способом Вторая кнопка инициализирована декларативным способом

Возможности расширения Переопределение методов жизненного цикла – constructor() (конструктор) – postMixInProperties() (вызывается после формирования структуры виджета) – buildRendering() (генерирует визуальное отображение виджета) – postCreate() (вызывается сразу после создания визуального отображения) – startup() (вызывается после создания всех дочерних виджетов и самого виджета) Шаблон – Можно встраивать в код класса – Можно выносить в отдельный файл Языковые файлы – Можно встраивать в код класса – Можно выносить в отдельный файл

Dojo Toolkit Dojox

Dojox собрание расширенных, дополнительных и экспериментальных компонентов (Extensions, Extras, Experiments) Состав: Расширения Dijit (dojox.widget, dojox.layout, dojox.form) Дополнительная анимация: dojox.fx (Morph, Text, Extras,...) Виджеты изображений (FlickrBadge, Lightbox (Nano), SlideShow,...) Расширенный IO (RPC, REST, SMD, ScriptFrame,...) И многое другое …

Dojox Кроссбраузерная векторная графика: GFX API Charting GFX 2D / 3D GFX-анимации

Dojox dojox.grid.Grid

Dojo Toolkit Данные

Абстракция работы с данными Все типы хранилищ реализуют один или несколько интерфейсов: dojo.data.api.Read (чтение, поиск, сортировка и фильтрация элементов данных) dojo.data.api.Write (создание, удаление, обновление элементов данных) dojo.data.api.Identity (доступ к элементам по средствам уникальных идентификаторов) dojo.data.api.Notification (уведомление о таких событиях, как создание, удаление или обновление элементов данных)

Абстракция работы с данными Dojo dojo.data.ItemFileReadStore dojo.data.ItemFileWriteStore Dojox AtomReadStore CouchDBRestStore CssRuleStore CsvStore FileStore FlickrRestStore/FlickrStore GoogleFeedStore GoogleSearchStore HtmlStore jsonRestStore QueryReadStore ServiceStore S3Store WikipediaStore XmlStore И другие …

Dojo Toolkit Util

Подготовка к выпуску в эксплуатацию В пакете Dojo Toolkit поставляется утилита ShrinkSafe (Java), которая реализует следующие функции: Уменьшение количества HTTP-запросов – Объедение файлов с классами, шаблонами, языковыми данными Уменьшение размера JavaScript-файлов – Удаление комментариев и пробелов – Сокращение наименований переменных CSS-оптимизация – в один – Удаление комментариев Опции StripConsole X-Domain-сборки (свой CDN)

D.O.H Система модульного тестирования Поддерживает assert*, buildUp, tearDown–методы, тестирование синхронных и асинхронных запросов, включает в себя подсистему тестирования визуальных компонентов doh.robot.

Интеграция Dojo Toolkit и Zend Framework Программная настройка Dojo-окружения Автоматизация работы с виджетами Генерация спец. форматов данных Упрощение выпуска в эксплуатацию

Zend Framework

Программная настройка "/js/dojo-toolkit/dijit/themes/tundra/tundra.css"; var djConfig = {"isDebug":true,"parseOnLoad":true}; dojo.require("dojo.io.script"); dojo.require("dojo.fx"); dojo.require("dijit.form.Button"); Типичный код в секции для настройки Dojo:

Программная настройка Dojo-окружения dojo() ->enable() ->setDjConfig( array('isDebug' => true, 'parseOnLoad' => true) ) ->setLocalPath('/js/dojo-toolkit/dojo/dojo.js') ->addStyleSheetModule('dijit.themes.tundra') ->requireModule( array('dojo.io.script', 'dojo.fx', 'dijit.form.Button') )?> Конфигурация с помощью dojo() view-хелпера:

Программная настройка Dojo-окружения dojo()?> Шаг в будущее В активной разработке плагин бустрапа Zend_Application_Resource_Dojo, с помощью которого: И в application.ini: resources.dojo.djConfig.isDebug = 1 resources.dojo.djConfig.parseOnLoad = 1 resources.dojo.localPath = "/js/dojo-toolkit/dojo/dojo.js" resources.dojo.requireModule[] = "dojo.io.script" resources.dojo.requireModule[] = "dojo.fx" resources.dojo.requireModule[] = "dijit.form.Button" В макете указываем:

Работа с виджетами View-хелперы Форма editor('editor')?> button( 'send', 'Отправить')?> В шаблоне:

Работа с виджетами Элементы форм $form = new Zend_Dojo_Form(); $form->addElement('editor', 'editor'); $form->addElement( 'button', 'send', array('label' => 'Отправить') ); $this->view->form = $form; В контроллере: Форма form?> В шаблоне:

Работа с виджетами Состав компонентов В состав элементов для Zend_Dojo_Form входят классы для большинства виджетов формы Так же реализованы view-хелперы и декораторы для форм, которые упрощают работу с виджетами компоновки: – AccordionContainer – AccordionPane – BorderContainer – SplitContainer – StackContainer – TabContainer – ContentPane

Ajax Zend_Dojo_Data public function dojoDataExampleAction() { $form = new Zend_Dojo_Form(); $form->addElement( 'FilteringSelect', 'city', array( 'label' => 'City', 'storeId' => 'cityStore', 'storeType' => 'dojo.data.ItemFileReadStore', 'storeParams' => array( 'url' => '/json/simple-city-store/', ), 'dijitParams' => array( 'searchAttr' => 'name', ) ); $this->view->form = $form; } Формируем форму:

Ajax Zend_Dojo_Data public function simpleCityStoreAction() { $data = array( array('id' => 1, 'name' => 'Волгоград'), array('id' => 2, 'name' => 'Москва'), array('id' => 3, 'name' => 'Минск'), array('id' => 4, 'name' => 'Мурманск') ); $dojoData = new Zend_Dojo_Data('id', $data); echo $dojoData; } Отдаем данные в формате dojo.data:

Ajax Zend_Dojo_Data Отдаем данные в формате dojo.data: { "identifier":"id", "items":[ {"id":1,"name":"Волгоград"}, {"id":2,"name":"Москва"}, {"id":3,"name":"Минск"}, {"id":4,"name":"Мурманск"} ] }

Ajax Zend_Dojo_Data В шаблоне: form?> Вуаля!

Ajax JSON-RPC Клиентская часть (в шаблоне): dojo()->requireModule("dojo.rpc.JsonService"); ?> dojo()->onLoadCaptureStart(); ?> function() { var o = { "serviceType": "JSON-RPC", "serviceUrl": "/json/rpc-server", "methods": [{ "name": "sum", "parameters": [ {name: "numbers"} ] }] }... } dojo()->onLoadCaptureEnd(); ?>

Ajax JSON-RPC Клиентская часть (в шаблоне):... var rpcObject = new dojo.rpc.JsonService(o) var sum = rpcObject.sum([4,8,15,16,23,42]); sum.addCallback(function(response) { console.log("Сумма чисел: ", response) }); Запрос: {"params":[[4,8,15,16,23,42]],"method":"sum","id":1}

Ajax JSON-RPC Серверная часть (модель): class Default_Model_RpcTest { function sum($numbers) { return array_sum($numbers); }

Ajax JSON-RPC Серверная часть (контроллер): public function rpcServerAction() { $server = new Zend_Json_Server(); $server->setClass('Default_Model_RpcTest'); $server->handle(); } Результат:

Ajax Rest Dojo Toolkit Хранилища dojox.data.jsonRestStore dojox.data.jsonQueryRestStore dojox.data.FlickrRestStore dojox.data.AtomReadStore … Интерфейсы Большая часть виджетов форм dojox.Grid …

Ajax Rest Zend Framework Zend_Rest_Route GET /product/ratings/ - indexAction() GET /product/ratings/:id - getAction() POST /product/ratings - postAction() PUT /product/ratings/:id - putAction() DELETE /product/ratings/:id - deleteAction() POST /product/ratings/:id?_method="PUT" - putAction() POST /product/ratings/:id?_method="DELETE" - deleteAction() Zend_Rest_Controller

Выпуск в эксплуатацию Слой сборки dojo.provide("custom.main"); (function(){ dojo.require("dojo.io.script"); dojo.require("dojo.fx"); dojo.require("dijit.form.Button"); })(); custom.main.js

Выпуск в эксплуатацию Профиль сборки dependencies = { action:"release", optimize:"shrinksafe", layerOptimize:"shrinksafe", copyTests:false, loader:"default", cssOptimize:"comments", releaseName:"custom", layers:[{ name:"custom.main.js", layerDependencies:[], dependencies:["custom.main"] }], prefixes:[ ["custom","../custom"], ["dojo","../dojo"], ["dijit","../dijit"] ] };

Выпуск в эксплуатацию Генерация профиля и слоя public function buildAction() { $build = new Zend_Dojo_BuildLayer(array( 'view' => $this->view, 'layerScriptPath' => 'custom.main.js', 'layerName' => 'custom.main', )); $profile = $build->generateBuildProfile(); $layerScript = $build->generateLayerScript(); } Zend_Dojo_BuildLayer автоматически генерирует содержание профиля и содержание слоя на основе данных из view-хелпера dojo().

Подробнее? Dojo Toolkit Документация Блоги IRC #dojo на irc.freenode.net Список рассылки dojo-interest

Подробнее? Zend Framework Документация Wiki Блоги IRC #zftalk on irc.freenode.net Списки рассылок Развитое русскоязычное сообщество (основатель: Александр Махомет)

Вопросы? Георгий Туревич, Wizartech