Locking is necessary when you want to avoid executing some code while another code is being executed. Imagine, user clicks the Entery key on a product order form. You send an AJAX request to a server with order details. You don't want the user make another order by pressing the Enter key for the second time. What you want to do is to lock the form until the AJAX request is complete. In this case it's good to use the locking feature.

I have defined 3 methods in FormHandler class:

• setLock(Name) – add a lock with a specified name
• getLock(Name) – check whether a lock with a specified name exists
• removeLock(Name) – deletes a lock with a specified name

These methods have very simple imlementation. They use MooTools Hash class.

1. this.locks = new Hash();
2. ..
3. getLock: function( Name )
4. {
5. return this.locks.has(Name);
6. }
7. …

After that I can use these methods in my form classes extending FormHandler this way:

1. var KeyTester = new Class({
2. Extends: FormHandler,
3. initialize: function()
4. {
5. this.parent({
6. keyMap: {
7. 'LoginForm:enter': this.login.bind(this)
8. }
9. });
10. },
11. login: function()
12. {
13. if (this.getLock('login'))
14. {
15. alert('The form is locked. Processing request...');
16. return;
17. }
18. this.setLock('login')
19. alert('Login form submitted!');
20. }
21. });

When user presses the Enter key for the first time, the handler class sets the lock «login», that will not allow the method code to be executed for the seocond time. You may look how it work here.

I widely use this method in my applications. It is simple, useful and it really saves time. Sometimes I develop complex pages where user can edit many objects on a same page. In such cases I assign dynamic names to locks, matching object identifiers.

In a next post I will go into detail on how I implemented the simple loading indicators support.

Tags: javascript, tutorials

This class is based on MooTools 1.2. You may download all files for this tutorial here: hotkeys.zip.

Handling hot keys

I like MooTools for it simplicity and an elegance of code based on this library. When I started developing the hot keys processing I decided this feature should be designed in the MooTools manner. As a result I got a class that I inherit in all client-side form classes in my applications. It is very simple to setup the key map in a constructor of a child class:

1. this.parent({
2. keyMap: {
3. 'control+l, control+d': this.reloadTasks.bind(this),
4. 'LoginForm:enter': this.login.bind(this)
5. }
6. });

You may look how it work here.

Class FormHandler implements MooTools Options class. FormHandler options have keyMap key that is used for defining a correspondence between hot keys and handlers. A value to be passed to keyMap should be an object (or hash) with hot key definition strings in keys and handlers in values. The key definition strings syntax follows.

• Just a key e.g. a, c
• Modifier(s)+key e.g. control+t, or control+alt+t
• Target or parent element Id: key e.g. LoginForm:enter or TaskList:control+a
• Multiple hot key sets in a same declaration e.g. control+t, alt+m

In the example I have defined the simple KeyTester class that implements the FormHandler class.

1. var KeyTester = new Class({
2. Extends: FormHandler,
3. initialize: function()
4. {
5. this.parent({
6. keyMap: {
7. 'TaskForm:shift+control+t,shift+control+m': this.addTask.bind(this),
8. 'LoginForm:enter': this.login.bind(this)
9. }
10. });
11. },
12. addTask: function()
13. {
14. alert('Task added!');
15. },
16. login: function()
17. {
18. alert('Login form submitted!');
19. }
20. });
21. window.addEvent('load', function(){
22. new KeyTester();
23. });

Please note - if HTML element identifiers are used in hot key declarations (TaskForm:shift+control+t) the FormHandler class should be instanced only after the page elements are loaded. You may process the onLoad or onDomReady events of window object for creating the object.

The code of FormHandler that is responsible for hot key handling is not so interesting to analyse it here. It parses the hot key definitions and finds a suitable handler when KeyDown event occurs. In the constructor it assigns a handler for KeyDown event for the Window object for all browsers and for Document object for Internet Explorer.

Known issues

Unfortunately it is not possible to cancel default event actions in some browsers. As these browsers have commands assigned with specific hot keys (like ctrl+t in FireFox for New Tab) this is impossible to use some combinations of hot keys in web applications.

To be continued

In following tutorials I will demonstrate how the locks functionality is implemented. The locks are useful when you need to prevent a code execution until some previous call is complete. This is especially necessary with AJAX requests initiated by hot keys.

Tags: javascript, tutorials

Last week I came across such application - Versions. It is beta at the moment. But even now it is obvious it has all features any developer needs. I like Versions due to following reasons:

• It has graphical interface.
• The interface is beautifully designed and polished, in keeping with the best traditions of Mac OS applications design.
• The directory tree displays a status of each file and directory in the repository in a way that you can quickly determine what files have been modified or added.
• It has great Timeline feature that displays a history of repository updates grouped by date.
• All necessary commands like Add, Commit and Revert are available for each file or directory through the context menu.

The user interface of Versions is very simple and intuitive. I recommend for everyone who strive to create a perfect working environment to have a look on this tool.

Tags: tools