Drupal & AJAX. Drupalcamp Finland 2010
-
Upload
david-corbacho-roman -
Category
Technology
-
view
3.990 -
download
0
description
Transcript of Drupal & AJAX. Drupalcamp Finland 2010
![Page 1: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/1.jpg)
Presented by David Corbacho Roman,
Drupal Specialist at Drupro
May 28, 2009
Drupal & AJAXThe New Way
![Page 2: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/2.jpg)
AJAXAsynchronous Javascript and XML
Let’s talk about
• AJAX an approach that involves HTML/XHTML, CSS, DOM, the
XMLHttpRequest object, JSON and Javascript glueing all these
together.
• jQuery’s higher level abstraction of AJAX.
• Contrib module CTools, and the new D7 AJAX Framework in core
that affects also to the Form API (FAPI), replacing the Drupal 6’s
AHAH.
![Page 3: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/3.jpg)
Why did I enter in this session?
![Page 4: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/4.jpg)
AJAX evolution
Why Ctools?
Demo!
![Page 5: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/5.jpg)
Before AJAX
![Page 6: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/6.jpg)
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
![Page 7: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/7.jpg)
Jesse James Garrett gives a name to
this combination of tecnologies.
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
![Page 8: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/8.jpg)
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
![Page 9: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/9.jpg)
Drupal 6 released!
Includes jQuery for the first time.
Nathan Haug – quicksketch – developes AHAH
features
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
![Page 10: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/10.jpg)
CTools (Chaos Tools Suite) #26by Earl Miles – merlinofchaos
Low-level tools for developers Multi-step forms Plugins Exportables
…
One of them is AJAX responderbut unknown,
undocumented ignored
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
![Page 11: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/11.jpg)
CTools’ AJAX Framework
gets into Drupal 7 core!
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
![Page 12: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/12.jpg)
Forms Links
Drupal 7 #ajax AJAX Framework
Drupal 6 #ahahCTool’s
AJAX Framework
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
![Page 13: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/13.jpg)
AJAX “old way”
Output a link witha CSS id/class
Bind the link.
Make Ajax call
Loading..
Callback function that returns JSON/HTML
Manage received data.
Manipulate the DOM
Handle AJAX errors
Drupal.behaviors
PHP Side JS Side
![Page 14: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/14.jpg)
AJAX “new way”
Output a link with.ctools-use-ajax(.use-ajax in D7)
Bind the link.
Make Ajax call
Loading..
Use macro commandslike:
ctools_ajax_command_appendajax_command_append (in D7)
PHP Side JS Side
Manage received data.
Manipulate the DOM
Handle AJAX errors
Drupal.behaviors
![Page 15: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/15.jpg)
Why use the “new way”?• Adventages of being part of Drupal core
• Standarized way of doing Ajax – D7 ~ D6– Graceful degradation.– Identifying ajax links.
• Less code to write/maintain
• Let Ajax Framework takes care of – Loading…– All the javascript.– Drupal.behaviors()– Errors display– Warm Cache*
![Page 17: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/17.jpg)
<div class="item-list"> <ul> <li class="first“> <a href="/dbox/drupro_demo_example/nojs/"
class="ctools-use-ajax">Show Image</a> </li> <li class="last"> <a href="/dbox/drupro_demo_remove/nojs/"
class="ctools-use-ajax“>Remove Image</a> </li>
</ul></div>
<div id="drupro-demo-area“> </div>
![Page 18: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/18.jpg)
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;
}}
![Page 19: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/19.jpg)
ctools_ajax_command_html
replace prepend appendafterbefore remove changedcss attrsettings redirect reload submit
![Page 20: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/20.jpg)
More on www.drupro.comRoger Sanchez material about Ctools 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_m
ore_chaos_magic
CTools Paris 2009 by merlinofchaos
http://www.archive.org/details/LearntousetheCToolssuite
http://www.angrydonuts.com/ctools-presentation-slides-and-example-code
Module Examples
http://drupal.org/project/examples
![Page 21: Drupal & AJAX. Drupalcamp Finland 2010](https://reader036.fdocuments.net/reader036/viewer/2022062300/5561f811d8b42a25488b4b63/html5/thumbnails/21.jpg)
Thank you for your time!