Skip to main content

More Information about the Address Book Frame

Posted by joconner on October 12, 2006 at 11:04 PM PDT

Many of you made comments on my last blog about the frame specification. I think there are lots of ways to do this particular demo, many of them bad. I'm positive that what I show here will not look right to anyone. I apologize now that I am not a UI designer, never have been, and I won't even play one on TV. However, we have to agree on something in order to compare the abilities of various layout managers, and we probably should use at least one common panel spec as a start. That's not to say that you shouldn't disagree with how I've laid this out...you should, and then you should proceed to lay out the perfect panel for this app, and describe it as well...all over there on that wiki site I pointed you to earlier. I'm just not equipped to host the showdown on this blog.

Here's the panel once again, this time with a few marked points of interest to make things clearer (or worse as the case may be):

addressbookdemo.png

Some details on this layout:

I used the "Free Design" mode of NetBeans 5.5 GUI Builder to create this frame. It controlled much of what I did because, well, uh...I haven't yet learned to harness the power of that GUI builder yet. Despite this design's shortcomings (I admit them), let's use it as a starting point to compare layout managers, not the quality of my design.

The loose spec for this follows:

  1. The JList is anchored top and left to the panel.
  2. Labels for last name, phone, address 1-2, city, state, and country are aligned along the right as shown by the red line 'A'.
  3. The text fields for last name, phone, address 1-2, city, state, and country are aligned to the left as shown by line 'B'. According to NB, these text fields are at the preferred spacing from their labels. I accepted that and moved on. Does your layout do this? If not, no problem, move along, but tell us about that.
  4. The layout here doesn't show it, but I wanted the text fields for last name, phone, address 1-2, etc to be aligned along line 'C'. Although last name and phone text fields are aligned on line 'C', text fields for city, state, and country are not. I had to guesstimate it to make them appear aligned. Ignore my failure...I want them all aligned on the right too, despite the fact that address 1 and 2 break them away from the last name and phone fields above.
  5. The labels for First Name, Email, and Postal code are aligned to the left along line 'D'...again using the preferred gap for the Gnome window environment I used at the time. This gap is supposedly different when running on different platforms. Like I said, move along on this point if you have to. Just mention that fact in your analysis.
  6. Text fields for first name, email, and postal code are anchored to the left against their labels. The line 'E' shows that they are not aligned with each other.
  7. The text fields for first name, email, address 1-2, and postal code expand out to a "preferred" gap along the right of the panel, aligned at the edge of the panel at line 'F'.
  8. The row of buttons (new, delete, etc) are not part of any column above them...they are "indented" to the right of the list box. Again, each button is spaced some platform specific distance from its neighboring buttons.
  9. The list box expands vertically too to take up extra vertical space whenever the panel expands.
  10. The list box and all text fields expand horizontally to use extra space equally when the panel expands.
  11. The row of buttons is not anchored to the bottom. Instead, it should stay anchored to the left and top, some distance from the list box and the bottom of the country label and textfield.

Did that description help? Or maybe hurt? There's no obligation here, or time frame for that matter. If you feel like using your layout manager to try this frame, please do so, and let me know. I'll point out your solution, and maybe we'll all learn something about an alternative layout manager that helps us do our job better and easier.

You should make an entry on the Layout Manager Showdown wiki page, and put your analysis and comments on a subpage there. Good wiki gnomes should help us prune and refactor the page as we make progress.

Related Topics >>