How to make this GUI layout in Swing - java

For a project I have an almost working code, but I do not have the GUI. I want to make a screen that consists of clickable labels and has the following design:
I was thinking about first making the middle GridBagLayout with with a dimension of 6 by 2. Then 'wrapping' that up and adding the two buttons to the side, and then 'wrapping' that and adding the two buttons below.
I am inexperienced with Swing, and I have no idea how to start. I hope someone can give me some hints in the right direction.

Several approaches to a very similar layout using GridBagLayout and/or nesting are shown here. Consider using JButton for each clickable area, rather than JLabel. If you go with a nested layout,
Use BorderLayout for the enclosing panel.
Add buttons to EAST and WEST for the leftmost and rightmost areas.
Add a GridLayout(1, 2) of buttons to SOUTH for the bottom row.
Add a GridLayout(2, 6) of buttons to CENTER for the central twelve areas.
Addendum: A critical issue will be what you want the resize behavior to be.

as said in the comments above you could (should ?) use the WYSIWYG Window Builder plugin available for Eclipse; it's simple to use.
However, that doesn't answer your question, so to do so, here is how I would structure the UI if I were to make one like that :
http://www.hostingpics.net/viewer.php?id=902716gZHkK26.jpg
I basically use BoxLayout because that's the one I'm most familiar with. Every Rectangle is a JPanel. I think the image is pretty self eplanatory.

Related

Java Swing GUI: How to put components from bottom to top but not vice versa?

Would like to put components from bottom to top, in context of my JFrame window size being fixed at a value (by JFrame.setSize()). I've attempted various approaches, such as the most popular one BorderLayout where theoretically I just have to add the JPanel's by stating BorderLayout.SOUTH, but they just can't get it done if there're not any components on top of the BorderLayout.
What I'm encountering now is:
And what I'm expecting to attain is:
In other words, what I want to accomplish is to stick the JPanel's onto the bottom edge with nothing else on top of them. But if there're no components stated e.g. BorderLayout.CENTER or BorderLayout.NORTH, then the above problem occurred.
Any idea, please :D?
(Btw, it seems in Java Swing, adding components from bottom to top is just more difficult than that from right to left?)

Java button within graphics panel

