I'm trying to add a ScrollBar to a HBox. The ScrollBar gets added, but I get no scrolling. How can I make it work?
public class ScrollableItems {
public void scrollableItems(HBox content) {
double height = 180;
ScrollBar sc = new ScrollBar();
content.getChildren().add(sc);
sc.setLayoutX(content.getWidth() - sc.getWidth());
sc.setMin(0);
sc.setOrientation(Orientation.VERTICAL);
sc.setPrefHeight(height);
sc.setMax(height * 2);
sc.valueProperty().addListener(new ChangeListener<Number>() {
public void changed(ObservableValue<? extends Number> ov,
Number old_val, Number new_val) {
content.setLayoutY(-new_val.doubleValue());
}
});
}
}
Add children to a HBox then pass it to scrollableItems(HBox content) above to add a SCrollBar
public HBox mainItemsWrapper() {
HBox scrollabelWrapper = new HBox();
scrollabelWrapper.setMaxHeight(180);
HBox entityDetailViewWrapper = new HBox();
entityDetailViewWrapper.getChildren().addAll(.....);
scrollabelWrapper.getChildren().add(entityDetailViewWrapper);
new ScrollableItems().scrollableItems(scrollabelWrapper);
return scrollabelWrapper;
}
Thank you all.....
I do not really get why you are trying to reinvent the wheel.. you should probably use the ScrollPane instead.
This little example shows how to create a horizontally scrollable HBox with the ScrollPane class:
#Override
public void start(Stage primaryStage) {
HBox hbox = new HBox();
Button b = new Button("add");
b.setOnAction(ev -> hbox.getChildren().add(new Label("Test")));
ScrollPane scrollPane = new ScrollPane(hbox);
scrollPane.setFitToHeight(true);
BorderPane root = new BorderPane(scrollPane);
root.setPadding(new Insets(15));
root.setTop(b);
Scene scene = new Scene(root, 400, 400);
primaryStage.setScene(scene);
primaryStage.show();
}
As eckig said, you can wrap you HBox into a ScrollPane.
Additionnaly, you can customize the visual part of the scrollbar in CSS. I found this link useful for the comprehension of the differents parts of a scrollbar: Customize ScrollBar via CSS
Related
I am trying to build a dummy webshop with JavaFX. I deliberately do not use fxml, scenebuilder, maven or any other build tool. Just plain JavaFX, in order to really get to understand the basics.
However, I ran into a problem creating and navigating different 'pages'.
I have tried various creative solutions, like this one (is posting links allowed?), but none fully work for me, as I want every 'page', 'view' or scene in a seperate java class file, in order to keep everything structured and orderly.
I figured I'd make a Borderpane as a parent layout for every page
abstract class WindowBase extends BorderPane {
public abstract BorderPane render(App app);
public WindowBase() {
Label labelTop = new Label("Top box");
HBox topBox = new HBox();
topBox.setStyle("-fx-background-color: red;");
topBox.getChildren().addAll(labelTop);
Label labelLeft = new Label("Left box");
VBox leftBox = new VBox();
leftBox.setStyle("-fx-background-color: green;");
leftBox.getChildren().addAll(labelLeft);
Label labelRight = new Label("Right box");
VBox rightBox = new VBox();
rightBox.setStyle("-fx-background-color: blue;");
rightBox.getChildren().addAll(labelRight);
Label labelBottom = new Label("Bottom box");
HBox bottomBox = new HBox();
bottomBox.setStyle("-fx-background-color: yellow;");
bottomBox.getChildren().addAll(labelBottom);
this.setTop(topBox);
this.setLeft(leftBox);
this.setRight(rightBox);
this.setBottom(bottomBox);
}
}
and a child, the home page
public class Homepage extends WindowBase {
public BorderPane render(App app) {
Button button = new Button("Go to shopping cart");
button.setOnAction((event) -> app.toShoppingCart());
StackPane centerPane = new StackPane();
centerPane.getChildren().add(button);
this.setCenter(centerPane);
return this;
}
}
and lastly my App.java that runs everything
public class App extends Application{
private WindowBase view;
public void start(Stage stage) throws Exception {
view = new Homepage();
stage.setScene(new Scene(view.render(this)));
stage.setFullScreen(true);
stage.show();
}
public static void main(String[] args) throws Exception {
launch(args);
}
public void toHomepage() {
this.view = new Homepage();
}
public void toShoppingCart() {
this.view = new ShoppingCart();
}
}
I understand that I can't pass this (App) as an argument to view.render(), use the parameter within the method render and expect to be able to manipulate it, because it only creates a new instance of App as soon as it gets there. However, I see no other way either.
I tried placing the navigation buttons in the App class, in order to be able to manipulate view, but then I cannot call on the buttons from the subsequent views.
There must be a way to achieve what I want without writing the complete GUI in one file, right? Should I make my view static in stead, is that it?
Instead of BorderPanes I am of course also okay with using Scenes, whatever works.
I have figured out exactly the solution that I wanted. Posting it here for whoever encounters the same situation.
Class WindowBase
public class WindowBase {
public BorderPane getMainPane() {
Label labelTop = new Label("Top box");
HBox topBox = new HBox();
topBox.setStyle("-fx-background-color: red;");
topBox.getChildren().addAll(labelTop);
Label labelLeft = new Label("Left box");
VBox leftBox = new VBox();
leftBox.setStyle("-fx-background-color: green;");
leftBox.getChildren().addAll(labelLeft);
Label labelRight = new Label("Right box");
VBox rightBox = new VBox();
rightBox.setStyle("-fx-background-color: blue;");
rightBox.getChildren().addAll(labelRight);
Label labelBottom = new Label("Bottom box");
HBox bottomBox = new HBox();
bottomBox.setStyle("-fx-background-color: yellow;");
bottomBox.getChildren().addAll(labelBottom);
BorderPane borderPane = new BorderPane();
borderPane.setTop(topBox);
borderPane.setLeft(leftBox);
borderPane.setRight(rightBox);
borderPane.setBottom(bottomBox);
return borderPane;
}
}
Class Homepage
public class Homepage extends WindowBase {
public BorderPane render(Button toShoppingCart) {
Label label = new Label("This is the homepage.");
label.setStyle(
"-fx-font: normal bold 30px 'elephant'; -fx-text-fill: black; -fx-background-color: red;");
StackPane stackPane = new StackPane();
stackPane.getChildren().addAll(label);
BorderPane mainPane = getMainPane();
VBox leftBox = (VBox) mainPane.getLeft();
leftBox.getChildren().add(toShoppingCart);
//I do not understand why this works. I abstracted leftBox from mainPane, then added shoppingCart, but never added the abstracted
// leftBox back to the mainPane before returning it. This should not work, but it does. leftBox.getChildren().add(toShoppingCart)
// should have no effect.
//However, mainPane.getChildren().add(leftBox) throws an IllegalArgumentException about duplicate components, which is to be
// expected if the leftBox is already automatically added back to the mainPane.
mainPane.setCenter(stackPane);
return mainPane;
}
}
Class ShoppingCart
public class ShoppingCart extends WindowBase {
public ShoppingCart() {
super();
}
public BorderPane render(Button toHomepage) {
Label label = new Label("This is the shopping cart.");
label.setStyle(
"-fx-font: normal bold 30px 'elephant'; -fx-text-fill: black; -fx-background-color: red;");
StackPane centerPane = new StackPane();
centerPane.getChildren().add(label);
BorderPane mainPane = getMainPane();
VBox leftBox = (VBox) mainPane.getLeft();
leftBox.getChildren().add(toHomepage);
mainPane.setCenter(centerPane);
return mainPane;
}
}
Class App
public class App extends Application{
Scene scene;
#Override
public void start(Stage stage) throws Exception {
Homepage homePane = new Homepage();
Button toHomepage = new Button("Back to home page");
ShoppingCart shoppingPane = new ShoppingCart();
Button toShoppingCart = new Button("To shopping cart");
toHomepage.setOnAction(e -> scene.setRoot(homePane.render(toShoppingCart)));
toShoppingCart.setOnAction(e -> scene.setRoot(shoppingPane.render(toHomepage)));
scene = new Scene(homePane.render(toShoppingCart), 600, 400);
stage.setScene(scene);
stage.setFullScreen(true);
stage.show();
}
public static void main(String[] args) throws Exception {
launch(args);
}
}
So I have to make a Zodiac Sign GUI, and we are tasked with having the following:
a Label in the top left, and a TextField in the top right (both with padding)
an exit Button in the center of the GUI, along with a clear and find my sign on either side
and finally, a Label in the bottom center prompting the sign
I am utterly confused on how to have this come out, as I am a novice in JavaFX. I believe I would need a branch node along with the root node in order to get this kind of layout. I do not need assistance in instantiating the button, labels etc., mainly confused with how this layout can even work. The code I have now is the following:
public class ZodiacGUI extends Application {
public static void main(String args[]) {
Application.launch(args);
}
#Override
public void start(Stage primaryStage) throws Exception {
BorderPane mainPane = new BorderPane();
mainPane.setStyle("-fx-background-color: PINK");
setupControls(mainPane);
Scene scene = new Scene(mainPane);
setStage(primaryStage, scene);
}
public void setStage(Stage primaryStage, Scene scene) {
primaryStage.setWidth(500);
primaryStage.setHeight(200);
primaryStage.setTitle("What is my Zodiac Sign?");
primaryStage.setScene(scene);
primaryStage.show();
}
public void setupControls(BorderPane mainPane) {
Label label = new Label("Enter you birthday formatted as -> mm/dd");
Button exitButton = new Button();
Button findSign = new Button();
Button clear = new Button();
TextField userInput = new TextField();
userInput.setPromptText("Enter birthday");
exitButton.setText("Exit.");
findSign.setText("Find my sign.");
clear.setText("Clear.");
exitButton.setOnAction(e -> System.exit(0));
mainPane.setLeft(label);
mainPane.setRight(userInput);
mainPane.setCenter(exitButton);
mainPane.setCenter(findSign);
mainPane.setCenter(clear);
BorderPane.setAlignment(label, Pos.TOP_LEFT);
BorderPane.setAlignment(userInput, Pos.TOP_RIGHT);
BorderPane.setAlignment(exitButton, Pos.CENTER);
BorderPane.setAlignment(findSign, Pos.CENTER_LEFT);
BorderPane.setAlignment(clear, Pos.CENTER_RIGHT);
}
}
This only outputs one of the buttons out of the three, as I assume it is because the necessary addition of another BorderPane? Here is a drawn out picture of what I would like to come out with:
Just to clarify, I do not need assistance with the handling of finding the zodiac sign, etc. Mainly need assistance on the layout, as it has stumped me for days. Thank you in advance for helping out a novice to JavaFX :).
You have three rows with diffrent number of children. You can use HBox if row have more than one child.
BorderPane mainPane = new BorderPane();
mainPane.setTop(new HBox(topLabel, topField));
mainPane.setCenter(new HBox(centerLabel, centerField, centerButtom));
mainPane.setBottom(bottomCenterButton);
If you need more than 3 rows (top, center, bottom section of BorderPane) you can use VBox, where every child is row like:
HBox row1 new HBox(child1, child2)
HBox row2 new HBox(child1, child2, child3)
HBox row3 new HBox(child1)
HBox row4 new HBox(child1, child2)
VBox pane = new VBox(row1, row2, row3, row4);
You might want to use a GridPane
GridPane grid = new GridPane();
grid.add(label,0,0);
grid.add(userInput,2,0);
grid.add(findSign,0,1);
grid.add(exitButton,1,1);
grid.add(clear,2,1);
or use a VBox with BorderPane to help with the layout/alignment
BorderPane mainPane, centerPane;
mainPane.setLeft(label);
mainPane.setRight(userInput);
centerPane.setLeft(findSign);
centerPane.setRight(clear);
centerPane.setCenter(exitButton);
BorderPane.setAlignment(label, Pos.LEFT);
BorderPane.setAlignment(userInput, Pos.RIGHT);
BorderPane.setAlignment(exitButton, Pos.CENTER);
BorderPane.setAlignment(findSign, Pos.LEFT);
BorderPane.setAlignment(clear, Pos.RIGHT);
VBox items = new VBox();
items.getChildren().addAll(mainPane, centerPane);
I am testing the JavaFX ScrollPane class and realized that it is not working as I expect, I don't know why. I have the following code:
public class Client3 extends Application {
int indexMsg = 0;
Button send;
GridPane root;
ScrollPane msgPane;
GridPane msgPaneContent;
FlowPane writePane;
TextField writeMsg;
Scene scene;
#Override
public void start(Stage primaryStage) {
root = new GridPane();
root.setAlignment(Pos.CENTER);
root.setVgap(10);
root.setPadding(new Insets(10, 10, 10, 10));
msgPane = new ScrollPane();
msgPane.setPrefSize(280, 280);
msgPane.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
msgPaneContent = new GridPane();
msgPaneContent.setPrefWidth(270);
msgPaneContent.setVgap(10);
writePane = new FlowPane(10, 10);
writePane.setAlignment(Pos.CENTER);
writePane.setPrefWidth(280);
writeMsg = new TextField();
writeMsg.setPrefWidth(150);
writeMsg.setPromptText("Write your message");
writePane.getChildren().add(writeMsg);
GridPane.setConstraints(msgPane, 0, 0);
GridPane.setConstraints(writePane, 0, 1);
msgPane.setContent(msgPaneContent);
root.getChildren().addAll(msgPane, writePane);
writeMsg.setOnAction((ev) -> {
if (!writeMsg.getText().isEmpty()) {
TextArea msg = new TextArea(writeMsg.getText());
msg.setMaxWidth(135);
msg.setPrefRowCount(msg.getLength() / 21 + 1);
msg.setWrapText(true);
GridPane.setConstraints(msg, 0, indexMsg);
indexMsg++;
writeMsg.deleteText(0, writeMsg.getText().length());
msgPaneContent.getChildren().add(msg);
msgPane.setVvalue(1.0);
}
});
scene = new Scene(root, 300, 300);
primaryStage.setTitle("Chat App");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Basically, I have a GridPane as the root with a ScrollPane and a GridPane as its children. The ScrollPane has a children GridPane. There is a TextField with an EventHandler which generates a TextArea inside the GridPane (the ScrollPane's children). Each TextArea object is created in the vertical direction, downwards. I want to set the scrollbar always at its maximum value (setVvalue(1.0)) each time a new TextArea is added. The thing is that it doesn't seem to work as it should because the vertical value is never set to the maximum after handling the event, but it seems to be set to the maximum value that it had before handling it (the bottom of the previous TextArea added).
Any solution for this? Thanks in advance.
I have a GridPane that i fill dynamically, then I display it, the problem is: if the rows are so many, then the rows in the bottom don't get displayed, what i want is to add a scrollbar so that I can display all of the rows, here is the code but it's not working:
BudgetManager bManager = new BudgetManager();
List<Debt> debts = bManager.getDebts();
GridPane topLevel = new GridPane();
topLevel.setAlignment(Pos.TOP_CENTER);
int row = 0;
double totatB = 0, totalS = 0;
for (Debt d : debts) {
//fill GridPane
}
ScrollBar sc = new ScrollBar();
sc.setMin(0);
sc.setMax(350);
sc.setVisibleAmount(20);
sc.setOrientation(Orientation.VERTICAL);
sc.setUnitIncrement(10);
sc.setBlockIncrement(50);
sc.setPrefWidth(20);
sc.valueProperty().addListener((ObservableValue<? extends Number> ov, Number old_val, Number new_val) -> {
topLevel.setLayoutY(-new_val.doubleValue());
}
});
HBox box = new HBox();
box.getChildren().addAll(topLevel, sc);
HBox.setHgrow(topLevel, Priority.ALWAYS);
Scene scene = new Scene(box, 1200, 600);
stage.setScene(scene);
stage.show();
SOLVED
here is the solution, thanks to keuleJ, using ScrollPane instead of ScrollBar:
ScrollPane scroll = new ScrollPane();
GridPane topLevel = new GridPane();
scroll.setContent(topLevel);
scroll.setHbarPolicy(ScrollBarPolicy.ALWAYS);
scroll.setVbarPolicy(ScrollBarPolicy.AS_NEEDED);
scroll.setFitToWidth(true);
scroll.setFitToHeight(true);
Scene scene = new Scene(scroll, 1200, 600); // Manage scene size
Use fitToWidth or fitToHeight properties.
See the docs:
https://docs.oracle.com/javafx/2/api/javafx/scene/control/ScrollPane.html
I am having a resize issue when content is added and removed from a JavaFX BorderPane. The BorderPane content is not being resized until the window is manually resized. I have written a small test app to model this behavior. The application builds a BorderPane that contains a rectangle embedded within a StackPane at the center of the BorderPane. Along the bottom of the BorderPane there is a VBox and HBox that contain text and a separator. There is a menu item that removes the content from the bottom of the BorderPane (MoveText -> Right) and adds similar content to the right position of the BorderPane.
When the text is added to the right position of the BorderPane, the rectangle overlaps the text. In otherwords the content of the BorderPane center is overlapping the content in the BorderPane right.
I saw the following link -
https://stackoverflow.com/questions/5302197/javafx-bug-is-there-a-way-to-force-repaint-this-is-not-a-single-threading-pr
Calling requestLayout does not seem to help. I have also tried calling impl_updatePG and impl_transformsChanged on various nodes in the graph. I got this idea from this thread - https://forums.oracle.com/forums/thread.jspa?threadID=2242083
public class BorderPaneExample extends Application
{
private BorderPane root;
private StackPane centerPane;
#Override
public void start(Stage primaryStage) throws Exception
{
root = new BorderPane();
root.setTop(getMenu());
root.setBottom(getBottomVBox());
centerPane = getCenterPane();
root.setCenter(centerPane);
Scene scene = new Scene(root, 900, 500);
primaryStage.setTitle("BorderPane Example");
primaryStage.setScene(scene);
primaryStage.show();
}
private MenuBar getMenu()
{
MenuBar menuBar = new MenuBar();
MenuItem rightMenuItem = new MenuItem("Right");
rightMenuItem.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent actionEvent) {
root.setRight(getRightHBox());
root.setBottom(null);
root.requestLayout();
}
});
MenuItem bottomMenuItem = new MenuItem("Bottom");
bottomMenuItem.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent actionEvent) {
root.setRight(null);
root.setBottom(getBottomVBox());
}
});
Menu menu = new Menu("Move text");
menu.getItems().add(rightMenuItem);
menu.getItems().add(bottomMenuItem);
menuBar.getMenus().addAll(menu);
return menuBar;
}
private HBox getRightHBox()
{
HBox hbox = new HBox();
VBox vbox = new VBox(50);
vbox.setPadding(new Insets(0, 20, 0, 20));
vbox.setAlignment(Pos.CENTER);
vbox.getChildren().addAll(new Text("Additional Info 1"),
new Text("Additional Info 2"), new Text("Additional Info 3"));
hbox.getChildren().addAll(new Separator(Orientation.VERTICAL), vbox);
return hbox;
}
private VBox getBottomVBox()
{
VBox vbox = new VBox();
HBox hbox = new HBox(20);
hbox.setPadding(new Insets(5));
hbox.setAlignment(Pos.CENTER);
hbox.getChildren().addAll(new Text("Footer Item 1")
, new Text("Footer Item 2"), new Text("Footer Item 3"));
vbox.getChildren().addAll(new Separator(), hbox);
return vbox;
}
private StackPane getCenterPane()
{
StackPane stackPane = new StackPane();
stackPane.setAlignment(Pos.CENTER);
final Rectangle rec = new Rectangle(200, 200);
rec.setFill(Color.DODGERBLUE);
rec.widthProperty().bind(stackPane.widthProperty().subtract(50));
rec.heightProperty().bind(stackPane.heightProperty().subtract(50));
stackPane.getChildren().addAll(rec);
return stackPane;
}
public static void main(String[] args)
{
Application.launch(args);
}
}
Any suggestions would be appreciated.
Thanks
For the sake of having an answer:
The StackPane needs to have its minimum size set in order to do clipping. So if you explicitly add stackPane.setMinSize(0, 0); to the getCenterPane() method, it should fix your problem.
So your getCenterPane() method would now look like this:
private StackPane getCenterPane()
{
StackPane stackPane = new StackPane();
stackPane.setMinSize(0, 0);
stackPane.setAlignment(Pos.CENTER);
final Rectangle rec = new Rectangle(200, 200);
rec.setFill(Color.DODGERBLUE);
rec.widthProperty().bind(stackPane.widthProperty().subtract(50));
rec.heightProperty().bind(stackPane.heightProperty().subtract(50));
stackPane.getChildren().addAll(rec);
return stackPane;
}