Интеграция Zend Frameworkc JavaScript-фрэймворкамиjQuery и Dojo Toolkit презентация

Содержание

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

Слайд 1Интеграция Zend Framework c JavaScript-фрэймворками jQuery и Dojo Toolkit
Георгий Туревич, ведущий веб-программист, Wizartech
27

марта 2010 г.
Санкт-Петербург

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

JavaScript
Более 2-х лет использования Zend Framework
Более 1-го года использования Dojo Toolkit (с момента заключения партнерства с Zend Framework) и создания индивидуальных компонентов
Активный участник zendframework.ru – Zh0rzh

Слайд 3Возможности
Программная настройка окружения
Автоматизация работы с UI-компонентами
Возможности кастомизации форм
Работа с

автокомплитом

Слайд 4Специфика Dojo + ZF
Генерация данных в стандартизированном формате (dojo.data)
Упрощение создания

слоев и профилей сборки для выпуска в эксплуатацию с помощью Dojo Shrinksafe

Слайд 5ZF + Dojo Toolkit

Слайд 6Настройка окружения
    @import "/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:

Слайд 7Настройка окружения
Настройка с помощью dojo() view-хелпера
Во время инициализации:

Указываем в макете:

Zend_Dojo::enableView($view);

Слайд 8Настройка окружения
Настройка с помощью плагина инициализации ресурса Dojo ( >= 1.10)

В

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

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"

Слайд 9Настройка окружения
Доступная функциональность dojo() view-хелпера
- Установка конфигурационных переменных
- Установка подключаемых слоев
-

Подключение компонентов Dojo
- Установка связи между модулем и путем к папке
- Установка и использование cdn-версии
Установка локальных путей
- Добавление javascript-кода для onLoad событий в секции
- Добавление javascript-кода в секцию
- Добавление произвольных файлов стилей
Добавление файлов стилей согласно стандартам наименования компонентов Dojo

Слайд 10Настройка окружения
Доступные методы dojo() view-хелпера
enable() / disable()
requireModule($module)
registerModulePath($module, $path)
addLayer($path)
setCdnBase($url)
setCdnVersion($version)
setCdnDojoPath($path)
useCdn()
setLocalPath($path)
useLocalPath()
setDjConfig(array $config)
setDjConfigOption($option, $value)
addStylesheetModule($module)
addStylesheet($path)
addOnLoad($spec, $function

= null)
prependOnLoad($spec, $function = null)
onLoadCaptureStart($obj = null) / onLoadCaptureEnd($obj = null)
javascriptCaptureStart() / javascriptCaptureEnd()

Слайд 11Работа с виджетами View-хелперы
В шаблоне:
Форма            

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

Слайд 13Работа с виджетами Элементы форм
Состав элементов:
- Button
- CheckBox
- ComboBox / FilteringSelect
-

CurrencyTextBox
- DateTextBox
- HorizontalSlider / VerticalSlider
- MappedTextBox
- NumberSpinner
- NumberTextBox
- RadioButton
- SimpleTextarea
- Slider
- SubmitButton
- TextBox
- Textarea
- TimeTextBox
- ToggleButton
- ValidationTextBox

Слайд 14Работа с виджетами Виджеты компоновки
Реализованы view-хелперы и декораторы для форм, которые упрощают

работу с виджетами компоновки:
AccordionContainer
AccordionPane
BorderContainer
ContentPane
SplitContainer
StackContainer
TabContainer

Слайд 15Работа с виджетами Виджеты компоновки

Слайд 16Работа с виджетами Виджеты компоновки
                  This
        is
        second
        tab     

Слайд 17Работа с виджетами Виджеты компоновки

Слайд 18Работа с виджетами Виджеты компоновки
$form = new Zend_Dojo_Form(); $subForm1 = new Zend_Dojo_Form(); $subForm2 = new Zend_Dojo_Form(); $form->addSubForm($subForm1, 'subform1'); $form->addSubForm($subForm2, 'subform2'); $this->view->form = $form; $form->setDecorators(array(     'FormElements',     array('TabContainer', array(         'id' => 'myTabs',         'style' => 'width: 300px; height: 20em'     )),     'Form', ));
- Формируем объекты формы и суб-форм
- Устанавливаем

форме декоратор TabContainer

Слайд 19Работа с виджетами Виджеты компоновки
$subForm1->setDecorators(array(     'FormElements',     array('HtmlTag', array('tag' => 'dl')),     array('ContentPane', array('title' => 'Tab 1')) )); $subForm2->setDecorators(array(     'FormElements',     array('HtmlTag', array('tag' => 'dl')),     array('ContentPane', array('title' => 'Tab 2')) ));
- Устанавливаем суб-формам декоратор ContentPane

Слайд 20Работа с виджетами Виджеты компоновки
$subForm1->addElement('Editor', 'editor', array(     'label' => 'Editor:', )); $subForm1->addElement('DateTextBox', 'date', array(     'label' => 'Date:', 'style' => 'width: 200px' )); $subForm2->addElement('FilteringSelect', 'acl', array(     'label' => ' City:', 'MultiOptions' => array(         '1' => 'New York', '2' => 'Berlin',         '3' => 'Bern', '4' => 'Boston'     ) ));
- Добавляем элементы в суб-формы

