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

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

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

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

ZF + Dojo Toolkit

Настройка "/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() view-хелпера Во время инициализации: 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' )) ?> Указываем в макете: Zend_Dojo::enableView($view);

Настройка окружения Настройка с помощью плагина инициализации ресурса 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"

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

Настройка окружения Доступные методы 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()

Работа с виджетами 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?>

Работа с виджетами Элементы форм Состав элементов: - Button - CheckBox - ComboBox / FilteringSelect - CurrencyTextBox - DateTextBox - HorizontalSlider / VerticalSlider - MappedTextBox - NumberSpinner - NumberTextBox - RadioButton - SimpleTextarea - Slider - SubmitButton - TextBox - Textarea - TimeTextBox - ToggleButton - ValidationTextBox

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

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

tabContainer()->captureStart('masterLayout', array( 'style' => 'width: 200px; height: 20em;' )) ?> contentPane('menuPane', 'This is first tab', array( 'title' => 'tab 1' ))?> contentPane()->captureStart('navPane', array( 'title' => 'tab 2') )?> This is second tab contentPane()->captureEnd('navPane');?> tabContainer()->captureEnd('masterLayout')?>

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

$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

Работа с виджетами Виджеты компоновки $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

Работа с виджетами Виджеты компоновки $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' ) )); - Добавляем элементы в суб-формы

Ajax

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

Ajax Генерируем 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-объект и отправляет его пользователю - облегчает жизнь программисту :)

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

Ajax Получаем результат:

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

Выпуск в эксплуатацию Для утилиты ShrinkSafe требуется 2 вида файлов: Слои сборки –Определяет состав js-компонентов, которые подготавливаются к эксплуатации Профили сборки –Содержат конфигурацию действия по оптимизации Смотри подробнее:

Выпуск в эксплуатацию 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();

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

Планы на будущее Расширенная поддержка Dijit-компонентов – +Extended+Dijit+Support+-+Matthew+Weier+O%27Phinneyhttp://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 +dojox.grid.DataGrid+Support+-+Matthew+Weier+O%27Phinneyhttp://framework.zend.com/wiki/display/ZFPROP/Zend_Dojo+- +dojox.grid.DataGrid+Support+-+Matthew+Weier+O%27Phinney Ваши идеи?

ZF + jQuery

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

Настройка окружения Настройка с помощью jQuery() view-хелпера Во время инициализации: Указываем в макете: $view->addHelperPath( "ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper " ); $view->jQuery() ->enable() ->setLocalPath('/jquery/js/jquery min.js') ->addStylesheet('/jquery/css/ui-lightness/jquery-ui-1.8.custom.css') ->setUiLocalPath('/jquery/js/jquery-ui-1.8.custom.min.js');

Настройка окружения Настройка с помощью плагина инициализации ресурса jQuery В макете указываем: jQuery()?> В application.ini указываем: pluginPaths.ZendX_Application_Resource_ = "ZendX/Application/Resource" resources.jquery.localpath = "/jquery/js/jquery min.js" resources.jquery.stylesheet = "/jquery/…/jquery-ui-1.8.custom.css" resources.jquery.uilocalpath = "/jquery/js/jquery-ui-1.8.custom.min.js"

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

Настройка окружения Методы 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)

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

Работа с виджетами Элементы форм $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

Работа с виджетами Элементы форм $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

Работа с виджетами Элементы форм $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' ) ) )); - Добавляем элементы в суб-формы

Работа с виджетами Элементы форм AutoComplete ( >= 1.8 ) ColorPicker ( 1.6 alpha? ) DatePicker Slider Spinner ( 1.6 alpha? ) Виджеты компоновки AccordionContainer AccordionPane DialogContainer TabContainer TabPain AjaxLink

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

Подробнее? Dojo Toolkit jQuery и jQuery UI Zend Framework

Мастерклассы по JavaScript В Питере! – в конце мая Ведущий: Илья Кантор Создатель ресурса: javascript.ru В прошлом – один из разрабочиков Dojo Toolkit Темы мастер-классов: Профессиональное программирование JavaScript Сложный Ajax и Comet Клиентская оптимизация Секреты jQuery Подробнее:

Вопросы ? Туревич Георгий, ведущий веб-программист Wizartech