I am trying to create a window consisting of a left pane and a right pane included in a GridPane layout. I am drawing the bounding box of this two widgets and I can see that they are resizing when the main window of the application is resized. In the left pane a GridPane layout is used to add Buttons. While the left pane resizes properly the buttons inside the left pane do not resize and reposition once the left pane resizes. The complete code is listed below. Can anyone help ?
public class PlanesJavaFxApplication extends Application {
static class ToolbarPane extends Pane
{
public ToolbarPane() {
final HBox hbox = new HBox(5);
hbox.getChildren().add(new Text("TOP"));
this.getChildren().add(hbox);
}
}
static class LeftPane extends Pane
{
public LeftPane() {
final GridPane gridPane = new GridPane();
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(33);
ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(33);
ColumnConstraints col3 = new ColumnConstraints();
col3.setPercentWidth(33);
gridPane.getColumnConstraints().addAll(col1, col2, col3);
Button selectButton = new Button("Select");
Button rotateButton = new Button("Rotate");
Button upButton = new Button("Up");
Button leftButton = new Button("Left");
Button rightButton = new Button("Right");
Button downButton = new Button("Down");
Button doneButton = new Button("Done");
gridPane.add(selectButton, 1, 0);
gridPane.add(rotateButton, 1, 1);
gridPane.add(upButton, 1, 2);
gridPane.add(leftButton, 0, 3);
gridPane.add(rightButton, 2, 3);
gridPane.add(downButton, 1, 4);
gridPane.add(doneButton, 1, 5);
//gridPane.prefWidth(300);
this.getChildren().add(gridPane);
}
}
static class RightPane extends Pane
{
public RightPane() {
final HBox hbox = new HBox(5);
hbox.getChildren().add(new Text("RIGHT"));
this.getChildren().add(hbox);
}
}
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) throws Exception {
// TODO Auto-generated method stub
final GridPane gridPane = new GridPane();
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(40);
ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(60);
gridPane.getColumnConstraints().addAll(col1, col2);
Pane leftPane = new LeftPane();
leftPane.setStyle("-fx-border-color: red");
Pane rightPane = new RightPane();
rightPane.setStyle("-fx-border-color: blue");
gridPane.add(leftPane, 0, 0);
gridPane.add(rightPane, 1, 0);
stage.setScene(new Scene(gridPane));
stage.show();
}
}
Simply add a binding between your LeftPane and your GridPane as below into LeftPane (at the end of the class):
static class LeftPane extends Pane {
public LeftPane() {
final GridPane gridPane = new GridPane();
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(33);
ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(33);
ColumnConstraints col3 = new ColumnConstraints();
col3.setPercentWidth(33);
gridPane.getColumnConstraints().addAll(col1, col2, col3);
Button selectButton = new Button("Select");
Button rotateButton = new Button("Rotate");
Button upButton = new Button("Up");
Button leftButton = new Button("Left");
Button rightButton = new Button("Right");
Button downButton = new Button("Down");
Button doneButton = new Button("Done");
gridPane.add(selectButton, 1, 0);
gridPane.add(rotateButton, 1, 1);
gridPane.add(upButton, 1, 2);
gridPane.add(leftButton, 0, 3);
gridPane.add(rightButton, 2, 3);
gridPane.add(downButton, 1, 4);
gridPane.add(doneButton, 1, 5);
// In order to see the GridPane extends with the LeftPane, remove it further
gridPane.setGridLinesVisible(true);
// Those 2 following lines enable the gridpane to stretch/shrink according the LeftPane
gridPane.prefWidthProperty().bind(this.widthProperty());
gridPane.prefHeightProperty().bind(this.heightProperty());
//gridPane.prefWidth(300);
this.getChildren().add(gridPane);
}
}
You can also center your buttons for a better effect (GridPane.setValignment(Node pNode, VPos pVPos) and GridPane.setHalignment(Node pNode, HPos pHPos).
Some remarks (not applicable if the code you posted is an MCVE/SSCCE) :
Use FXML files as much as possible for a cleaner code
LeftPane could directly extends GridPane instead of Pane (in this case)
Based on your code, the problem is that the gridpane which hosts the buttons never changes it's shape. You need to add constraints and listeners to that gridpane as well.
here's an example:
public class PlanesJavaFxApplication extends Application {
static class ToolbarPane extends Pane {
public ToolbarPane() {
final HBox hbox = new HBox(5);
hbox.getChildren().add(new Text("TOP"));
this.getChildren().add(hbox);
}
}
static Button upButton = new Button("Up");
static class LeftPane extends Pane {
public LeftPane() {
final GridPane gridPane = new GridPane();
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(33);
ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(33);
ColumnConstraints col3 = new ColumnConstraints();
col3.setPercentWidth(33);
gridPane.getColumnConstraints().addAll(col1, col2, col3);
Button selectButton = new Button("Select");
Button rotateButton = new Button("Rotate");
Button leftButton = new Button("Left");
Button rightButton = new Button("Right");
Button downButton = new Button("Down");
Button doneButton = new Button("Done");
gridPane.add(selectButton, 1, 0);
gridPane.add(rotateButton, 1, 1);
gridPane.add(upButton, 1, 2);
gridPane.add(leftButton, 0, 3);
gridPane.add(rightButton, 2, 3);
gridPane.add(downButton, 1, 4);
gridPane.add(doneButton, 1, 5);
//gridPane.prefWidth(300);
this.getChildren().add(gridPane);
}
}
static class RightPane extends Pane {
public RightPane() {
final HBox hbox = new HBox(5);
hbox.getChildren().add(new Text("RIGHT"));
this.getChildren().add(hbox);
}
}
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) throws Exception {
// TODO Auto-generated method stub
final GridPane gridPane = new GridPane();
gridPane.setGridLinesVisible(true);
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(40);
ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(60);
gridPane.getColumnConstraints().addAll(col1, col2);
Pane leftPane = new LeftPane();
leftPane.setStyle("-fx-border-color: red");
Pane rightPane = new RightPane();
rightPane.setStyle("-fx-border-color: blue");
stage.widthProperty().addListener((observable, oldValue, newValue) -> {
upButton.setPrefWidth(newValue.doubleValue() > oldValue.doubleValue() ? upButton.getWidth() + 5 : upButton.getWidth() - 5);
});
gridPane.add(leftPane, 0, 0);
gridPane.add(rightPane, 1, 0);
stage.setScene(new Scene(gridPane));
stage.show();
}
}
How to set search field for the default drop down on the tab pane in JavaFX ,which shows hidden tab list. and here is my code for tabs on the Tabpane
public void start(Stage primaryStage) {
primaryStage.setTitle("Tabs");
Group root = new Group();
Scene scene = new Scene(root, 400, 250, Color.WHITE);
TabPane tabPane = new TabPane();
BorderPane borderPane = new BorderPane();
for (int i = 0; i < 10; i++) {
Tab tab = new Tab();
tab.setText("Tab" + i);
HBox hbox = new HBox();
hbox.getChildren().add(new Label("Tab" + i));
hbox.setAlignment(Pos.CENTER);
tab.setContent(hbox);
tabPane.getTabs().add(tab);
}
// bind to take available space
borderPane.prefHeightProperty().bind(scene.heightProperty());
borderPane.prefWidthProperty().bind(scene.widthProperty());
borderPane.setCenter(tabPane);
root.getChildren().add(borderPane);
primaryStage.setScene(scene);
primaryStage.show();
}
In my TableView I'm using a button as the placeholder when there are no items available in the table. And on click of this button I want to add a new row and then make the first cell in this row editable. I was able to successfully add new row, but the making the first cell editable does not work. I have tried using Platform.runLater to start the editing, but it doesn't work either. Below is the code for what I'm trying to do. Any help would be appreciated. Thanks
public class TableEditTest extends Application {
#Override
public void start(Stage primaryStage) {
TableColumn<Person, String> colA = new TableColumn<>("Name");
colA.setCellFactory(TextFieldTableCell.forTableColumn());
colA.setCellValueFactory(new PropertyValueFactory<>("name"));
TableColumn<Person, String> colB = new TableColumn<>("Age");
colB.setCellFactory(TextFieldTableCell.forTableColumn());
colB.setCellValueFactory(new PropertyValueFactory<>("age"));
TableColumn<Person, String> colC = new TableColumn<>("Gender");
colC.setCellValueFactory(new PropertyValueFactory<>("gender"));
colC.setCellFactory(TextFieldTableCell.forTableColumn());
TableView<Person> tableView = new TableView<>();
tableView.setEditable(true);
tableView.getColumns().addAll(colA, colB, colC);
Button btn = new Button();
btn.setText("Add Item");
btn.setOnAction((ActionEvent event) -> {
tableView.getItems().add(new Person());
// Edit the first cell
Platform.runLater(() -> {
tableView.edit(0, colA);
});
});
tableView.setPlaceholder(btn);
StackPane root = new StackPane();
root.getChildren().add(tableView);
Scene scene = new Scene(root, 300, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
As you can see in the picture, the label in the third box, next to the ComboBox, has the text '...' instead of 'fase'.
I have previously attempted to increase the size of the HBox in which it resides, increasing spacing, but to no avail. Any suggestions?
public void start(Stage primaryStage) {
RadioButtonCustom inhoud = new RadioButtonCustom();
Fieldset fs = new Fieldset("eerste", inhoud);
RadioButtonCustom inhoud2 = new RadioButtonCustom();
Fieldset fs2 = new Fieldset("tweede", inhoud2);
//error
HBox hb = new HBox();
hb.minWidth(200);
Label fase = new Label("fase");
fase.setText("Fase");
fase.minWidth(500);
fase.getStyleClass().add("bordered-titled-title");
StackPane.setAlignment(fase, Pos.CENTER);
ComboBox<Integer> cb = new ComboBox<>();
hb.setSpacing(40);
for (Integer i : array) {
cb.getItems().add(i);
}
hb.getChildren().addAll(fase,cb);
Fieldset fs3 = new Fieldset("fase",hb);
// einde error
VBox vb = new VBox();
vb.getChildren().addAll(fs, fs2,fs3);
vb.setSpacing(20);
Button btn = new Button();
btn.setText("Say 'Hello World'");
btn.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
System.out.println("Hello World!");
}
});
BorderPane root = new BorderPane();
root.getChildren().add(vb);
Scene scene = new Scene(root, 500, 500);
scene.getStylesheets().add("/lissa/stijl.css");
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
I created this very simple example of JavaFX web browser.
StackPane secondaryLayout = new StackPane();
Scene secondScene = new Scene(secondaryLayout, 200, 100);
Stage secondStage = new Stage();
secondStage.setTitle("Second Stage");
secondStage.setScene(secondScene);
WebView browser = new WebView();
WebEngine engine = browser.getEngine();
String url = "http://zoranpavlovic.blogspot.com/";
engine.load(url);
StackPane sp = new StackPane();
sp.getChildren().add(browser);
Scene root = new Scene(sp, 600, 600);
secondStage.setScene(root);
secondStage.show();
I would like to add input filed into the to size of the window and button "Go". Can you help me to implement this?
You can have a HBox with a textfield and a button and on button's action you can load the webengine.
I wrote the code using notepad, so errors may crept in
StackPane secondaryLayout = new StackPane();
Scene secondScene = new Scene(secondaryLayout, 200, 100);
Stage secondStage = new Stage();
secondStage.setTitle("Second Stage");
secondStage.setScene(secondScene);
HBox box = new HBox();
TextField textField = new TextField();
Button go = new Button();
box.getChildren.addAll(textField, go);
WebView browser = new WebView();
WebEngine engine = browser.getEngine();
go.setOnAction(new Eventhandler<ActionEvent>(){
#Override public void handle(ActionEvent e) {
String url = textField.getText();
engine.load(url);
}
});
BorderPane sp = new BorderPane();
sp.setTop(box);
sp.setCenter(browser);
Scene root = new Scene(sp, 600, 600);
secondStage.setScene(root);
secondStage.show();