Closure: Extend ui.DatePicker to highlight events

I got a change to play with the new Google Closure Library a bit, and since the DatePicker component is pretty nice, i figured i could enhance it a bit to suit a need i had some time ago: overlay data from a database, highlight the dates that correspond to events, and jump to the event’s page when clicking on a highlighted cell.

Example page
Example script

Step 1: provide the JSON events in HTML:

1
2
3
4
5

var events = [
    {date: '2009-11-05', url: 'http://www.example.com'},
    {date: '2009-11-07', url: 'http://www.example.com'},
    {date: '2009-11-10', url: 'http://www.example.com'}
];

Step 2: extend goog.ui.DatePicker:

1
2
3
4
5
6
7
8
9
10

goog.provide('goog.ui.EventsDatePicker');
 
goog.require('goog.ui.DatePicker');
 
goog.ui.EventsDatePicker = function(opt_events, opt_date, opt_dateTimeSymbols) {
    goog.ui.DatePicker.call(this, opt_date, opt_dateTimeSymbols);
 
    this.events = opt_events;
};
goog.inherits(goog.ui.EventsDatePicker, goog.ui.DatePicker);

Notice how inheritance is handled with Closure. Even though we call goog.inherits(), we must also call the superclass constructor for it to work.

Step 3: highlight events:

goog.ui.DatePicker has a setDecorator() method, that accepts a function as it’s parameter. The function should take a Date object and return a CSS class name to decorate the corresponding cell with.

It’s basically called once for every cell in the picker, and we are going to use this by checking whether an event exists for the date and return “goog-date-picker-event” if so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

goog.ui.EventsDatePicker = function(opt_events, opt_date, opt_dateTimeSymbols) {
    goog.ui.DatePicker.call(this, opt_date, opt_dateTimeSymbols);
 
    this.events = opt_events;
 
    // new line:
    this.setDecorator(this.eventDecorator);
};
goog.inherits(goog.ui.EventsDatePicker, goog.ui.DatePicker);
 
/**
 * Searches the events array and returns the event corresponding to passed date
 */
goog.ui.EventsDatePicker.prototype.findEventByDate = function (date) {
    var dateString = date.toIsoString(true);
    var event      = goog.array.find(this.events, function (event) { return event.date == dateString; });
 
    return event;
};
 
/**
 * Returns a CSS class name to use for cells that have events
 */
goog.ui.EventsDatePicker.prototype.eventDecorator = function (date) {
    var event = this.findEventByDate(date);    
 
    if (event !== null) {
        return 'goog-date-picker-event';
    }
};

Notice the use of goog.array.find() to find the event that matches the date.

Step 4: click events:

We will use the findEventByDate function defined above and DatePicker’s SELECT event to jump to an event’s URL when clicking on it’s date:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

goog.ui.EventsDatePicker = function(opt_events, opt_date, opt_dateTimeSymbols) {
    goog.ui.DatePicker.call(this, opt_date, opt_dateTimeSymbols);
    this.events = opt_events;
    this.setDecorator(this.eventDecorator);
 
    // new line:
    goog.events.listen(this, goog.ui.DatePicker.Events.SELECT, this.dateClicked, false, this);
};
/**
 * Checks if an event cell was clicked, and jumps to the event's URL if true
 */
goog.ui.EventsDatePicker.prototype.dateClicked = function (event) {
    var date  = event.date;
    var event = this.findEventByDate(date);
    if (event !== null && event.url != '') {
        document.location.href = event.url;
    }
};

That’s it :). It’s a short example, but it covers some of the basic aspects of inheritance, event listeners, and some of the utility methods. Closure looks nice :)

Example page
Example script

November 8, 2009 | Filed Under Development, JavaScript | 3 Comments 

Synchronizing tasks between Trac and Netbeans

Cube°n is a NetBeans plugin that integrates and synchronizes the IDEs tasks with some of the most common issue-tracking systems, including Trac.

It has some very nice features, including support for multiple Trac repositories, custom ticket filtering based on Trac queries, and many more.

To install and start using Cube°n you will need to:

wget http://cubeon.googlecode.com/files/TracXMLRPC-1.6.6-py2.6.egg
easy_install TracXMLRPC-1.6.6-py2.6.egg
[components]
tracrpc.* = enabled
httpauth.* = enabled
 
[httpauth]
paths = /login, /login/xmlrpc

That’s it. You can now use the plugin (Window -> Cube°n -> Task Repositories and Task Explorer), and start adding Trac repositories and adding / synchronizing tasks.

July 27, 2009 | Filed Under Development | Leave a Comment 

  • Arhiva