Introduction to ZendX jQuery


Published on

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Working with php for 5 years Develop webapplications and services for medium sized companies Working with zend for 1 year Less javascript experience, ZendX_jquery is the ideal solution
  • Special thanks to macq electronique for the sponsored drinks
  • Integrated into zend as from version 1.7
  • CDN: limted UI support -> up to version 1.5.2 View helpers and form helpers already use version 1.6 (autocomplete, colorpicker, spinner, slider) Use local and keep version in structure
  • Can be done within the controller or the bootstrap Seperate stylesheet for components possible
  • Ajax capabilities to offer creation of links that do ajax requests and inject the response into a chosen DOM element Possibility to append simple jQuery effects to both link or response DOM element On complete: when ajax call is complete On beforeSend: executed right before ajax request is started Update: container to inject the response into Method: get or post request method
  • Also available:spinner (removed from 1.6), colorpicker( removed ui), autocomplete (as from version 1.8)
  • 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 ) </li></ul><ul><li>Latest jQuery UI library available from </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;;><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;;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&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: </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 Managing CSS and JavaScript files within a Zend Framework Application By: andybaird
    45. 45. Thank you! Questions?