Your SlideShare is downloading. ×
0
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Introduction to ZendX jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to ZendX jQuery

35,800

Published on

Published in: Technology
8 Comments
46 Likes
Statistics
Notes
No Downloads
Views
Total Views
35,800
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
8
Likes
46
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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)
  • Transcript

    • 1. Dennis De Cock PHPBenelux meeting, 2010, Leuven
    • 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. Sponsor
    • 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. 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. 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. 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. Folder structure
    • 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. 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. 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. 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. Example layout script
    • 14. Example bootstrap
    • 15. Example view script
    • 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. 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. Output to browser using local library
    • 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. 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. ZendX_jQuery UI themes <ul><li>Adding stylesheet: </li></ul>view->jQuery()->addStyleSheet($path)
    • 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. 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. ZendX_jQuery AjaxLink Output to browser
    • 25. Extending with plugins (example dataTables) <ul><li>Creating a grid in the view </li></ul>
    • 26. Extending with plugins (example dataTables) <ul><li>Output without css </li></ul>
    • 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. Extending with plugins (example dataTables) Your datagrid is converted into a dataTable with jQuery UI !
    • 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. Zend Form class example
    • 31. ZendX_jQuery Form layout script example
    • 32. ZendX_jQuery Form class example
    • 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. 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. ZendX_jQuery Layout Helpers <ul><li>dialogContainer </li></ul>
    • 36. ZendX_jQuery Layout Helpers <ul><li>dialogContainer code output to browser: </li></ul>
    • 37. ZendX_jQuery Layout Helpers <ul><li>dialogContainer result: </li></ul>
    • 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. ZendX_jQuery Layout Helpers Example Tabcontainer in layout script:
    • 40. ZendX_jQuery Layout Helpers Example Tabcontainer code output to browser:
    • 41. ZendX_jQuery Layout Helpers Example Tabcontainer result:
    • 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. 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. 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. Thank you! Questions?

    ×