Drupal & AJAX. Drupalcamp Finland 2010
?Download as PPTX, PDF?
1 like?1,348 views
Drupal & AJAX, the new way. Presentation of David Corbacho ( Drupro.com) for the Drupalcamp Finland 2010 http://corbacho.info
![URL /drupro_demo_example/nojsfunction drupro_demo_example_ajax_response($js){ $output = '<img src=/slideshow/drupro-dcfi-2010/4362083/¡°/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; }}](https://image.slidesharecdn.com/druprodcfi2010-100531061326-phpapp01/85/Drupal-AJAX-Drupalcamp-Finland-2010-21-320.jpg)
Drupal & AJAX. Drupalcamp Finland 2010
- 1. Drupal & AJAXThe New WayPresentedby David Corbacho Roman,DrupalSpecialist at DruproMay 28, 2009
- 2. AJAXAsynchronous Javascript and XML Let¡¯stalkaboutAJAX an approach that involves HTML/XHTML, CSS, DOM, the XMLHttpRequest object, JSON and Javascriptglueing all these together.
- 4. Contrib module CTools, and the new D7 AJAX Framework in corethataffectsalsototheForm API (FAPI), replacingtheDrupal 6¡¯s AHAH.Whydid I enter in thissession?
- 6. Before AJAX
- 7. 6 years of AJAX 2004- 2005 - 2006 ¨C 2007 ¨C 2008 - 2009 ¨C 2010Google beta appsGmail
- 9. Google MapsWebsites behaving like desktop applications, thanks to the XMLHTTPRequest Object.
- 10. 6 years of AJAX 2004 - 2005- 2006 ¨C 2007 ¨C 2008 - 2009 ¨C 2010Jesse James Garrett gives a name to this combination of tecnologies.
- 11. 6 years of AJAX 2004 - 2005 - 2006¨C 2007 ¨C 2008 - 2009 ¨C 2010
- 12. 6 years of AJAX 2004 - 2005 - 2006 ¨C 2007¨C 2008 - 2009 ¨C 2010Drupal 6 released!Includes jQuery for the first time.NathanHaug ¨C quicksketch ¨C developes AHAH features
- 13. 6 years of AJAX 2004 - 2005 - 2006 ¨C 2007 ¨C 2008- 2009 ¨C 2010CTools (Chaos Tools Suite) #26byEarl Miles ¨C merlinofchaosLow-level tools for developers Multi-step forms Plugins Exportables ¡One of themisAJAX responderbutunknown,undocumentedignored
- 14. 6 years of AJAX 2004 - 2005 - 2006 ¨C 2007 ¨C 2008 - 2009¨C 2010CTools¡¯ AJAX Framework getsintoDrupal 7 core!
- 15. 6 years of AJAX 2004 - 2005 - 2006 ¨C 2007 ¨C 2008 - 2009 ¨C 2010
- 16. AJAX ¡°old way¡±PHP SideJS Side Output a link witha CSS id/classBind the link.Make AjaxcallLoading..Callback functionthatreturns JSON/HTMLManage received data.Manipulate the DOMHandle AJAX errorsDrupal.behaviors
- 17. AJAX ¡°new way¡±PHP SideJS SideOutput a link with.ctools-use-ajax(.use-ajax in D7)Bind the link.Make AjaxcallLoading..Use macro commandslike:ctools_ajax_command_appendajax_command_append (in D7)Manage received data.Manipulate the DOMHandle AJAX errorsDrupal.behaviors
- 18. Why use the ¡°new way¡±?Adventages of beingpart of DrupalcoreStandarizedway of doingAjaxD7 ~ D6Gracefuldegradation.Identifyingajaxlinks.Lesscodetowrite/maintainLetAjax Framework takescare of Loading¡Allthejavascript.Drupal.behaviors()ErrorsdisplayWarmCache*
- 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/nojsfunction drupro_demo_example_ajax_response($js){ $output = '<img src=/slideshow/drupro-dcfi-2010/4362083/¡°/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_htmlreplace prependappendafterbefore remove changedcssattrsettings redirect reload submit
- 23. More onwww.drupro.comRoger Sanchez material aboutCtools Modal http://zroger.com/node/30http://zroger.com/node/31SF 2010 Ajax / CToolshttp://sf2010.drupal.org/conference/sessions/ajax-and-javascript-drupal7-developershttp://www.archive.org/search.php?query=drupalcon%20sf%20ajaxhttp://sf2010.drupal.org/conference/sessions/leveraging-chaos-tool-suite-module-developmenthttp://www.chapterthree.com/blog/josh_koenig/ajaxmodal_functionality_0_lines_javascript_200_more_chaos_magicCTools Paris 2009 bymerlinofchaoshttp://www.archive.org/details/LearntousetheCToolssuitehttp://www.angrydonuts.com/ctools-presentation-slides-and-example-codeModule Exampleshttp://drupal.org/project/examples
- 24. Thank you for your time!