zfconf 2010: jquery and dojo toolkit javascript-frameworks integration with zend framework

Интеграция Zend Frameworkc 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

Настройка окружения

<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>

Типичный код в <head> секции для настройки 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' ))?>

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

Zend_Dojo::enableView($view);


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

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

<?=$this->dojo()?>

В application.ini указываем:

resources.dojo.djConfig.isDebug = 1resources.dojo.djConfig.parseOnLoad = 1resources.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 событий в секции <head>- Добавление javascript-кода в секцию <head>- Добавление произвольных файлов стилей- Добавление файлов стилей согласно стандартам наименования компонентов 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-хелперы

В шаблоне:

<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>


Состав элементов: - 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


<div class="tundra"><? $this->tabContainer()->captureStart('masterLayout', array( 'style' => 'width: 200px; height: 20em;')) ?> <?=$this->contentPane('menuPane', 'This is first tab', array( 'title' => 'tab 1' ))?>

<? $this->contentPane()->captureStart('navPane', array( 'title' => 'tab 2') )?> This<br> is<br> second<br> tab <?=$this->contentPane()->captureEnd('navPane');?><?=$this->tabContainer()->captureEnd('masterLayout')?></div>


$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-оптимизация– Объединение @import-файлов в один– Удаление комментариев

• Опции StripConsole• X-Domain-сборки (свой CDN)


Для утилиты ShrinkSafe требуется 2 вида файлов:

• Слои сборки– Определяет состав js-компонентов, которые подготавливаются к

эксплуатации

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

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


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-компонентов– http://framework.zend.com/wiki/display/ZFPROP/Zend_Dojo+-

+Extended+Dijit+Support+-+Matthew+Weier+O%27Phinneydijit.ColorPalettedijit.Dialogdijit.Menu

dijit.ProgressBardijit.TitlePanedijit.Tooltipdijit.TooltipDialogdijit.Treedijit.form.MultiSelect

• Поддержка dojox.grid• http://framework.zend.com/wiki/display/ZFPROP/Zend_Dojo+-

+dojox.grid.DataGrid+Support+-+Matthew+Weier+O%27Phinney

• Ваши идеи?

ZF + jQuery

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

<link href="/jquery/css/ui-lightness/jquery-ui-1.8.custom.css" type="text/css" media="screen" rel="stylesheet"><script type="text/javascript" src="/jquery/js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="/jquery/js/jquery-ui-1.8.custom.min.js"></script>


Настройка с помощью 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

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

<?=$this->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"


Доступная функциональность jQuery() view-хелпера

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


Методы 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 • http://framework.zend.com/wiki/display/ZFPROP/

ZendX_JQuery_Jqgrid+-+Jason+Lentink

• Ваши идеи???

Подробнее?

• 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

Мастерклассы по JavaScript

• В Питере! – в конце мая

• Ведущий: Илья Кантор• Создатель ресурса: javascript.ru• В прошлом – один из разрабочиков Dojo Toolkit

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

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

Вопросы ?

• [email protected]• http://twitter.com/georgyturevich

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

zfconf 2010: jquery and dojo toolkit javascript-frameworks integration with zend framework

Documents