ESCAPE VELOCITY :: Progressive Disclosure Instructions

Okay, here's the gory details. Brought to you by today's special guest: Simon Cowell.

First we start with the content table, setting the border to use a simple GIF image that has our rounded corners. Note that we also have outside borders set to give us a little buffer space on the left and right. This is how we make sure we get fluid rendering without a horizontal scroll bar.

Then we set the thickness of that border to 8 on the top and bottom, because our rounded corner image is 16 pixels tall. But we only need 1 pixel on the left and right, because all we want is the black edge.

Next, we set the cell background to use a gradient GIF and size to fit. This is what allows the smooth transition in the background of the borders from top to bottom. Technically, we could also just use the built-in gradient with the correct RGB values.

The legend layer is actually in the paragraph above the content table. All the parameters are AUTO and the Z-index is 1.

Select the layer anchor, and bring up the text paragraph settings. Right align the paragraph. It will look like crap when you first do this.

Note: there's no particular reason to right-align this. I just like using the right side of the screen because it's usually underused in Notes applications. It also helps with large-screen fluid designs when you actually have content and controls over there to the right.

Then switch to the border controls, and put an outside right border that's fairly large. We're using 400px in this case to scoot the legend back over.

Inside that layer, we have a single-cell table to contain the field. The table has a simple border and a background color that's a bit lighter than the content table.

Then we just use the standard approach for programmatic row switching.

and...

The final result looks like this:

It probably sounds like a lot more work than it actually is. Do it once, and then it's pretty much copy/paste from there.

Another idea that I'm going to try out is using this approach for a search box. The search field itself can actually go in the legend box, and then that can wrap up an embedded view that shows the results. I'm thinking that would look absolutely fantastic.