Rich UI on Dojo Toolkit and Zend Framework

4,091 views

Published on

Презентация мастер-класса "Создание динамических пользовательских интерфейсов и AJAX-приложений промышленного класса с помощью Dojo Toolkit и Zend Framework"

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,091
On SlideShare
0
From Embeds
0
Number of Embeds
461
Actions
Shares
0
Downloads
70
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Rich UI on Dojo Toolkit and Zend Framework

  1. 1. Создание динамических интерфейсов и AJAX- приложений промышленного класса с помощью Dojo Toolkit и Zend Framework Георгий Туревич, Wizartech
  2. 2. Немного о себе <ul><li>Ведущий веб-программист компании Wizartech </li></ul><ul><li>Более 7-и лет использования PHP и JavaScript </li></ul><ul><li>Более 2-х лет использования Zend Framework </li></ul><ul><li>Около 1-го года активного использования Dojo Toolkit (с момента заключения партнерства с Zend Framework) и создания индивидуальных компонентов </li></ul><ul><li>Принимаю активное участие в развитии сообщества ZendFramework . ru (с момента создания) </li></ul><ul><li>Модератор русскоязычной группы рассылки «RU DojoToolkit JS Framework» на  Google Groups </li></ul>
  3. 3. Промышленный? <ul><li>Богатый функционал </li></ul><ul><li>Гибкая архитектура </li></ul><ul><li>Проверенный код </li></ul><ul><ul><li>Код библиотек покрыт тестами </li></ul></ul><ul><ul><li>Собственный инструментарий для тестирования </li></ul></ul><ul><li>Постоянное развитие и ясное будущее </li></ul><ul><ul><li>Поддержка от Zend Technologies и Sitepen </li></ul></ul><ul><li>Мощное сообщество </li></ul><ul><ul><li>Zend Framework: Adobe, Google, Sitepen, Microsoft, Nirvanix, Strikiron </li></ul></ul><ul><ul><li>Dojo Toolkit : Sun, IBM, Google, AOL, Uxebu, Sitepen </li></ul></ul><ul><li>Лицензирование </li></ul><ul><ul><li>Zend Framework: New BSD License </li></ul></ul><ul><ul><li>Dojo Toolkit : Modified BSD license The Academic Free License 2.1 </li></ul></ul>
  4. 4. <ul><li>Dojo Toolkit </li></ul>
  5. 5. Где взять Dojo ? <ul><li>Скачайте напрямую </li></ul><ul><li>Subversion / Git / Bazaar </li></ul><ul><li>CDN (Google, AOL , …) </li></ul>
  6. 6. Архитектура Dojo Toolkit
  7. 7. Вкратце о Core и Base <ul><li>Полезные утилиты </li></ul><ul><li>Обработка событий </li></ul><ul><li>Ajax (Restful XHR, script, iframe) </li></ul><ul><li>Манипулирование узлами </li></ul><ul><li>Интернационализация </li></ul><ul><li>Перетаскивание </li></ul><ul><li>Анимация </li></ul><ul><li>Абстракция данных </li></ul><ul><li>Имитация классов и наследования </li></ul>
  8. 8. <ul><li>Dojo Toolkit </li></ul><ul><li>Core и Base </li></ul>
  9. 9. Инициализация <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Dojo </title> </li></ul><ul><li><script type=&quot;text/javascript&quot; </li></ul><ul><li>src=&quot;http://o.aolcdn.com/dojo/1.3/dojo.xd.js&quot;> </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>HELLO PHPCONF 2009 !!! </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>Также можно использовать: </li></ul><ul><li>Другие CDN (помимо AOL и Google можно использовать собственные XD -сборки) </li></ul><ul><li>Локальные копии Dojo Toolkit </li></ul>
  10. 10. Конфигурирование <ul><li><script type=&quot;text/javascript&quot; </li></ul><ul><li>src=&quot;/dojotoolkit/dojo/dojo.js&quot; </li></ul><ul><li>djConfig=&quot;isDebug:true,parseOnLoad:true&quot; > </li></ul><ul><li></script> </li></ul>Конфигурировать возможно прямо в тэге <script> : Или программным способом (для соответствия стандартам): <script> var djConfig = {isDebug: true, parseOnLoad: true} </script> <script type=&quot;text/javascript&quot; src=&quot;/dojotoolkit/dojo/dojo.js&quot;> </script>
  11. 11. Система управления пакетами и зависимостями <ul><li><script> </li></ul><ul><li>dojo.require(&quot;dojo.fx&quot;); </li></ul><ul><li>dojo.require(&quot;dojo.io.script&quot;); </li></ul><ul><li>dojo.registerModulePath(&quot;wlib&quot;, &quot;/js/wlib/&quot;); </li></ul><ul><li>dojo.require(&quot;wlib.Example&quot;); // /js/wlib/Example.js </li></ul><ul><li>var exampleObj = new wlib.Example(); </li></ul><ul><li></script> </li></ul>
  12. 12. Система управления пакетами и зависимостями <ul><li>dojo.provide(&quot;wlib.Example&quot;); </li></ul><ul><li>dojo.declare(&quot;wlib.Example&quot;, null, { </li></ul><ul><li>constructor: function() { </li></ul><ul><li>console.log(&quot;HELLO! It is example!&quot;); </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul>/js/wlib/Example.js Вывод в консоли Firebug Lite ( упрощенный аналог плагина для FF) :
  13. 13. <ul><li>dojo.addOnLoad() </li></ul>Интересное в Base и Core События dojo.addOnUnload() <script> var onLoadFunc = function() { console.log('Да! Страница загружена!'); } dojo.addOnLoad(onLoadFunc); </script> <script> var onUnloadFunc = function() { alert('Закрываем страницу'); } dojo.addOnUnload(onUnloadFunc); </script>
  14. 14. Интересное в Base и Core События <ul><li>dojo.connect() </li></ul><a href=&quot;http://phpconf.ru&quot; id=&quot;link&quot;>Все на конференцию</a> <script> dojo.connect(dojo.byId('link'),'onclick', function(evt) { dojo.stopEvent(evt); console.log('Вы щелкнули на ссылку!'); }); </script>
  15. 15. Интересное в Base и Core События <ul><li>dojo.connect() / dojo.disconnect() </li></ul><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>
  16. 16. Интересное в Base и Core События <ul><li>dojo.connect() / dojo.disconnect() </li></ul>
  17. 17. Интересное в Base и Core События <ul><li>dojo.subscribe(), dojo.unsubscribe(), dojo.publish() </li></ul><script> function handlerFirst(data) { console.log(&quot;Функция handlerFirst, Данные:&quot;, data); } function handlerSecond(data) { console.log(&quot;Функция handlerSecond, Данные:&quot;, data); } var subscrFirst = dojo.subscribe('mySubscribe', null, handlerFirst); var subscrSecond = dojo.subscribe('mySubscribe', null, handlerSecond); </script>
  18. 18. Интересное в Base и Core События <ul><li>dojo.subscribe(), dojo.unsubscribe(), dojo.publish() </li></ul><script> dojo.publish(&quot;mySubscribe&quot;, [&quot;Привет всем!&quot;]); dojo.publish(&quot;mySubscribe&quot;, [&quot;Пока всем!&quot;]); console.log(&quot; --- Очищаем subscrFirst --- &quot;); dojo.unsubscribe(subscrFirst); dojo.publish(&quot;mySubscribe&quot;, [&quot;Привет всем!&quot;]); dojo.publish(&quot;mySubscribe&quot;, [&quot;Пока всем!&quot;]); </script>
  19. 19. Интересное в Base и Core События <ul><li>dojo.subscribe(), dojo.unsubscribe(), dojo.publish() </li></ul>
  20. 20. Интересное в Base и Core Ajax <ul><li>Полный Restful набор функций: </li></ul><ul><li>dojo.xhrGet() </li></ul><ul><li>dojo.xhrPost() </li></ul><script> dojo.xhrPost({ url: &quot;./test.php&quot;, handleAs: &quot;text&quot;, content: {a: &quot;1111&quot;, b: &quot;2222&quot;}, load: function(response, ioArgs) { console.log(response); return response; } }); </script> <ul><li>dojo.xhrPut() </li></ul><ul><li>dojo.xhrDelete() </li></ul>
  21. 21. Интересное в Base и Core Ajax test.php <?php print_r($_POST);
  22. 22. Интересное в Base и Core Ajax <ul><li>dojo.Deffered (позволяет создавать цепочки функций обратного вызова) </li></ul><script> function firstCallback(response, ioArgs) { console.log(&quot;Вызван firstCallback : &quot;, response); return response; } function secondCallback(response, ioArgs) { console.log(&quot;Вызван secondCallback : &quot;, response); return response; } </script>
  23. 23. Интересное в Base и Core Ajax <ul><li>dojo.Deffered </li></ul><script> var deffered = dojo.xhrPost({ url: &quot;./test_deffered.php&quot;, handleAs: &quot;json&quot;, content: {a: &quot;1111&quot;, b: &quot;2222&quot;}, load: function(response, ioArgs) {} }); deffered.addCallback(firstCallback); deffered.addCallback(secondCallback); </script> <ul><li>Также есть возможность добавлять: </li></ul><ul><li>Исключительно обработчики ошибок ( addErrback метод) </li></ul><ul><li>Универсальные обработчики ( addBoth метод) </li></ul>
  24. 24. Интересное в Base и Core Ajax test _ deffered.php <?php echo json_encode($_POST);
  25. 25. Имитация классов и наследования <ul><li>dojo.declare() </li></ul><script> dojo.declare(&quot;wlib.ExampleParentFirst&quot;, null, { constructor: function() { console.log(&quot;Вызов конструктора&quot;); } }); dojo.declare(&quot;wlib.ExampleParentSecond&quot;, null, { say: function(message) { console.log(message) } }); </script>
  26. 26. Имитация классов и наследования <ul><li>dojo.declare() </li></ul><script> dojo.declare( &quot;wlib.ExampleParentChild&quot;, [wlib.ExampleParentFirst, wlib.ExampleParentSecond], { sayBy: function() { this.say(&quot;Всем пока!&quot;) } } ); var child = new wlib.ExampleParentChild(); child.sayBy(); </script>
  27. 27. Имитация классов и наследования <ul><li>dojo.declare() </li></ul>
  28. 28. Имитация классов и наследования <ul><li>dojo.extend() </li></ul><script> dojo.extend(wlib.ExampleParentChild, { sayHello: function() { this.say(&quot;Всем привет!&quot;); } }) ; var child = new wlib.ExampleParentChild(); child.sayHello(); child.sayBy(); </script>
  29. 29. Имитация классов и наследования <ul><li>dojo.mixin() </li></ul><script> var obj = { firstName: &quot;Иван&quot;, lastName: &quot;Петров&quot; }; var emp = dojo.mixin(obj, { sayName: function() { console.log( &quot;Меня зовут &quot; + this.firstName + &quot; &quot; + this.lastName ); } }); emp.sayName(); </script>
  30. 30. Имитация классов и наследования <ul><li>dojo.hitch() </li></ul><script> function sayName() { console.log( &quot;Меня зовут &quot; + this.firstName + &quot; &quot; + this.lastName ); } var obj = { firstName: &quot;Иван&quot;, lastName: &quot;Петров&quot; }; var callback = dojo.hitch(obj, sayName); callback(); </script>
  31. 31. <ul><li>Dojo Toolkit </li></ul><ul><li>Dijit </li></ul>
  32. 32. Что такое Dijit ? <ul><li>Система виджетов Dojo </li></ul><ul><li>Богатый набор готовых виджетов </li></ul><ul><ul><li>Элементы форм (текстовые поля, кнопки, выпадающие элементы, слайдеры и т.д.) </li></ul></ul>
  33. 33. Элементы форм
  34. 34. Что такое Dijit ? <ul><li>Система виджетов Dojo </li></ul><ul><li>Богатый набор готовых виджетов </li></ul><ul><ul><li>Элементы форм (текстовые поля, кнопки, выпадающие элементы, слайдеры и т.д.) </li></ul></ul><ul><ul><li>Виджеты компоновки ( Content pane, Accordion / Tab / Stack / Border - контейнеры ) </li></ul></ul>
  35. 35. Виджеты компоновки
  36. 36. Что такое Dijit ? <ul><li>Система виджетов Dojo </li></ul><ul><li>Богатый набор готовых виджетов </li></ul><ul><ul><li>Элементы форм (текстовые поля, кнопки, выпадающие элементы, слайдеры и т.д.) </li></ul></ul><ul><ul><li>Виджеты компоновки ( Content pane, Accordion / Tab / Stack / Border - контейнеры ) </li></ul></ul><ul><ul><li>Виджеты приложения (деревья, прогресс-бар, диалоги, меню, WYSIWYG и т . д.) </li></ul></ul>
  37. 37. Виджеты приложения
  38. 38. Что такое Dijit ? <ul><li>Система виджетов Dojo </li></ul><ul><li>Богатый набор готовых виджетов </li></ul><ul><ul><li>Элементы форм (текстовые поля, кнопки, выпадающие элементы, слайдеры и т.д.) </li></ul></ul><ul><ul><li>Виджеты компоновки ( Content pane, Accordion / Tab / Stack / Border - контейнеры ) </li></ul></ul><ul><ul><li>Виджеты приложения (деревья, прогресс-бар, диалоги, меню, WYSIWYG и т . д.) </li></ul></ul><ul><li>Доступность ( Accessibility (a11y)) </li></ul><ul><li>Шаблонность (встроенный шаблонизатор) </li></ul><ul><li>Готовые темы оформления (tundra, soria, nihilo, noir) </li></ul>
  39. 39. Инициализация виджетов <script src=&quot;/dojotoolkit/dojo/dojo.js&quot; djConfig=&quot;isDebug: true, parseOnLoad: true &quot; ></script> <script> dojo.require(&quot; dijit.form.Button &quot;); </script> <link id=&quot;themeStyles&quot; rel=&quot;stylesheet&quot; href=&quot; /dojotoolkit/dijit/themes/tundra/tundra.css &quot;> <ul><li>В секции <head> : </li></ul><ul><li>Устанавливаем parseOnLoad в true </li></ul><ul><li>Подключаем нужные виджеты </li></ul><ul><li>Подключаем тему оформления </li></ul>
  40. 40. Инициализация виджетов <div class=&quot;tundra&quot;> <button id=&quot;buttonHello&quot;></button> <button dojoType=&quot;dijit.form.Button&quot;> Щелкни по мне! </button> </div> <script> var button = new dijit.form.Button({ label: &quot;Привет!&quot;, name: &quot;programmatic&quot; }, &quot;buttonHello&quot;); </script> В секции <body> :
  41. 41. Инициализация виджетов <ul><li>Одна кнопка инициализирована программным способом </li></ul><ul><li>Вторая кнопка инициализирована декларативным способом </li></ul>
  42. 42. Возможности расширения <ul><li>Переопределение методов жизненного цикла </li></ul><ul><ul><li>constructor() (конструктор) </li></ul></ul><ul><ul><li>postMixInProperties() (вызывается после формирования структуры виджета) </li></ul></ul><ul><ul><li>buildRendering() (генерирует визуальное отображение виджета) </li></ul></ul><ul><ul><li>postCreate() (вызывается сразу после создания визуального отображения) </li></ul></ul><ul><ul><li>startup() (вызывается после создания всех дочерних виджетов и самого виджета) </li></ul></ul><ul><li>Шаблон </li></ul><ul><ul><li>Можно встраивать в код класса </li></ul></ul><ul><ul><li>Можно выносить в отдельный файл </li></ul></ul><ul><li>Языковые файлы </li></ul><ul><ul><li>Можно встраивать в код класса </li></ul></ul><ul><ul><li>Можно выносить в отдельный файл </li></ul></ul>
  43. 43. <ul><li>Dojo Toolkit </li></ul><ul><li>Dojox </li></ul>
  44. 44. Dojox <ul><li>Dojox — собрание расширенных, дополнительных и экспериментальных компонентов (Extensions, Extras, Experiments) </li></ul><ul><li>Состав: </li></ul><ul><li>Расширения Dijit (dojox.widget, dojox.layout, dojox.form) </li></ul><ul><li>Дополнительная анимация: dojox.fx (Morph, Text, Extras, ...) </li></ul><ul><li>Виджеты изображений (FlickrBadge, Lightbox (Nano), SlideShow, ...) </li></ul><ul><li>Расширенный IO (RPC, REST, SMD, ScriptFrame, ...) </li></ul><ul><li>И многое другое … </li></ul>
  45. 45. Dojox <ul><li>Кроссбраузерная векторная графика: </li></ul><ul><li>GFX API </li></ul><ul><li>Charting </li></ul><ul><li>GFX 2D / 3D </li></ul><ul><li>GFX -анимации </li></ul>
  46. 46. Dojox <ul><li>dojox.grid.Grid </li></ul>
  47. 47. <ul><li>Dojo Toolkit </li></ul><ul><li>Данные </li></ul>
  48. 48. Абстракция работы с данными <ul><li>Все типы хранилищ реализуют один или несколько интерфейсов: </li></ul><ul><li>dojo.data.api.Read (чтение, поиск, сортировка и фильтрация элементов данных) </li></ul><ul><li>dojo.data.api.Write (создание, удаление, обновление элементов данных) </li></ul><ul><li>dojo.data.api.Identity (доступ к элементам по средствам уникальных идентификаторов) </li></ul><ul><li>dojo.data.api.Notification (уведомление о таких событиях, как создание, удаление или обновление элементов данных) </li></ul>
  49. 49. Абстракция работы с данными <ul><li>Dojo </li></ul><ul><li>dojo.data.ItemFileReadStore </li></ul><ul><li>dojo.data.ItemFileWriteStore </li></ul><ul><li>Dojox </li></ul><ul><li>AtomReadStore </li></ul><ul><li>CouchDBRestStore </li></ul><ul><li>CssRuleStore </li></ul><ul><li>CsvStore </li></ul><ul><li>FileStore </li></ul><ul><li>FlickrRestStore/FlickrStore </li></ul><ul><li>GoogleFeedStore </li></ul><ul><li>GoogleSearchStore </li></ul><ul><li>HtmlStore </li></ul><ul><li>jsonRestStore </li></ul><ul><li>QueryReadStore </li></ul><ul><li>ServiceStore </li></ul><ul><li>S3Store </li></ul><ul><li>WikipediaStore </li></ul><ul><li>XmlStore </li></ul><ul><li>И другие … </li></ul>
  50. 50. <ul><li>Dojo Toolkit </li></ul><ul><li>Util </li></ul>
  51. 51. Подготовка к выпуску в эксплуатацию <ul><li>В пакете Dojo Toolkit поставляется утилита ShrinkSafe (Java), которая реализует следующие функции: </li></ul><ul><li>Уменьшение количества HTTP-запросов </li></ul><ul><ul><li>Объедение файлов с классами, шаблонами, языковыми данными </li></ul></ul><ul><li>Уменьшение размера JavaScript-файлов </li></ul><ul><ul><li>Удаление комментариев и пробелов </li></ul></ul><ul><ul><li>Сокращение наименований переменных </li></ul></ul><ul><li>CSS-оптимизация </li></ul><ul><ul><li>Объединение @import-файлов в один </li></ul></ul><ul><ul><li>Удаление комментариев </li></ul></ul><ul><li>Опции StripConsole </li></ul><ul><li>X-Domain-сборки (свой CDN) </li></ul>
  52. 52. D.O.H Система модульного тестирования <ul><li>Поддерживает assert*, buildUp, tearDown– методы, тестирование синхронных и асинхронных запросов, включает в себя подсистему тестирования визуальных компонентов doh.robot . </li></ul>
  53. 53. Интеграция Dojo Toolkit и Zend Framework <ul><li>Программная настройка Dojo -окружения </li></ul><ul><li>Автоматизация работы с виджетами </li></ul><ul><li>Генерация спец. форматов данных </li></ul><ul><li>Упрощение выпуска в эксплуатацию </li></ul>
  54. 54. <ul><li>Zend Framework </li></ul>
  55. 55. Программная настройка Dojo -окружения <ul><li>Типичный код в <head> секции для настройки Dojo : </li></ul><style type=&quot;text/css&quot;> @import &quot;/js/dojo-toolkit/dijit/themes/tundra/tundra.css&quot;; </style> <script type=&quot;text/javascript&quot;> var djConfig = {&quot;isDebug&quot;:true,&quot;parseOnLoad&quot;:true}; </script> <script type=&quot;text/javascript&quot; src=&quot;/js/dojo-toolkit/dojo/dojo.js&quot;></script> <script type=&quot;text/javascript&quot;> dojo.require(&quot;dojo.io.script&quot;); dojo.require(&quot;dojo.fx&quot;); dojo.require(&quot;dijit.form.Button&quot;); </script>
  56. 56. Программная настройка Dojo -окружения <ul><li>Конфигурация с помощью dojo() view- хелпера: </li></ul><?=$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') )?>
  57. 57. Программная настройка Dojo -окружения <ul><li>Шаг в будущее  </li></ul><ul><li>В активной разработке плагин бустрапа </li></ul><ul><li>Zend_Application_Resource_Dojo, с помощью которого: </li></ul><?=$this->dojo() ?> И в application.ini : resources.dojo.djConfig.isDebug = 1 resources.dojo.djConfig.parseOnLoad = 1 resources.dojo.localPath = &quot;/js/dojo-toolkit/dojo/dojo.js&quot; resources.dojo.requireModule[] = &quot;dojo.io.script&quot; resources.dojo.requireModule[] = &quot;dojo.fx&quot; resources.dojo.requireModule[] = &quot;dijit.form.Button&quot; В макете указываем:
  58. 58. Работа с виджетами View- хелперы <ul><li>В шаблоне: </li></ul><h1>Форма</h1> <div class=&quot;tundra&quot;> <form> <?=$this->editor('editor')?> <?=$this->button( 'send', 'Отправить')?> </form> </div>
  59. 59. Работа с виджетами Элементы форм <ul><li>В контроллере: </li></ul>$form = new Zend_Dojo_Form(); $form->addElement('editor', 'editor'); $form->addElement( 'button', 'send', array('label' => 'Отправить') ); $this->view->form = $form; <h1>Форма</h1> <div class=&quot;tundra&quot;> <?=$this->form?> </div> В шаблоне:
  60. 60. Работа с виджетами Состав компонентов <ul><li>В состав элементов для Zend_Dojo_Form входят классы для большинства виджетов формы </li></ul><ul><li>Так же реализованы view- хелперы и декораторы для форм, которые упрощают работу с виджетами компоновки: </li></ul><ul><ul><li>AccordionContainer </li></ul></ul><ul><ul><li>AccordionPane </li></ul></ul><ul><ul><li>BorderContainer </li></ul></ul><ul><ul><li>SplitContainer </li></ul></ul><ul><ul><li>StackContainer </li></ul></ul><ul><ul><li>TabContainer </li></ul></ul><ul><ul><li>ContentPane </li></ul></ul>
  61. 61. Ajax Zend_Dojo_Data <ul><li>Формируем форму: </li></ul>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; }
  62. 62. Ajax Zend_Dojo_Data <ul><li>Отдаем данные в формате dojo.data : </li></ul>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; }
  63. 63. Ajax Zend_Dojo_Data <ul><li>Отдаем данные в формате dojo.data : </li></ul>{ &quot;identifier&quot;:&quot;id&quot;, &quot;items&quot;:[ {&quot;id&quot;:1,&quot;name&quot;:&quot;Волгоград&quot;}, {&quot;id&quot;:2,&quot;name&quot;:&quot;Москва&quot;}, {&quot;id&quot;:3,&quot;name&quot;:&quot;Минск&quot;}, {&quot;id&quot;:4,&quot;name&quot;:&quot;Мурманск&quot;} ] }
  64. 64. Ajax Zend_Dojo_Data <ul><li>В шаблоне: </li></ul><div class=&quot;tundra&quot;><?=$this->form?></div> Вуаля!
  65. 65. Ajax JSON-RPC <ul><li>Клиентская часть (в шаблоне): </li></ul><? $this->dojo()->requireModule(&quot;dojo.rpc.JsonService&quot;); ?> <? $this->dojo()->onLoadCaptureStart(); ?> function() { var o = { &quot;serviceType&quot;: &quot;JSON-RPC&quot;, &quot;serviceUrl&quot;: &quot;/json/rpc-server&quot;, &quot;methods&quot;: [{ &quot;name&quot;: &quot;sum&quot;, &quot;parameters&quot;: [ {name: &quot;numbers&quot;} ] }] } ... } <? $this->dojo()->onLoadCaptureEnd(); ?>
  66. 66. Ajax JSON-RPC <ul><li>Клиентская часть (в шаблоне): </li></ul>... var rpcObject = new dojo.rpc.JsonService(o) var sum = rpcObject.sum([4,8,15,16,23,42]); sum.addCallback(function(response) { console.log(&quot;Сумма чисел: &quot;, response) }); Запрос: {&quot;params&quot;:[[4,8,15,16,23,42]],&quot;method&quot;:&quot;sum&quot;,&quot;id&quot;:1}
  67. 67. Ajax JSON-RPC <ul><li>Серверная часть ( модель): </li></ul>class Default_Model_RpcTest { function sum($numbers) { return array_sum($numbers); } }
  68. 68. Ajax JSON-RPC <ul><li>Серверная часть (контроллер): </li></ul>public function rpcServerAction() { $server = new Zend_Json_Server(); $server->setClass('Default_Model_RpcTest'); $server->handle(); } Результат:
  69. 69. Ajax Rest <ul><li>Dojo Toolkit </li></ul><ul><ul><li>Хранилища </li></ul></ul><ul><ul><ul><li>dojox.data.jsonRestStore </li></ul></ul></ul><ul><ul><ul><li>dojox.data.jsonQueryRestStore </li></ul></ul></ul><ul><ul><ul><li>dojox.data.FlickrRestStore </li></ul></ul></ul><ul><ul><ul><li>dojox.data.AtomReadStore </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><li>Интерфейсы </li></ul></ul><ul><ul><ul><li>Большая часть виджетов форм </li></ul></ul></ul><ul><ul><ul><li>dojox.Grid </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul>
  70. 70. Ajax Rest <ul><li>Zend Framework </li></ul><ul><ul><li>Zend_Rest_Route </li></ul></ul><ul><ul><ul><li>GET /product/ratings/ - indexAction() </li></ul></ul></ul><ul><ul><ul><li>GET /product/ratings/:id - getAction() </li></ul></ul></ul><ul><ul><ul><li>POST /product/ratings - postAction() </li></ul></ul></ul><ul><ul><ul><li>PUT /product/ratings/:id - putAction() </li></ul></ul></ul><ul><ul><ul><li>DELETE /product/ratings/:id - deleteAction() </li></ul></ul></ul><ul><ul><ul><li>POST /product/ratings/:id?_method=&quot;PUT&quot; - putAction() </li></ul></ul></ul><ul><ul><ul><li>POST /product/ratings/:id?_method=&quot;DELETE&quot; - deleteAction() </li></ul></ul></ul><ul><ul><li>Zend_Rest_Controller </li></ul></ul>
  71. 71. Выпуск в эксплуатацию Слой сборки <ul><li>custom.main.js </li></ul>dojo.provide(&quot;custom.main&quot;); (function(){ dojo.require(&quot;dojo.io.script&quot;); dojo.require(&quot;dojo.fx&quot;); dojo.require(&quot;dijit.form.Button&quot;); })();
  72. 72. Выпуск в эксплуатацию Профиль сборки dependencies = { action:&quot;release&quot;, optimize:&quot;shrinksafe&quot;, layerOptimize:&quot;shrinksafe&quot;, copyTests:false, loader:&quot;default&quot;, cssOptimize:&quot;comments&quot;, releaseName:&quot;custom&quot;, layers:[{ name:&quot;custom.main.js&quot;, layerDependencies:[], dependencies:[&quot;custom.main&quot;] }], prefixes:[ [&quot;custom&quot;,&quot;../custom&quot;], [&quot;dojo&quot;,&quot;../dojo&quot;], [&quot;dijit&quot;,&quot;../dijit&quot;] ] };
  73. 73. Выпуск в эксплуатацию Генерация профиля и слоя <ul><li>Zend_Dojo_BuildLayer автоматически генерирует содержание профиля и содержание слоя на основе данных из view- хелпера dojo() . </li></ul>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(); }
  74. 74. Подробнее? <ul><li>Dojo Toolkit </li></ul><ul><ul><li>Документация </li></ul></ul><ul><ul><ul><li>http:// api.dojotoolkit.org </li></ul></ul></ul><ul><ul><ul><li>http:// docs.dojocampus.org </li></ul></ul></ul><ul><ul><li>Блоги </li></ul></ul><ul><ul><ul><li>http :// dojotoolkit.org / rss.xml </li></ul></ul></ul><ul><ul><ul><li>http :// dojocampus.org / content / feed </li></ul></ul></ul><ul><ul><li>IRC </li></ul></ul><ul><ul><ul><li>#dojo на irc.freenode.net </li></ul></ul></ul><ul><ul><li>Список рассылки dojo-interest </li></ul></ul><ul><ul><ul><li>http :// dojotoolkit.org / mailman / listinfo / dojo-interest </li></ul></ul></ul>
  75. 75. Подробнее? <ul><li>Zend Framework </li></ul><ul><ul><li>Документация </li></ul></ul><ul><ul><ul><li>http:// framework.zend.com /manual </li></ul></ul></ul><ul><ul><li>Wiki </li></ul></ul><ul><ul><ul><li>http:// framework.zend.com/wiki </li></ul></ul></ul><ul><ul><li>Блоги </li></ul></ul><ul><ul><ul><li>http :// devzone.zend.com </li></ul></ul></ul><ul><ul><ul><li>http :// framework.zend.com </li></ul></ul></ul><ul><ul><li>IRC </li></ul></ul><ul><ul><ul><li>#zftalk on irc.freenode.net </li></ul></ul></ul><ul><ul><li>Списки рассылок </li></ul></ul><ul><ul><ul><li>http:// framework.zend.com / archives </li></ul></ul></ul><ul><ul><li>Развитое русскоязычное сообщество </li></ul></ul><ul><ul><ul><li>http :// zendframework.ru ( основатель: Александр Махомет) </li></ul></ul></ul>
  76. 76. <ul><li>Вопросы? </li></ul><ul><li>E-mail : [email_address] </li></ul><ul><li>Георгий Туревич, Wizartech </li></ul>

×