This is the demonstration of using the Dojo open source toolkit - a widget set to create a Web 2.0 application.

What I have here is a demo application, a demo of a mail application, that was created using Dojo 0.9 I am going to demonstrate using a keyboard. 

I have Inspect32 running which is part of the Microsoft Active Accessibility Software Development Kit that highlights the area that has focus, so you can follow along using just the keyboard to navigate.

My focus in on the URL bar, I am going to press tab to get into the application. 

You see that we are in the tool bar and it focuses on the get mail button.

It also displays a tool tip that says click to download new mail. So this is a Dojo tool tip displayed on focus, which is different. Normally when you add a title attribute to an HTML element the browser will display that title text when you mouseover it, but we have expanded in Dojo so that it is also displayed on focus.

When I am in a toolbar I use the arrow keys to navigate. My focus is now on the new message button, I have a tool tip that says click to compose new message. I have a tool tip that says click to create new message. If I press enter I in invoke the action for that button we see a dialogue display with options. I can tab through the various components of the options and I can cancel this particular dialogue. 

So this should give you a little overview of this application.

We have started with the toolbar at the top. Below that is a task panel.

The inbox is split into three different panes. Along the left vertical pane is an accordion which will display folders or an address book. Right now we are displaying the folders pane with a preview of different folders of the mail application.

Along the right hand side of the screen, taking up most of the screen, is a split pane the top of which is currently displaying a list of mail messages which is currently displaying the stuff for fun folder and below that is the preview pane. 

So let's tab further; we were in the tool bar I am going to tab to the tab panel, I get into my accordion pane. The accordion pane in Dojo works like a tab container, in that there is only one pane displayed at a time. The keyboard mechanism is that I use the arrow keys to navigate between the accordion pane headers. If I press the down arrow key or the right arrow key, I switch to the address pane, if I press the up arrow the folders pane becomes active again. If I tab up I get into the property pane, tab again gets me into the tree. 

Normally it is implemented for keyboard support is implemented with a link. The user would have to tab through each one of these items. They tab through the plus minus, they tab past open folder icon, finally get to folders and tab again to the picture for inbox and tab again for the inbox link. In this case what we have done is we are using the arrow keys for navigation within the tree.  This follows the same behaviour as the Windows File Explorer. So I down arrow to get to the next item which is inbox, I down arrow again to get to trash, I down arrow again to get to save. I want to close that so I use the left key to close that particular list. I up again to get to trash, up again back to inbox and press enter  to display my inbox view and I can navigate through.

Now let's try creating a new method. So I am going to shift tab back to get to the inbox pane. Back to the toolbar and arrow over to the new message button. Press enter to invoke that button. You notice that a new tab panel is created. I am going to tab into that. So now I have two tab panels and I can use the left arrow keys to go back to my inbox panel or the right arrow key to go back to my new message.

Tab again, I'm in a combo box. If I down arrow my choices are listed and you see it keeps a list of who I may have previously communicated with. So I am going to arrow down to pick the option that I want. Tab again and this is also a combo list, so I can down arrow to open the list and I'm going to pick vacation. 
I am going to tab down; my focus going into the rich text editor tool bar. I can use the arrow keys to navigate through a toolbar, but I want to type a message so I tab again to get into the editing area. I guess I am a bit stressed out so I am writing a note to Chris saying I need a vacation, I will take the month of November off. I want to stress that I need a vacation, so I arrow up and I am going to highlight using the shift and arrow the word 'need.' I've highlighted that so I shift tab into the toolbar again, arrow across and notice that only the buttons that are enabled get focused so I skipped over the redo button. I am going to arrow over to bold and press bold and that focuses back in the editor and we will leave it at that. 

So I can use the rich text editor with the keyboard, I get the full benefit of using the toolbar rich text editing options. I going to tab to the send button, press send, my message will be sent and the new message pane will be closed.

Key things with the Dojo toolkit. We saw the toolbar which we use arrow key navigation to access different things in the toolbar.

We saw the tool tips which is made available on focus.

We saw the tab panel, the accordion pane and the tree view, as well as the rich text editor and the editing. All are usable from just the keyboard, I did not touch the mouse at all. 

End of transcript. 


Dojo tool kit demo.
Transcript for: Ben Fletcher. 
Ent: Annabel Eastwood. 
Date: 18-07-08

Dojo tool kit demo.
Transcript for: Ben Fletcher. 
Ent: Annabel Eastwood. 
Date: 18-07-08

Page 2 of 3

Page 1 of 3