Rich UI on Dojo Toolkit and Zend Framework

Создание динамических интерфейсов и 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 ? Скачайте напрямую Subversion / Git / Bazaar CDN (Google, AOL , …)

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

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

Инициализация <html> <head> <title> Dojo </title> <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.3/dojo.xd.js"> </script> </head> <body> HELLO PHPCONF 2009 !!! </body> </html> Также можно использовать: Другие CDN (помимо AOL и Google можно использовать собственные XD -сборки) Локальные копии Dojo Toolkit

Конфигурирование <script type="text/javascript" src="/dojotoolkit/dojo/dojo.js" djConfig="isDebug:true,parseOnLoad:true" > </script> Конфигурировать возможно прямо в тэге <script> : Или программным способом (для соответствия стандартам): <script> var djConfig = {isDebug: true, parseOnLoad: true} </script> <script type="text/javascript" src="/dojotoolkit/dojo/dojo.js"> </script>

Система управления пакетами и зависимостями <script> 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(); </script>

Система управления пакетами и зависимостями 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() Интересное в Base и Core События dojo.addOnUnload() <script> var onLoadFunc = function() { console.log('Да! Страница загружена!'); } dojo.addOnLoad(onLoadFunc); </script> <script> var onUnloadFunc = function() { alert('Закрываем страницу'); } dojo.addOnUnload(onUnloadFunc); </script>

Интересное в Base и Core События dojo.connect() <a href="http://phpconf.ru" id="link">Все на конференцию</a> <script> dojo.connect(dojo.byId('link'),'onclick', function(evt) { dojo.stopEvent(evt); console.log('Вы щелкнули на ссылку!'); }); </script>

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

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

Интересное в Base и Core События dojo.subscribe(), dojo.unsubscribe(), dojo.publish() <script> 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); </script>

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

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

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

Интересное в Base и Core Ajax test.php <?php print_r($_POST);

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

Интересное в Base и Core Ajax dojo.Deffered <script> 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); </script> Также есть возможность добавлять: Исключительно обработчики ошибок ( addErrback метод) Универсальные обработчики ( addBoth метод)

Интересное в Base и Core Ajax test _ deffered.php <?php echo json_encode($_POST);

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

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

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

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

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

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

Что такое 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)

Инициализация виджетов <script src="/dojotoolkit/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true " ></script> <script> dojo.require(" dijit.form.Button "); </script> <link id="themeStyles" rel="stylesheet" href=" /dojotoolkit/dijit/themes/tundra/tundra.css "> В секции <head> : Устанавливаем parseOnLoad в true Подключаем нужные виджеты Подключаем тему оформления

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

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

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

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 -анимации

Абстракция работы с данными Все типы хранилищ реализуют один или несколько интерфейсов: 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 поставляется утилита ShrinkSafe (Java), которая реализует следующие функции: Уменьшение количества HTTP-запросов Объедение файлов с классами, шаблонами, языковыми данными Уменьшение размера JavaScript-файлов Удаление комментариев и пробелов Сокращение наименований переменных CSS-оптимизация Объединение @import-файлов в один Удаление комментариев Опции StripConsole X-Domain-сборки (свой CDN)

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

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

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

Программная настройка Dojo -окружения Конфигурация с помощью dojo() view- хелпера: <?=$this->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 -окружения Шаг в будущее  В активной разработке плагин бустрапа Zend_Application_Resource_Dojo, с помощью которого: <?=$this->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- хелперы В шаблоне: <h1>Форма</h1> <div class="tundra"> <form> <?=$this->editor('editor')?> <?=$this->button( 'send', 'Отправить')?> </form> </div>

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

Работа с виджетами Состав компонентов В состав элементов для 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 Отдаем данные в формате 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; }

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 В шаблоне: <div class="tundra"><?=$this->form?></div> Вуаля!

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

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

Выпуск в эксплуатацию Профиль сборки 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"] ] };

Выпуск в эксплуатацию Генерация профиля и слоя Zend_Dojo_BuildLayer автоматически генерирует содержание профиля и содержание слоя на основе данных из view- хелпера dojo() . 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(); }

Подробнее? Dojo Toolkit Документация http:// api.dojotoolkit.org http:// docs.dojocampus.org Блоги http :// dojotoolkit.org / rss.xml http :// dojocampus.org / content / feed IRC #dojo на irc.freenode.net Список рассылки dojo-interest http :// dojotoolkit.org / mailman / listinfo / dojo-interest

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

Вопросы? E-mail : [email_address] Георгий Туревич, Wizartech

Rich UI on Dojo Toolkit and Zend Framework

More Related Content

What's hot

Viewers also liked

Similar to Rich UI on Dojo Toolkit and Zend Framework

Rich UI on Dojo Toolkit and Zend Framework