JFrame Layout: Header and 2 Text Areas - java

I have been trying to code a basic IDE for my programming language but I have not had much experience with JFrames. I am trying to set it up so that the window has a main header and then two text areas below it. I can get the header all sorted out; it's just 3 labels centered in the window. But I cannot get the two text areas to work. I have only tried one so far and I am already seeing loads of stuff wrong. Whenever I resize the window, it doesn't stay beneath the header (which is a Box Layout), but it goes beside it. I also want to make it so that the text areas increase in size when the window changes size. Here is the code that I have so far (this only has one text area).
JFrame frame = new JFrame("DotDotIO");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new FlowLayout());
frame.setPreferredSize(new Dimension(800,600));
frame.setMinimumSize(new Dimension(600,450));
Box titleText = Box.createHorizontalBox();
JLabel title = new JLabel("<html><span style='color: teal;'>DotDotIO</span></html>");
title.setFont (title.getFont().deriveFont(64.0f));
JLabel version = new JLabel("<html> Version 1.0<br>Created by Luke Carr</html>");
JLabel slogan = new JLabel("<html>Full Potential<br>Minimal Knowledge</html>");
titleText.add(version);
titleText.add(title);
titleText.add(slogan);
titleText.setAlignmentX(frame.getWidth() / 2);
Box inputContent = Box.createHorizontalBox();
JTextArea code = new JTextArea(35,65);
code.setEditable(true);
code.setBorder(null);
inputContent.add(code);
frame.add(titleText);
frame.add(inputContent);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
I currently have it setup so that the text area has a fixed size, but I would like it setup so that the left text area has a width of 65% of the screen, and the right text area takes up 15% of the screen, with 5% margin either side and 5% margin in between both. One final note is that the way my language currently interprets the code is through a file, and then it loops through each line. How would I be able to do this with all of the code typed in the text area on the left?
Currently what I have:
Sorry for asking so many questions. Although I have been doing Java for quite a long time, JFrames have never really come up and I am very new to them.

A box layout doesn't offer much flexibility when it comes to re-sizing the components. This is a link to a similar question. You might want to try a different layout manager.
BoxLayout stretches component to fit parent panel

I would consider using a BorderLayout, and working with Insets of the inner panels. This would give you a full Frame, where you can specify a percentage or fixed pixel amount around the text areas, so no matter what size the window is, the layout adjusts itself to an appropriate distance.

You should probably first put everything into a JPanel and add that to the frame instead of directly adding everything to the frame.
JPanel mainPanel = new JPanel();
mainPanel.setLayout(new BoxLayout(mainPanel, BoxLayout.Y_AXIS))
...
frame.getContentPane().add(mainPanel);
I gave the BoxLayout an alignment of Y_AXIS so that the components will go from top to bottom. But then how do you display two headers side by side? Nest another JPanel inside mainPanel:
JPanel info = new JPanel();
info.setLayout(new FlowLayout(FlowLayout.RIGHT, 50, 10));
JLabel version = new JLabel("<html> Version 1.0<br>Created by Luke Carr</html>");
info.add(version);
JLabel slogan = new JLabel("<html>Full Potential<br>Minimal Knowledge</html>");
info.add(slogan);
mainPanel.add(info);
I set it to a FlowLayout in order to align the JLabels to the right, and so that if the width of the window is too small then Swing will automatically realign them vertically. There are many other ways of doing this, but this is the way I prefer. Aligning the components to the right gives the 65/15 proportions you wanted. If that's not what you wanted, you can change it to FlowLayout.CENTER, FlowLayout.LEFT, etc. The 50 and 10 in the FlowLayout's constructor are the vertical and horizontal spacings between components.
To create the 5% margin on either side of them, I just set the entire mainPanel's border to an empty border that extends for 10 pixels on each side
mainPanel.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));
If you just want a border around the version number and the slogan, set info's border the same way.
For your last question: to read the code line by line, use code.getText() and split it using String.split(), as mentioned here.
I rewrote the code and changed some settings:
import java.awt.FlowLayout;
import javax.swing.BorderFactory;
import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextArea;
public class Main
{
public static void main(String[] args)
{
JFrame frame = new JFrame("DotDotIO");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel mainPanel = new JPanel();
mainPanel.setLayout(new BoxLayout(mainPanel, BoxLayout.Y_AXIS));
mainPanel.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));
JPanel title = new JPanel();
JLabel header = new JLabel("<html><span style='color: teal;'>DotDotIO</span></html>");
header.setFont(header.getFont().deriveFont(64.0F));
title.add(header);
mainPanel.add(title);
mainPanel.add(Box.createVerticalStrut(10));
JPanel info = new JPanel();
info.setLayout(new FlowLayout(FlowLayout.RIGHT, 50, 10));
JLabel version = new JLabel("<html> Version 1.0<br>Created by Luke Carr</html>");
info.add(version);
JLabel slogan = new JLabel("<html>Full Potential<br>Minimal Knowledge</html>");
info.add(slogan);
mainPanel.add(info);
mainPanel.add(Box.createVerticalStrut(20));
JPanel codePanel = new JPanel();
JTextArea code = new JTextArea(25, 65);
codePanel.add(code);
mainPanel.add(codePanel);
frame.getContentPane().add(mainPanel);
frame.pack();
frame.setVisible(true);
}
}
If I misunderstood your question, please comment. I hope this helps.
--- EDIT ----------------
The way a FlowLayout works is that it places components in a particular direction until it reaches the edge of the window; then it "hits return" and the components are placed under the first row of components. That is how the two labels were aligned the way they were and are able to align vertically if the screen size is too small.

