• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to ZendX jQuery
 

Introduction to ZendX jQuery

on

  • 40,027 views

 

Statistics

Views

Total Views
40,027
Views on SlideShare
39,529
Embed Views
498

Actions

Likes
45
Downloads
0
Comments
8

20 Embeds 498

http://www.slideshare.net 243
http://gibalmeida.wordpress.com 193
http://paper.li 22
http://us-w1.rockmelt.com 8
http://www.linkedin.com 6
http://www.taaza.com 5
http://cars 4
http://www.decockict.be 3
http://news.taaza.com 2
http://twitter.com 2
http://slideclip.b-prep.com 1
https://blackboard.ualr.edu 1
http://dev.pircenter.org 1
https://si0.twimg.com 1
http://eong 1
http://localhost 1
http://www.mefeedia.com 1
http://static.slidesharecdn.com 1
http://webcache.googleusercontent.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

18 of 8 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Introduction to ZendX jQuery Presentation Transcript

  • Dennis De Cock PHPBenelux meeting, 2010, Leuven
  • About me
    • Independent consultant
    • Owner of DE COCK ICT, company specialized in PHP and .NET development
  • Sponsor
  • About this presentation
    • Facts
    • Requirements
    • Integration
    • View_Helper
    • UI
    • AjaxLink Helper
    • Extending with plugins
    • Form Helpers
    • Layout Helpers
  • Facts
    • Available as from version 1.7
    • Alternative for the existing Dojo Library integration
    • By default jQuery javascript dependencies are loaded from the Google Ajax library (UI support up to version 1.5.2)
    • View and form helpers already make use of the UI library 1.6
  • Requirements
    • ZendX_jQuery is available in the extras library (choose Zend Framework Full package from http://framework.zend.com/download/latest )
    • Latest jQuery UI library available from http://jqueryui.com/download
  • How to integrate
    • 3 ways to integrate into ZF applications:
      • View helpers to help setup the jQuery environment (both Core and UI)
      • jQuery specific Zend_view helpers
      • jQuery specific Zend_Form elements and decorators
  • Folder structure
  • ZendX_jQuery View Helper
    • Simplifies the setup of jQuery in your environment
    • Automatic loading of the core and UI library if necessary
    • Acts as a stack for all registered onLoad javascript statements and render them into the head segment of the html page
    • Possible to add additional stylesheet themes to use
  • Add jQuery to the View Helper
    • There are 2 ways to enable jQuery through its Extras Library:
      • Add jQuery to the view Helper Path:
      • Use ZendX_Jquery::enableView method:
    $view->addHelperPath(“ZendX/jQuery/View/Helper”, “ ZendX_Jquery_View_Helper”); ZendX_jQuery::enableView($view);
  • Method 1: add jQuery to the view helper path
    • Bootstrap code:
    • Within the head section of the layout script:
    $view = new Zend_View(); $view->addHelperPath('ZendX/JQuery/View/Helper', 'ZendX_JQuery_View_Helper'); echo $this->jQuery;
  • Method 2: ZendX_jQuery::enableview
    • Bootstrap code:
    • Within the head section of the layout script:
    $view = new Zend_View(); ZendX_JQuery::enableView($view); echo $this->jQuery;
  • Example layout script
  • Example bootstrap
  • Example view script
  • Output to browser
    • <!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>
    • <head>
    • <title>ZendX example</title>
    • <script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;></script>
    • <script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js&quot;></script>
    • <script type=&quot;text/javascript&quot;>
    • //<![CDATA[
    • $(document).ready(function() {
    • $(&quot;#dp1&quot;).datepicker({&quot;defaultDate&quot;:&quot;2010/02/24&quot;});
    • });
    • //]]>
    • </script>
    • </head>
    • <body>
    • <div id=&quot;content&quot;>
    • Pick your Date: <input type=&quot;text&quot; name=&quot;dp1&quot; id=&quot;dp1&quot; value=&quot;&quot; /></div> </body>
    • </html>
  • Local or CDN?
    • Using Google CDN (Content Distribution Network) no additional statements needed.
    • Using local paths:
    $view->jQuery()->setLocalPath('/js/jquery/js/jquery-1.3.2.min.js') ->setUiLocalPath(‘/js/jquery/js/jquery-ui-1.7.2.custom.min.js');
  • Output to browser using local library
  • Enable or disable jQuery
    • Layout.phtml code:
    • View script:
    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();
  • ZendX_jQuery UI themes
    • No online available themes out of the box (Default and Flora themes give hints for stylesheets used for each component)
    • Some methods that are available:
      • jQuery core library methods
        • Enable() - Disable()
        • isEnabled()
        • setLocalPath()
      • jQuery UI library methods
        • uiEnable() – uiDisable()
        • uiIsEnabled()
        • setUILocalPath()
      • jQuery Helper Utility methods
        • setView($view)
        • onLoadCaptureStart()
        • onLoadCaptureEnd()
        • addJavascriptFile()
    • Full list of methods available in the manual: http://framework.zend.com/manual/en/
  • ZendX_jQuery UI themes
    • Adding stylesheet:
    view->jQuery()->addStyleSheet($path)
  • ZendX_jQuery AjaxLink Helper
    • Offers creation of links with Ajax capabilities
    • Append simple jQuery effects on:
      • complete
      • beforeSend
    • More options available:
      • Update
      • Method
      • … . More in the manual!
  • ZendX_jQuery AjaxLink Helper example
    • In the view script:
    • Alternative url with parameters:
    <?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')); ?>
  • ZendX_jQuery AjaxLink Output to browser
  • Extending with plugins (example dataTables)
    • Creating a grid in the view
  • Extending with plugins (example dataTables)
    • Output without css
  • Extending with plugins (example dataTables)
    • Add the javascript file:
    • Specify additional javascript in seperate file:
    $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; } ); } );
  • Extending with plugins (example dataTables) Your datagrid is converted into a dataTable with jQuery UI !
  • ZendX_jQuery Form Helpers
    • Method signature for all form view helpers closely resemble the dojo view helpers
      • Datepicker($id, $value, $params, $attribs)
      • Slider($id, $value, $params, $attribs)
  • Zend Form class example
  • ZendX_jQuery Form layout script example
  • ZendX_jQuery Form class example
  • ZendX_jQuery Layout Helpers
    • Wide range of layout helpers available:
      • dialogContainer
      • tabContainer
      • accordionContainer
  • ZendX_jQuery Layout Helpers
    • Method signature:
      • dialogContainer($id, $content, $params, $attribs)
      • tabContainer ($id, $params, $attribs)
      • accordionContainer ($id, $params, $attribs)
  • ZendX_jQuery Layout Helpers
    • dialogContainer
  • ZendX_jQuery Layout Helpers
    • dialogContainer code output to browser:
  • ZendX_jQuery Layout Helpers
    • dialogContainer result:
  • ZendX_jQuery Layout Helpers
    • tabContainer & accordionContainer
      • Add panes dynamically:
        • tabContainer
          • tabPane($id, $content, $options)
        • accordionContainer
          • accordionPane($id, $content, $options)
  • ZendX_jQuery Layout Helpers Example Tabcontainer in layout script:
  • ZendX_jQuery Layout Helpers Example Tabcontainer code output to browser:
  • ZendX_jQuery Layout Helpers Example Tabcontainer result:
  • Advanced topics
    • More advanced techniques available in the manual:
      • jQuery NoConflict Mode (variable operation $ or $j)
      • Migrations (setCdnVersion, setUiCdnVersion, ..)
      • Subforms with the TabContainer decorator
  • Summary
    • ZendX_jQuery makes integration easy
    • Few requirements to setup
    • Time saver on javascript code
  • 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
  • Thank you! Questions?