Who dafuq are you?
What are we going to talk            about?1. Introducing to drupal.js2. Working with javascript libraries and jQuery3. Us...
What is drupal.jsdrupal.js is a tool who provided by the Drupal.It handles with the communication between Drupal to our sc...
theme        var   Drupal             other                                      Drupal.encodePath ()                     ...
Drupal.themeHow do we define a theme?Dupal.theme.prototype.displayName = function(name, url) {  return <a href=" + url + "...
Drupal.settingsBuilt-in settings:   base_path, pathPrefix …How to define from PHP?  drupal_add_js( array(myModule => array...
Drupal.behaviorsHow to define a new behavior?    Drupal.behaviors.behaviorName = {      attach: function (context, setting...
Drupal.localeDrupal.t(string, args)Drupal.format_plural(count, singlar, palural, args)
Drupal.localevar args={};args[“%username”] = “Drupaler”;Drupal.t(“hey %username”, args)
Managing scriptsIn Drupal 7 the type of the scripts splits into three groups:   1      Library              drupal_add_js(...
drupal_add_jsdrupal_add_js(misc/collapse.js);drupal_add_js(jQuery(document).ready(function () { alert("Hello!"); });, inli...
And even much complexOptions:   • Type – file, inline, external, setting   • Scope – header or footer   • Weight – differe...
.info filesWe can also add the script in the module and theme .info files:       scripts[] = somescript.js
Overriding       We can also override other additions of scriptsfunction hook_js_alter(&$javascript) {    $javascript[misc...
Working with librariesLibraries are “master scripts” who help us to build our applications.For example:    • jQuery    • m...
Defining new libraryWe can define new libraries by the hook_library()function system_library() {  …  $libraries[vertical-t...
Adding a libraryWe can easily can add our library        drupal_add_library(‘system, vertical-tabs);
Using jQuerySince Drupal 7 released, we use namespaces!The namespaces stands to avoiding conflicts with other js library.....
Using jQueryUsing namespace is simple:       (function   ($) {               // All your code here               // And no...
Useful tricks!You can filter a script by the class!if($("#node-756722").length) {         // do something}The module conte...
Useful tricks!Also, the html5 standard allows you to store data via the markup! (you canactually cache Ajax easily!).We us...
Drupal Ajax FrameworkSince Drupal 7, there is a powerful framework in Drupal who handle with Ajax.The framework originally...
Drupal Ajax FrameworkHow it works? <Array>        <JSON>   Ajax   <JSON>        Javascript                                ...
Array of commands:         Drupal Ajax Framework              array(                 command =>                 method => ...
Drupal Ajax Framework                { command: ‘insert’, method: ‘html’,                  selector: ‘#my_div’, data: ‘hel...
Drupal Ajax FrameworkCommands:How it works?    $(“my_div”).html(“hello world!”); <Array>        <JSON>       Ajax     <JSO...
Drupal Ajax FrameworkHow it works? <Array>        <JSON>   Ajax   <JSON>        Javascript                                ...
Drupal Ajax FrameworkMain principle:                          “Graceful degradation”If javascript is disabled, the functio...
Simple Ajax• Create a simple link    • Use href for the path of the menu callback    • Use “use-ajax” class• Build a menu ...
Simple Ajax<a href=“drupal_and_js/nojs/simple_page” class=“use-ajax”>link</a>You MUST add the ajax library..   drupal_add_...
Simple AjaxThan we should build our menu callbackfunction my_simple_page($js) {  if($js=="ajax") {    $cmds   = array();  ...
Simple AjaxThan we should build our menu callbackfunction my_simple_page($js) {  if($js=="ajax") {    $cmds   = array();  ...
Simple AjaxThan we should build our menu callbackfunction my_simple_page($js) {  if($js=="ajax") {    $cmds   = array();  ...
Simple AjaxThan we should build our menu callbackfunction my_simple_page($js) {  if($js=="ajax") {    $cmds   = array();  ...
Simple AjaxThan we should build our menu callback                             $(“#content .content”).html(“Hey I am ajax d...
Simple AjaxThan we should build our menu callbackfunction my_simple_page($js) {  if($js=="ajax") {    $cmds   = array();  ...
Ajax FormsAjax Form is a integrally of the Drupal form API.Every Ajax request the whole form is rebuilt.The callback retri...
Ajax FormsWe should add a #ajax parameter to the element who call the ajax.In this parameter we will define:    • PHP call...
Ajax Forms$form[select_number] = array(  #type => select,  #ajax => array(     callback => my_simple_ajax_callback,     wr...
Ajax Forms$form[select_number] = array(  #type => select,  #ajax => array(     callback => my_simple_ajax_callback,     wr...
Ajax Formsfunction my_simple_ajax_callback($form, $form_state) {  return $form[text_place];}
Ajax Formsfunction my_simple_ajax_callback($form, $form_state) {  return $form[text_place];}$form[text_place] = array(    ...
Notice!Changes to the form must made in the form builder!
Using native ajaxWe can call to an ajax script without the Ajax framework by defining itwithin the hook_theme: function my...
Using native ajaxWe can call to an ajax script without the Ajax framework by defining itwithin the hook_theme: function my...
Using native ajaxThen we can access it via the Ajax:var ajax_url =Drupal.settings.basePath+Drupal.encodePath("ajax/node/11...
Using native ajaxThen we can access it via the Ajax:var ajax_url =Drupal.settings.basePath+Drupal.encodePath("ajax/node/11...
Questions?
Thank you!
Resources & see moreAbout javascript localizationManaging javascript in Drupal 7JavaScript Theme Functions in Drupal
Drupal & javascript
Drupal & javascript
Drupal & javascript
Upcoming SlideShare
Loading in...5
×

Drupal & javascript

3,333

Published on

Powerpoint file(incl. animations!): http://db.tt/ktTDiQSG
Demostration module with example: http://db.tt/Ix2ovTno

This is the slides of the presentation "Drupal & Javascript" who presented at DrupalCamp Israel 2012.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,333
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Drupal & javascript

  1. 1. Drupal & javascript { Javascript developing with Drupal
  2. 2. Who dafuq are you?
  3. 3. What are we going to talk about?1. Introducing to drupal.js2. Working with javascript libraries and jQuery3. Using Drupal’s Ajax framework
  4. 4. What is drupal.jsdrupal.js is a tool who provided by the Drupal.It handles with the communication between Drupal to our script. js
  5. 5. theme var Drupal other Drupal.encodePath () Drupal.checkPlain() … settings local (localization) behaviors
  6. 6. Drupal.themeHow do we define a theme?Dupal.theme.prototype.displayName = function(name, url) { return <a href=" + url + "> + name + </a>;}How do we use a theme?Drupal.theme(displayName, name, url);
  7. 7. Drupal.settingsBuilt-in settings: base_path, pathPrefix …How to define from PHP? drupal_add_js( array(myModule => array(key => value)), setting’ );How we retrieve from javascript? Drupal.settings.myModule.key
  8. 8. Drupal.behaviorsHow to define a new behavior? Drupal.behaviors.behaviorName = { attach: function (context, settings) { //your function over here } };
  9. 9. Drupal.localeDrupal.t(string, args)Drupal.format_plural(count, singlar, palural, args)
  10. 10. Drupal.localevar args={};args[“%username”] = “Drupaler”;Drupal.t(“hey %username”, args)
  11. 11. Managing scriptsIn Drupal 7 the type of the scripts splits into three groups: 1 Library drupal_add_js() 2 Module 3 Theme *.info
  12. 12. drupal_add_jsdrupal_add_js(misc/collapse.js);drupal_add_js(jQuery(document).ready(function () { alert("Hello!"); });, inline);drupal_add_js(http://example.com/example.js, external);
  13. 13. And even much complexOptions: • Type – file, inline, external, setting • Scope – header or footer • Weight – different than the defaults. • More..
  14. 14. .info filesWe can also add the script in the module and theme .info files: scripts[] = somescript.js
  15. 15. Overriding We can also override other additions of scriptsfunction hook_js_alter(&$javascript) { $javascript[misc/jquery.js][data] = drupal_get_path(module, jquery_update) . /jquery.js;}
  16. 16. Working with librariesLibraries are “master scripts” who help us to build our applications.For example: • jQuery • mooTools • jQuery plugins
  17. 17. Defining new libraryWe can define new libraries by the hook_library()function system_library() { … $libraries[vertical-tabs] = array( title => Vertical Tabs, website => http://drupal.org/node/323112, ‘version => 1.0, js => array(misc/vertical-tabs.js => array()), css => array(misc/vertical-tabs.css => array()), ); return $libraries;}
  18. 18. Adding a libraryWe can easily can add our library drupal_add_library(‘system, vertical-tabs);
  19. 19. Using jQuerySince Drupal 7 released, we use namespaces!The namespaces stands to avoiding conflicts with other js library.. that’s mean we can use other libraries like mooTools!
  20. 20. Using jQueryUsing namespace is simple: (function ($) { // All your code here // And now you can use $() instead of jQuery()! }) (jQuery);
  21. 21. Useful tricks!You can filter a script by the class!if($("#node-756722").length) { // do something}The module context can also help to define specific classes!
  22. 22. Useful tricks!Also, the html5 standard allows you to store data via the markup! (you canactually cache Ajax easily!).We use the “data-*” attribute.$("#my_changed_div").attr(“data-maximaized", data);
  23. 23. Drupal Ajax FrameworkSince Drupal 7, there is a powerful framework in Drupal who handle with Ajax.The framework originally taken from Chaos Tools(ctools).Its especially useful for forms.The idea is “programming only PHP”Use your PHP to tell javascript what to do.
  24. 24. Drupal Ajax FrameworkHow it works? <Array> <JSON> Ajax <JSON> Javascript js
  25. 25. Array of commands: Drupal Ajax Framework array( command => method => insert, html, selector=> #my_div, data => helloHow it works? world!, ); <Array> <JSON> Ajax <JSON> Javascript js
  26. 26. Drupal Ajax Framework { command: ‘insert’, method: ‘html’, selector: ‘#my_div’, data: ‘hello world!’ }How it works? <Array> <JSON> Ajax <JSON> Javascript js
  27. 27. Drupal Ajax FrameworkCommands:How it works? $(“my_div”).html(“hello world!”); <Array> <JSON> Ajax <JSON> Javascript js
  28. 28. Drupal Ajax FrameworkHow it works? <Array> <JSON> Ajax <JSON> Javascript js
  29. 29. Drupal Ajax FrameworkMain principle: “Graceful degradation”If javascript is disabled, the functionality still works well.
  30. 30. Simple Ajax• Create a simple link • Use href for the path of the menu callback • Use “use-ajax” class• Build a menu callback • /nojs/ variation – for javascript disabled • /ajax/ variation – for ajax loading
  31. 31. Simple Ajax<a href=“drupal_and_js/nojs/simple_page” class=“use-ajax”>link</a>You MUST add the ajax library.. drupal_add_library(system, drupal.ajax);
  32. 32. Simple AjaxThan we should build our menu callbackfunction my_simple_page($js) { if($js=="ajax") { $cmds = array(); $cmds[] = ajax_command_html("#content .content", "Hey I am ajax data!"); return array(#type=>ajax, #commands=>$cmds); } else return "Hello no-js!";}
  33. 33. Simple AjaxThan we should build our menu callbackfunction my_simple_page($js) { if($js=="ajax") { $cmds = array(); $cmds[] = ajax_command_html("#content .content", "Hey I am ajax data!"); return array(#type=>ajax, #commands=>$cmds); } else return "Hello no-js!";}
  34. 34. Simple AjaxThan we should build our menu callbackfunction my_simple_page($js) { if($js=="ajax") { $cmds = array(); $cmds[] = ajax_command_html("#content .content", "Hey I am ajax data!"); return array(#type=>ajax, #commands=>$cmds); } else return "Hello no-js!";}
  35. 35. Simple AjaxThan we should build our menu callbackfunction my_simple_page($js) { if($js=="ajax") { $cmds = array(); $cmds[] = ajax_command_html("#content .content", "Hey I am ajax data!"); return array(#type=>ajax, #commands=>$cmds); } else return "Hello no-js!";}
  36. 36. Simple AjaxThan we should build our menu callback $(“#content .content”).html(“Hey I am ajax data!”);function my_simple_page($js) { if($js=="ajax") { $cmds = array(); $cmds[] = ajax_command_html("#content .content", "Hey I am ajax data!"); return array(#type=>ajax, #commands=>$cmds); } else return "Hello no-js!";}
  37. 37. Simple AjaxThan we should build our menu callbackfunction my_simple_page($js) { if($js=="ajax") { $cmds = array(); $cmds[] = ajax_command_html("#content .content", "Hey I am ajax data!"); return array(#type=>ajax, #commands=>$cmds); } else return "Hello no-js!";}
  38. 38. Ajax FormsAjax Form is a integrally of the Drupal form API.Every Ajax request the whole form is rebuilt.The callback retrieves only the changed part.
  39. 39. Ajax FormsWe should add a #ajax parameter to the element who call the ajax.In this parameter we will define: • PHP callback • Wrapper – who will replaced by the JS(an ID of the warpper!) • Method – replace, html, etc.. • Path, effect, event, and much more..
  40. 40. Ajax Forms$form[select_number] = array( #type => select, #ajax => array( callback => my_simple_ajax_callback, wrapper => text_div, method => html, ), …)$form[text_place] = array( "#markup" => t("You choose @number", $args), "#prefix" => <div id="text_div">, "#suffix" => </div>,);
  41. 41. Ajax Forms$form[select_number] = array( #type => select, #ajax => array( callback => my_simple_ajax_callback, wrapper => text_div, method => html, ), …)$form[text_place] = array( "#markup" => t("You choose @number", $args), "#prefix" => <div id="text_div">, "#suffix" => </div>,);
  42. 42. Ajax Formsfunction my_simple_ajax_callback($form, $form_state) { return $form[text_place];}
  43. 43. Ajax Formsfunction my_simple_ajax_callback($form, $form_state) { return $form[text_place];}$form[text_place] = array( "#markup" => t("You choose @number", $args), "#prefix" => <div id="text_div">, "#suffix" => </div>,);
  44. 44. Notice!Changes to the form must made in the form builder!
  45. 45. Using native ajaxWe can call to an ajax script without the Ajax framework by defining itwithin the hook_theme: function myhook_menu() { return array( ajax/node/%node => array( … delivery callback => ajax_deliver, … ); )
  46. 46. Using native ajaxWe can call to an ajax script without the Ajax framework by defining itwithin the hook_theme: function myhook_menu() { return array( ajax/node/%node => array( … delivery callback => ajax_deliver, … ); )
  47. 47. Using native ajaxThen we can access it via the Ajax:var ajax_url =Drupal.settings.basePath+Drupal.encodePath("ajax/node/11");$.getJSON(ajax_url, function(json) { var data=json[1][data];}
  48. 48. Using native ajaxThen we can access it via the Ajax:var ajax_url =Drupal.settings.basePath+Drupal.encodePath("ajax/node/11");$.getJSON(ajax_url, function(json) { var data=json[1][data];}
  49. 49. Questions?
  50. 50. Thank you!
  51. 51. Resources & see moreAbout javascript localizationManaging javascript in Drupal 7JavaScript Theme Functions in Drupal

×