Related

How to make Components align to the TOP in JPanel with BoxLayout?

I'm developing a game called GalaxyWar, and I am trying to make a map selection menu. I found a problem that when I am using a BoxLayout with BoxLayout.Y_AXIS on a JPanel with setAlignmentX(CENTER_ALIGNMENT), the subcomponents (JPanel's) with assigned size, take up the entire height of the panel (all together), instead of the assigned height!
Here is my code:
scrollPane = new JScrollPane();
scrollPane.setBounds(160, 11, 452, 307);
add(scrollPane);
mapContainer = new JPanel();
mapContainer.setAlignmentX(CENTER_ALIGNMENT);
mapContainer.setAlignmentY(JPanel.TOP_ALIGNMENT);
mapContainer.setLayout(new BoxLayout(mapContainer, BoxLayout.Y_AXIS));
scrollPane.setViewportView(mapContainer);
JPanel demoPanel = new JPanel();
demoPanel.setLayout(null);
demoPanel.setBackground(Color.YELLOW);
demoPanel.setSize(50, 100);
mapContainer.add(demoPanel);
I've researched on this for long, but couldn't find any solutions so far.
try to check out
setPreferredSize()
setMaximumSize()
setMinimumSize()
set all 3 to the same value.
If it still doesn't work, you can try to put the panel, of which you are trying to set the size to fixed, inside another panel.

basic questions in swing components in Java?

