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.
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 DevelopersEdit
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 ReusabilityEdit
This section evaluates our major implementation decisions and how they affected the reusability of the JToolbar interaction.
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.
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.
new JTB.Toolbar('body', 'cs-title').setImagePath('http://www.stanford.edu/~dgu/images_opaque/');
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.
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.
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.