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

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

Немного о себе ,[object Object],[object Object],[object Object],[object Object],[object Object]

Возможности ,[object Object],[object Object],[object Object],[object Object]

Специфика Dojo + ZF ,[object Object],[object Object]

Настройка окружения <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- хелпера ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Настройка окружения Доступные методы dojo() view- хелпера ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Работа с виджетами Виджеты компоновки ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Работа с виджетами Виджеты компоновки <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), которая реализует следующие функции: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Выпуск в эксплуатацию Для утилиты ShrinkSafe требуется 2 вида файлов: ,[object Object],[object Object],[object Object],[object Object],Смотри подробнее: 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"] ] };

Планы на будущее ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

Работа с виджетами ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Планы на будущее ,[object Object],[object Object],[object Object]

Подробнее? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Мастерклассы по JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (18)

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

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

Mais de ZFConf Conference

Mais de ZFConf Conference (20)

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