my question is could be very basic in terms of understanding this simple code. I wrote this code myself grabbing bits of code from here and there to understand. I would like to actually follow this code line by line as to what each line means?
I have added my understanding as comments above the line of code, it could be wrong or some of them marked as **** means I just dont know what it means. If you could help me out here, it will be great.
Thanks
import java.awt.BorderLayout;
import java.awt.GridLayout;
import java.text.ParseException;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
public class TestingSwingComponents {
public TestingSwingComponents() {
//Create a frame which is the window that pops up
JFrame myframe = new JFrame();
//*****
myframe.getContentPane().setLayout(new BorderLayout());
//set the frame size to be 600 X 600 size
myframe.setSize(600, 600);
// create Pane1
JPanel myPanel = new JPanel();
//set the Layout component of Panel, as how you would like it to be
//here it is 2 rows and 15 columns
myPanel.setLayout(new GridLayout(2, 15));
//create a button with text in it
JButton letterButton = new JButton("click Me");
//add the created button component to the panel
myPanel.add(letterButton);
//******
myframe.getContentPane().add(myPanel, BorderLayout.SOUTH);
// create another panel
JPanel panelFormat = new JPanel();
//create a textfield
JTextField txtfield = new JTextField();
//create a label for the textfield
JLabel label = new JLabel("Guesss");
//set the layout type for this panel
panelFormat.setLayout(new BorderLayout());
//add label to panel
panelFormat.add(label);
//add textfield to panel
panelFormat.add(txtfield);
//I dont know the difference between the below two
//BorderLayout.CENTER still does not center the panel in the frame, I dont know why
myframe.getContentPane().add(panelFormat, BorderLayout.CENTER);
myframe.add(panelFormat);
// default settings
myframe.setTitle("Get buttons");
myframe.setVisible(true);
myframe.setLocationRelativeTo(null);
myframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
public static void main(String[] args) throws ParseException {
new TestingSwingComponents();
}
}
myframe.getContentPane().setLayout(new BorderLayout());
To answer this, you need to understand the structure of a Swing window. A JFrame (in fact any Swing window) is made up a series of components which generate the view of the window.
(Picture from How to use Root Panes)
A JRootPane makes up the base of view, on-top of which is a JLayeredPane and what is know as the "glass pane". The JLayeredPane is responsible for managing the JMenuBar and the "content pane".
The content pane is where you components reside on the window.
So, what this line is saying is, "get the frame's content pane and set it's layout to use a BorderLayout"
The layouts API is an entire question on it's own and it would be use to you to have a read through Laying out components within a container for a more indeepth description, but basically, layout managers remove the need for you to care (a greate deal) about differences in rendering techniques employeed by different systems...
//******
myframe.getContentPane().add(myPanel, BorderLayout.SOUTH);
This comes back to the layout manager. Because you can have any number of layout managers, Swing allows you to pass a "constraint" to the layout manager when you add the component, giving the layout manager some idea of how you might like this component to be added.
If you take a closer look at BorderLayout you will see that it has five positions in which components can be added.
The line is basically saying, "please add myPanel to the SOUTH position within the frame/content pane"
Update from comments
If you have a look at this snippet...
panelFormat.setLayout(new BorderLayout());
//add label to panel
panelFormat.add(label);
//add textfield to panel
panelFormat.add(txtfield);
It sets the layout manager for panelFormat to BorderLayout. BorderLayout can only have a single component in any of it's five available positions. When you use add(Component) without passing it a layout constraint, BorderLayout use CENTER as the default position, this means you are trying to add two components to the CENTER position, this is not possible, so BorderLayout simply uses the last component that was added.
why not borderlayout fix the size of textfield instead of stretching
it all window
Because this is how BorderLayout works and no, GridLayout would probably do something simular.
You could try FlowLayout or GridBagLayout
Updated from comments
You seriously need to take the time to read through the linked (and other suggested) tutorials...but basically, you can use a GridBagLayout just like any other layout, you create an instance of it and apply it to the container...
// create another panel
JPanel panelFormat = new JPanel();
//create a textfield
JTextField txtfield = new JTextField(10);
//create a label for the textfield
JLabel label = new JLabel("Guesss");
//set the layout type for this panel
panelFormat.setLayout(new GridBagLayout());
//add label to panel
panelFormat.add(label);
//add textfield to panel
panelFormat.add(txtfield);
//I dont know the difference between the below two
//BorderLayout.CENTER still does not center the panel in the frame, I dont know why
myframe.getContentPane().add(panelFormat, BorderLayout.CENTER);
myframe.add(panelFormat);
A Swing top-level container, including a JFrame, JDialog is composed of several components all held together including a JRootPane which holds all together, a JLayeredPane, and a contentPane the latter of which holds most of the GUI excepting the top window bar. You can read more about the details in this tutorial here: Top Level Containers:
So when you add a component to a JFrame in a default way, you're actually adding it to its contentPane. In other words, this:
myJFrame.add(myComponent);
is functionally the same as this:
myJFrame.getContentPane().add(myComponent);
For learning Swing, I used this great tutorial which goes over everything you have, and explains it pretty clearly in depth.
The tutorial also goes over the elements that you are having trouble understanding.
Here is said tutorial.

Showing specific part of an image in a limited space?

I have a frame of 100x100 and an image of 400x400, I have a layered pane on the entire frame and the image inside the layered pane. As you can notice the image is bigger than the frame so only a part of the image i.e. the top-left part of the image will be shown. Suppose there is a man in the image at X=32 and y=40 and width = 10 and height = 10 (basically a rectangle) w.r.t. the frame.
Questions
the image is 400x400 right? That means at runtime I can only see 100x100 part of the image and the part of the image that has been shown is the top-left part right? But suppose I want to show a building that is situated at 350x350 w.r.t. the image, then how do I do it (since it is located in the bottom part of the image so it wont be shown)?
suppose the first question is solved, then assume there is a building at 350x350 with width = 20 and height = 20 w.r.t the 'frame'. Now when at runtime I show the image (now the bottom part of the image is visible, assuming question 1 is solved) the co-ordinates of the building w.r.t. frame should not change i.e. they should remain 350x350 w.r.t. the frame.
Point 1) I'm guessing you're adding the image in a JPanel and then into the JFrame or the image into a JPanel which goes into a JScrollPane which finally lands inside the JFrame. JPanels and JScrollPanes both support programmatic scrolling through the use of #scrollRectToVisible.
Here's a (kind of) working sample of the scrollRectToVisible
JPanel panel = new JPanel();
JPanel panel2 = new JPanel();
panel2.setPreferredSize(new Dimension(200, 11000));
SpringLayout layout = new SpringLayout();
panel2.setLayout(layout);
for (int i = 0; i < 100; i++) {
JLabel textField = new JLabel();
textField.setText("textfield number " + i);
textField.setPreferredSize(new Dimension(150, 100));
layout.putConstraint(SpringLayout.NORTH, textField, i * 110, SpringLayout.NORTH, panel2);
panel2.add(textField);
}
JScrollPane scrollPane = new JScrollPane(panel2, ScrollPaneConstants.VERTICAL_SCROLLBAR_AS_NEEDED, ScrollPaneConstants.HORIZONTAL_SCROLLBAR_AS_NEEDED);
scrollPane.setPreferredSize(new Dimension(200, 500));
panel2.scrollRectToVisible(new Rectangle(0, 800, 150, 100));
panel.add(scrollPane);
Add the panel variable to a JFrame and you're good to run this code. Also, please note that this is meant to be sample code, not the actual way code should be written to add components to panels :P
Point 2) I still don't fully understand this query so I'll give you an answer in 2 parts.
a) I don't see why relative calculations matter? Can you try the sample I provided and see if it does what it needs to? If not, read option b
b) the Rectangle object has a setLocation(int, int) (Reference: Java documentation) that you should play around with. I can't give you a more accurate answer or a code sample since I don't full understand what you're trying to do and I don't have a code sample that I can play with.

