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

Содержание

Немного о себе Ведущий веб-программист компании Wizartech Более 7-и лет использования PHP и JavaScript Более 2-х лет использования Zend Framework Около 1-го года активного использования Dojo Toolkit (с момента заключения партнерства

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

Framework

Георгий Туревич, Wizartech

Слайд 2Немного о себе
Ведущий веб-программист компании Wizartech
Более 7-и лет использования PHP и

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

Слайд 3Промышленный?
Богатый функционал
Гибкая архитектура
Проверенный код
Код библиотек покрыт тестами
Собственный инструментарий для тестирования
Постоянное развитие

и ясное будущее
Поддержка от 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

Слайд 4

Dojo Toolkit

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

Слайд 6Архитектура Dojo Toolkit

Слайд 7Вкратце о Core и Base
Полезные утилиты
Обработка событий
Ajax (Restful XHR, script, iframe)


Манипулирование узлами
Интернационализация
Перетаскивание
Анимация
Абстракция данных
Имитация классов и наследования


Слайд 8

Dojo Toolkit
Core и Base

Слайд 9Инициализация


Dojo

type="text/javascript"
src="http://o.aolcdn.com/dojo/1.3/dojo.xd.js">



HELLO PHPCONF 2009 !!!



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

Слайд 10Конфигурирование


Конфигурировать возможно прямо в тэге :
Или

программным способом (для соответствия стандартам):



Слайд 11Система управления пакетами и зависимостями

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();

Слайд 12Система управления пакетами и зависимостями
dojo.provide("wlib.Example");

dojo.declare("wlib.Example", null, {
constructor: function() {

console.log("HELLO! It is example!");
}
});

/js/wlib/Example.js

Вывод в консоли Firebug Lite (упрощенный аналог плагина для FF):

Слайд 13dojo.addOnLoad()
dojo.addOnUnload()

var onLoadFunc = function() {

console.log('Да! Страница загружена!');
}
dojo.addOnLoad(onLoadFunc);


Интересное в Base и Core События

Слайд 14Интересное в Base и Core События
dojo.connect()
Все на конференцию

dojo.connect(dojo.byId('link'),'onclick',

function(evt) {
dojo.stopEvent(evt);
console.log('Вы щелкнули на ссылку!');
});

Слайд 15Интересное в 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();

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

Слайд 17Интересное в 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);

Слайд 18Интересное в 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", ["Пока всем!"]);

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

Слайд 20Интересное в 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()

Слайд 21Интересное в Base и Core Ajax
test.php

Слайд 22Интересное в Base и Core Ajax
dojo.Deffered (позволяет создавать цепочки функций обратного вызова)




Слайд 23Интересное в 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 метод)

Слайд 24Интересное в Base и Core Ajax
test_deffered.php

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

dojo.declare("wlib.ExampleParentFirst", null, {
constructor:

function() {
console.log("Вызов конструктора");
}
});

dojo.declare("wlib.ExampleParentSecond", null, {
say: function(message) {
console.log(message)
}
});

Слайд 26Имитация классов и наследования

dojo.declare(
"wlib.ExampleParentChild",

[wlib.ExampleParentFirst, wlib.ExampleParentSecond],
{
sayBy: function() {
this.say("Всем пока!")
}
}
);
var child = new wlib.ExampleParentChild();
child.sayBy();

dojo.declare()

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

Слайд 28Имитация классов и наследования
dojo.extend()

dojo.extend(wlib.ExampleParentChild, {
sayHello:

function() {
this.say("Всем привет!");
}
});
var child = new wlib.ExampleParentChild();
child.sayHello();
child.sayBy();

Слайд 29Имитация классов и наследования
dojo.mixin()

var obj = { firstName: "Иван", lastName:

"Петров" };
var emp = dojo.mixin(obj, {
sayName: function() {
console.log(
"Меня зовут " + this.firstName + " "
+ this.lastName
);
}
});
emp.sayName();

Слайд 30Имитация классов и наследования
dojo.hitch()

function sayName() {

console.log(
"Меня зовут " + this.firstName + " "
+ this.lastName
);
}

var obj = { firstName: "Иван", lastName: "Петров" };

var callback = dojo.hitch(obj, sayName);
callback();

Слайд 31

Dojo Toolkit
Dijit

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

кнопки, выпадающие элементы, слайдеры и т.д.)

Слайд 33Элементы форм

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

кнопки, выпадающие элементы, слайдеры и т.д.)
Виджеты компоновки (Content pane, Accordion / Tab / Stack / Border-контейнеры)

Слайд 35Виджеты компоновки

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

кнопки, выпадающие элементы, слайдеры и т.д.)
Виджеты компоновки (Content pane, Accordion / Tab / Stack / Border-контейнеры)
Виджеты приложения (деревья, прогресс-бар, диалоги, меню, WYSIWYG и т.д.)

Слайд 37Виджеты приложения

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

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

Слайд 39Инициализация виджетов


dojo.require("dijit.form.Button");

rel="stylesheet" href="/dojotoolkit/dijit/themes/tundra/tundra.css">

