This piece of code that I wrote creates 2 panels. The aim is to have one of them directly on top of the other with no space in between, but the problem is that there is a huge gap between them.
Cann anyone help me out with this?
Code:
Panel panel = new Panel();
Panel Logo = new Panel();
VerticalLayout layout1 = new VerticalLayout();
VerticalLayout layout2 = new VerticalLayout();
panel.setWidth("500px");
panel.setHeight("300px");
Logo.setWidth("500px");
Logo.setHeight("100px");
Logo.addStyleName(Runo.PANEL_LIGHT);
Label label = new Label("test");
label.setWidth(null);
Button test = new Button("test");
first.setStyleName("test");;
first.setClickShortcut(KeyCode.ENTER, null);
layout1.addComponent(test);
layout2.addComponent(label);
layout.addComponent(Logo);
layout.addComponent(panel);
layout.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
layout1.setComponentAlignment(test, Alignment.MIDDLE_CENTER);
layout2.setComponentAlignment(label, Alignment.MIDDLE_CENTER);
layout.setSizeFull();
layout1.setSizeFull();
layout2.setSizeFull();
setContent(layout);
panel.setContent(layout1);
Logo.setContent(layout2);
It depends on the type of layout, which you have set to full size. Your layout will expand as much as the browser itself. What happens is that if your layout is a VerticalLayout, its height is 100% but it only has two panels with heights of 300 and 100, respectively. Since you did not specify any expand ratio, Vaadin assigns 50% of the screen to the panel and the other 50% to the Logo, hence you get a big gap in between.
To fix it, you can do two things:
Don't use layout.setSizeFull(); Instead, use layout.setSizeUndefined();
Play with expand ratio, so that the top panel gets less space and Logo gets more space: layout.setExpandRatio(panel, 0.2f); and layout.setExpandRatio(Logo, 0.8f);. The problem with this approach is that in case your browser height is less than 400 pixels, your layout will be cut off.
It took me a while and many trial/errors to learn this concept. Make sure you carefully read this page before going forward.
There are two ways to do this :
as #Abbas said use
layout.setExpandRatio(panel, float);
or you can add a property in the css file:
layout.setStyleName("my-layout");
in css you add :
.v-verticallayout-my-layout .v-slot{
height: auto !important;
}
This will do the job. I've tried both methods and they worked.
Related
In my code I have a JFrame that opens up a main menu, in that menu you can click options, which will take you to the options menu. On that options menu I want to create a back button that will position itself somewhere in the top left corner of the screen. When I run the program and go to the options menu the JButton does not appear. Something must be wrong with my code. Any help? Below is where I first declare the JButton.
static JButton optionsBackButton = new JButton("<html><font size = 5
color = green>Back</font></html>");
Here is the other part of the code that has to do with the JButton.
//Options Menu
JPanel optionsPanel = new JPanel();
JLabel optionsOptionsTitle = new JLabel("<html><font size = 7 color = blue>Options</font></html>");
JPanel optionsOptionsTitlePanel = new JPanel();
JPanel optionsBackButtonPanel = new JPanel();
optionsPanel.setLayout(null);
optionsBackButton.setBounds(100,100,50,50);
optionsBackButtonPanel.add(optionsBackButton);
optionsOptionsTitlePanel.add(optionsOptionsTitle);
optionsPanel.add(optionsOptionsTitlePanel);
optionsPanel.add(optionsBackButtonPanel);
optionsBackButton.addActionListener(this);
//Add panels to the card
panel.add("Home Screen", homePanel);
panel.add("Options Menu", optionsPanel);
//card.add("Game screen", gamePanel);
cardLayout.show(panel, "HomeScreen");
contentPane.add(panel);
Your problem is stemming from your use of null layouts. Note:
JPanel optionsBackButtonPanel = new JPanel(); // holds the back button
// but never given a size
optionsPanel.setLayout(null); // uh oh,.... bad news
optionsBackButton.setBounds(100,100,50,50); // yes you set the bounds of the button
optionsBackButtonPanel.add(optionsBackButton);
optionsOptionsTitlePanel.add(optionsOptionsTitle);
optionsPanel.add(optionsOptionsTitlePanel);
optionsPanel.add(optionsBackButtonPanel); // again, optionsBackButtonPanel
// has been never given a size or location/bounds
optionsBackButton.addActionListener(this);
So you set the bounds of the button and add it to a JPanel that uses the default FlowLayout, and so the bounds are meaningless. Then you add that JPanel, whose bounds you never set, to a JPanel that uses null layout. So the optionsBackButtonPanel will never show.
Solution: Don't use null layouts, but instead learn and use the layout managers.
While null layouts and setBounds() might seem to Swing newbies like the easiest and best way to create complex GUI's, the more Swing GUI'S you create the more serious difficulties you will run into when using them. They won't resize your components when the GUI resizes, they are a royal witch to enhance or maintain, they fail completely when placed in scrollpanes, they look gawd-awful when viewed on all platforms or screen resolutions that are different from the original one.
Start here: Laying Out Components in a Container Tutorial
Im new in Java Swing, and want to make my layout, but can't do this
Look Now :
Look I want :
Code Now :
JPanel MainPanel = new JPanel(new GridBagLayout());
JLabel MoneyLabel = new JLabel(MoneyIcon);
MoneyLabel.setHorizontalTextPosition(JLabel.CENTER);
MoneyLabel.setVerticalTextPosition(JLabel.BOTTOM);
MoneyLabel.setText("Money:" + CarMain.Money);
JLabel MoneyClicksLabel = new JLabel();
MoneyClicksLabel.setHorizontalTextPosition(JLabel.CENTER);
MoneyClicksLabel.setVerticalTextPosition(JLabel.BOTTOM);
MoneyClicksLabel.setText("Money Clicks: " + CarMain.MoneyClicks);
JLabel BoxesLabel = new JLabel(BoxLv9_10Icon);
BoxesLabel.setHorizontalTextPosition(JLabel.CENTER);
BoxesLabel.setVerticalTextPosition(JLabel.BOTTOM);
BoxesLabel.setText("Boxes: " + CarMain.Boxes);
JLabel BoxesClicksLabel = new JLabel();
BoxesClicksLabel.setHorizontalTextPosition(JLabel.CENTER);
BoxesClicksLabel.setVerticalTextPosition(JLabel.BOTTOM);
BoxesClicksLabel.setText("Boxes Clicks: " + CarMain.BoxesClicks);
MainPanel.add(MoneyLabel);
MainPanel.add(MoneyClicksLabel);
MainPanel.add(jbtnMoney);
MainPanel.add(BoxesLabel);
MainPanel.add(BoxesClicksLabel);
MainPanel.add(jbtnBoxes);
This is simple example of, what i want, becouse i'm building ingame shop, with 13 labels like these, in each tabbedpane window. How can i make it look, like in second picture, what I want?
Im new in Java Swing, and want to make my layout, but can't do this
Probably no single layout can suit everyone's needs. But combining several layouts can usually handle most scenarios.
From the image you showed in the question. There is no need to write your own layout. You can always use sub panels to hold your components and set a specific layout for each sub panel to handle what you need for those individual areas.
The reason for the alignment in your first attached image is because:
JPanel uses FlowLayout as its default layout. Hence all the components added will appear in a linear fashion and tries to fill up the row as much as possible the panel's width can hold. Once exceeded the panel's width, the components will be pushed to the next row.
If you want to achieve the alignment in the second attached image:
You may create a main panel to contain several sub-panels (see image below).
The red box is your main panel and you may continue to use the default FlowLayout.
Then add your components into sub-panels (orange boxes) before adding it to the main. You may then use BoxLayout, FlowLayout or even GridBagLayout for the sub panels (orange boxes).
Artis Uljanovs, at night after work i will give a look at this to help you.
I recommend you already to read the following: https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html
You need some foundations on Java Layouts.
I have the following piece of code that I wrote in Vaadin.
The problem is that the alignment does not work. I set it to bottom_center, but the components are all stuck to the top (top_center) of my web browser.
Can anyone help me out with this?
Thanks!
VerticalLayout layout = new VerticalLayout();
VerticalLayout layout1 = new VerticalLayout();
Panel panel = new Panel();
panel.setWidth("500px");
panel.setHeight("300px");
Button button = new Button("Enter");
Button login = new Button("Login");
layout1.addComponent(textfield);
layout1.addComponent(button);
layout1.addComponent(login);
layout.addComponent(panel);
layout.setComponentAlignment(panel, Alignment.BOTTOM_CENTER);
layout1.setComponentAlignment(textfield, Alignment.BOTTOM_CENTER);
layout1.setComponentAlignment(login, Alignment.BOTTOM_CENTER);
layout1.setComponentAlignment(button, Alignment.BOTTOM_CENTER);
The reason for the components appering to be aligned to the top is that you haven't specified a height for your VerticalLayouts. When you don't specify a size for a layout, its size is determined by the child components it contains. In such a case, setting the alignment won't make any difference, as there's no extra room inside the layout's slots.
Set the size, using e.g. layout.setHeight("100%"); or layout.setSizeFull(); and you should notice the difference immediately.
You did not specify a height for the layout so it'll expand from the top towards the bottom as it needs with each component you add. If you set layout.setHeight("100%"); the components will be aligned at the bottom.
you mus set setSizeUndefined() to your panel, textfield, login, button component
and setSizeFull layout1.
JPanel pMeasure = new JPanel();
....
JLabel economy = new JLabel("Economy");
JLabel regularity = new JLabel("Regularity");
pMeasure.add(economy);
pMeasure.add(regularity);
...
When I run the code above I get this output:
Economy Regularity
How can I get this output, where each JLabel starts on a new line? Thanks
Economy
Regularity
You'll want to play around with layout managers to control the positioning and sizing of the controls in your JPanel. Layout managers are responsible for placing controls, determining where they go, how big they are, how much space is between them, what happens when you resize the window, etc.
There are oodles of different layout managers each of which allows you to layout controls in different ways. The default layout manager is FlowLayout, which as you've seen simply places components next to each other left to right. That's the simplest. Some other common layout managers are:
GridLayout - arranges components in a rectangular grid with equal-size rows and columns
BorderLayout - has one main component in the center and up to four surrounding components above, below, to the left, and to the right.
GridBagLayout - the Big Bertha of all the built-in layout managers, it is the most flexible but also the most complicated to use.
You could, for example, use a BoxLayout to layout the labels.
BoxLayout either stacks its components on top of each other or places them in a row — your choice. You might think of it as a version of FlowLayout, but with greater functionality. Here is a picture of an application that demonstrates using BoxLayout to display a centered column of components:
An example of code using BoxLayout would be:
JPanel pMeasure = new JPanel();
....
JLabel economy = new JLabel("Economy");
JLabel regularity = new JLabel("Regularity");
pMeasure.setLayout(new BoxLayout(pMeasure, BoxLayout.Y_AXIS));
pMeasure.add(economy);
pMeasure.add(regularity);
...
I read this piece of code:
pMeasure.setLayout(new BoxLayout(pMeasure, BoxLayout.VERTICAL));
It seems BoxLayout doesn't have VERTICAL. Upon searching, this will work using the following code:
pMeasure.setLayout(new BoxLayout(pMeasure, BoxLayout.Y_AXIS));
Here is what you need to use:
JLabel economy = new JLabel("<html>Economy<br>Regularity</html>");
A quick way is to use html within the JLabel.
For instance include the <br/> tag.
Otherwise, implement a BoxLayout.
Make a separate JPanel for each line, and set the dimensions to fit each word:
JLabel wordlabel = new JLabel("Word");
JPanel word1 = new JPanel();
word1.setPreferredSize(new Dimension(#,#);
This should work for each word. You can then add each of those JPanels to your main JPanel. This also allows you to add other components next to each word.
Is it possible to add a JLabel on top of another JLabel? Thanks.
The short answer is yes, as a JLabel is a Container, so it can accept a Component (a JLabel is a subclass of Component) to add into the JLabel by using the add method:
JLabel outsideLabel = new JLabel("Hello");
JLabel insideLabel = new JLabel("World");
outsideLabel.add(insideLabel);
In the above code, the insideLabel is added to the outsideLabel.
However, visually, a label with the text "Hello" shows up, so one cannot really see the label that is contained within the label.
So, the question comes down what one really wants to accomplish by adding a label on top of another label.
Edit:
From the comments:
well, what i wanted to do was first,
read a certain fraction from a file,
then display that fraction in a
jlabel. what i thought of was to
divide the fraction into 3 parts, then
use a label for each of the three.
then second, i want to be able to drag
the fraction, so i thought i could use
another jlabel, and place the 3'mini
jlabels' over the big jlabel. i don't
know if this will work though..:|
It sounds like one should look into how to use layout managers in Java.
A good place to start would be Using Layout Managers and A Visual Guide to Layout Managers, both from The Java Tutorials.
It sounds like a GridLayout could be one option to accomplish the task.
JPanel p = new JPanel(new GridLayout(0, 1));
p.add(new JLabel("One"));
p.add(new JLabel("Two"));
p.add(new JLabel("Three"));
In the above example, the JPanel is made to use a GridLayout as the layout manager, and is told to make a row of JLabels.
The answer to your original question is yes for the reasons given that any Component can be added to a Container.
The reason you don't see the second label is because by default a JLabel uses a null layout manager and the size of the second label is (0, 0) so there is nothing to paint. So all you need to do is set the bounds of the second label and away you go.
You can't use a layout manager if you want to drag components around because as soon as you resize the frame etc, the layout manager will be invoked and the components will be repositioned based on the layout manager of the component.
it's a matter of layout.
you can do that using null layout (with hard coded locations) or with a custom layout.
you can use a JLayeredPane and set it's border to No Border.
you can add put them above each others by using the horizontal or vertical gap (hgap,vgap) the attributes of the layout
JPanel p = new JPanel(new GridLayout(2, 1,-40,0));
//the 40 is the hgap , make it the same with the label height .