How to reduce the space between the 3 swing checkboxes?

I want to reduce the size between the components with in the Formatting group (left side on the image). How to do this?
JPanel formattingGroup = createGroupWithName("Formatting");
formattingGroup.setMinimumSize(new Dimension(250, 20));
formattingGroup.setLayout(new GridLayout(5, 0));
add(formattingGroup);
final JCheckBox showSurface = new JCheckBox("Show surface");
showSurface.setSelected(true);
formattingGroup.add(showSurface);
final JCheckBox showTerrain = new JCheckBox("Show terrain");
showTerrain.setSelected(true);
formattingGroup.add(showTerrain);
final JCheckBox showVehicleStatus = new JCheckBox("Show vehicle status");
showVehicleStatus.setSelected(true);
formattingGroup.add(showVehicleStatus);
JPanel pnl = createGroupWithName("Depth Stretch");
formattingGroup.add(pnl);
JSlider slider = new JSlider(0, 10);
pnl.add(slider);
When using a GridLayout all components are made the same size.
You are adding a JPanel with a TitledBorder and a JSlider to the grid. Therefore the checkboxes will take the same vertical height as that panel.
You need to use a different layout manager for the panel. Maybe a vertical BoxLayout.
You might look at available size variants, discussed in Resizing a Component.
Use gridbaglayout because that gives you the opportunity to give weights, to columns or rows and set spacing and padding values.
I made a Swing application that contains out of 12 Frames and they all are made with GridBagLayout.
I also tried other before that but they all had limits. That's where the GridBagLayout kicks in. It's a bit harder in begin to understand how it works, but once you get feeling with it, it really is best thing to get the components where you want.
If you want i'll give you a cool example of a frame created with GridBagLayout.

Java Swing Panel Size

Hi I have been learning Java Swing for creating a chess game to practice my Java programming skills.
I've added a JPanel to the east of the JFrame with BorderLayout and I've used the setPrefferedSize(new Dimension(x,y)) method to set the width and height.
After that I have created 4 JPanel and added them with BoxLayout on the previously created panel.
I have tried to set the size of the 4 panels with the setSize(x,y) and setPreferredSize(new Dimension(x,y)) but it dosent work the 4 panels automaticly changed there size to fit the main JPanel and after adding a JLabel on one of them the size of it increased automaticly .
This is my code:
this.setLayout(new BoxLayout(this, BoxLayout.Y_AXIS));
JPanel a = new JPanel();
a.setPreferredSize(new Dimension(50, 50)); //this dosent work
a.add(min);
a.setBackground(Color.red);
this.add;
JPanel b = new JPanel();
b.setBackground(Color.blue);
this.add(b);
JPanel c = new JPanel();
this.add(c);
JPanel d = new JPanel();
d.setBackground(Color.black);
this.add(d);
How can I change the size of each of these panels?
BoxLayout is best for laying out components with varying sizes along a single axis. From the Javadocs:
"BoxLayout attempts to arrange components at their preferred widths (for horizontal layout) or heights (for vertical layout)."
The idea is that they may have different heights (for a horizontal layout) and it will take the maximum height. And, they definitely may have different widths. Also, BoxLayout works with some, er, "interesting" filler pieces like Box.createHorizontalGlue(). These are actually quite useful for flexible, resizeable layouts once you get the hang of it. But, all in all, BoxLayout is for flexible, resizable layout of items with differing sizes.
For simpler cases, especially if you want both preferred width and preferred height to be "respected", use GridLayout as everybody else has suggested.

Categories

Resources