В секции :
Устанавливаем parseOnLoad в true
Подключаем нужные виджеты
Подключаем тему оформления


Слайд 40Инициализация виджетов



Щелкни по мне!



В секции :


Слайд 41Инициализация виджетов

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

Слайд 42Возможности расширения

Переопределение методов жизненного цикла
constructor() (конструктор)
postMixInProperties() (вызывается после формирования структуры виджета)
buildRendering()

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

Слайд 43

Dojo Toolkit
Dojox

Слайд 44Dojox
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, ...)
И многое другое …

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

Слайд 46Dojox
dojox.grid.Grid

Слайд 47

Dojo Toolkit
Данные

Слайд 48Абстракция работы с данными
Все типы хранилищ реализуют один или несколько интерфейсов:
dojo.data.api.Read

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

Слайд 49Абстракция работы с данными
Dojo
dojo.data.ItemFileReadStore
dojo.data.ItemFileWriteStore
Dojox
AtomReadStore
CouchDBRestStore
CssRuleStore
CsvStore
FileStore
FlickrRestStore/FlickrStore
GoogleFeedStore
GoogleSearchStore

HtmlStore
jsonRestStore
QueryReadStore
ServiceStore
S3Store
WikipediaStore
XmlStore
И другие …

Слайд 50

Dojo Toolkit
Util

Слайд 51Подготовка к выпуску в эксплуатацию
В пакете Dojo Toolkit поставляется утилита ShrinkSafe (Java), которая

реализует следующие функции:

Уменьшение количества HTTP-запросов
Объедение файлов с классами, шаблонами, языковыми данными
Уменьшение размера JavaScript-файлов
Удаление комментариев и пробелов
Сокращение наименований переменных
CSS-оптимизация
Объединение @import-файлов в один
Удаление комментариев
Опции StripConsole
X-Domain-сборки (свой CDN)

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

в себя подсистему тестирования визуальных компонентов doh.robot.

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

форматов данных
Упрощение выпуска в эксплуатацию

Слайд 54

Zend Framework

Слайд 55Программная настройка Dojo-окружения

@import "/js/dojo-toolkit/dijit/themes/tundra/tundra.css";


var djConfig

= {"isDebug":true,"parseOnLoad":true};



Типичный код в секции для настройки Dojo:

Слайд 56Программная настройка Dojo-окружения

'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-хелпера:

Слайд 57Программная настройка 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"

В макете указываем:

Слайд 58Работа с виджетами View-хелперы
Форма






В шаблоне:

Слайд 59Работа с виджетами Элементы форм
$form = new Zend_Dojo_Form();
$form->addElement('editor', 'editor');
$form->addElement(
'button',

'send',
array('label' => 'Отправить')
);
$this->view->form = $form;

В контроллере:

Форма



form?>

В шаблоне:

Слайд 60Работа с виджетами Состав компонентов
В состав элементов для Zend_Dojo_Form входят классы для

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

Слайд 61Ajax 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;
}

Формируем форму:

Слайд 62Ajax 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:

Слайд 63Ajax Zend_Dojo_Data
Отдаем данные в формате dojo.data:
{
"identifier":"id",
"items":[

{"id":1,"name":"Волгоград"},
{"id":2,"name":"Москва"},
{"id":3,"name":"Минск"},
{"id":4,"name":"Мурманск"}
]
}

Слайд 64Ajax Zend_Dojo_Data
В шаблоне:

Вуаля!

Слайд 65Ajax JSON-RPC
Клиентская часть (в шаблоне):


function() {
var

o = {
"serviceType": "JSON-RPC",
"serviceUrl": "/json/rpc-server",
"methods": [{
"name": "sum",
"parameters": [
{name: "numbers"}
]
}]
}
...
}
dojo()->onLoadCaptureEnd(); ?>

Слайд 66Ajax 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}

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

return array_sum($numbers);
}
}

Слайд 68Ajax JSON-RPC
Серверная часть (контроллер):
public function rpcServerAction()
{
$server = new Zend_Json_Server();

$server->setClass('Default_Model_RpcTest');
$server->handle();
}

Результат:

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

Слайд 70Ajax 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

Слайд 71Выпуск в эксплуатацию Слой сборки
dojo.provide("custom.main");

(function(){
dojo.require("dojo.io.script");
dojo.require("dojo.fx");
dojo.require("dijit.form.Button");
})();
custom.main.js

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

Слайд 73Выпуск в эксплуатацию Генерация профиля и слоя
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().

Слайд 74Подробнее?
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

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

Слайд 76
Вопросы?


E-mail: georgy.turevich@wizartech.ru

Георгий Туревич, Wizartech

Похожие презентации

Заголовок слайда 273
Работа выполнена в рамках МК"Создание шаблонов для фона презентации PowerPoint"на сайте Копилочка Фокиной Л.П. http://linda6035.ucoz.ru/ШАБЛОН ГРИБОЧКИ 241
Презентация к уроку по физкультуре по теме: Шаблон для презентации "Спортивный" 360
Шаблон новогодний 254
Тест Умножение и деление на 2 и 3 347
Компьютерные презентации 256

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей

Яндекс.Метрика