Your SlideShare is downloading. ×
0
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Developing JavaScript Widgets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Developing JavaScript Widgets

2,563

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 …

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
2,563
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
78
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×