Слайд 22Ajax
В одном действии генерируем форму:
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; }

Слайд 23Ajax
Генерируем JSON классическим методом:
public function simpleCityStoreAction() {     Zend_Controller_Action_HelperBroker::getStaticHelper('ViewRenderer')
->setNoRender(1);
    Zend_Layout::getMvcInstance()->disableLayout();     $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; }

Слайд 24Ajax
Генерируем JSON с применением помощника AutoComplete:
public function simpleCityStoreAction() {     $data = array(         array('id' => 1, 'name' => 'Волгоград'),         array('id' => 2, 'name' => 'Москва'),         array('id' => 3, 'name' => 'Минск'),         array('id' => 4, 'name' => 'Мурманск')     );     $this->_helper->autoCompleteDojo(
new Zend_Dojo_Data('id', $data), true

); }

Что делает AutoComplete:
- автоматически деактивирует Layout и ViewRender
- при необходимости трансформирует array -> Zend_Dojo_Data
- записывает данные в response-объект и отправляет его пользователю
- облегчает жизнь программисту :)

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

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

Слайд 26Ajax
Получаем результат:

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

следующие функции:

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

Слайд 28Выпуск в эксплуатацию
Для утилиты ShrinkSafe требуется 2 вида файлов:
Слои сборки
Определяет состав

js-компонентов, которые подготавливаются к эксплуатации

Профили сборки
Содержат конфигурацию действия по оптимизации

Смотри подробнее: http://docs.dojocampus.org/build/index

Слайд 29Выпуск в эксплуатацию
Zend_Dojo_BuildLayer автоматически генерирует содержание профиля и содержание слоя на основе

данных из view-хелпера dojo().

$build = new Zend_Dojo_BuildLayer(array(     'view' => $this->view,     'layerScriptPath' => 'custom.main.js',     'layerName' => 'custom.main', )); $profile = $build->generateBuildProfile(); $layerScript = $build->generateLayerScript();

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

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

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

Слайд 32Планы на будущее
Расширенная поддержка Dijit-компонентов
http://framework.zend.com/wiki/display/ZFPROP/Zend_Dojo+-+Extended+Dijit+Support+-+Matthew+Weier+O%27Phinney
dijit.ColorPalette
dijit.Dialog
dijit.Menu
dijit.ProgressBar
dijit.TitlePane
dijit.Tooltip
dijit.TooltipDialog
dijit.Tree
dijit.form.MultiSelect
Поддержка dojox.grid
http://framework.zend.com/wiki/display/ZFPROP/Zend_Dojo+-+dojox.grid.DataGrid+Support+-+Matthew+Weier+O%27Phinney

Ваши идеи?

Слайд 33ZF + jQuery

Слайд 34Настройка окружения
Типичный код в секции для настройки jQuery:

type="text/css" media="screen" rel="stylesheet">


Слайд 35Настройка окружения
Настройка с помощью jQuery() view-хелпера
Во время инициализации:
Указываем в макете:

$view->addHelperPath(

"ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper"
);

$view->jQuery()     ->enable()     ->setLocalPath('/jquery/js/jquery-1.4.2.min.js')     ->addStylesheet('/jquery/css/ui-lightness/jquery-ui-1.8.custom.css')     ->setUiLocalPath('/jquery/js/jquery-ui-1.8.custom.min.js');

jQuery()     ->enable()     ->setLocalPath('/jquery/js/jquery-1.4.2.min.js')     ->addStylesheet('/jquery/css/ui-lightness/jquery-ui-1.8.custom.css')     ->setUiLocalPath('/jquery/js/jquery-ui-1.8.custom.min.js'); ">jQuery()     ->enable()     ->setLocalPath('/jquery/js/jquery-1.4.2.min.js')     ->addStylesheet('/jquery/css/ui-lightness/jquery-ui-1.8.custom.css')" alt="">

Слайд 36Настройка окружения
Настройка с помощью плагина инициализации ресурса jQuery

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

В application.ini

указываем:

pluginPaths.ZendX_Application_Resource_ = "ZendX/Application/Resource"
resources.jquery.localpath = "/jquery/js/jquery-1.4.2.min.js"
resources.jquery.stylesheet = "/jquery/…/jquery-ui-1.8.custom.css"
resources.jquery.uilocalpath = "/jquery/js/jquery-ui-1.8.custom.min.js"

Слайд 37Настройка окружения
Доступная функциональность jQuery() view-хелпера
- Установка и использование cdn-версий jQuery и

jQuery UI
- Использование ssl с cdn
- Установка локальных путей к jQuery и jQuery UI
- Добавление javascript-кода для onLoad событий в секции
- Добавление javascript-файлов в секци
- Добавление javascript-кода в секцию
- Добавление файлов стилей

