JFrame Layout: Header and 2 Text Areas

Question

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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:

Link to Image

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.

Java is not Javascript. [Laying out a GUI with Swing](http://docs.oracle.com/javase/tutorial/uiswing/layout/index.html) is totally different than laying out a page with HTML and Javascript. — Gilbert Le Blanc, Aug 17 '15 at 19:35
*"Sorry for asking so many questions."* Given this is a Q&A site, questions are *necessary* as opposed to something we need to apologize for. Asking many questions is also fine, so long as each is self contained, well researched and carefully written. — Andrew Thompson, Aug 17 '15 at 21:17

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

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

edited May 23 '17 at 11:51

Community

1
1

answered Aug 17 '15 at 18:49

Joey

203
1
11

Here is another similar question and answer. http://stackoverflow.com/questions/3692987/why-will-boxlayout-not-allow-me-to-change-the-width-of-a-jbutton-but-let-me-chan – Joey Aug 17 '15 at 18:51

M3579 · Answer 2 · 2015-08-17T20:35:13.217

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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.

Hi, it all seems to be working well. Just a couple of things I want to ask. I didn't really want to change the header (sorry if my original post sounded like it did) so I simply put the slogan and version labels back into the title panel. Is this correct? Also, how would I have 2 boxes, one with a width of roughly 65% of the screen and the other with 20%, I am still fairly unsure about Flow Layouts and how they work. Thanks for the code so far though! — FeaturedEpic, Aug 17 '15 at 20:19
If you want, instead of putting the slogan and version labels directly into the title panel, you should probably nest the entire info panel into the title panel. In this case, you should set `title`'s layout to a box layout aligned on the y axis so that they appear below the header. To have two boxes with specific sizes, look at the setMaximumSize and setPreferredSize for JLabels and JPanels. — M3579, Aug 17 '15 at 20:31
One question, how would I be able to have two titles above the text areas, aligned to the left? The first textarea would have the title Code: and the second would have the title Console: Thanks, — FeaturedEpic, Aug 17 '15 at 21:10
If you want them completely to the left side, then you can take everything in `mainPanel` and put it in in a panel called `content`. Make another panel called `titles`, set it to a vertical box layout, and add the two labels you want to add. Then set the original `mainPanel`'s layout to a horizontal layout. If you add `title` and then `content`, it should appear as if the titles are to the left of the content, although you may have to play around with the size a little bit. However, if you want to have the titles mixed in with the content, then you will have to add them to the existing panels. — M3579, Aug 17 '15 at 21:20
Also, I have tried adding a button to my jframe through a new jpanel added after the textareas but now the smaller textarea does not show? Here is my new code: http://pastebin.com/mQ4HrDUY. Sorry for not being clear, I meant having the titles directly above the text areas but to the left hand side of the tops, not centered above. Hopefully that it clearer. :) — FeaturedEpic, Aug 17 '15 at 21:25
Which smaller text area are you talking about? All the code seems fine when I run it (unless you still want the version and slogan below the header). To add titles for the console and the code, put both the console and the code in their own respective JPanels (each with a vertical box layout) and add the titles to those panels. — M3579, Aug 17 '15 at 21:42
Sorry for late reply. This is what the window looks like when I run it now, notice that the console text area does not show next to the code text area. This is using the code shown in the pastebin I linked to earlier. http://imgur.com/WAINRNz — FeaturedEpic, Aug 18 '15 at 14:01
It worked find when I ran it. Of course, I had to create my own Interpreter class and DotDotIO class (that did nothing). Can you provide those, or any code snippets from them that interact with the console? — M3579, Aug 18 '15 at 14:59

score 0 · Answer 3 · answered Aug 17 '15 at 19:58

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.

JFrame Layout: Header and 2 Text Areas

3 Answers3