How to align controls from to differents VBox in JAVAFX - javafx

I have a Vbox with 5 Text classes, and other Vbox with a TextField, DatePicker, RadioButton, ToggleButton and a check box. 5 and 5. I want to align the first Text class in the first Vbox with the first control in the second Vbox, using a HBox, successively.
How could i do?
VBox verticaltextbox1 = new VBox();
Text nombre = new Text("Nombre");
Text fecha = new Text("Fecha");
Text genero = new Text("Genero");
Text reservacion = new Text("Reservacion");
Text tecnologias = new Text("Tecnologias conocidas");
VBox verticaltextbox2 = new VBox();
TextField caja = new TextField();
DatePicker calendario = new DatePicker(LocalDate.now());
RadioButton masculino = new RadioButton("Masculino");
ToggleButton reservacionSi = new ToggleButton("Si");
CheckBox java = new CheckBox("Java");
verticaltextbox1.getChildren().addAll(nombre, fecha, genero,
reservacion,tecnologias);
verticaltextbox2.getChildren().addAll(caja, calendario, masculino,
reservacionSi, java);
HBox horizontalbox = new HBox(50);
horizontalbox.getChildren().addAll(verticaltextbox1,verticaltextbox2)

You're probably better of using GridPane:
GridPane gridPane = new GridPane();
gridPane.setHgap(50);
gridPane.addRow(0, text1, textField);
gridPane.addRow(1, text2, datePicker);
gridPane.addRow(2, text3, radioButton);
gridPane.addRow(3, text4, toggleButton);
gridPane.addRow(4, text5, checkBox);
This aligns the text nodes horizontally and the rest of the nodes horizontally in columns and aligns corresponding text and control nodes vertically in a grid.

Related

JavaFX Layout issue within hbox

I want to add an statusbar to my application (the root pane is a vbox and the statusbar is a hbox with a fix height). On this statusbar I have a label with something like "2 processes running". As soon as the mouse hoovers this label, I want to add a Pane above this label with some details about the processes (like IntelliJ or Eclipse).
My problem in the moment is how to create this pane and position this pane above the label.
I create a simple example of my problem
The green area is a StackPane on the root VBox with VGow = Always. The red area is the Hbox with a fix height of 30 pixel. Then I added the yellow VBox the the HBox and put the minHeight to 300.
The problem is, that the yellow area should be above the red area (over the green area) and not outside the window.
What is the best way to achive something like that?
The only way I figured out was using a negative top margin amount (- max/min height). But then the window gets stretched because the yellow pane (or the green bordered pane is not on top of the other elements). The red crossed area shouldn't be there. The green boxed area should be above the other content. Probably I can't use a vbox as my root element?
Update 1
Here is an example - strange thing is, that it is working in this standalone example. But is that the way I should do something like that?
VBox rootBox = new VBox();
rootBox.setMaxHeight(500);
rootBox.setStyle("-fx-background-color: lightgreen");
StackPane contentPane = new StackPane();
contentPane.getChildren().add(new Button("Dont click me"));
contentPane.setStyle("-fx-background-color: lightblue");
VBox.setVgrow(contentPane, Priority.ALWAYS);
HBox statusbar = new HBox();
statusbar.setMinHeight(30);
statusbar.setMaxHeight(30);
statusbar.setStyle("-fx-background-color: red");
VBox processIndicatorBox = new VBox();
processIndicatorBox.setMinHeight(30);
processIndicatorBox.setMaxHeight(30);
HBox.setMargin(processIndicatorBox, new Insets(-300, 0, 0, 0));
StackPane processListPane = new StackPane();
processListPane.setStyle("-fx-background-color: yellow");
processListPane.setMinHeight(300);
processListPane.setMaxHeight(300);
processListPane.setMinWidth(150);
processListPane.setMaxWidth(150);
processListPane.setVisible(false);
Label label = new Label("Show processes");
label.setOnMouseEntered(mouseEvent -> processListPane.setVisible(true));
label.setOnMouseExited(mouseEvent -> processListPane.setVisible(false));
processIndicatorBox.getChildren().addAll(processListPane, label);
statusbar.getChildren().add(processIndicatorBox);
rootBox.getChildren().addAll(contentPane, statusbar);
Scene scene = new Scene(rootBox, 600, 500);
primaryStage.setScene(scene);
primaryStage.show();
Many greetings
Hauke
Did you consider using GridPane? ( https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/GridPane.html ). Gives you more control to layout elements with different sizes. VBox and HBox are from my experience good when all elements have similar sizes.
Here a pseudo-pseudo code
GridPane grid = new GridPane();
Pane greenBox = new Pane(); //your green box
Pane redBox = new Pane(); //your red box
Pane yellowBox = new Pane(); //your yellow box
// add the panes to the grid pane and define where they are
grid.add(greenBox, 0, 0); set the green box in column 0 and row 0
grid.add(redBox, 0, 1); set the red box in column 0 and row 1
grid.add(yellowBox, 1, 1); set the yellowbox in column 1 and row 1
// size of the boxes
GridPane.setColumnSpan(greenBox,2); //The green box should span over 2 columns
GridPane.setRowSpan(yellowBox,2); //The red box should span over 2 rows
The boxes are now only empty panes, which will have a minimum size without content. Replace the Pane() boxes with the content you want to put in or put the content in the Pane() objects.

