ZFConf 2010: jQuery and Dojo Toolkit JavaScript-frameworks Integration with Zend Framework

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

Настройка окружения <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 = 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 событий в секции <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%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 Ваши идеи?

Настройка окружения Типичный код в <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 Accordion Pane 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_address] http://twitter.com/georgyturevich Туревич Георгий, ведущий веб-программист Wizartech

ZFConf 2010: jQuery and Dojo Toolkit JavaScript-frameworks Integration with Zend Framework

More Related Content

What's hot (18)

Similar to ZFConf 2010: jQuery and Dojo Toolkit JavaScript-frameworks Integration with Zend Framework (20)

More from ZFConf Conference (20)

ZFConf 2010: jQuery and Dojo Toolkit JavaScript-frameworks Integration with Zend Framework