Интеграция Zend Framework c JavaScript-фрэймворками jQuery и Dojo Toolkit Георгий   Туревич , ведущий веб-программист ,   ...
Немного о себе <ul><li>Ведущий веб-программист компании Wizartech </li></ul><ul><li>Более 7-и лет использования PHP и Java...
Возможности   <ul><li>Программная настройка окружения  </li></ul><ul><li>Автоматизация работы с UI-компонентами </li></ul>...
Специфика  Dojo + ZF <ul><li>Генерация данных в стандартизированном формате (dojo.data)  </li></ul><ul><li>Упрощение созда...
ZF + Dojo Toolkit
Настройка окружения <style type=&quot;text/css&quot;>      @import &quot;/js/dojo-toolkit/dijit/themes/tundra/tundra.css&q...
Настройка окружения Настройка с помощью  dojo() view- хелпера Во время инициализации: <?=$this -> dojo ()   -> enable ()  ...
Настройка окружения Настройка с помощью плагина инициализации ресурса  Dojo  (  >= 1.10) В макете указываем: <?=$this -> d...
Настройка окружения Доступная функциональность  dojo() view- хелпера <ul><li>- Установка конфигурационных переменных </li>...
Настройка окружения Доступные методы  dojo() view- хелпера <ul><li>enable() / disable() </li></ul><ul><li>requireModule($m...
Работа с виджетами View- хелперы В шаблоне: <h1>Форма</h1> <div class=&quot;tundra&quot;>   <form>    <?=$this -> editor (...
Работа с виджетами Элементы форм В контроллере: $form  = new  Zend_Dojo_Form (); $form -> addElement ( 'editor' ,  'editor...
Работа с виджетами Элементы форм Состав элементов:  - Button -  CheckBox -  ComboBox  /  FilteringSelect -  CurrencyTextBo...
Работа с виджетами Виджеты компоновки <ul><li>Реализованы  view- хелперы и декораторы для форм, которые упрощают работу с ...
Работа с виджетами Виджеты компоновки
Работа с виджетами Виджеты компоновки <div class=&quot;tundra&quot;> <? $this -> tabContainer ()-> captureStart ( 'masterL...
Работа с виджетами Виджеты компоновки
Работа с виджетами Виджеты компоновки $form  = new  Zend_Dojo_Form (); $subForm1  = new  Zend_Dojo_Form (); $subForm2  = n...
Работа с виджетами Виджеты компоновки $subForm1 -> setDecorators (array(      'FormElements' ,     array( 'HtmlTag' , arra...
Работа с виджетами Виджеты компоновки $subForm1 -> addElement ( 'Editor' ,  'editor' , array(      ' label '   =>  ' Edito...
Ajax
Ajax В одном действии генерируем форму: public function  dojoDataExampleAction () {      $form  = new  Zend_Dojo_Form (); ...
Ajax Генерируем  JSON  классическим методом: public function  simpleCityStoreAction () {      Zend_Controller_Action_Helpe...
Ajax Генерируем  JSON  с применением помощника  AutoComplete : public function  simpleCityStoreAction () {      $data  = a...
Ajax Отдаем данные в формате  dojo.data : { &quot;identifier&quot;:&quot;id&quot;, &quot;items&quot;:[ {&quot;id&quot;:1,&...
Ajax Получаем результат:
Выпуск в эксплуатацию В пакете  Dojo Toolkit  поставляется утилита  ShrinkSafe   (Java), которая реализует следующие функц...
Выпуск в эксплуатацию Для утилиты  ShrinkSafe  требуется 2 вида файлов: <ul><li>Слои сборки </li></ul><ul><ul><li>Определя...
Выпуск в эксплуатацию Zend_Dojo_BuildLayer   автоматически генерирует содержание профиля и содержание слоя на основе данны...
Выпуск в эксплуатацию Слой сборки: dojo.provide(&quot;custom.main&quot;); (function(){ dojo.require(&quot;dojo.io.script&q...
Выпуск в эксплуатацию Профиль сборки: dependencies = { action:&quot;release&quot;, optimize:&quot;shrinksafe&quot;, layerO...
Планы на будущее <ul><li>Расширенная поддержка  Dijit- компонентов </li></ul><ul><ul><li>http://framework.zend.com/wiki/di...
ZF + jQuery
Настройка окружения Типичный код в  <head>  секции для настройки  jQuery : <link href=&quot;/jquery/css/ui-lightness/jquer...
Настройка окружения Настройка с помощью  jQuery() view- хелпера Во время инициализации: Указываем в макете: $view -> addHe...
Настройка окружения Настройка с помощью плагина инициализации ресурса  jQuery В макете указываем: <?=$this -> jQuery () ?>...
Настройка окружения Доступная функциональность  jQuery() view- хелпера - Установка и использование  cdn- версий  jQuery  и...
Настройка окружения Методы  jQuery() view- хелпера setUiVersion() getUiVersion() useUiCdn() useUiLocal() setUiLocalPath() ...
Работа с виджетами View- хелперы
Работа с виджетами View- хелперы
Работа с виджетами Элементы форм $form  = new  ZendX_JQuery_Form ();   $subForm1  = new  ZendX_JQuery_Form ();  $subForm2 ...
Работа с виджетами Элементы форм $subForm1 -> setDecorators (array(       'FormElements' , array( 'HtmlTag' , array( 'tag'...
Работа с виджетами Элементы форм $subForm1 -> addElement ( 'DatePicker' ,  'datePicker1' , array(       &quot;label&quot; ...
Работа с виджетами <ul><li>Элементы форм </li></ul><ul><ul><li>AutoComplete ( >= 1.8 ) </li></ul></ul><ul><ul><li>ColorPic...
Планы на будущее <ul><li>Поддержка компонента  jqGrid  </li></ul><ul><ul><li>http://framework.zend.com/wiki/display/ZFPROP...
Подробнее? <ul><li>Dojo Toolkit   </li></ul><ul><ul><li>http://dojotoolkit.org </li></ul></ul><ul><ul><li>http://docs.dojo...
Мастерклассы по  JavaScript <ul><li>В Питере! – в конце мая </li></ul><ul><li>Ведущий: Илья Кантор </li></ul><ul><ul><li>С...
Вопросы ? <ul><li>[email_address] </li></ul><ul><li>http://twitter.com/georgyturevich </li></ul>Туревич Георгий, ведущий в...
Upcoming SlideShare
Loading in …5
×

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

4,539 views
4,472 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,539
On SlideShare
0
From Embeds
0
Number of Embeds
1,787
Actions
Shares
0
Downloads
87
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. Интеграция Zend Framework c JavaScript-фрэймворками jQuery и Dojo Toolkit Георгий Туревич , ведущий веб-программист , Wizartech 27 марта 2010 г. Санкт-Петербург
  2. 2. Немного о себе <ul><li>Ведущий веб-программист компании Wizartech </li></ul><ul><li>Более 7-и лет использования PHP и JavaScript </li></ul><ul><li>Более 2-х лет использования Zend Framework </li></ul><ul><li>Более 1-го года использования Dojo Toolkit (с момента заключения партнерства с Zend Framework) и создания индивидуальных компонентов </li></ul><ul><li>Активный участник zendframework . ru – Zh0rzh </li></ul>
  3. 3. Возможности <ul><li>Программная настройка окружения </li></ul><ul><li>Автоматизация работы с UI-компонентами </li></ul><ul><li>Возможности кастомизации форм </li></ul><ul><li>Работа с автокомплитом </li></ul>
  4. 4. Специфика Dojo + ZF <ul><li>Генерация данных в стандартизированном формате (dojo.data) </li></ul><ul><li>Упрощение создания слоев и профилей сборки для выпуска в эксплуатацию с помощью Dojo Shrinksafe </li></ul>
  5. 5. ZF + Dojo Toolkit
  6. 6. Настройка окружения <style type=&quot;text/css&quot;>     @import &quot;/js/dojo-toolkit/dijit/themes/tundra/tundra.css&quot;; </style> <script type=&quot;text/javascript&quot;>     var djConfig = {&quot;isDebug&quot;:true,&quot;parseOnLoad&quot;:true}; </script> <script type=&quot;text/javascript&quot;      src=&quot;/js/dojo-toolkit/dojo/dojo.js&quot;></script> <script type=&quot;text/javascript&quot;>     dojo.require(&quot;dojo.io.script&quot;);     dojo.require(&quot;dojo.fx&quot;);     dojo.require(&quot;dijit.form.Button&quot;); </script> Типичный код в <head> секции для настройки Dojo :
  7. 7. Настройка окружения Настройка с помощью 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 );
  8. 8. Настройка окружения Настройка с помощью плагина инициализации ресурса Dojo ( >= 1.10) В макете указываем: <?=$this -> dojo () ?> В application.ini указываем: resources.dojo.djConfig.isDebug = 1 resources.dojo.djConfig.parseOnLoad = 1 resources.dojo.localPath = &quot;/js/dojo-toolkit/dojo/dojo.js&quot; resources.dojo.requireModule[] = &quot;dojo.io.script&quot; resources.dojo.requireModule[] = &quot;dojo.fx&quot; resources.dojo.requireModule[] = &quot;dijit.form.Button&quot;
  9. 9. Настройка окружения Доступная функциональность dojo() view- хелпера <ul><li>- Установка конфигурационных переменных </li></ul><ul><li>- Установка подключаемых слоев </li></ul><ul><li>- Подключение компонентов Dojo </li></ul><ul><li>- Установка связи между модулем и путем к папке </li></ul><ul><li>- Установка и использование cdn- версии </li></ul><ul><li>Установка локальных путей </li></ul><ul><li>- Добавление javascript- кода для onLoad событий в секции <head> </li></ul><ul><li>- Добавление javascript- кода в секцию <head> </li></ul><ul><li>- Добавление произвольных файлов стилей </li></ul><ul><li>Добавление файлов стилей согласно стандартам наименования компонентов Dojo </li></ul>
  10. 10. Настройка окружения Доступные методы dojo() view- хелпера <ul><li>enable() / disable() </li></ul><ul><li>requireModule($module) </li></ul><ul><li>registerModulePath($module, $path) </li></ul><ul><li>addLayer($path) </li></ul><ul><li>setCdnBase($url) </li></ul><ul><li>setCdnVersion($version) </li></ul><ul><li>setCdnDojoPath($path) </li></ul><ul><li>useCdn() </li></ul><ul><li>setLocalPath($path) </li></ul><ul><li>useLocalPath() </li></ul><ul><li>setDjConfig(array $config) </li></ul><ul><li>setDjConfigOption($option, $value) </li></ul><ul><li>addStylesheetModule($module) </li></ul><ul><li>addStylesheet($path) </li></ul><ul><li>addOnLoad($spec, $function = null) </li></ul><ul><li>prependOnLoad($spec, $function = null) </li></ul><ul><li>onLoadCaptureStart($obj = null) / onLoadCaptureEnd($obj = null) </li></ul><ul><li>javascriptCaptureStart() / javascriptCaptureEnd() </li></ul>
  11. 11. Работа с виджетами View- хелперы В шаблоне: <h1>Форма</h1> <div class=&quot;tundra&quot;>   <form>    <?=$this -> editor ( 'editor' ) ?>    <?=$this -> button (        'send' ,  'Отправить ' ) ?>   </form> </div>
  12. 12. Работа с виджетами Элементы форм В контроллере: $form  = new  Zend_Dojo_Form (); $form -> addElement ( 'editor' ,  'editor' ); $form -> addElement (      'button' ,      'send' ,     array( 'label'  =>  'Отправить' ) ); $this -> view -> form  =  $form ; В шаблоне: <h1>Форма</h1> <div class=&quot;tundra&quot;> <?=$this -> form?> </div>
  13. 13. Работа с виджетами Элементы форм Состав элементов: - Button - CheckBox - ComboBox / FilteringSelect - CurrencyTextBox - DateTextBox - HorizontalSlider / VerticalSlider - MappedTextBox - NumberSpinner - NumberTextBox - RadioButton - SimpleTextarea - Slider - SubmitButton - TextBox - Textarea - TimeTextBox - ToggleButton - ValidationTextBox
  14. 14. Работа с виджетами Виджеты компоновки <ul><li>Реализованы view- хелперы и декораторы для форм, которые упрощают работу с виджетами компоновки: </li></ul><ul><li>AccordionContainer </li></ul><ul><li>AccordionPane </li></ul><ul><li>BorderContainer </li></ul><ul><li>ContentPane </li></ul><ul><li>SplitContainer </li></ul><ul><li>StackContainer </li></ul><ul><li>TabContainer </li></ul>
  15. 15. Работа с виджетами Виджеты компоновки
  16. 16. Работа с виджетами Виджеты компоновки <div class=&quot;tundra&quot;> <? $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>
  17. 17. Работа с виджетами Виджеты компоновки
  18. 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. 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. 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'      ) )); - Добавляем элементы в суб-формы
  21. 21. Ajax
  22. 22. 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 ; }
  23. 23. 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 ; }
  24. 24. 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- объект и отправляет его пользователю - облегчает жизнь программисту :)
  25. 25. Ajax Отдаем данные в формате dojo.data : { &quot;identifier&quot;:&quot;id&quot;, &quot;items&quot;:[ {&quot;id&quot;:1,&quot;name&quot;:&quot;Волгоград&quot;}, {&quot;id&quot;:2,&quot;name&quot;:&quot;Москва&quot;}, {&quot;id&quot;:3,&quot;name&quot;:&quot;Минск&quot;}, {&quot;id&quot;:4,&quot;name&quot;:&quot;Мурманск&quot;} ] }
  26. 26. Ajax Получаем результат:
  27. 27. Выпуск в эксплуатацию В пакете Dojo Toolkit поставляется утилита ShrinkSafe (Java), которая реализует следующие функции: <ul><li>Уменьшение количества HTTP-запросов </li></ul><ul><ul><li>Объедение файлов с классами, шаблонами, языковыми данными </li></ul></ul><ul><li>Уменьшение размера JavaScript-файлов </li></ul><ul><ul><li>Удаление комментариев и пробелов </li></ul></ul><ul><ul><li>Сокращение наименований переменных </li></ul></ul><ul><li>CSS-оптимизация </li></ul><ul><ul><li>Объединение @import-файлов в один </li></ul></ul><ul><ul><li>Удаление комментариев </li></ul></ul><ul><li>Опции StripConsole </li></ul><ul><li>X-Domain-сборки (свой CDN) </li></ul>
  28. 28. Выпуск в эксплуатацию Для утилиты ShrinkSafe требуется 2 вида файлов: <ul><li>Слои сборки </li></ul><ul><ul><li>Определяет состав js- компонентов, которые подготавливаются к эксплуатации </li></ul></ul><ul><li>Профили сборки </li></ul><ul><ul><li>Содержат конфигурацию действия по оптимизации </li></ul></ul>Смотри подробнее: http://docs.dojocampus.org/build/index
  29. 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. 30. Выпуск в эксплуатацию Слой сборки: dojo.provide(&quot;custom.main&quot;); (function(){ dojo.require(&quot;dojo.io.script&quot;); dojo.require(&quot;dojo.fx&quot;); dojo.require(&quot;dijit.form.Button&quot;); })();
  31. 31. Выпуск в эксплуатацию Профиль сборки: dependencies = { action:&quot;release&quot;, optimize:&quot;shrinksafe&quot;, layerOptimize:&quot;shrinksafe&quot;, copyTests:false, loader:&quot;default&quot;, cssOptimize:&quot;comments&quot;, releaseName:&quot;custom&quot;, layers:[{ name:&quot;custom.main.js&quot;, layerDependencies:[], dependencies:[&quot;custom.main&quot;] }], prefixes:[ [&quot;custom&quot;,&quot;../custom&quot;], [&quot;dojo&quot;,&quot;../dojo&quot;], [&quot;dijit&quot;,&quot;../dijit&quot;] ] };
  32. 32. Планы на будущее <ul><li>Расширенная поддержка Dijit- компонентов </li></ul><ul><ul><li>http://framework.zend.com/wiki/display/ZFPROP/Zend_Dojo+-+Extended+Dijit+Support+-+Matthew+Weier+O%27Phinney </li></ul></ul><ul><ul><ul><li>dijit.ColorPalette </li></ul></ul></ul><ul><ul><ul><li>dijit.Dialog </li></ul></ul></ul><ul><ul><ul><li>dijit.Menu </li></ul></ul></ul><ul><ul><ul><ul><li>dijit.ProgressBar </li></ul></ul></ul></ul><ul><ul><ul><ul><li>dijit.TitlePane </li></ul></ul></ul></ul><ul><ul><ul><ul><li>dijit.Tooltip </li></ul></ul></ul></ul><ul><ul><ul><ul><li>dijit.TooltipDialog </li></ul></ul></ul></ul><ul><ul><ul><ul><li>dijit.Tree </li></ul></ul></ul></ul><ul><ul><ul><ul><li>dijit.form.MultiSelect </li></ul></ul></ul></ul><ul><li>Поддержка dojox.grid </li></ul><ul><ul><li>http://framework.zend.com/wiki/display/ZFPROP/Zend_Dojo+-+dojox.grid.DataGrid+Support+-+Matthew+Weier+O%27Phinney </li></ul></ul><ul><li>Ваши идеи? </li></ul>
  33. 33. ZF + jQuery
  34. 34. Настройка окружения Типичный код в <head> секции для настройки jQuery : <link href=&quot;/jquery/css/ui-lightness/jquery-ui-1.8.custom.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; rel=&quot;stylesheet&quot;> <script type=&quot;text/javascript&quot; src=&quot;/jquery/js/jquery-1.4.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;/jquery/js/jquery-ui-1.8.custom.min.js&quot;></script>
  35. 35. Настройка окружения Настройка с помощью jQuery() view- хелпера Во время инициализации: Указываем в макете: $view -> addHelperPath ( &quot;ZendX/JQuery/View/Helper&quot; ,  &quot;ZendX_JQuery_View_Helper &quot; ); $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' );
  36. 36. Настройка окружения Настройка с помощью плагина инициализации ресурса jQuery В макете указываем: <?=$this -> jQuery () ?> В application.ini указываем: pluginPaths.ZendX_Application_Resource_ = &quot;ZendX/Application/Resource&quot; resources.jquery.localpath = &quot;/jquery/js/jquery-1.4.2.min.js&quot; resources.jquery.stylesheet = &quot;/jquery/…/jquery-ui-1.8.custom.css&quot; resources.jquery.uilocalpath = &quot;/jquery/js/jquery-ui-1.8.custom.min.js&quot;
  37. 37. Настройка окружения Доступная функциональность jQuery() view- хелпера - Установка и использование cdn- версий jQuery и jQuery UI - Использование ssl с cdn - Установка локальных путей к jQuery и jQuery UI - Добавление javascript- кода для onLoad событий в секции <head> - Добавление javascript- файлов в секци <head> - Добавление javascript- кода в секцию <head> - Добавление файлов стилей
  38. 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. 39. Работа с виджетами View- хелперы
  40. 40. Работа с виджетами View- хелперы
  41. 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. 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. 43. Работа с виджетами Элементы форм $subForm1 -> addElement ( 'DatePicker' ,  'datePicker1' , array(      &quot;label&quot;  =>  &quot;Date Picker:&quot; ,      'JQueryParam'  => array( 'dateFormat'  =>  'dd.mm.yy' ) )); $subForm2 -> addElement ( 'Slider' ,  'slider1' , array(      &quot;label&quot;  =>  &quot;Slider:&quot; ,      'JQueryParams'  => array( 'defaultValue'  =>  '75' ) )); $subForm2 -> addElement ( 'AutoComplete' ,  'acl' , array(      &quot;label&quot;  =>  &quot;Autocomplete:&quot; ,  'JQueryParams'  => array(          'source'  => array(              'New York' ,  'Berlin' ,  'Bern' ,  'Boston'          )     ) )); - Добавляем элементы в суб-формы
  44. 44. Работа с виджетами <ul><li>Элементы форм </li></ul><ul><ul><li>AutoComplete ( >= 1.8 ) </li></ul></ul><ul><ul><li>ColorPicker ( 1.6 alpha? ) </li></ul></ul><ul><ul><li>DatePicker </li></ul></ul><ul><ul><li>Slider </li></ul></ul><ul><ul><li>Spinner ( 1.6 alpha? ) </li></ul></ul><ul><li>Виджеты компоновки </li></ul><ul><ul><li>AccordionContainer </li></ul></ul><ul><ul><li>Accordion Pane </li></ul></ul><ul><ul><li>DialogContainer </li></ul></ul><ul><ul><li>TabContainer </li></ul></ul><ul><ul><li>TabPain </li></ul></ul><ul><li>AjaxLink </li></ul>
  45. 45. Планы на будущее <ul><li>Поддержка компонента jqGrid </li></ul><ul><ul><li>http://framework.zend.com/wiki/display/ZFPROP/ZendX_JQuery_Jqgrid+-+Jason+Lentink </li></ul></ul><ul><li>Ваши идеи??? </li></ul>
  46. 46. Подробнее? <ul><li>Dojo Toolkit </li></ul><ul><ul><li>http://dojotoolkit.org </li></ul></ul><ul><ul><li>http://docs.dojocampus.org/ </li></ul></ul><ul><li>jQuery и jQuery UI </li></ul><ul><ul><li>http://jquery.com/ </li></ul></ul><ul><ul><li>http://jqueryui.com/ </li></ul></ul><ul><li>Zend Framework </li></ul><ul><ul><li>http://framework.zend.com/manual/en/zend.dojo.html </li></ul></ul><ul><ul><li>http://framework.zend.com/manual/en/zendx.jquery.html </li></ul></ul>
  47. 47. Мастерклассы по JavaScript <ul><li>В Питере! – в конце мая </li></ul><ul><li>Ведущий: Илья Кантор </li></ul><ul><ul><li>Создатель ресурса: javascript.ru </li></ul></ul><ul><ul><li>В прошлом – один из разрабочиков Dojo Toolkit </li></ul></ul><ul><li>Темы мастер-классов: </li></ul><ul><ul><li>Профессиональное программирование JavaScript </li></ul></ul><ul><ul><li>Сложный Ajax и Comet </li></ul></ul><ul><ul><li>Клиентская оптимизация </li></ul></ul><ul><ul><li>Секреты jQuery </li></ul></ul><ul><li>Подробнее: http://javascript.ru/mk </li></ul>
  48. 48. Вопросы ? <ul><li>[email_address] </li></ul><ul><li>http://twitter.com/georgyturevich </li></ul>Туревич Георгий, ведущий веб-программист Wizartech

×