Developing JavaScript Widgets

3,387 views

Published on

We'll discuss ways to develop reusable and flexible JavaScript components by leveraging JavaScript's full potential and using Drupal's lightweight JavaScript frameworks. We'll look at several JavaScript components and see how they were implemented and how they interact with each other.

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

No Downloads
Views
Total views
3,387
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
79
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Developing JavaScript Widgets

  1. Developing JavaScript Widgets Konstantin Käfer
  2. 1 Functions 2 Drupal’s JavaScript facilities 3 Widgets 4 Debugging & Analyzing 2 Konstantin Käfer
  3. Functions Functions are first class entities ‣ – Store in variables, pass as parameters, return from functions – Can be defined at any place Functions can contain properties ‣ Anonymous functions ‣ 3 Konstantin Käfer
  4. Functions (II) var foo = function(callback) { callback(); return function() { print(quot;Returned function calledquot;); }; }; foo(function() { print(quot;Passed function calledquot;); })(); foo.bar = quot;bazquot;; 4 Konstantin Käfer
  5. Prototypal OOP JavaScript doesn’t have classes ‣ Prototype of a function used as base class ‣ var Foo = function() { /* ... */ }; Foo.prototype = { 'bar': function() { /* ... */ }, 'baz': function() { /* ... */ } }; var instance = new Foo(); instance.bar(); instance.baz(); 5 Konstantin Käfer
  6. Prototypal OOP (II) Function is constructor ‣ “Instances” have an implicit link to the base ‣ class var Foo = function() { /* ... */ }; Foo.prototype = { 'bar': function() { /* ... */ } }; var instance = new Foo(); instance.bar(); Foo.prototype.baz = function() { /* ... */ }; instance.baz(); 6 Konstantin Käfer
  7. Prototypal OOP (III) Any objects can be extended/changed at any ‣ time Number.prototype.celsiusToFahrenheit = function() { return (this * 9 / 5) + 32; }; js> (34).celsiusToFahrenheit(); 93.2 js> (0).celsiusToFahrenheit(); 32 7 Konstantin Käfer
  8. 1 Functions 2 Drupal’s JavaScript facilities 3 Widgets 4 Debugging & Analyzing 8 Konstantin Käfer
  9. AJAX Callbacks In the menu system: ‣ $items['mymodule/js'] = array( 'title' => 'JavaScript callback', 'page callback' => 'mymodule_js', 'access callback' => TRUE, 'type' => MENU_CALLBACK, ); Menu callback: ‣ function mymodule_js() { // Generate $data... drupal_json($data); } 9 Konstantin Käfer
  10. Translation Similar to PHP ‣ Drupal.t('This is a string.'); ‣ Drupal.t('Do you really want to delete %object?', ‣ { '%object': object.name }); Drupal.formatPlural(count, ‣ '1 comment', '@count comments'); POT extractor and Drupal parse JavaScript files ‣ 10 Konstantin Käfer
  11. Behaviors All functions in Drupal.behaviors are executed ‣ onready (when the DOM is ready) Functions have to be non-destructive ‣ Functions get a context parameter to act on ‣ Advantage: Can be called later as well ‣ Drupal.behaviors.foo = function(context) { ‣ $('.foo:not(.foo-processed)', context).each( function() { … } ); }; 11 Konstantin Käfer
  12. Theming Theme functions for HTML code ‣ Advantage: Themes can change markup ‣ In the module’s JavaScript: ‣ var elem = Drupal.theme('mymodule'); $('body').append(elem); Drupal.theme.prototype.mymodule = function() { /*...*/ } In the theme’s JavaScript: ‣ Drupal.theme.mymodule = function() { return $('<div class=quot;mymodulequot;></div>'); } 12 Konstantin Käfer
  13. 1 Functions 2 Drupal’s JavaScript facilities 3 Widgets 4 Debugging & Analyzing 13 Konstantin Käfer
  14. Compatibility 14 Konstantin Käfer
  15. Reusability 15 Konstantin Käfer
  16. Flexibility 16 Konstantin Käfer
  17. Encapsulation 17 Konstantin Käfer
  18. Speed 18 Konstantin Käfer
  19. Initializing Drupal.behaviors.horizscroll = function(context) { $('.horizscroll:not(.horizscroll-processed)', context).each(function() { // <<< Initialize the horizscroll >>> }).addClass('horizscroll-processed'); }; 19 Konstantin Käfer
  20. Constructor Drupal.horizscroll = function(options) { var that = this; $.extend(this, options); // Store references to elements. // Set first element as the quot;target item.quot; // Initialize left and right buttons. // Initialize the button status. }; 20 Konstantin Käfer
  21. Methods Drupal.horizScroll.prototype = { // Update the button status based on the // position of the content. 'updateButtons': function() { }, // Moves the content box to an item. 'scrollToItem': function() { }, // Calculate the next target item. 'findTarget': function() { } }; 21 Konstantin Käfer
  22. 1 Functions 2 Drupal’s JavaScript facilities 3 Widgets 4 Debugging & Analyzing 22 Konstantin Käfer
  23. Advanced JavaScript console ‣ Logging to the console (console.log()) ‣ DOM inspector ‣ JavaScript debugger (with backtrace!) ‣ Profile JavaScript activity ‣ http://getfirebug.com ‣ 23 Konstantin Käfer
  24. JavaScript debugger for IE ‣ Free of charge ‣ Some configuration work needed ‣ http://msdn.microsoft.com/vstudio/express/ ‣ vwd/ 24 Konstantin Käfer
  25. WebDevHelper JavaScript console for IE ‣ HTTP Logger ‣ JavaScript backtracer ‣ http://projects.nikhilk.net/WebDevHelper/ ‣ Default.aspx 25 Konstantin Käfer
  26. JavaScript Lint Lint = tool for analyzing code ‣ Discovers sloppy coding ‣ Command line interface ‣ Use as pre-commit hook for <insert RCS> ‣ http://javascriptlint.com ‣ TextMate bundle: http://andrewdupont.net/ ‣ 2006/10/01/javascript-tools-textmate-bundle/ 26 Konstantin Käfer
  27. Thanks! Questions? Konstantin Käfer mail@kkaefer.com 27 Konstantin Käfer
  28. Further reading Example taken from ‣ “Front End Drupal” Pre-order on Amazon! ‣ Now on Safari Online ‣ In stores in April ‣ 28 Konstantin Käfer

×