developing javascript widgets
DESCRIPTION
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.TRANSCRIPT
![Page 1: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/1.jpg)
Developing JavaScriptWidgets
Konstantin
Käfer
![Page 2: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/2.jpg)
Konstantin Käfer2
1
2
3
4
Functions
Drupal’s JavaScript facilities
Widgets
Debugging & Analyzing
![Page 3: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/3.jpg)
Konstantin Käfer
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
![Page 4: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/4.jpg)
Konstantin Käfer
function() { print("Passed function called");}
Functions (II)
var foo = function(callback) {
};
foo(
)();
foo.bar = "baz";
callback(); return function() { print("Returned function called"); };
4
![Page 5: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/5.jpg)
Konstantin Käfer
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
![Page 6: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/6.jpg)
Konstantin Käfer
Prototypal OOP (II)
‣ Function is constructor
‣ “Instances” have an implicit link to the base classvar Foo = function() { /* ... */ };Foo.prototype = { 'bar': function() { /* ... */ }};
var instance = new Foo();instance.bar();
Foo.prototype.baz = function() { /* ... */ };instance.baz();
6
![Page 7: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/7.jpg)
Konstantin Käfer
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.2js> (0).celsiusToFahrenheit();32
7
![Page 8: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/8.jpg)
Konstantin Käfer8
1
2
3
4
Functions
Drupal’s JavaScript facilities
Widgets
Debugging & Analyzing
![Page 9: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/9.jpg)
Konstantin Käfer
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
![Page 10: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/10.jpg)
Konstantin Käfer
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
![Page 11: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/11.jpg)
Konstantin Käfer
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
![Page 12: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/12.jpg)
Konstantin Käfer
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="mymodule"></div>');}
12
![Page 13: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/13.jpg)
Konstantin Käfer13
1
2
3
4
Functions
Drupal’s JavaScript facilities
Widgets
Debugging & Analyzing
![Page 14: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/14.jpg)
Konstantin Käfer
Compatibility
14
![Page 15: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/15.jpg)
Konstantin Käfer
Reusability
15
![Page 16: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/16.jpg)
Konstantin Käfer
Flexibility
16
![Page 17: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/17.jpg)
Konstantin Käfer
Encapsulation
17
![Page 18: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/18.jpg)
Konstantin Käfer
Speed
18
![Page 19: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/19.jpg)
Konstantin Käfer
Initializing
19
Drupal.behaviors.horizscroll = function(context) { $('.horizscroll:not(.horizscroll-processed)', context).each(function() { // <<< Initialize the horizscroll >>>
}).addClass('horizscroll-processed'); };
![Page 20: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/20.jpg)
Konstantin Käfer
Constructor
20
Drupal.horizscroll = function(options) { var that = this;
$.extend(this, options);
// Store references to elements. // Set first element as the "target item." // Initialize left and right buttons. // Initialize the button status.};
![Page 21: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/21.jpg)
Konstantin Käfer
Methods
21
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() { }};
![Page 22: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/22.jpg)
Konstantin Käfer22
1
2
3
4
Functions
Drupal’s JavaScript facilities
Widgets
Debugging & Analyzing
![Page 23: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/23.jpg)
Konstantin Käfer
‣ Advanced JavaScript console
‣ Logging to the console (console.log())
‣ DOM inspector
‣ JavaScript debugger (with backtrace!)
‣ Profile JavaScript activity
‣ http://getfirebug.com
23
![Page 24: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/24.jpg)
Konstantin Käfer
‣ JavaScript debugger for IE
‣ Free of charge
‣ Some configuration work needed
‣ http://msdn.microsoft.com/vstudio/express/vwd/
24
![Page 25: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/25.jpg)
Konstantin Käfer
WebDevHelper‣ JavaScript console for IE
‣ HTTP Logger
‣ JavaScript backtracer
‣ http://projects.nikhilk.net/WebDevHelper/Default.aspx
25
![Page 26: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/26.jpg)
Konstantin Käfer
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
![Page 28: Developing JavaScript Widgets](https://reader033.vdocument.in/reader033/viewer/2022052505/554ccf9db4c905d6488b470b/html5/thumbnails/28.jpg)
Konstantin Käfer
Further reading
28
‣ Example taken from“Front End Drupal”
‣ Pre-order on Amazon!
‣ Now on Safari Online
‣ In stores in April