JavaFX How to Center Multiple Components side by side - java

I have 2 components: Label & Button. I want to put them side by side & align them together in CENTER. But I failed to do so, as they are still aligned LEFT but not CENTER.
My code as below:
Label sloganLbl = new Label("With cost as low as $1.99, you can own a fraction share of U.S. stock. No account yet?");
sloganLbl.getStyleClass().add("blue-small-font");
Button signUpBtn = new Button("Open account now");
signUpBtn.getStyleClass().add("green-btn-small-font");
GridPane topGrid = new GridPane();
topGrid.setHgap(20);
topGrid.add(sloganLbl, 0, 0);
topGrid.add(signUpBtn, 1, 0);
topGrid.setGridLinesVisible(true);
GridPane.setHalignment(sloganLbl, HPos.RIGHT);
GridPane.setHalignment(signUpBtn, HPos.LEFT);
BorderPane topBorder = new BorderPane();
topBorder.setPadding(new Insets(15, 10, 15, 10));
topBorder.setCenter(topGrid);
topBorder.getStyleClass().add("blue-small-font");
topGrid.getStyleClass().add("blue-small-font");
borderPane.setTop(topBorder);
The problem is topBorder.setCenter(topGrid); is not able to center the content in center. Seems topGrid is taking up full width, not just total width of it's 2 columns.
How can I achieve the center alignment? Thanks!

You can update the GridPane with a gap filler column on the left and on the right.
ColumnConstraints leftFiller = new ColumnConstraints();
leftFiller.setHgrow(Priority.ALWAYS); // Fills the space left on the left side
ColumnConstraints rightFiller = new ColumnConstraints();
rightFiller.setHgrow(Priority.ALWAYS); // Fills the space left on the right side
topGrid.getColumnConstraints().addAll(leftFiller, new ColumnConstraints(),
new ColumnConstraints(), rightFiller);
topGrid.add(sloganLbl, 1, 0);
topGrid.add(signUpBtn, 2, 0);
This snippet will create a GridPane with 4 columns. The first and the last is growing when the GridPane becomes resized, the 2 inner columns hold the Label and the Button.
Please notice that the Label and the Button are now placed into the second and third column.

Related

Set a gap between the beginning of the JLabel and the icon

I have a Java Swing form and JLabel like this:
What I need to do is inserting a gap in the beginning of the JLabel:
So it will not stuck to the border line.
Note 1 : I already used jLabName.setIconTextGap(35); but it did the below:
I need to insert the gap before the icon not after it!
Note 2 : The Border Setting And Type And other setting:
You can use compound borders for that.
For Example.
//get border of your component which is button as you say
Border border = myButton.getBorder();
//create a new empty border with name it margin
Border margin = new EmptyBorder(0,10,0,0); //top 0, left 10 , bottom 0, right 0
//now set compound border to your button(component), with margin
myButton.setBorder(new CompoundBorder(border, margin));
//NOTE: CompoundBorder accepts two borders as arguments, first one is inner border and last one is outer border
Fixed it with the following code:
a1.setBorder(new CompoundBorder(new EtchedBorder(), BorderFactory.createEmptyBorder(1, 8, 1, 1)));

There is an unexplained space between buttons

I've a problem with an exercise. There is an unexplained space between the first and the second buttons on the scene. I've change the location of the buttons but still the first one has a space from the second one. What cause this and how can I make this space shorter?
https://imgur.com/hYolYE2
public void start(Stage myStage) {
GridPane myPane = new GridPane();
myPane.setPadding(new Insets(10, 10, 10, 10));
myPane.setHgap(10);
myPane.setVgap(10);
Button btn1 = new Button("Computer Scinence");
Button btn2 = new Button("Chemistry");
Button btn3 = new Button("Arts");
DrawText txt1 = new DrawText("Computer Scince","Times Roman",FontWeight.BOLD,FontPosture.ITALIC,20,Color.GREEN);
DrawText txt2 = new DrawText("Chemistry","Times Roman",FontWeight.BOLD,FontPosture.ITALIC,20,Color.BLUE);
DrawText txt3 = new DrawText("Arts","Times Roman",FontWeight.BOLD,FontPosture.ITALIC,20,Color.YELLOW);
GridPane.setConstraints(btn1,0,1);
GridPane.setConstraints(btn2,1,1);
GridPane.setConstraints(btn3,2,1);
GridPane.setConstraints(txt1,0,2);
GridPane.setConstraints(txt2,0,3);
GridPane.setConstraints(txt3,0,4);
myPane.getChildren().addAll(btn1,btn2,btn3,txt1,txt2,txt3);
Scene myScene = new Scene(myPane,350,190);
myStage.setScene(myScene);
myStage.setTitle("Exercise 3_3");
myStage.show();
}
You can often debug GridPane layout issues by turning on the grid lines:
myPane.setGridLinesVisible(true);
After recreating your application (you did not include your DrawText class, so I'm just styling Labels instead) and turning on the grid lines reveals the issue:
You can see that the Computer Science Label at GridPane location 0, 1 has a greater width than the Computer Science Button. This causes the GridPane to expand the width of the first column to accommodate the Label.
You have a couple of options to resolve this, depending on how you want the layout to work.
1) Set Column Span:
If you want to keep the Computer Science Button the same size, but have the first column's width not expand to fit the Label, just have that Label span 2 columns:
GridPane.setColumnSpan(txt1, 2);
2) Increase Button Width:
If you'd like the Computer Science Button to expand to fill the rest of the column, you can set its MaxWidth property to use the maximum value:
btn1.setMaxWidth(Double.MAX_VALUE);

