Swing GUI design - java

I am newbie in Swing GUI components. I have to design a component like the image below.
I didn't know exactly what kind of gui component I have to use for this.
I am looking for suitable component like "Master & Details" panels in the image.
Panel should get the border and get the header section. In the header section I want to be place the panel name in the left as it is in the image & I want to place some labels in right side corner on this header. Please suggest me the suitable component.

Something like this:
JPanel demoPanel = new JPanel(new BorderLayout(10,10));
demoPanel.add(new JLabel("Demo"), BorderLayout.PAGE_START);
JPanel master = new JPanel(new BorderLayout());
master.setBorder(new EtchedBorder(EtchedBorder.LOWERED));
master.add(new JLabel("Master"), BorderLayout.PAGE_START);
JPanel detail = new JPanel();
detail.add(new JLabel("Detail"), BorderLayout.PAGE_START);
detail.setBorder(new EtchedBorder(EtchedBorder.LOWERED));
JPanel alpha = new JPanel(new BorderLayout());
alpha.add(new JLabel("Alpha (translucency)"), BorderLayout.PAGE_START);
JSlider slider = new JSlider(JSlider.HORIZONTAL);
slider.setMaximum(100);
slider.setMinimum(0);
slider.setMajorTickSpacing(10);
alpha.add(slider, BorderLayout.CENTER);
demoPanel.add(master, BorderLayout.LINE_START);
demoPanel.add(detail, BorderLayout.CENTER);
demoPanel.add(alpha, BorderLayout.PAGE_END);
It doesn't have the exact UI design (with the colors and spacing between the component) as your screenshot, but it gives you basic layout and should get you started

Related

How to fix GUI components "leaving" their panels or taking up more space they they are supposed to?

