• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Drupal & AJAX. Drupalcamp Finland 2010
 

Drupal & AJAX. Drupalcamp Finland 2010

on

  • 4,466 views

Drupal & AJAX, the new way. Presentation of David Corbacho ( Drupro.com) for the Drupalcamp Finland 2010 http://corbacho.info

Drupal & AJAX, the new way. Presentation of David Corbacho ( Drupro.com) for the Drupalcamp Finland 2010 http://corbacho.info

Statistics

Views

Total Views
4,466
Views on SlideShare
3,968
Embed Views
498

Actions

Likes
1
Downloads
56
Comments
0

5 Embeds 498

http://www.drupro.com 263
http://raselkabir.wordpress.com 197
http://www.drupro.fi 35
http://www.slideshare.net 2
http://static.slidesharecdn.com 1

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

    Drupal & AJAX. Drupalcamp Finland 2010 Drupal & AJAX. Drupalcamp Finland 2010 Presentation Transcript

    • Drupal & AJAXThe New Way
      Presentedby David Corbacho Roman,
      DrupalSpecialist at Drupro
      May 28, 2009
    • AJAX
      Asynchronous Javascript and XML
      Let’stalkabout
      • AJAX an approach that involves HTML/XHTML, CSS, DOM, the XMLHttpRequest object, JSON and Javascriptglueing all these together.
      • jQuery’shigherlevelabstraction of AJAX.
      • Contrib module CTools, and the new D7 AJAX Framework in corethataffectsalsototheForm API (FAPI), replacingtheDrupal 6’s AHAH.
    • Whydid I enter in thissession?
    • AJAX evolution
      Why Ctools?
      Demo!
    • Before AJAX
    • 6 years of AJAX 2004- 2005 - 2006 – 2007 – 2008 - 2009 – 2010
      Google beta apps
      • Gmail
      • Google Suggest
      • Google Maps
      Websites behaving like desktop applications, thanks to the XMLHTTPRequest Object.
    • 6 years of AJAX 2004 - 2005- 2006 – 2007 – 2008 - 2009 – 2010
      Jesse James Garrett gives a name to this combination of tecnologies.
    • 6 years of AJAX 2004 - 2005 - 2006– 2007 – 2008 - 2009 – 2010
    • 6 years of AJAX 2004 - 2005 - 2006 – 2007– 2008 - 2009 – 2010
      Drupal 6 released!
      Includes jQuery for the first time.
      NathanHaug – quicksketch – developes AHAH features
    • 6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008- 2009 – 2010
      CTools (Chaos Tools Suite) #26
      byEarl Miles – merlinofchaos
      Low-level tools for developers
      Multi-step forms
      Plugins
      Exportables

      One of themisAJAX responder
      butunknown,
      undocumented
      ignored
    • 6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009– 2010
      CTools’ AJAX Framework getsintoDrupal 7 core!
    • 6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
    • AJAX “old way”
      PHP Side
      JS Side
      Output a link with
      a CSS id/class
      Bind the link.
      Make Ajaxcall
      Loading..
      Callback functionthatreturns JSON/HTML
      Manage received data.
      Manipulate the DOM
      Handle AJAX errors
      Drupal.behaviors
    • AJAX “new way”
      PHP Side
      JS Side
      Output a link with
      .ctools-use-ajax
      (.use-ajax in D7)
      Bind the link.
      Make Ajaxcall
      Loading..
      Use macro commands
      like:
      ctools_ajax_command_append
      ajax_command_append (in D7)
      Manage received data.
      Manipulate the DOM
      Handle AJAX errors
      Drupal.behaviors
    • Why use the “new way”?
      Adventages of beingpart of Drupalcore
      Standarizedway of doingAjax
      D7 ~ D6
      Gracefuldegradation.
      Identifyingajaxlinks.
      Lesscodetowrite/maintain
      LetAjax Framework takescare of
      Loading…
      Allthejavascript.
      Drupal.behaviors()
      Errorsdisplay
      WarmCache*
    • Let’s demo
    • <divclass="item-list">
      <ul>
      <liclass="first“>
      <ahref="/dbox/drupro_demo_example/nojs/"
      class="ctools-use-ajax">Show Image</a>
      </li>
      <liclass="last">
      <ahref="/dbox/drupro_demo_remove/nojs/"
      class="ctools-use-ajax“>Remove Image</a>
      </li>
      </ul>
      </div>
      <divid="drupro-demo-area“> </div>
    • URL /drupro_demo_example/nojs
      function drupro_demo_example_ajax_response($js){
      $output = '<img src=“/sites/all/modules/drupro_demo/drupro.png“ />';
        if($js == 'ajax'){
      ctools_include('ajax');
      $commands = array();
      $commands[] = ctools_ajax_command_html('#drupro-demo-area', $output);
      ctools_ajax_render($commands);
      }else{ // no javascript
      return $output;
      }
      }
    • ctools_ajax_command_html
      replace
      prepend
      append
      after
      before
      remove
      changed
      css
      attr
      settings
      redirect
      reload
      submit
    • More onwww.drupro.com
      Roger Sanchez material aboutCtools Modal
      http://zroger.com/node/30
      http://zroger.com/node/31
      SF 2010 Ajax / CTools
      http://sf2010.drupal.org/conference/sessions/ajax-and-javascript-drupal7-developers
      http://www.archive.org/search.php?query=drupalcon%20sf%20ajax
      http://sf2010.drupal.org/conference/sessions/leveraging-chaos-tool-suite-module-development
      http://www.chapterthree.com/blog/josh_koenig/ajaxmodal_functionality_0_lines_javascript_200_more_chaos_magic
      CTools Paris 2009 bymerlinofchaos
      http://www.archive.org/details/LearntousetheCToolssuite
      http://www.angrydonuts.com/ctools-presentation-slides-and-example-code
      Module Examples
      http://drupal.org/project/examples
    • Thank you for your time!