Javafx GridPane, how to center Node? (Text/Label)

I am trying to learn Javafx for a class I am taking. I am having a lot of difficulty transitioning from HTML + ERB templates to the Javafx framework (I am a Rails dev).
For some reason I am unable to center a Label node in a gridpane. Here is my start method:
#Override
public void start(Stage stage) throws Exception {
GridPane root = new GridPane();
FlowPane leftbanner = new FlowPane();
leftbanner.setPrefWidth(200);
String bgStyle = "-fx-background-color: lightblue;"
+ "-fx-background-radius: 0%;"
+ "-fx-background-inset: 5px;";
leftbanner.setStyle(bgStyle);
root.add(leftbanner, 0, 0, 1, 1);
root.add(createGridPane(), 1, 0, 1, 1);
Scene scene = new Scene(root, 700, 500);
stage.setTitle("Recommendify");
stage.setScene(scene);
stage.show();
}
I am using the createGridPane method to build my app. Here are the contents of that method which includes my attempts to center the label:
public GridPane createGridPane() {
GridPane grid = new GridPane();
grid.setPadding(new Insets(10));
grid.setHgap(10);
grid.setVgap(10);
Text txt = new Text("Recommendify");
txt.setFont(Font.font("Dialog", FontWeight.BOLD, 12));
GridPane.setHalignment(txt, HPos.CENTER);
grid.add(txt, 0, 0, 1, 1);
grid.add(new Separator(), 0, 1, 3, 1);
return grid;
}
I have also tried these solutions posted here: JavaFX alignment of Label in GridPane
Do I need to throw this Label node into a container in order to center it in the GridPane? Like an HBox or VBox?
There is actually nothing wrong with your code. The "Recommendify" text is centered in its cell. However, the cell is no wider than the text itself.
You can see this by turning on the grid lines within your createGridPane() method:
grid.setGridLinesVisible(true);
To test the alignment, you can add ColumnConstraints to the GridPane:
grid.getColumnConstraints().add(new ColumnConstraints(150));
The above statement sets the preferred width of the first column to 150. Here is the new result:
As you can see, the Text node is centered properly.
EDIT: Keep in mind that if you want your Text to be centered over the Separator you've added to the second row, you need to have
it span 3 columns as well.

How to align group components to the left

I want to use group boxes to improve my GUI. However when adding components to a Group they move to the center of the box and are not left aligned anymore. How do I get each button and text to move to the left margin.
Code
GridLayout layout = new GridLayout(1, true);
layout.marginWidth = 300;
Group group = new Group(this, SWT.SHADOW_OUT);
group.setText("Open file locations");
group.setLayout(layout);
Button optionOne = new Button(group, SWT.CHECK | SWT.LEFT);
optionOne.setText(AppMessages.msg("Open file A") );
Button optionTwo = new Button(group, SWT.LEFT | SWT.CHECK);
optionTwo.setText(AppMessages.msg("Open file B") );
Need Space between two groups
The buttons are left aligned but you have specified a margin of 300 pixels to go to the left of the buttons before the alignment is done.
The margin values your specify for a layout of a Group or Composite set the margins within the control.
Can u try to remove marginWidth from the layout

gridpane size and placement to cover entire area from left to right

Hello stackoverflow users! I have a question about gridpanes. I'm working on a program (picture below) and I'm mostly finished. However, I've run into a few small cosmetic issues.
I've created my title:
GridPane grid = new GridPane();
Text scenetitle = new Text("Welcome to the Pizza Palace");
scenetitle.setFill(Color.RED);
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0);
As you can see the title is Welcome to the Pizza Palace and I wanted the title to be centered so I entered
grid.add(scenetitle, 0, 0);
because I wanted the title to cover the scene (as displayed in the picture) and I wanted the title to be centered
Unfortunately, the title doesn't cover the entire scene in fact it cause the gridpane below it (0,1) where "Each Toppings" is located to expand as the title increases or decreases.
I've run into a similiar issue in the text area for "your orders"
// Create a new text area
TextArea orderscreen = new TextArea();
orderscreen.setPrefColumnCount(25);
orderscreen.setPrefRowCount(7);
grid.add(orderscreen, 0, 4);
Once again I set the grid to 0 for the far left and 4 so it would be located under the button but unfortunately as the text area increases so does my toppings.
So how do I go about creating a title or textarea using a gridpane that will cover the entire scene from left to right (like the title in the picture does)?

Categories