Javafx Scrollpane is being shown even when it's not needed

I have this Javafx element
HBox dosWrap = new HBox();
dosWrap.setMinHeight(400);
dosWrap.setMaxHeight(452);
dosWrap.setMinWidth(900);
VBox todo = new VBox();
todo.setMinWidth(300);
todo.setMinHeight(400);
ScrollPane sp = new ScrollPane();
sp.setContent(todo);
sp.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
sp.setVbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);
dosWrap.getChildren().add(sp);
The scroller is being shown and works,but my problem is that scroller is being shown even when it's not needed.How do i stop that?

Fill/Padding space between 2 Labels with dots in GridPane (JavaFX)

Starting point:
GridPane with 2 Columns
each Column has a Label
Like-to-have output:
space between the labels filled by dots
So far I have only come across String solutions in which the target length of the combined String is known. But this case doesn't do it for me because I need a solution which can also works when screen size changes and therefore the space between Labels do change dynamically. Could you guys please point me to the right direction?
You could put the 2 Labels in a HBox with a Region in between them, set hgrow for the labels and the Region to NEVER and ALWAYS respectively and use a linear gradient as background for the region that draws half of it's size black and the other half transparent.
Example
// 20 px wide horizontal gradient alternating between black and transparent with immediate color switch
private static final Paint FILL = new LinearGradient(
0, 0,
10, 0,
false,
CycleMethod.REPEAT,
new Stop(0, Color.BLACK),
new Stop(0.5, Color.BLACK),
new Stop(0.5, Color.TRANSPARENT)
);
// create background for regions
private static final Background BACKGROUND = new Background(new BackgroundFill(FILL, CornerRadii.EMPTY, Insets.EMPTY));
private static void addRow(Pane parent, String s1, String s2) {
// create labels
Label label1 = new Label(s2);
Label label2 = new Label('['+s2+']');
// create filler region with "stroke width" 2
Region filler = new Region();
filler.setPrefHeight(2);
filler.setBackground(BACKGROUND);
HBox hbox = new HBox(5, label1, filler, label2);
hbox.setAlignment(Pos.CENTER);
HBox.setHgrow(label1, Priority.NEVER);
HBox.setHgrow(label2, Priority.NEVER);
HBox.setHgrow(filler, Priority.ALWAYS);
hbox.setFillHeight(false);
parent.getChildren().add(hbox);
}
#Override
public void start(Stage primaryStage) {
VBox root = new VBox();
addRow(root, "JBoss", "DOWN");
addRow(root, "GlassFish", "UP");
addRow(root, "verylongprocessname", "UP");
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}
You could also use a border (top only) on the Region instead of using a background and do not set prefHeight. This would allow you to actually use dots instead of strokes, but since your picture shows strokes, I posted the background approach instead...

Centering components in a Layout

I'm trying to center a picture and a label into a Vertical layout so here's the code i wrote:
picture = new Embedded(null, BrandableResourceHelper.getInstance().newResource("image/icon.png"));
lab = new Label();
lab.setWidth(100, UNITS_PERCENTAGE);
VerticalLayout col = new VerticalLayout();
col.addComponent(picture);
col.addComponent(lab);
col.setWidth(30, UNITS_PERCENTAGE);
col.setComponentAlignment(picture, Alignment.MIDDLE_CENTER);
col.setComponentAlignment(lab, Alignment.MIDDLE_CENTER);
Here's what i wanna get:
Here's what i'm getting:

Resizeable Gridpane or other container

Hi I'm trying to create a simple layout that looks like this using JavaFX.
I would like the user to be able to drag/resize the middle bar. I've tried to make this using a GridPane. But I can't figure out how to get the middle resized. Perhaps GridPane is not the way to go. Both panes will contain a lot of other program code later on. Thanks!
Rectangle2D primaryScreenBounds = Screen.getPrimary().getVisualBounds();
stageRef.setMaxWidth(primaryScreenBounds.getWidth());
stageRef.setMaxHeight(primaryScreenBounds.getHeight());
GridPane gridPane = new GridPane();
gridPane.setGridLinesVisible(true);
gridPane.setPadding(new Insets(10));
Scene scene = new Scene(gridPane);
VBox vBoxMain = new VBox();
vBoxMain.setPrefWidth((primaryScreenBounds.getWidth()/5)*4);
vBoxMain.setPrefHeight(primaryScreenBounds.getHeight());
TextArea textArea = new TextArea();
textArea.setWrapText(true);
textArea.setPrefHeight(primaryScreenBounds.getHeight());
vBoxMain.getChildren().addAll(textArea);
vBoxMain.isResizable();
VBox vBoxSide = new VBox();
vBoxSide.setPrefWidth((primaryScreenBounds.getWidth()/5));
vBoxSide.setPrefHeight(primaryScreenBounds.getHeight());
vBoxSide.isResizable();
gridPane.add(vBoxSide, 1,1,1,1);
gridPane.add(vBoxMain, 2,1,4,1);
stageRef.setScene(scene);
stageRef.show();
You could use a SplitPane:
A control that has two or more sides, each separated by a divider,
which can be dragged by the user to give more space to one of the
sides, resulting in the other side shrinking by an equal amount.
Then you add two others containers to this pane allowing the user to change the position of the divider. You can also set minimum widths for each component within the pane or set the position of each divider within your code.

Resources