Recently, I discovered XUL trees will let you select individual
cells with a single attribute,
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
- 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!
2 thoughts on “A Scrollable Grid With Headers, part 1”
The company I work for sponsored the implementation of the cell selector in trees (https://bugzilla.mozilla.org/show_bug.cgi?id=296040), nice to see someone else have some fun with it!
Love the static header – we needed that for the same project but I ended up taking another, much more hacky, route to emulate it 🙁
(From Alex: You’re exactly the sort of person I’m looking for specifications from! You’ve built something like it, and you have experience using your widget. We could combine our resources and get you a better product.)
I wish doing a scrolling HTML tbody was anywhere near this simple.
Yeah, it looks easy – overflow:auto and padding-right:1em (stupid scrollbar…). Then you realise that doesn’t work in anything but Gecko… 🙁
Comments are closed.