aspose file tools*
The moose likes Swing / AWT / SWT and the fly likes UI Design Question Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of JavaScript Promises Essentials this week in the JavaScript forum!
JavaRanch » Java Forums » Java » Swing / AWT / SWT
Bookmark "UI Design Question" Watch "UI Design Question" New topic
Author

UI Design Question

Riaan Nel
Ranch Hand

Joined: Apr 23, 2009
Posts: 160

Hi Guys

I'm working on an application, and I'm divided on how I should approach the user interface. I have a number of tables in the database for the application. Each of these tables is represented on a form in the application, which displays data on a JTable. On some of the tables, however, there are lots of fields, and I don't think it's viable to display all of these fields on the table. I could do a horizontal JScrollPane, but I'm not fond of scrolling horizontally. In my opinion, it's not very user friendly and it's easy for the user to lose track of what exactly they're looking at.

As I see it, I have two other options. 1.) Stick the JTable on a JTabbedPane, with additional tabs for the fields which don't appear on the table. 2.) Show a couple of fields on the table, and allow the user to double-click on a row or click a "Details" button in order to bring up a dialog which allows the user to view/edit the other fields. I think that it could be overkill to have to manage a bunch of dialogs, so I'm leaning towards option 1.

How would you do it? Is there some sort of unwritten standard?

Thanks for your input.

Cheers,
Riaan


"The reasonable man adapts himself to the world; the unreasonable one persists in trying to adapt the world to himself. Therefore, all progress depends on the unreasonable man." - George Bernard Shaw
Paul Clapham
Bartender

Joined: Oct 14, 2005
Posts: 18856
    
    8

I would go for number 2, although I wouldn't use a Dialog for the "secondary" columns. Instead I would have a UI with left and right panels. In the left panel would be the JTable with the "primary" columns for the table (e.g. employee number and name). In the right panel would be a JPanel with the "secondary" columns for the selected row of the table. I have used this design extensively with JTrees in the left panel.

(If you were pushed for time you might be able to use code generation to produce the right-hand JPanel for each of your tables.)

However that choice was partly because I didn't really understand how number 1 would look.

Horizontal scrolling? Definitely not, I agree with what you said.
Riaan Nel
Ranch Hand

Joined: Apr 23, 2009
Posts: 160

Paul Clapham wrote:I would go for number 2, although I wouldn't use a Dialog for the "secondary" columns. Instead I would have a UI with left and right panels. In the left panel would be the JTable with the "primary" columns for the table (e.g. employee number and name). In the right panel would be a JPanel with the "secondary" columns for the selected row of the table. I have used this design extensively with JTrees in the left panel.

(If you were pushed for time you might be able to use code generation to produce the right-hand JPanel for each of your tables.)

However that choice was partly because I didn't really understand how number 1 would look.

Horizontal scrolling? Definitely not, I agree with what you said.

Paul, thank you for your response.

With regards to the first option - using an employee table as an example, I envision something like an "Overview" tab which contains a JTable displaying an employee number and name. There could then be a second tab (let's call it the "Address" tab) which displays address information for the employee on the selected row on the JTable, a "Dependents" tab and so forth.

I'm worried that I'll waste space by splitting the screen into left and right panels, particularly on forms where you could have something like invoices with a customer ID and date at the top, and all the items on an invoice at the bottom. If I do a top/bottom split between the header and the detail lines, and a left/right split for additional information on both the header and lines sections of the screen, I would essentially have the screen divided into four little blocks. For JTrees the approach would work brilliantly though.
Paul Clapham
Bartender

Joined: Oct 14, 2005
Posts: 18856
    
    8

Well, you don't need to use the same layout for all of your tables (consistency is good, except when it results in something bad). You might want a standard layout for simple tables, but use non-standard layouts for complicated tables.
Rob Camick
Ranch Hand

Joined: Jun 13, 2009
Posts: 2213
    
    7
I envision something like an "Overview" tab which contains a JTable displaying an employee number and name. There could then be an "Address" tab... and a "Dependents" tab and so forth.


There is no reason the right panel couldn't contain tabs for all the secondary information.

However I would like to keep the "Overview" table visible in the left pane. I believe that you should always know which employee you are looking at. You should not have to flip back to the first tab to double check.

The main design approach should be that whenever you "click" on something for more details, the original information should still be visible.
Martin Vajsar
Sheriff

Joined: Aug 22, 2010
Posts: 3611
    
  60

I'd just note that JTable with horizontal scrollbar has some disadvantages, but has some advantages as well: it allows the user to sort the data by any column using well-known interface (provided you setup the sorters right, of course), and if the column reordering is switched on, allows the user to bring most used columns to the left, which may partially alleviate the scrolling discomfort. Moreover, users with really large screens might be able to see more data at once than possible with other designs mentioned here. I don't know whether this would be pertinent to your design, of course, just that I have built (and heavily used) a few forms like this.

I also prefer to put horizontal scrollbar to every JTable and switch off column auto resize, even when I aim to fit all columns into the view. That way the user can always widen the columns to show texts that are actually wider than was anticipated, or if he works on smaller screen than was expected.
Riaan Nel
Ranch Hand

Joined: Apr 23, 2009
Posts: 160

Rob, you make a valid point. I'm now considering always having the primary data visible at the top of the screen, with tabs below it. If one of the tabs contains "detail" records, I think it'll work to create another table within the tab, and list it's data in a vertical scroll pane underneath the table. It's not particularly pretty, but I don't foresee that many of the tabs in my application will require such a layout - most of the tables are simple and straightforward.

Martin, your approach could be well-suited to my dashboard-like panels. From a general presentation point of view, however, I'd rather group information together on tabs. Something like a multi-line employee address could look pretty strange if its spread across table columns.

Thank you for your input everyone!
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: UI Design Question