Dynamic Loading and Rendering with YUI’s Menu and TreeView Controls

By Eric MiragliaAugust 2nd, 2006

Note: The information in this article regarding the YUI Menu Control is obsolete as of current versions of the library; Menu now supports a lazyLoad configuration property to make progressive rendering simpler to implement. -EM 2007-03-04

The richness revolution on the web is about improving the user experience. A richer interface can feel faster and more responsive because it can bring users closer to their data and to powerful tools for enhancing, filtering, or sharing that data. We add richness to pages to make our applications faster, lighter, and more responsive to the user’s needs.

At the same time, adding richness and interactivity to a web page invariably means adding code complexity. Instead of simply loading the data required to represent a document, we load data related to visual and informational transformations that might take place within the document based on user interactions. This infusion of information (and rules about behavior and presentation related to that information) adds weight to the page — weight on the wire, weight in terms of processing and parsing information and rules, and weight within the browser as it holds all of this richness in memory.

One place where we run up against practical limitations of richness in web applications is in UI controls like TreeView and Menu in which nodal information structures are given easily-navigated UI treatments. A library of 1,000 nodes might live very compactly in a 100×200 pixel space using a Tree or Menu — ten top-level nodes with ten children each yield 100 nodes just in the top two levels; a third level, again with ten children per node, gets us to 1,000.

This compression of data in visual space is one of the powers of richness, but it also highlights the potential for rich UI controls to grow exponentially in their resource consumption. Where a UL with ten links would typically require a trivial amount of memory and rendering power, a Menu with 10 top-level nodes and 1000 nodes in total might increase data load by a few orders of magnitude. And it might increase the complexity of the DOM by just as much, while creating an additional burden of an object model in JavaScript in which every node in the Menu is represented by one or more JavaScript objects.

Both the TreeView and Menu Controls in YUI support strategies for reducing the impact that this added complexity has on initial pageload times and in-page resource consumption. In this article, we’ll review those strategies and look under the covers at how this can be accomplished in the Menu Control.


Dynamic Loading in the YUI TreeView Control

The YUI TreeView Control helps you address the problem of navigating vast node collections by providing support for dynamic loading. Dynamic loading is a mechanism whereby the children of a node are only loaded when the user expands that node. This allows you, for example, to use YUI’s Connection Manager to make XHR calls as TreeView nodes are expanded, gradually filling out the data for the node library — but only doing so as the user demonstrates a need for that information.

Adam Moore, the author of the TreeView Control, has provided a nice example of dynamic loading in the TreeView Control. While this example doesn’t use Connection Manager to fetch data (rather, it randomly creates data for the nodes), it does illustrate the dynamic loading implementation pattern. Adam walks through the pattern on the example page and breaks out the key elements of the technique.

Dynamic loading in TreeView can be configured for the entire TreeView instance or on a node-by-node basis, giving you flexibility in how you manage your initial pageweight and the corresponding complexity of your DOM structure.

Progressive Rendering in the YUI Menu Control

The progressively-rendered menu exampleTodd Kloots, author of the YUI Menu Control, this week added a new example to Menu’s documentation that illustrates a similar technique using Menu. His progressive rendering example exemplifies the creation of a Menu based on an in-memory JavaScript data model. The result is a lightweight, fast-rendering Menu with 50+ child nodes built around a scalable technique. Let’s peek under the covers of his implementation.

First, Todd puts his markup on the page for the top level of the menu in which his four top-level nodes or menu items (Communication, Shopping, Entertainment, and Information) are displayed. He does this using a standardized module format shared by a number of YUI components; this format is documented with the Module component on the YUI web site. The basic menu information structure is nodal; Menu can consume data for menu items from an unordered list in the markup.

With this markup in place, Todd instantiates the main menu:

The main menu is now in place; it’s time to lay a foundation for progressive rendering of submenus. Each of the four top-level menu items will have its own submenu populated by data that’s not yet in the DOM. Todd begins by creating an object containing all the data he’ll use for his submenus; it’s organized into buckets corresponding to the four top-level items. Here’s the beginning of that code block, with the data being shaped into an object literal:

The next step is to create the four top-level submenus (instances of YAHOO.widget.Menu) and link them to the data provided in oMenuData above:

Now Todd has a top-level Menu and we have Menu instances for each of the four main submenus. At this point he applies his progressive rendering technique, a strategy that relies on Menu’s intrinsic BeforeShowEvent (inherited from Module). By writing a handler to execute just before a Menu is shown, we can defer its rendering (and all of its overhead in terms of DOM element creation) until the Menu is actually needed. Here is Todd’s onBeforeShowEvent handler:

The approach here is a simple one: Build submenus only in response to user interaction. The submenus begin as empty vessels that know about their intrinsic data (it’s in their itemsData property); however, they don’t render that data until they’re activated by the user. When that happens, the onBeforeShowEvent (to which we’ll attach this method as a handler) fires. It takes the following steps:

  1. Checks to see if this submenu has already been rendered (line 3); if it has, its getItemGroups method will return subitems, and nothing more needs to be done here.
  2. Loops through each menu item in this submenu (line 12-29), gathering its configuration properties and creating any submenus that might be associated with this menu item (line 19-24). Once all necessary information is in hand, the menu item is added to its parent Menu (line 27).
  3. Renders the menu, preparing it to be shown (line 33).

