December{"Tue",30(2008)};

FocusView Component

One of the more complex pages of the app I work on was getting too large to fit on one page, so my team took on writing a custom component. We wanted to be able to split the data up to de-clutter the view, while still allowing quick access to different sections and the ability to see summary information for everything.

Here’s the component… It starts out in an overview, but when a node is clicked, that node will maximize itself, while the other nodes minimize and dock along the top of the screen. A click on a minimized component maximizes it while minimizing the previously maximized one. Each view displays an icon to indicate whether the data inside it is valid (used for data input).

(click for example, view source enabled)

The component was eventually canned. The higher-ups thought it was miserable having to click the overview button then click on a component to switch. My assumption that the people would intuitively know to click the minimized components to quick switch was apparently wrong. I stripped it out and made it reusable to keep it from just falling through the cracks.

Caveats:

• Bottom/right padding no longer work. I’m not sure what broke during the conversion, but I don’t have time to look into it now. I don’t like how I implemented this part anyway though, so it should be readdressed.
• The integration of the different parts is definitely cludgy. I would love for people to try it and discuss how they would handle the mechanics of the component (views maximizing/minimizing, event dispatching, border metrics, etc.) Better yet, if someone wants to hack away at the code and submit changes, I’ll be happy to update the example.

This entry was posted on Tuesday, December 30th, 2008 at 9:50 am and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

---