I am trying to make a GUI for a game. I am very new to Java, especially GUI. The code below is a snippet which is supposed to make a JFrame with nested panels for organization. It works until I add buttons to the button panel. They end up on the boardBckg panel. If I manage to place them on the correct panel the JTextField disappears or it takes up the entire screen. I have been working on this part of the code for the past two days and I could really use GUI tips.
private void makeWindow()
{
boardPanel = new JPanel();
boardBckg = new JPanel();
menuPanel = new JPanel();
save = new JButton("Save");
save.setSize(Buttons);
load = new JButton("Load");
load.setSize(Buttons);
replay = new JButton ("Replay");
replay.setSize(Buttons);
words = new JTextField();
frame = new JFrame(title);
boardPanel.setSize(PANEL);
boardPanel.setMaximumSize(MAX);
boardPanel.setMinimumSize(MIN);
boardPanel.setLayout(new GridLayout(m,n));
boardBckg.setSize(1000, 1000);
boardBckg.setBackground(Color.cyan);
boardBckg.add(boardPanel, BorderLayout.CENTER);
frame.setSize(1500, 1000);
frame.setResizable(false);
frame.setVisible(true);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
BoxLayout vertical = new BoxLayout(menuPanel, BoxLayout.Y_AXIS);
menuPanel.setSize(500, 1000);
menuPanel.setBackground(Color.blue);
menuPanel.setLayout(vertical);
frame.add(boardBckg);
frame.add(menuPanel);
JPanel iGiveUp = new JPanel();
iGiveUp.setBackground(Color.black);
JPanel buttons = new JPanel();
buttons.setBackground(Color.darkGray);
buttons.add(save);
buttons.add(load);
buttons.add(replay);
menuPanel.add(iGiveUp);
menuPanel.add(buttons);
iGiveUp.add(words);
boardBckg.add(boardPanel, BorderLayout.CENTER);
The default layout of a JPanel is the FlowLayout. You can't just specify a BorderLayout constraint when you add the component to the panel.
frame.add(boardBckg);
frame.add(menuPanel);
The default layout for (the content pane of) the frame is a BorderLayout. If you don't specify a constraint, then the component is added to the BorderLayout.CENTER. Problem is only one component can be added to the CENTER so you only see the last comoponent added.
frame.setVisible(true);
Component should be added to the frame BEFORE the frame is packed and made visible. So the above statement should be the last statement in your constructor.
I have no ideas what your desired layout is but you need to start with something simple and take advantage of the default BorderLayout of the frame.
So your basic logic might be something like:
JPanel menuPanel = new JPanel()
menuPanel.setLayout(new BoxLayout(menuPanel, BoxLayout.Y_AXIS));
menuPanel.add(...);
menuPanel.add(...);
JPanel center = new JPanel();
center.setLayout(...);
center.setBackground( Color.BLUE );
center.add(...);
frame.add(menuPanel, BorderLayout.LINE_START);
frame.add(center, BorderLayout.CENTER);
frame.pack();
frame.setVisible( true );
The main point is to break the panels down logically and add them to the frame one at a time. So first get the menu and its child components added to the frame is the correct position. Then you can add the CENTER panel and its child components.

Centering a fixed size canvas in a JFrame

I'm in the process of creating a circuit editor (similar to any regular paint software with a basic menu and a canvas with specifiable dimensions). I am currently trying to transform the previously unscrollable canvas (JPanel) to a scrollable one.
The obvious design error at the moment is that while the scrollbars seem to correctly reflect the internal size of the canvas (which can of course be way bigger than the JFrame), due to the canvas JPanel being added in the CENTER of the BorderLayout of the master panel, it always resizes along with the JFrame.
public final class MainFrame extends JFrame
{
public MainFrame()
{
JPanel menuPanel = new JPanel(new FlowLayout(FlowLayout.LEFT));
// Populate Menu Panel
// ...
JPanel canvasPanel = new JPanel();
canvasPanel.setBackground(Color.white);
Dimension canvasDims = new Dimension(800,600);
canvasPanel.setPreferredSize(canvasDims);
canvasPanel.setMinimumSize(canvasDims);
canvasPanel.setMaximumSize(canvasDims);
JScrollPane canvasScrollPane = new JScrollPane(
canvasPanel,
JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED,
JScrollPane.HORIZONTAL_SCROLLBAR_AS_NEEDED);
JPanel masterPanel = new JPanel(new BorderLayout());
masterPanel.add(menuPanel, BorderLayout.NORTH);
masterPanel.add(canvasScrollPane, BorderLayout.CENTER);
setContentPane(masterPanel);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(1200, 700);
setMinimumSize(new Dimension(500, 500));
setLocationRelativeTo(null);
setVisible(true);
}
I've read quite a few posts regarding centering JPanels and scrollbars but with both complexities added together, things might be a bit more complicated as I haven't yet found a solution.
What I'm really trying to achieve is to have the canvas' JPanel fixed in whatever size the user might have specified and centered in the middle as well as the scrollbars behaving as one would expect like in the beloved windows' paint:
How would you go about doing this/fixing my design? Any help would be greatly appreciated!
P.S. Happy new Year :)
JPanel fixed in whatever size the user might have specified and centered in the middle as well as the scrollbars behaving as one would expect
So you need to nest panels so the canvas panel can be displayed at its preferred size, while the parent panel resizes with the size of the frame.
An easy way to do this is with a JPanel that uses a GridBagLayout. Then you add the canvas panel to this panel using the default GridBagConstraints.
So the basic structure of the panels would be:
JPanel canvas = new JPanel();
canvas.setPreferredSize( new Dimension(300, 300) );
canvas.setBackground(Color.RED);
JPanel wrapper = new JPanel( new GridBagLayout() );
wrapper.add(canvas, new GridBagConstraints() );
frame.add(new JScrollPane(wrapper));
Note: there is no need for your "masterPanel". The default layout manager for the content pane of a JFrame is a BorderLayout, so you just add the "menuPanel" and "scrollPane" directly to the frame with the proper BorderLayout constraints.

java accessibility for nested panel inside a main panel in swing

This is my first time using java accessibility for a swing application. Here is a brief code for drawing the swing application. There are more code for the swing application, but i think that i just want to provide a outline of the layout. mainPanel has a title and a tree in the left side and a content panel in the right.
JPanel mainPanel = new JPanel();
// add title to the main panel
JList list = new JList();
// add list model which will be displayed in a tree.
JScrollPane scrollPane = new JScrollPane(list, ScrollPaneConstants.VERTICAL_SCROLLBAR_AS_NEEDED, ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER);
mainPanel.add(scrollPane);
JPanel contentPanel = new JPanel();
// add components(radio buttons and some text fields) to the content panel
mainPanel.add(contentPanel);
JFrame mainFrame = new JFrame();
mainFrame.add(mainPanel);
When the swing application is launched, i hear a voice reading title from the main panel and some radio buttons in the content panel, but I don't hear anything from the tree in the left side. The tree contains information about the installation step, but it doesn't read anything.
I am not sure if it is related to the code or a layout or a panel focus issue.
It would be great if someone who has done accessibility for swing has had a similar issue provides any tips or help.
Try this hope it will be fine
Add another panel to mainpanel
JPanel listPanel=createPanel();
JPanel contentPanel = new JPanel();
// add components(radio buttons and some text fields) to the content panel
mainPanel.setLayout(new BorderLayout());
mainPanel.add(listPanel,BorderLayout.WEST);
mainPanel.add(contentPanel,BorderLayout.EAST);
JFrame mainFrame = new JFrame();
mainFrame.add(mainPanel);
Then create a function
private JPanel createPanel(){
JPanel listPanel=new JPanel();
JList list=new JList();
JScrollPane scrollPane = new JScrollPane(list,ScrollPaneConstants.VERTICAL_SCROLLBAR_AS_NEEDED,ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER);
listPanel.add(scrollPane);
listPanel.setBorder(BorderFactory.createEmptyBorder());
return listPanel;
}

overlapping JPanels in the GUI

I am using BorderLayout in my application. I have a main panel to which I add two JPanels at the center. I want one of them to be transparent.
My code is :
mainPanel = new JPanel();
mainPanel.setLayout(new BorderLayout());
mainPanel.add(getGraphPaneScrollPane(), BorderLayout.CENTER);
mainPanel.add(getSituationPanel(), BorderLayout.CENTER);
Code for these two functions is :
public JScrollPane getGraphPaneScrollPane() {
if (graphPaneScrollPane == null) {
graphPaneScrollPane = new JScrollPane();
graphPaneScrollPane.setViewportView(getGraphEditorPane());
}
return graphPaneScrollPane;
}
private JScrollPane getSituationPanel(){
if(situationPanel == null){
logs.debug("Initializing Situation Panel");
situationPanel = new JScrollPane();
situationLabel = new JLabel("");
situationLabel.setVerticalTextPosition(JLabel.BOTTOM);
situationLabel.setHorizontalTextPosition(JLabel.CENTER);
situationLabel.setVerticalAlignment(JLabel.TOP);
situationLabel.setHorizontalAlignment(JLabel.CENTER);
situationLabel.setBorder(BorderFactory.createTitledBorder(""));
situationLabel.setBackground(Color.WHITE);
situationLabel.setOpaque(true);
situationLabel.setVerticalAlignment(SwingConstants.TOP);
situationPanel.setViewportView(situationLabel);
}
return situationPanel;
}
Now I want situationPanel to be transparent and getGraphPaneScrollPane to be above that in the GUI, because getGraphPaneScrollPane is the canvas, which I use to draw nodes.
I want situationPanel to be transparent and getGraphPaneScrollPane to be above that in the GUI,
The panel that is on top is the panel that needs to be transparent. If the panel on top is opaque then you will never see the panel under the top panel.
So making changes to the layout is the last thing I want.
Well that is what you are going to need to do. You can't just add two panels to one panel and expect it to work the way you want it to. Most Swing layout managers are designed to lay out components in two dimensions, not on top of one another.
Your current code is:
mainPanel.setLayout(new BorderLayout());
mainPanel.add(getGraphPaneScrollPane(), BorderLayout.CENTER);
mainPanel.add(getSituationPanel(), BorderLayout.CENTER);
You could try using the OverlayLayout, it is designed to lay out panels on top of on another. The code should be something like:
JPanel overlay = new JPanel();
overlay.setLayout( new OverlayLayout(overlay) );
overlay.add(getSituationPanel(), BorderLayout.CENTER); // add transparent panel first
overlay.add(getGraphPaneScrollPane(), BorderLayout.CENTER);
mainPanel.setLayout(new BorderLayout());
mainPanel.add(overlay);

Java Swing - JLabel Location

I have problem while setting the Jlabel location.
I set the content pane to some JPanel, I created and tried to add my JLabel.
JLabel mainTitle = new JLabel("SomeApp");
mainTitle.setFont(new Font("Arial",2 , 28));
mainTitle.setBounds(0,0, 115, 130);
getContentPane().add(mainTitle);
I want that my JPanel will be on the top left corner on my application and what I am getting is "SomeApp" on the top center.(and not top left).
btw I tried to add JButton the and the I can`t change the width,height,x,y of the JButton.
Swing uses Layout Managers to place the components.
You have to understand how they work to use them effectively. You can set the layout manager to null, and do the layout your self, but is not recommendable because you'll have to keep track of new components each time, and perform layout computation your self when the window moves shrink etc.
Layout managers are a bit hard to grasp at first.
Your windows could be like this:
Using this code:
import javax.swing.*;
import java.awt.Font;
import java.awt.FlowLayout;
class JLabelLocation {
public static void main( String [] args ) {
JLabel mainTitle = new JLabel("SomeApp");
mainTitle.setFont(new Font("Arial",2 , 28));
//mainTitle.setBounds(0,0, 115, 130); //let the layout do the work
JFrame frame = new JFrame();
JPanel panel = new JPanel(new FlowLayout(FlowLayout.LEFT));// places at the left
panel.add( mainTitle );
frame.add( panel );// no need to call getContentPane
frame.pack();
frame.setVisible( true );
}
}
Where a particular widget ends up in its container depends on the layout manager that it's using. The layout manager determines how to resize and arrange the widgets to make them fit appropriately. Obviously, the default layout for the content pane decided that the top center was the best place to put the JLabel.
If you want to get to not use a layout manager and just place everything yourself (which generally isn't the best way to lay things out btw), then add:
getContentPane().setLayout(null);
Using layouts is usually a better idea since they allow for dynamic resizing of components. Here's how you'd do it with a BorderLayout:
this.getContentPane().setLayout(new BorderLayout());
this.getContentPane().add (new JLabel ("Main title"), BorderLayout.NORTH);
If you want to add something to the right of the label you could create an additionnal panel with it's own layout :
// Create a panel at the top for the title and anything else you might need
JPanel titlePanel = new JPanel (new BorderLayout());
titlePanel.add(new JLabel ("Main title"), BorderLayout.WEST);
// Add the title panel to the frame
this.getContentPane().setLayout(new BorderLayout());
this.getContentPane().add(titlePanel, BorderLayout.CENTER);
Here are some usefull links to get started with layouts:
http://download.oracle.com/docs/cd/E17409_01/javase/tutorial/uiswing/layout/visual.html
http://download.oracle.com/docs/cd/E17409_01/javase/tutorial/uiswing/layout/using.html

Categories

Resources