The finishing touches for Todd’s implementation involve subscribing this function to the onBeforeShowEvent of each of the four main submenus, assigning those submenus to the Menu instance created from markup, and then rendering and showing the main menu:

The result of this particular technique is a Menu with 50+ nodes, of which only a small fraction need to be rendered when the page loads. In this implementation, the data for the remaining nodes is in the page (and has weight on the wire during initial pageload as a result) but takes up only trivial resources until called upon. And, for a more complex Menu with a few more levels (and potentially 500, 5000 or more menu items), it’s easy to see how Connection Manager could be built into your onBeforeShowEvent, with the ConnectionManager success callback being used to add menu items, render the menu, and show it.

Conclusion: Richness on a Diet

The bottom line here is that we can get richer pages that overload small pieces of screen real estate with powerful interactive paths, and we can do this in ways that don’t add massive weight and resource consumption to their contexts. Doing necessitates more thought up front. However, this kind of forethought is the price of entry for most high-volume web applications that want to include more and richer interactions within a single page. Using dynamic loading and progressive rendering in TreeViews and Menus can lead to light pageweights and fast rendering, giving you the best of both worlds: Rich interactive power along with lightness on the wire and in the page. Extending that technique throughout your site using Connection Manager can help you achieve real richness and solid performance even in highly interactive contexts.

17 Comments

  1. hi there,

    cool!

    Which editor/viewer’s snapshots are you displaying above ?

    Thank you,

    BR,
    ~A

  2. Anjan – The syntax highlighting in the blog post is courtesy of dpSyntaxHiglighter, http://www.dreamprojections.com/, written by Alex Gorbatchev. Alex has written code colorization “brushes” for a variety of popular languages, including JavaScript. Regards, -Eric

  3. [...] Dynamic Loading and Rendering with YUI’s Menu and TreeView Controls » Yahoo! User Interface Blog (tags: Tech WebDev AJAX YUI JavaScript GUI WebDesign Guide) [...]

  4. GREAT STUFF!

    quick question about submenu indicators for any YUI menu system.

    Anyway to dissable the submenu indicator and the space it uses?

    thanks -socrat3s

  5. Todd Kloots said:
    August 8, 2006 at 3:26 pm

    Each of the item types (MenuBarItem, MenuItem and ContextMenuItem) expose three constants that represent the path to the image to be used for the submenu indicator for the three states of an item: default, selected, and disabled. Those constants are:

    SUBMENU_INDICATOR_IMAGE_PATH
    SELECTED_SUBMENU_INDICATOR_IMAGE_PATH
    DISABLED_SUBMENU_INDICATOR_IMAGE_PATH

    If you wish to hide the submenu indicator, set each constant to a 1×1 transparent image for the type that you are using. This is demonstrated in one of the Menu examples:

    http://developer.yahoo.com/yui/examples/menu/applicationmenubar.html

    In this example the submenu indicators are hidden for the items in the MenuBar instance.

    Hope that helps,
    Todd

  6. [...] Dynamic Loading and Rendering with YUI’s Menu and TreeView Controls » Yahoo! User Interface Blog (tags: javascript yui yahoo ajax menu) [...]

  7. [...] Dynamic Loading and Rendering with YUI’s Menu and TreeView Controls by Eric Miraglia [...]

  8. [...] Dynamic Loading and Rendering with YUI’s Menu and TreeView Controls by Eric Miraglia [...]

  9. [...] Dynamic Loading and Rendering with YUI’s Menu and TreeView Controls by Eric Miraglia [...]

  10. [...] Dynamic Loading and Rendering with YUI’s Menu and TreeView Controls [...]

  11. Hi I’m a newbie with this, I was wondering if there was any way to change the appearance of the menu’s. Does it have a seperate CSS file which can be edited?

  12. @Hagen: Yes, there’s a default .css file included with the Menu Control as part of the YUI download. Check out the docs and play with the download, and if you have questions beyond that be sure to join our discussion group, which is a great place to ask questions among other YUI users. Regards, -Eric

  13. This example doesnt seem to work if I generate all of my menus (including root menu) from web service calls. The sub menus intially render outside of the root menu. If I hover over them again then they display perfectly. This issue doesnt happen if I use the mouseOverEvent on the menu item to populate the sub menu.

  14. @Ian: Thanks for the comment. Please join the YUI discussion group and post your question and code sample there…that will be the best way to get support for the issue you’re describing. Regards, -Eric

  15. Hi All,

    I need to create a dynamic menu and tree using AJAX ,Struts and XML (or some other medium to fetch data for tree formation).

    Initially i have to draw the tree using the values from XML or other data source then I need to drag and drop the tree contents and it has to take effect in DB. Please tell me some open source projects to use for my purpose.

    Is it possible with this Yahoo UI ?

    Thanks
    T.Appasamy

  16. [...] Dynamic Loading and Rendering with YUI’s Menu and TreeView Controls [...]

  17. [...] Dynamic Loading and Rendering with YUI’s Menu and TreeView Controls [...]