February 7, 2009
A Scrollable Grid With Headers, part 1
Recently, I discovered XUL trees will let you select individual
cells with a single attribute, seltype="cell":
This gave me a few ideas - most notably about my regular expression grid, which takes up an awful lot of space on the screen. If I could use the tree to simulate a smaller grid, preferably with scrollbars, I could use much less real estate. After a quick newsgroup posting, Mark Finkle and Neil Deakin set me straight - the grid was probably better and more flexible.
Still, trees do one thing grids don't - they have a fixed header row. You can scroll the main body all you want - the header row will stay where it is. Doing the same for a grid was impossible - but if I combined three grids into a single XBL binding...
Note this demo won't fully work without Mozilla Firefox 3.1 beta 2. (It might work on earlier 3.1 builds, but this was the base.) I combined the scrollable content object model with a healthy dose of CSS styling and new bindings. In Firefox 3.0.6, it will partially render, but the headers won't appear.
This opens up a number of possibilities for new widgets. From the newsgroup:
- Menulist editor: Label, value, description
- Entity localizations: Entity name, English, other language
- Regular Expression testing grid
- A menu list containing namespace URI-prefix pairs
- A spreadsheet with header rows & columns
- Logic grid puzzles
With all this said, I think I need your help. Although I wrote this as a general-purpose binding, I hardly think it's ready for adding to the XUL toolkit. This is proof of concept code, and it has a few shortcomings:
- Navigation by cells - not by rows or by columns. (Suppose you want to select a whole row? I didn't implement that.)
- No specification. No rules on how it's supposed to behave other than, "Does it look right when I move it?"
- No tests. I wouldn't want to check this into Mozilla without some regression tests to make sure it works.
- Performance. In loading the test page, I noticed today that my more recent changes causes the CPU to spike for a couple seconds. That's bad, and I don't know where the bug is.
- The accessibility people will probably want to add some useful support roles.
- Selecting a cell throws off the header rows' & columns' scrolling.
- A really bad binding name:
gridbox. It was the best I could come up with.
I filed bug 477446 for this. I'd like to see if anyone's interested in working on this binding, cleaning it up, writing tests for it, and generally making it Toolkit-ready. I think it's potentially very useful.
Comments are open!