Слайд 38Настройка окружения
Методы jQuery() view-хелпера
setUiVersion()
getUiVersion()
useUiCdn()
useUiLocal()
setUiLocalPath()
getUiLocalPath()

onLoadCaptureStart()
onLoadCaptureEnd()

javascriptCaptureStart()
javascriptCaptureEnd()

addJavascriptFile($path)
getJavascriptFiles()
clearJavascriptFiles()

addJavascript($statement)
getJavascript()
clearJavascript()
addStylesheet($path)
getStylesheets()

addOnLoad($statement)
getOnLoadActions()

setRenderMode($mask)
getRenderMode()

setCdnSsl($bool)

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

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

Слайд 41Работа с виджетами Элементы форм
$form = new ZendX_JQuery_Form();
$subForm1 = new ZendX_JQuery_Form(); $subForm2 = new ZendX_JQuery_Form(); $form->addSubForm($subForm1, 'subform1'); $form->addSubForm($subForm2, 'subform2'); $form->setDecorators(array(     'FormElements', array('TabContainer', array(         'id' => 'tabContainer', 'style' => 'width: 600px;'

    )),     'Form', ));

- Формируем объекты формы и суб-форм
- Устанавливаем форме декоратор TabContainer

Слайд 42Работа с виджетами Элементы форм
$subForm1->setDecorators(array(     'FormElements', array('HtmlTag', array('tag' => 'dl')),     array('TabPane', array('jQueryParams' => array(         'containerId' => 'mainForm', 'title' => 'DatePicker'     ))) )); $subForm2->setDecorators(array(     'FormElements',

    array('HtmlTag', array('tag' => 'dl')),     array('TabPane', array('jQueryParams' => array(         'containerId' => 'mainForm',         'title' => 'AutoComplete and Slider'     ))) ));

- Устанавливаем суб-формам декоратор TabPane

Слайд 43Работа с виджетами Элементы форм
$subForm1->addElement('DatePicker', 'datePicker1', array(     "label" => "Date Picker:",     'JQueryParam' => array('dateFormat' => 'dd.mm.yy') )); $subForm2->addElement('Slider', 'slider1', array(     "label" => "Slider:",     'JQueryParams' => array('defaultValue' => '75') ));

$subForm2->addElement('AutoComplete', 'acl', array(     "label" => "Autocomplete:", 'JQueryParams' => array(         'source' => array(             'New York', 'Berlin', 'Bern', 'Boston'         )     ) ));

- Добавляем элементы в суб-формы

 "Date Picker:",     'JQueryParam' => array('dateFormat' => 'dd.mm.yy') )); $subForm2->addElement('Slider', 'slider1', array(     "label" => "Slider:",     'JQueryParams' => array('defaultValue' => '75') )); $subForm2->addElement('AutoComplete', 'acl', array(     "label" => "Autocomplete:", 'JQueryParams' => array(         'source' => array(             'New York', 'Berlin', 'Bern', 'Boston'         )     ) )); - Добавляем элементы в суб-формы"> "Date Picker:",     'JQueryParam' => array('dateFormat' => 'dd.mm.yy') )); $subForm2->addElement('Slider', 'slider1', array(     "label" => "Slider:",     'JQueryParams' => array('defaultValue' => '75') )); $subForm2->addElement('AutoComplete', 'acl', array(" alt="">

Слайд 44Работа с виджетами
Элементы форм
AutoComplete ( >= 1.8 )
ColorPicker ( 1.6 alpha?

)
DatePicker
Slider
Spinner ( 1.6 alpha? )

Виджеты компоновки
AccordionContainer
AccordionPane
DialogContainer
TabContainer
TabPain

AjaxLink

Слайд 45Планы на будущее
Поддержка компонента jqGrid
http://framework.zend.com/wiki/display/ZFPROP/ZendX_JQuery_Jqgrid+-+Jason+Lentink
Ваши идеи???

Слайд 46Подробнее?
Dojo Toolkit
http://dojotoolkit.org
http://docs.dojocampus.org/
jQuery и jQuery UI
http://jquery.com/
http://jqueryui.com/
Zend Framework
http://framework.zend.com/manual/en/zend.dojo.html
http://framework.zend.com/manual/en/zendx.jquery.html

Слайд 47Мастерклассы по JavaScript
В Питере! – в конце мая

Ведущий: Илья Кантор
Создатель ресурса:

javascript.ru
В прошлом – один из разрабочиков Dojo Toolkit


Темы мастер-классов:
Профессиональное программирование JavaScript
Сложный Ajax и Comet
Клиентская оптимизация
Секреты jQuery

Подробнее: http://javascript.ru/mk

Слайд 48Вопросы ?
georgy.turevich@wizartech.ru
http://twitter.com/georgyturevich
Туревич Георгий, ведущий веб-программист Wizartech

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

PowerPoint бесплатный шаблон 403
Логотип проекта Название проекта слоган 284
Publisher 2007 333
Заголовок слайда 278
Осенние листья - 5 277
Название презентации 269

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

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

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

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

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

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

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