File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes Swing / AWT / SWT and the fly likes Proper way to show images, whose alignment is based on a condition Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » Swing / AWT / SWT
Bookmark "Proper way to show images, whose alignment is based on a condition" Watch "Proper way to show images, whose alignment is based on a condition" New topic

Proper way to show images, whose alignment is based on a condition

Panagiotis Kalogeropoulos

Joined: May 27, 2011
Posts: 99

I am getting a number of images from a database and then I have to show them in a gui, with a specific alignment. The alignment will be tabular-like and is based on how many images are returned from the database, meaning that if I get less than 10 images (from 1 to 9), they have to appear in columns of three. If I get more than 10, they have to appear in columns of four. Also, in case the number of images does not fully complete all the rows, the first row should show the remaining images, aligned in the center. For instance, if I get 8 images (meaning that I will need to show them in 3 columns), the first row should show 2 images (aligned in the center) and all other rows 3 images. I give you some more examples in the attached file, just to make it more clear as to how the images should appear.

The way that I have handled this so far is by using JLabels inside JLabels, using the fact that since JLabel is a Container, I can set the layout and add other components in it. At the beginning I am setting the layout inside the JLabel to be GridLayout:

Then I try to see if we have any remaining images that need to be shown in the first row.

Now, in order to align them to be in the center, I create two dummy images as placeholders:

So after I have taken care of the first row, I simply continue adding images to the next rows. This is fine. The problem is that since I am using GridLayout as the layout manager, adding dummy images to first row makes it to lose the alignment. So this approach is not feasible if I want the images to appear correctly. My question is what should be the best way to solve this? Should I use GridBagLayout (or another similar layout manager, such as BoxLayout) ? Maybe get a Graphics object and paint the images directly? Maybe another approach that I haven't thought about it? What do you think?

Thanks a lot in advance.

[images alignment example.JPG]

Paul Clapham

Joined: Oct 14, 2005
Posts: 19973

If I understand the first part, about rows of three and four and so on, it means that you have to arrange the images in three rows, of which the middle and bottom rows must be full and the top row will only be full if the number of images is a multiple of three. And if the top row isn't full, then the images in it have to be centred.

So yes, that means that a GridLayout for the whole thing isn't always going to work when the top row isn't full.

But you don't have to choose one layout manager to layout the whole thing. Here's an alternative: use a GridLayout (or a vertical BoxLayout) to define a grid with three rows and one column. That gives you three cells, one cell per row. Then for each of these cells (rows), use a horizontal BoxLayout. For the top row, you can put in invisible fillers to cause the images in it to be centred, or something like that. Anyway have a look at How to Use BoxLayout, you'll probably get more and/or better ideas from it.
Darryl Burke

Joined: May 03, 2008
Posts: 5115

Sounds doable with GridBagLayout. By changing the GridBagConstraints associated with already-added components via getConstraints(...) / setConstraints(...) and invoking revalidate(), you can change the number of columns when required.

luck, db
There are no new questions, but there may be new answers.
Panagiotis Kalogeropoulos

Joined: May 27, 2011
Posts: 99

True, BoxLayout and GridBagLayout were the next alternatives, including using drawImage from Graphics class. I just wanted to know if there could be another way of achieving the same thing. I think I will try them all and see which one is more convenient.
I agree. Here's the link:
subject: Proper way to show images, whose alignment is based on a condition
jQuery in Action, 3rd edition