Authors: David Underhill and James Chen
More: Source and Documentation -- Greasemonkey Plugin
Overview[]
JToolbar is a reusable JavaScript web interaction that introduces highly interactive toolbars for web applications.
Toolbars are integral to many websites. They commonly appear as navigation panels or advertising banners at the edge of a page. Highly interactive web applications often provide functionality through a toolbar too. Unfortunately, users have very limited control over these toolbars. Properties like size, position and orientation are usually fixed by developers. In contrast, toolbars in desktop applications are generally very flexible. Users can rearrange their layout or drag them to different docking positions. JToolbar brings these flexibilities to online toolbars.
User Interactivity[]
JToolbar empowers users with the following controls:
- Visibility: A pinned toolbar is always visible and occupies a fixed amount of space. An unpinned toolbar only appears when the mouse hovers near it. This can be used to hide large navigation panels, when they are not needed, in order to make room for content.
- Docking: A toolbar can be attached to any side (left, right, top or bottom) of its container. The user can change the docking location by simply dragging the toolbar to a different side.
- Floating: A toolbar can be undocked so it "floats" in front of the content. In this state the toolbar can be freely dragged to any position on the page.
- Memory: A toolbar remembers its state with cookies so that it will always show up where the user last left it.
Abstractions for Developers[]
JToolbar is a simple abstraction for developers to use. Since toolbars are often used for navigation, JToolbar has special support to make it easy to construct a hierarchical menu system. This basic mode allows developers to create their navigation bar by simply specifying a sequence of name-link pairs. Alternatively, JToolbar allows an arbitrary HTML element to be transformed into a JToolbar. This means existing toolbars can easily take advantage of the flexibility JToolbar offers.
JToolbar strikes a balance between ease-of-use and configurability. In the absence of explicit configuration, JToolbar provides sensible defaults. However, it avoids the one-size-fits-all principle by inferring some parameters. For example, the default orientation of a custom toolbar is inferred based on the HTML element's initial size and position. Furthermore, JToolbar provides an extensive set of customization options so that power developers can fine-tune its behavior and appearance. Developers can even register for callbacks on "toolbar events" like an orientation or visibility change. A complete list of JToolbar options and features are available here.
Implementation and Reusability[]
This section evaluates our major implementation decisions and how they affected the reusability of the JToolbar interaction.
Client-Side Only[]
JToolbar is a client-side piece of JavaScript. This makes it easy to reuse and integrate with a wide variety of webpages. There were no real disadvantages to making it server-independent.
Standalone Component[]
JToolbar is a standalone component and does not depend on any JavaScript libraries. This makes it is easier for people to acquire and reuse JToolbar. Another bonus is the total amount of code needed for JToolbar is kept to a minimum. Though we could have re-used animation techniques from an external library, that would have been overkill. Our implementation is smaller and probably more efficient since it is tailored to the toolbar. On the other hand, given the difficulty we had in laying out the UI properly (see Layout Flexibility below), we may have benefited from jQuery or a similar library.
Namespaced[]
JToolbar's code is name-spaced so that the only global identifier it introduces is an object named JTB. This object contains all of the JToolbar functionality. This means that JToolbar can be reused in conjunction with any other code.
Layout Flexibility[]
The most difficult implementation issue we encountered was correctly integrating JToolbar into a page. We initially tried to use table elements, but this was incompatible with hierarchical toolbars. Next, we tried div elements with various display styles but this also lacked the flexibility we needed. Specifically, it prevented us from being able to have an unpinned toolbar not displace its attached content. Finally, we settled on creating a container to wrap around each toolbar and its content. We used absolute positioning within that container to give us the flexibility we needed, though this unfortunately increased the difficulty of sizing each component.
Sizing elements is easier if the user is forced to specify static sizes for their toolbars and the attached content, but this makes JToolbar more difficult to use (especially with fluid websites). We relaxed this restriction by providing support for fluid (percentage-based) lengths as well as "natural" lengths (those which are sized to fit their contents). The progression from static sizes to these more flexible lengths required several iterations and a special internal helper class, but the flexibility it delivered was well worth the effort and complexity.
Greasemonkey[]
Greasemonkey (GM) is a Firefox plugin which allows users to customize webpages with their own JavaScript code. To demonstrate JToolbar's reusability and flexibility, we created a GM script to make the toolbar on the Stanford Computer Science department webpage into a JToolbar. We did not have to make any changes to our JToolbar implementation - we simply added the GM header and a line of code to create the toolbar:
new JTB.Toolbar('body', 'cs-title').setImagePath('http://www.stanford.edu/~dgu/images_opaque/');
Performance[]
JToolbar is a complicated interaction so we paid careful attention to performance. We avoid relatively expensive UI refreshes until they are absolutely necessary. Furthermore, whenever we manipulate the DOM, we first hide the toolbar container so that the browser only has to recalculate the layout twice (once to hide it and once to show it) rather than many times as various parameters are tweaked. We even implemented a memoization and caching scheme to prevent unnecessary recalculations. As a result, there are no noticeable performance problems on any of the platforms we tested.
Critique[]
Weaknesses[]
The biggest weakness of JToolbar is its limited support for browsers other than Firefox. In fact, it originally exposed some differences between the Linux (the primary development platform) and Window's versions of Firefox though these problems have been resolved.
Another weakness of JToolbar is that it only supports a subset of the units which HTML permits. In particular, it only understands pixels, percentages, special keywords for border widths, and natural (best-fit) sizes. This means it will not work properly if units are specified in inches, centimeters, etc.
JToolbar does not currently sanity-check arguments to most of its methods. It does not check that values make sense or even have the appropriate type. This can make it more difficult to use.
JToolbar's presentation could be enhanced. The basic mode would be more versatile if it had more display options. It could also be improved by trying to infer some basic CSS properties.
There are two big changes we would like to make in the next iteration of JToolbar. First, we would probably use jQuery to take care of positioning issues. This would greatly simplify our code while simultaneously enabling JToolbar to run in more browsers. Second, though many good ideas are recursive, we think JToolbar would actually be better off if it were not recursive. Instead of supporting hierarchical menus with additional JToolbars, we could use a more lightweight and less complicated approach.
In the future, we would like to work on fixing these weaknesses, as well as creating good introductory documentation. This future work is documented on our to-do list.
Strengths[]
JToolbar is simple to use while still providing power users with the control they need. As we demonstrated in the Greasemonkey section, it can be used to enhance arbitrary webpages - often with just one line of code. It avoids conflicts with and dependencies on external JavaScript code to make it easy to distribute and start using. You can even have multiple JToolbars on a single page.
Overall, JToolbar is a flexible, intuitive, reusable, and useful new web interaction. It brings important new functionality to the web - functionality which is surprisingly absent from the largely static toolbars which dominate the web today.