Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Introduction to ZendX jQuery

37.338 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie

Introduction to ZendX jQuery

  1. 1. Dennis De Cock PHPBenelux meeting, 2010, Leuven
  2. 2. About me <ul><li>Independent consultant </li></ul><ul><li>Owner of DE COCK ICT, company specialized in PHP and .NET development </li></ul>
  3. 3. Sponsor
  4. 4. About this presentation <ul><li>Facts </li></ul><ul><li>Requirements </li></ul><ul><li>Integration </li></ul><ul><li>View_Helper </li></ul><ul><li>UI </li></ul><ul><li>AjaxLink Helper </li></ul><ul><li>Extending with plugins </li></ul><ul><li>Form Helpers </li></ul><ul><li>Layout Helpers </li></ul>
  5. 5. Facts <ul><li>Available as from version 1.7 </li></ul><ul><li>Alternative for the existing Dojo Library integration </li></ul><ul><li>By default jQuery javascript dependencies are loaded from the Google Ajax library (UI support up to version 1.5.2) </li></ul><ul><li>View and form helpers already make use of the UI library 1.6 </li></ul>
  6. 6. Requirements <ul><li>ZendX_jQuery is available in the extras library (choose Zend Framework Full package from http://framework.zend.com/download/latest ) </li></ul><ul><li>Latest jQuery UI library available from http://jqueryui.com/download </li></ul>
  7. 7. How to integrate <ul><li>3 ways to integrate into ZF applications: </li></ul><ul><ul><li>View helpers to help setup the jQuery environment (both Core and UI) </li></ul></ul><ul><ul><li>jQuery specific Zend_view helpers </li></ul></ul><ul><ul><li>jQuery specific Zend_Form elements and decorators </li></ul></ul>
  8. 8. Folder structure
  9. 9. ZendX_jQuery View Helper <ul><li>Simplifies the setup of jQuery in your environment </li></ul><ul><li>Automatic loading of the core and UI library if necessary </li></ul><ul><li>Acts as a stack for all registered onLoad javascript statements and render them into the head segment of the html page </li></ul><ul><li>Possible to add additional stylesheet themes to use </li></ul>
  10. 10. Add jQuery to the View Helper <ul><li>There are 2 ways to enable jQuery through its Extras Library: </li></ul><ul><ul><li>Add jQuery to the view Helper Path: </li></ul></ul><ul><ul><li>Use ZendX_Jquery::enableView method: </li></ul></ul>$view->addHelperPath(“ZendX/jQuery/View/Helper”, “ ZendX_Jquery_View_Helper”); ZendX_jQuery::enableView($view);
  11. 11. Method 1: add jQuery to the view helper path <ul><li>Bootstrap code: </li></ul><ul><li>Within the head section of the layout script: </li></ul>$view = new Zend_View(); $view->addHelperPath('ZendX/JQuery/View/Helper', 'ZendX_JQuery_View_Helper'); echo $this->jQuery;
  12. 12. Method 2: ZendX_jQuery::enableview <ul><li>Bootstrap code: </li></ul><ul><li>Within the head section of the layout script: </li></ul>$view = new Zend_View(); ZendX_JQuery::enableView($view); echo $this->jQuery;
  13. 13. Example layout script
  14. 14. Example bootstrap
  15. 15. Example view script
  16. 16. Output to browser <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;><html> </li></ul><ul><li><head> </li></ul><ul><li><title>ZendX example</title> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>//<![CDATA[ </li></ul><ul><li>$(document).ready(function() { </li></ul><ul><li>$(&quot;#dp1&quot;).datepicker({&quot;defaultDate&quot;:&quot;2010/02/24&quot;}); </li></ul><ul><li>}); </li></ul><ul><li>//]]> </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><div id=&quot;content&quot;> </li></ul><ul><li>Pick your Date: <input type=&quot;text&quot; name=&quot;dp1&quot; id=&quot;dp1&quot; value=&quot;&quot; /></div> </body> </li></ul><ul><li></html> </li></ul>
  17. 17. Local or CDN? <ul><li>Using Google CDN (Content Distribution Network) no additional statements needed. </li></ul><ul><li>Using local paths: </li></ul>$view->jQuery()->setLocalPath('/js/jquery/js/jquery-1.3.2.min.js') ->setUiLocalPath(‘/js/jquery/js/jquery-ui-1.7.2.custom.min.js');
  18. 18. Output to browser using local library
  19. 19. Enable or disable jQuery <ul><li>Layout.phtml code: </li></ul><ul><li>View script: </li></ul>if($this->jQuery()->isEnabled()){ $this->jQuery()->setLocalPath('/js/jquery/js/jquery-1.3.2.min.js') ->setUiLocalPath('/js/jquery/js/jquery-ui-1.7.2.custom.min.js') ->addStyleSheet('/js/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css'); echo $this->jQuery(); } $this->jQuery()->enable();
  20. 20. ZendX_jQuery UI themes <ul><li>No online available themes out of the box (Default and Flora themes give hints for stylesheets used for each component) </li></ul><ul><li>Some methods that are available: </li></ul><ul><ul><li>jQuery core library methods </li></ul></ul><ul><ul><ul><li>Enable() - Disable() </li></ul></ul></ul><ul><ul><ul><li>isEnabled() </li></ul></ul></ul><ul><ul><ul><li>setLocalPath() </li></ul></ul></ul><ul><ul><li>jQuery UI library methods </li></ul></ul><ul><ul><ul><li>uiEnable() – uiDisable() </li></ul></ul></ul><ul><ul><ul><li>uiIsEnabled() </li></ul></ul></ul><ul><ul><ul><li>setUILocalPath() </li></ul></ul></ul><ul><ul><li>jQuery Helper Utility methods </li></ul></ul><ul><ul><ul><li>setView($view) </li></ul></ul></ul><ul><ul><ul><li>onLoadCaptureStart() </li></ul></ul></ul><ul><ul><ul><li>onLoadCaptureEnd() </li></ul></ul></ul><ul><ul><ul><li>addJavascriptFile() </li></ul></ul></ul><ul><li>Full list of methods available in the manual: http://framework.zend.com/manual/en/ </li></ul>
  21. 21. ZendX_jQuery UI themes <ul><li>Adding stylesheet: </li></ul>view->jQuery()->addStyleSheet($path)
  22. 22. ZendX_jQuery AjaxLink Helper <ul><li>Offers creation of links with Ajax capabilities </li></ul><ul><li>Append simple jQuery effects on: </li></ul><ul><ul><li>complete </li></ul></ul><ul><ul><li>beforeSend </li></ul></ul><ul><li>More options available: </li></ul><ul><ul><li>Update </li></ul></ul><ul><ul><li>Method </li></ul></ul><ul><ul><li>… . More in the manual! </li></ul></ul>
  23. 23. ZendX_jQuery AjaxLink Helper example <ul><li>In the view script: </li></ul><ul><li>Alternative url with parameters: </li></ul><?php echo $this->ajaxLink(&quot;Test link&quot;, '/test', array( 'update' => '#container', 'beforeSend' => 'fadeout', 'complete' => 'fadein')); ?> <?php echo $this->ajaxLink(&quot;Test link&quot;, $this->url(array('controller'=> 'test', 'action'=>'index'), 'default', true), array( 'update' => '#container', 'beforeSend' => 'fadeout', 'complete' => 'fadein')); ?>
  24. 24. ZendX_jQuery AjaxLink Output to browser
  25. 25. Extending with plugins (example dataTables) <ul><li>Creating a grid in the view </li></ul>
  26. 26. Extending with plugins (example dataTables) <ul><li>Output without css </li></ul>
  27. 27. Extending with plugins (example dataTables) <ul><li>Add the javascript file: </li></ul><ul><li>Specify additional javascript in seperate file: </li></ul>$this->jQuery()->addJavascriptFile('/path/to/js/jquery.dataTables.js') $(document).ready(function() { $('#mydatagrid').dataTable( { &quot;bJQueryUI&quot;: true, &quot;sPaginationType&quot;: &quot;full_numbers&quot; } ); } );
  28. 28. Extending with plugins (example dataTables) Your datagrid is converted into a dataTable with jQuery UI !
  29. 29. ZendX_jQuery Form Helpers <ul><li>Method signature for all form view helpers closely resemble the dojo view helpers </li></ul><ul><ul><li>Datepicker($id, $value, $params, $attribs) </li></ul></ul><ul><ul><li>Slider($id, $value, $params, $attribs) </li></ul></ul>
  30. 30. Zend Form class example
  31. 31. ZendX_jQuery Form layout script example
  32. 32. ZendX_jQuery Form class example
  33. 33. ZendX_jQuery Layout Helpers <ul><li>Wide range of layout helpers available: </li></ul><ul><ul><li>dialogContainer </li></ul></ul><ul><ul><li>tabContainer </li></ul></ul><ul><ul><li>accordionContainer </li></ul></ul>
  34. 34. ZendX_jQuery Layout Helpers <ul><li>Method signature: </li></ul><ul><ul><li>dialogContainer($id, $content, $params, $attribs) </li></ul></ul><ul><ul><li>tabContainer ($id, $params, $attribs) </li></ul></ul><ul><ul><li>accordionContainer ($id, $params, $attribs) </li></ul></ul>
  35. 35. ZendX_jQuery Layout Helpers <ul><li>dialogContainer </li></ul>
  36. 36. ZendX_jQuery Layout Helpers <ul><li>dialogContainer code output to browser: </li></ul>
  37. 37. ZendX_jQuery Layout Helpers <ul><li>dialogContainer result: </li></ul>
  38. 38. ZendX_jQuery Layout Helpers <ul><li>tabContainer & accordionContainer </li></ul><ul><ul><li>Add panes dynamically: </li></ul></ul><ul><ul><ul><li>tabContainer </li></ul></ul></ul><ul><ul><ul><ul><li>tabPane($id, $content, $options) </li></ul></ul></ul></ul><ul><ul><ul><li>accordionContainer </li></ul></ul></ul><ul><ul><ul><ul><li>accordionPane($id, $content, $options) </li></ul></ul></ul></ul>
  39. 39. ZendX_jQuery Layout Helpers Example Tabcontainer in layout script:
  40. 40. ZendX_jQuery Layout Helpers Example Tabcontainer code output to browser:
  41. 41. ZendX_jQuery Layout Helpers Example Tabcontainer result:
  42. 42. Advanced topics <ul><li>More advanced techniques available in the manual: </li></ul><ul><ul><li>jQuery NoConflict Mode (variable operation $ or $j) </li></ul></ul><ul><ul><li>Migrations (setCdnVersion, setUiCdnVersion, ..) </li></ul></ul><ul><ul><li>Subforms with the TabContainer decorator </li></ul></ul>
  43. 43. Summary <ul><li>ZendX_jQuery makes integration easy </li></ul><ul><li>Few requirements to setup </li></ul><ul><li>Time saver on javascript code </li></ul>
  44. 44. Recommended reading jQuery UI 1.7: The User Interface Library for jQuery By: Dan Wellman Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques By: Jonathan Chaffer, Karl Swedberg http://devzone.zend.com/article/11760 Managing CSS and JavaScript files within a Zend Framework Application By: andybaird
  45. 45. Thank you! Questions?

×