I'm relatively new to developing GUI's within java so this may well be a stupid question or quite simply not possible to achieve but here we go.
I've created 1 single JPanel with no border layout set up or anything like that and I intended to paint a GUI on top of it using the graphics class. The JPanel is just plain black and then I've drawn a huge box over it leaving the black just as a border, and painted the whole GUI within this white box.
I want to add buttons within that white box GUI as well but I've no idea how. In fact they don't even have to be traditional buttons JButtons, if I could just draw a shape and have that act as a button then add an event handler to just that shape that would work also but I don't know how I'd do that either.
I have so much code for my whole program (it's a school coursework project) that I'm not sure which parts would even be worth sharing to assist with this question since there's so many GUI aspects I've already drawn so I've tried to just explain my issue in words.
Honestly I have no clue what I'm doing so any help would be appreciated.
EDIT: Here's a screenshot of my current GUI with a 'sketch' of how and where I'd like to be able to add buttons.
GUI Image
As with any suitably complex UI, you need to start by breaking it down into manageable chunks, focusing on areas of mutual interaction and functionality.
For example...
Says to me that you have two primary UI elements, the left and the right.
This could easily be established with a GridLayout, but, if the two sides are not equal in width, a GridBagLayout might be more appropriate
The right side to me says simply, JTable. You could place this within a container using a BorderLayout, allowing the table to occupy the CENTER position.
The key information would then a component laid out with either a GridLayout (top and bottom) or a GridBagLayout if the requirements are more complex. This component would then be added to the SOUTH position of the BorderLayout.
Again, this is pretty simple. The primary layout would probably be a BoderLayout, with the title in the NORTH position, the graph in the CENTER and the buttons wrapped in a component in the SOUTH.
You could use either a FlowLayout or GridBagLayout to layout the buttons depending on your how you want them to appear
Recommendations
Have a look at:
Laying Out Components Within a Container
How to Use Tables
And for the "border", I'd recommend you have a look at LineBorder. Take a look at How to use Borders more details

Position of JComponents using Netbeans GUI Swing Builder

I'm developing a graphic interface using Java and Swing, and I'm having a hard time getting the JButtons to stay in their position while changing from one panel to another.
There are three buttons in a row aligned in the left bottom of each panel, all the panels the same size, but somehow they manage to change their position a little when I run the application (on the design preview they show up in the right place). It's getting a bit annoying. I'd appreciate any help
Are you trying to do tabs? If you are, a JTabbedPane will do this much better than a button.
Since you are using the Netbeans GUI Builder, look at the options in the Component panel on the left. It has Swing tabbed panes and AWT panes if you really want.

JScrollPane doesn't show if BorderLayout constraint is CENTER?

Been developing a game for a while, and currently re working the GUI, or at least trying to. Had the massive problem of not being able to resize the frame (without issues), as I didn't understand layout managers very well. A few projects later, and time to come back and do some more on the game, and I hit a problem...
The basic layout of the main frame is, mainPane, containing one gameScrollPane and one controlPanel. The scroll pane is a scroll pane, and the control panel a normal panel. The scroll pane contains the main game panel.
As I wanted the scroll pane to take up most of the screen, with the control panel taking up a small lower area, much the same as many Sim like games, so chose the Border layout for the mainPane. I added the scroll pane and set the constraints CENTER and the control panel added and constriants SOUTH. This didn't show the scroll pane, so I played around trying different constraints, and it seems that only when I set the scroll pane constraint to North, does it display at all.
To demonstrate this, I have created a quick video...
http://screenjel.ly/q5RjczwZjH8
As you can see, when I change the value of NORTH to CENTER and re run, it's like its not there!
Bonus points for anyone who can see a clear second problem which I may start another question for after this issue is solved!
I thank you for your time to read this.
Thanks in advance for any ideas or thoughts :)
Rel
If you'd posted some code to start with then you might have gotten a really quick answer. Luckily, you posted a link in the comments to the other response.
The setContentPane() stuff is weird, especially after doing some things to it that will then get wiped out. However, that's not your problem.
The issue is that you are adding levelMaker and personMover right to mainPane without any constraints. These will then be blowing away anything you set for CENTER... in this case the previously set gameScrollPane.
That's why you see it for NORTH and not for CENTER.
I can't get the video to show. It's been buffering for ages.
My guess would be that the scrollpane is in fact filling the center; it's just your game panel that's not being shown.
Your game panel needs to return reasonable values for getPreferredSize().
Update
Another thing you may want to do is have your game panel implement the Scrollable interface. You can then override getScrollableTracksViewportWidth and ...height to return true so your panel will be forced to the scrollpane's dimensions.

How do I layout a panel on the top of my Dialog so that it has two buttons?

I need to layout a panel on the top of my Dialog so that it has two buttons (Save and Cancel).
I want the save to be on the left and Cancel to be on the right side.
I've created a JPanel using the MigLayout and docked it to the north of the content pane, and can't for the life of me figure out how to add the two buttons to it so that they appear as I want them. Docking them within the panel seems to get rid of all padding in the dialog (which looks terrible).
Any help would be greatly appreciated.
As an aside, you should probably not be dictating which button is on the left or right. That's one of the way cool things about MiGLayout (platform independence, even on things such as where the cancel button should go).
p.add(cancelButton, "tag cancel");
p.add(okButton, "tag ok");
Now the buttons will appear in the correct order, based on platform.
Here's an article with code doing what you are going for. I strongly recommend avoiding trying to force the size of components like buttons (these really should come from the platform look and feel). Also, docking is fine if it makes sense to do so, but I rarely find it to be necessary. Instead of building a totally separate panel for your buttons, just span the row that contains the buttons - much cleaner, and you don't wind up with all of the nested panels.
It's hard to break from the border layout technique of nested panels, but once you get the hang of it, MigLayout is a dream. BTW - I understand that there are times where you might want to build up the button panel in a library - if that's the case, then separate panels may make sense (although you could also have the library add a button row to an existing panel, instead of returning a panel that you then add to the layout).
Doh, always happens as soon as you ask a question, the answer pops out:
JPanel buttonPanel = new JPanel(new MigLayout("fill","[50][50]",""));
buttonPanel.add(saveChangesButton);
buttonPanel.add(cancelButton, "align right");
getContentPane().add(buttonPanel, "dock north");
Note that the content pane is using the MigLayout too.

Categories

Resources