sorted by: recent | see :
popular
Content Tagged with events + Ajax
HTML DOM Event Object
Custom events as API end points for key bindings and more
Inspired by the Gmail team and how they created well known Greasemonkey endpoints and the custom events work that I have been doing, I was lead to play with custom events as a way to tie into key bindings. This lead to the following post on my blog:
On the back of my example enjoying the Observer pattern with custom events I have started to play with a pet project also involving custom events.
I love keyboard shortcuts. I hate the mouse. I wish that Web applications would offer more keyboard shortcuts a la Gmail, and wondered if there could be a generic way to tie keys to actions in an app. There are things such as accessKey, but we need more.
If you start to follow the pattern of creating named events for public integration points, then how about tieing in keys? I implemented this on the quote example, where you can now use up and down arrows, and N and P, to move through the list of names.
To use the system you declare the keys and tie them to events:
-
-
KeyBindings.add({
-
eventname: 'action:move-up',
-
// keys: KeyBindings.caseInsensitive('p'),
-
keys: ['p', Key.ARROW_UP ],
-
description: "Move up the stack"
-
});
-
-
KeyBindings.add({
-
eventname: 'action:move-down',
-
keys: ['n', Key.ARROW_DOWN ],
-
description: "Move down the stack"
-
});
-
This code ties the keys to the actions, and thus fires those actions when pressed. Next, you need to capture those events to do the work when the key is fired:
-
-
document.observe('action:move-up', function(e) {
-
Selection.moveUp();
-
});
-
-
document.observe('action:move-down', function(e) {
-
Selection.moveDown();
-
});
-
With a standardized way of annotating events, interesting side effects appear. You can hit the '?' key to bring down a heads up display sharing what keys do. You could imagine a Greasemonkey script, or browser plugin, that loads the keybindings.js code, and looks for the key binding definitions. The declaration could be done in HTML too, which could be found by the plugin and tied into the system. What do you think?
Enjoying the Observer pattern with custom events
I created an introductory example discussing custom events as an implementation of the Observer pattern. I posted this on my personal blog first and quickly got a port from my Prototype version to Malte's jQuery port (and now we have a DOMAssistant and Appcelerator versions). I hope others keep them coming so we can aggregate a simple example of custom events and how it works across various toolkits:
The example dynamically adds functionality based on checkboxes to simulate events that could change processing and uses the fire() and observe() methods from Prototype.
I strap on behaviour to a list of names. When you click on the name, something can happen. To do this I could have done the following:
$$('ul#leftchoices li').each(function(el) {
el.observe('click', function(e) {
if ($('colorchange').checked) {
changeColor();
}
if ($('contentchange').checked) {
changeContent(el.id);
}
});
});
In the click event itself, I do various checks and kick off behaviour. That can be fine for small actions, but what if you want to do more? This is when I prefer to abstract out the action and just fire an event:
$$('ul#leftchoices li').each(function(el) {
el.observe('click', function(e) {
el.fire('selected:choice');
});
});
At this point, this bit of code becomes dumb. It doesn't know what to do when you select the item, and it just hopes that somewhere, someone is listening. That is where the observers come in, such as this one that changes the main content based on the selected name:
$('contentchange').onchange = function(e) {
if (e.target.checked) {
document.observe('selected:choice', changeContent);
} else {
document.stopObserving('selected:choice', changeContent);
}
}
When someone clicks on the checkbox, this method is fired and an observer is either added, or taken away.
Once you start building applications with this in mind, you may find a bit of a sea change. You start to think about the various events as a public API that you can easily expose to observers. Gone is the simple ability to look at one method and see what is happening, but the loose coupling gives you the ability to easily layer in your architecture. Based on some settings, behaviour can be dynamically added. You could even expose these events in a way that makes it easier for Greasemonkey hackers to come in and work with your application. All in all, a win-win for anything more than a simple example.
Although this example uses Prototype, you could do the same with the other top class JavaScript libraries. In fact, if someone wants to port this example to Dojo, jQuery, Mootools, YUI, or anything else, send me the files and I will put them up so we can all compare how custom events are done in the various toolkits.
Unobtrusive DOM 2 Event implementation for IE; Uniform Event Model revisited
Tavs Dokkedahl sent in a great email about work that he and Allan Jacobs have done on bringing DOM event implementations to IE. Here it is in full:
About a year ago or so I put out the Uniform Event Model (UEM) script which
was an implementation of the W3C DOM 2 Event Interface for IE. As it turned
out that release was very premature - the script was simply incomplete and
definitely not ready for production use.
The design ideas however were good enough. Since then Allan Jacobs has
joined the JSLab team and together we have written a new version of UEM
which is much more stable and modular.
This first release includes support for:
- DOM 2 Event Interface in IE
- DOM 2 UIEvent Interface in IE
- DOM 2 MouseEvent Interface in IE
- DOM 2 Legacy keyboard handling in IE (fancy way of saying "handle it like
Firefox")
The code is unobtrusive - no special syntax or semantics are needed. A lot
of documentation is available
There still exists issues with some types of events but at large the code is
stable and is performing well enough to be released to the public. Hopefully
we can get some feedback on how to improve it and catch some early errors.
The size of the script is about 32Kb (when minified) it its basic form but
additional modules are available for inclusion. The download page can be
found at http://www.jslab.dk/jdc.download.php
We are currently working on finishing the DOM 3 KeyboardEvent and DOM 3
textInput interfaces (for IE, Firefox, Opera and Safari) besides various DOM
corrections for other browsers than IE.
addEventListener attachEvent - Pass parameters to event-function
Datejs - A JavaScript Date Library
Flapjax
Document Object Model Events
Zimbra Desktop Launched - Growing Trend of Offline Access to Web Apps
Zimbra, one of the Web Office vendors we've been tracking for a while, will later today announce the launch of Zimbra Desktop - which enables offline access to Zimbra's Ajax-powered collaboration suite. Zimbra will unveil Zimbra Desktop on stage today (Mo
bookmark this on del.icio.us