Drupal & AJAXThe New Way<br />Presentedby David Corbacho Roman,<br />DrupalSpecialist at Drupro<br />May 28, 2009<br />
AJAX<br />Asynchronous Javascript and XML <br />Let’stalkabout<br /><ul><li>AJAX an approach that involves HTML/XHTML, CSS...
jQuery’shigherlevelabstraction of AJAX.
Contrib module CTools, and the new D7 AJAX Framework in corethataffectsalsototheForm API (FAPI), replacingtheDrupal 6’s AH...
AJAX evolution<br />Why Ctools?<br />Demo!<br />
Before AJAX<br />
6 years of AJAX 2004- 2005 - 2006 – 2007 – 2008 - 2009 – 2010<br />Google beta apps<br /><ul><li>Gmail
Google Suggest
Google Maps</li></ul>Websites behaving like desktop applications, thanks to the XMLHTTPRequest Object.<br />
6 years of AJAX 2004 - 2005- 2006 – 2007 – 2008 - 2009 – 2010<br />Jesse James Garrett gives a name to this combination of...
6 years of AJAX 2004 - 2005 - 2006– 2007 – 2008 - 2009 – 2010<br />
6 years of AJAX 2004 - 2005 - 2006 – 2007– 2008 - 2009 – 2010<br />Drupal 6 released!<br />Includes jQuery for the first t...
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008- 2009 – 2010<br />CTools (Chaos Tools Suite) #26<br />byEarl Miles – merl...
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009– 2010<br />CTools’ AJAX Framework getsintoDrupal 7 core!<br />
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010<br />
AJAX “old way”<br />PHP Side<br />JS Side<br /> Output a link with<br />a CSS id/class<br />Bind the link.<br />Make Ajaxc...
AJAX “new way”<br />PHP Side<br />JS Side<br />Output a link with<br />.ctools-use-ajax<br />(.use-ajax in D7)<br />Bind t...
Why use the “new way”?<br />Adventages of beingpart of Drupalcore<br />Standarizedway of doingAjax<br />D7 ~ D6<br />Grace...
Let’s demo<br />
<divclass="item-list"><br />  <ul><br />     <liclass="first“><br />       <ahref="/dbox/drupro_demo_example/nojs/"<br />c...
URL   /drupro_demo_example/nojs<br />function drupro_demo_example_ajax_response($js){<br />   $output = '<img src=“/sites/...
Upcoming SlideShare
Loading in …5
×

Drupal & AJAX. Drupalcamp Finland 2010

4,047
-1

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,047
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
60
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Drupal & AJAX. Drupalcamp Finland 2010

  1. 1. Drupal & AJAXThe New Way<br />Presentedby David Corbacho Roman,<br />DrupalSpecialist at Drupro<br />May 28, 2009<br />
  2. 2. AJAX<br />Asynchronous Javascript and XML <br />Let’stalkabout<br /><ul><li>AJAX an approach that involves HTML/XHTML, CSS, DOM, the XMLHttpRequest object, JSON and Javascriptglueing all these together.
  3. 3. jQuery’shigherlevelabstraction of AJAX.
  4. 4. Contrib module CTools, and the new D7 AJAX Framework in corethataffectsalsototheForm API (FAPI), replacingtheDrupal 6’s AHAH.</li></li></ul><li>Whydid I enter in thissession?<br />
  5. 5. AJAX evolution<br />Why Ctools?<br />Demo!<br />
  6. 6. Before AJAX<br />
  7. 7. 6 years of AJAX 2004- 2005 - 2006 – 2007 – 2008 - 2009 – 2010<br />Google beta apps<br /><ul><li>Gmail
  8. 8. Google Suggest
  9. 9. Google Maps</li></ul>Websites behaving like desktop applications, thanks to the XMLHTTPRequest Object.<br />
  10. 10. 6 years of AJAX 2004 - 2005- 2006 – 2007 – 2008 - 2009 – 2010<br />Jesse James Garrett gives a name to this combination of tecnologies.<br />
  11. 11. 6 years of AJAX 2004 - 2005 - 2006– 2007 – 2008 - 2009 – 2010<br />
  12. 12. 6 years of AJAX 2004 - 2005 - 2006 – 2007– 2008 - 2009 – 2010<br />Drupal 6 released!<br />Includes jQuery for the first time.<br />NathanHaug – quicksketch – developes AHAH features<br />
  13. 13. 6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008- 2009 – 2010<br />CTools (Chaos Tools Suite) #26<br />byEarl Miles – merlinofchaos<br />Low-level tools for developers<br /> Multi-step forms<br /> Plugins<br /> Exportables<br /> …<br />One of themisAJAX responder<br />butunknown,<br />undocumented<br />ignored<br />
  14. 14. 6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009– 2010<br />CTools’ AJAX Framework getsintoDrupal 7 core!<br />
  15. 15. 6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010<br />
  16. 16. AJAX “old way”<br />PHP Side<br />JS Side<br /> Output a link with<br />a CSS id/class<br />Bind the link.<br />Make Ajaxcall<br />Loading..<br />Callback functionthatreturns JSON/HTML<br />Manage received data.<br />Manipulate the DOM<br />Handle AJAX errors<br />Drupal.behaviors<br />
  17. 17. AJAX “new way”<br />PHP Side<br />JS Side<br />Output a link with<br />.ctools-use-ajax<br />(.use-ajax in D7)<br />Bind the link.<br />Make Ajaxcall<br />Loading..<br />Use macro commands<br />like:<br />ctools_ajax_command_append<br />ajax_command_append (in D7)<br />Manage received data.<br />Manipulate the DOM<br />Handle AJAX errors<br />Drupal.behaviors<br />
  18. 18. Why use the “new way”?<br />Adventages of beingpart of Drupalcore<br />Standarizedway of doingAjax<br />D7 ~ D6<br />Gracefuldegradation.<br />Identifyingajaxlinks.<br />Lesscodetowrite/maintain<br />LetAjax Framework takescare of <br />Loading…<br />Allthejavascript.<br />Drupal.behaviors()<br />Errorsdisplay<br />WarmCache*<br />
  19. 19. Let’s demo<br />
  20. 20. <divclass="item-list"><br /> <ul><br /> <liclass="first“><br /> <ahref="/dbox/drupro_demo_example/nojs/"<br />class="ctools-use-ajax">Show Image</a><br /> </li><br /> <liclass="last"><br /> <ahref="/dbox/drupro_demo_remove/nojs/"<br />class="ctools-use-ajax“>Remove Image</a><br /> </li><br /></ul><br /></div><br /><divid="drupro-demo-area“> </div><br />
  21. 21. URL /drupro_demo_example/nojs<br />function drupro_demo_example_ajax_response($js){<br /> $output = '<img src=“/sites/all/modules/drupro_demo/drupro.png“ />';<br />   if($js == 'ajax'){<br /> ctools_include('ajax'); <br /> $commands = array(); <br /> $commands[] = ctools_ajax_command_html('#drupro-demo-area', $output); <br /> ctools_ajax_render($commands); <br /> }else{ // no javascript<br /> return $output; <br /> }<br />}<br />
  22. 22. ctools_ajax_command_html<br />replace <br />prepend<br />append<br />after<br />before <br />remove <br />changed<br />css<br />attr<br />settings <br />redirect <br />reload <br />submit<br />
  23. 23. More onwww.drupro.com<br />Roger Sanchez material aboutCtools Modal <br />http://zroger.com/node/30<br />http://zroger.com/node/31<br />SF 2010 Ajax / CTools<br />http://sf2010.drupal.org/conference/sessions/ajax-and-javascript-drupal7-developers<br />http://www.archive.org/search.php?query=drupalcon%20sf%20ajax<br />http://sf2010.drupal.org/conference/sessions/leveraging-chaos-tool-suite-module-development<br />http://www.chapterthree.com/blog/josh_koenig/ajaxmodal_functionality_0_lines_javascript_200_more_chaos_magic<br />CTools Paris 2009 bymerlinofchaos<br />http://www.archive.org/details/LearntousetheCToolssuite<br />http://www.angrydonuts.com/ctools-presentation-slides-and-example-code<br />Module Examples<br />http://drupal.org/project/examples<br />
  24. 24. Thank you for your time!<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×