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

1. Drupal & AJAXThe New Way Presentedby David Corbacho Roman, DrupalSpecialist at Drupro May 28, 2009

3. jQuery’shigherlevelabstraction of AJAX.

5. AJAX evolution Why Ctools? Demo!

6. Before AJAX

8. Google Suggest

9. Google MapsWebsites behaving like desktop applications, thanks to the XMLHTTPRequest Object.

10. 6 years of AJAX 2004 - 2005- 2006 – 2007 – 2008 - 2009 – 2010 Jesse James Garrett gives a name to this combination of tecnologies.

11. 6 years of AJAX 2004 - 2005 - 2006– 2007 – 2008 - 2009 – 2010

12. 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

13. 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

14. 6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009– 2010 CTools’ AJAX Framework getsintoDrupal 7 core!

15. 6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010

16. 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

17. 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

18. 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*

19. Let’s demo

20. <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>

21. 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; } }

22. ctools_ajax_command_html replace prepend append after before remove changed css attr settings redirect reload submit

23. 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

24. Thank you for your time!