My TabPane only seems to fill it's width horizontally, but not vertically. My workaround for now is to do this:
stage.getScene().heightProperty().addListener(new ChangeListener<Number>() {
#Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
System.out.println("height changed");
tabPane.setPrefHeight(newValue.doubleValue());
}
});
But if i use that height it's obviously larger than the area that actually remains for it (theres a MenuBar above the TabPane). (Or does it adjust it's size properly?) It also kinda feels wrong, there got to be simple boolean i can set, since it behaves exactly as expected for horizontal changes.
The Scene is setup like this:
public static ResourceBundle BUNDLE = ResourceBundle.getBundle("locales/Bundle", new Locale("en", "GB"));
Scene scene = new Scene(new VBox(0), 800, 600);
MenuBar menuBar = new MenuBar();
Menu menuStart = new Menu(BUNDLE.getString("menu.start"));
Menu menuView = new Menu(BUNDLE.getString("menu.view"));
Menu menuHelp = new Menu(BUNDLE.getString("menu.help"));
menuBar.getMenus().addAll(menuStart, menuView, menuHelp);
((VBox) stage.getScene().getRoot()).getChildren().add(menuBar);
TabPane tabPane = new TabPane();
((VBox) stage.getScene().getRoot()).getChildren().add(tabPane);
stage.setScene(scene);
stage.show();
Ofcourse there is some more code, but it only contains drag'n'drop related listeners, and this problem occurs way before any of them ever did anything (they print to console everytime they do something).
The Tab setup:
final Tab tab = new Tab();
final Label label = new Label("Tab" +text);
tab.setGraphic(label);
StackPane pane = new StackPane();
int red = rng.nextInt(256);
int green = rng.nextInt(256);
int blue = rng.nextInt(256);
String style = String.format("-fx-background-color: rgb(%d, %d, %d);", red, green, blue);
pane.setStyle(style);
Label label = new Label("This is tab " + text);
label.setStyle(String.format("-fx-text-fill: rgb(%d, %d, %d);", 256 - red, 256 - green, 256 - blue));
pane.setPrefSize(500, 500);
pane.getChildren().add(label);
tab.setContent(pane);
Which is from How to drag and drop tab nodes between tab panes
VBox.setVgrow(tabPane, Priority.ALWAYS);
Related
So in windows 10 you have the windows menu with the icons on the left side:
When clicking on the hamburger icon the menu expands and text is show.
The expanded part is overlaying the content. The text is showing. and it was animated in (sliding transition).
In my application I want to make a similar menu on the right side (see blue part):
I have absolutely no idea how to get this effect. Currently I made a button with a graphic. I only display the graphic and when I click on the hamburger I show all the text by changing the setContentDisplay(ContentDisplay.GRAPHIC_ONLY) to setContentDisplay(ContentDisplay.RIGHT) 2 things that are wrong with this approach.
it pushes the content.
You cannot add a transition.
Any help would be appreciated, especially examples.
Demo
I made a demo that shows what I currently have:
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
BorderPane root = new BorderPane();
JFXButton[] jfxButtons = {
new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
};
JFXHamburger hamburger = new JFXHamburger();
HamburgerNextArrowBasicTransition transition = new HamburgerNextArrowBasicTransition(hamburger);
transition.setRate(-1);
hamburger.setAlignment(Pos.CENTER_RIGHT);
hamburger.setPadding(new Insets(5));
hamburger.setStyle("-fx-background-color: #fff;");
hamburger.setOnMouseClicked(event -> {
transition.setRate(transition.getRate() * -1);
transition.play();
if (transition.getRate() == -1) {
for (JFXButton jfxButton : jfxButtons) {
jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
}
} else {
for (JFXButton jfxButton : jfxButtons) {
jfxButton.setContentDisplay(ContentDisplay.RIGHT);
}
}
});
ScrollPane scrollPane = new ScrollPane();
VBox vBox = new VBox();
scrollPane.setContent(vBox);
vBox.getStyleClass().add("content_scene_right");
vBox.getChildren().add(hamburger);
vBox.getChildren().addAll(jfxButtons);
for (JFXButton jfxButton : jfxButtons) {
jfxButton.setMaxWidth(Double.MAX_VALUE);
jfxButton.setRipplerFill(Color.valueOf("#40E0D0"));
VBox.setVgrow(jfxButton, Priority.ALWAYS);
jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
}
vBox.setFillWidth(true);
Label labelHoverOverTest = new Label("Testing label");
VBox vbox2 = new VBox();
vbox2.getChildren().addAll(labelHoverOverTest);
vbox2.setAlignment(Pos.CENTER_RIGHT);
root.setRight(scrollPane);
root.setCenter(vbox2);
Scene scene = new Scene(root);
primaryStage.setMinWidth(400);
primaryStage.setMinHeight(400);
primaryStage.setScene(scene);
primaryStage.show();
}
}
I used JFoenix and fontawesomefx for this demo, but it can also be javafx scene buttons with any graphic.
Here are some images of what the demo looks like:
As you can see it pushes it the content in the center and I can't add any transition.
(here is a sample from bootstrap to give you an idea on What I'm trying to make it look like 1: https://bootsnipp.com/snippets/Pa9xl, 2: https://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle (with this one the content still moves, but it should give you a clear idea on what my vision is))
Problem is that you are using BorderPane and placing everything on same layer, so when content on right changes width it will affect one in the center and such.
In other to avoid this you should make it layered, so for root of view use StackPane, this pane should have 2 children, 1 for main content and 1 for sidebar, make sure that sidebar is above main content, now this 2 can be any Pane that you want. This way sidebar will be placed over main content and it won't push content.
Using code you provided and just adding StackPane you get something like this:
#Override
public void start(Stage primaryStage) {
StackPane root = new StackPane();
BorderPane mainContent = new BorderPane();
BorderPane sidebar = new BorderPane();
JFXButton[] jfxButtons = {
new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),};
JFXHamburger hamburger = new JFXHamburger();
HamburgerNextArrowBasicTransition transition = new HamburgerNextArrowBasicTransition(hamburger);
transition.setRate(-1);
hamburger.setAlignment(Pos.CENTER_RIGHT);
hamburger.setPadding(new Insets(5));
hamburger.setStyle("-fx-background-color: #fff;");
hamburger.setOnMouseClicked(event -> {
transition.setRate(transition.getRate() * -1);
transition.play();
if (transition.getRate() == -1) {
for (JFXButton jfxButton : jfxButtons) {
jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
}
} else {
for (JFXButton jfxButton : jfxButtons) {
jfxButton.setContentDisplay(ContentDisplay.RIGHT);
}
}
});
ScrollPane scrollPane = new ScrollPane();
VBox vBox = new VBox();
scrollPane.setContent(vBox);
vBox.getStyleClass().add("content_scene_right");
vBox.getChildren().add(hamburger);
vBox.getChildren().addAll(jfxButtons);
for (JFXButton jfxButton : jfxButtons) {
jfxButton.setMaxWidth(Double.MAX_VALUE);
jfxButton.setRipplerFill(Color.valueOf("#40E0D0"));
VBox.setVgrow(jfxButton, Priority.ALWAYS);
jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
}
vBox.setFillWidth(true);
Label labelHoverOverTest = new Label("Testing label");
VBox vbox2 = new VBox();
vbox2.getChildren().addAll(labelHoverOverTest);
vbox2.setAlignment(Pos.CENTER_RIGHT);
mainContent.setCenter(vbox2);
sidebar.setRight(scrollPane);
root.getChildren().addAll(mainContent, sidebar);
Scene scene = new Scene(root);
primaryStage.setMinWidth(400);
primaryStage.setMinHeight(400);
primaryStage.setScene(scene);
primaryStage.show();
}
As for transition I'm not sure what is problem there, for me it works fine.
I'm trying to implement a Gluon Mobile toggle button for a survey page, and when testing, the button jumps to the left a little when I click it. I don't want it to jump at all. You can see it here:
Relevant code is here:
StackPane getToggler() {
ToggleButton toggleButton = new ToggleButton("Yes");
ToggleButtonGroup toggleButtonGroup = new ToggleButtonGroup();
toggleButtonGroup.setSelectionType(SelectionMode.SINGLE);
toggleButtonGroup.setPadding(new Insets(10));
toggleButton = new ToggleButton("Yes");
toggleButton.setStyle("-fx-text-fill:steelblue;");
toggleButton.setUserData("1");
toggleButton.setSelected(false);
toggleButton.selectedProperty().addListener((obv, ov, nv) -> {
if (nv.booleanValue()) {
toggleButtonGroup.setUserData("1");
}
});
toggleButtonGroup.getToggles().add(toggleButton);
toggleButton = new ToggleButton("No");
toggleButton.setStyle("-fx-text-fill:steelblue;");
toggleButton.setSelected(true);
toggleButton.setUserData("0");
toggleButton.setSelected(false);
toggleButton.selectedProperty().addListener((obv, ov, nv) -> {
if (nv.booleanValue()) {
toggleButtonGroup.setUserData("0");
}
});
toggleButtonGroup.getToggles().add(toggleButton);
togglers.add(toggleButtonGroup);
StackPane wrapper = new StackPane();
wrapper.setAlignment(Pos.CENTER);
wrapper.getChildren().add(toggleButtonGroup);
return wrapper;
}
Here's where I get the togglers and their relation to the label to the left:
for (int i = 0; i < this.questions.length; i++) {
HBox row = new HBox();
row.setSpacing(5);
row.setAlignment(Pos.CENTER_LEFT);
Label label = new Label(this.questions[i]);
label.setWrapText(true);
label.setPrefWidth(200);
label.setTextAlignment(TextAlignment.LEFT);
label.setFont(new Font("System", 14));
StackPane wrapper = this.getToggler();
Region region = new Region();
HBox.setHgrow(region, Priority.ALWAYS);
HBox.setHgrow(label, Priority.NEVER);
row.getChildren().addAll(label,region,wrapper);
box.getChildren().add(row);
box.getChildren().add(new Separator());
}
After some debugging, I've realized that the min width value of the toggle buttons is wider than their pref width.
This means that after the user selects one toggle, the min width is applied, and the control is resized with the required min width, shrinking the region as a consequence.
A quick fix (until this gets fixed in the control) can be setting the min width of your toggle buttons:
private StackPane getToggler() {
ToggleButtonGroup toggleButtonGroup = new ToggleButtonGroup();
ToggleButton toggleButtonYes = new ToggleButton("Yes");
toggleButtonYes.minWidthProperty().bind(toggleButtonYes.prefWidthProperty());
toggleButtonGroup.getToggles().add(toggleButtonYes);
ToggleButton toggleButtonNo = new ToggleButton("No");
toggleButtonNo.minWidthProperty().bind(toggleButtonNo.prefWidthProperty());
toggleButtonGroup.getToggles().add(toggleButtonNo);
...;
}
I wanna it will be okay when the number variables is changed, but when the are increased the button goes out from the window. How to fix it? Also how to put the bar down to the level of "10$", so they will be in the same row?
Before :
After :
Here is my code :
VBox vboxBottom = new VBox();
HBox hboxBottomElements = new HBox(15);
HBox hboxBottomMain = new HBox(0);
Region region = new Region();
region.setPrefWidth(500);
hboxBottomElements.getChildren().addAll(visaLabel, separator2, adLabel, separator3, governRelationStatus, separator4, region, next);
hboxBottomElements.setPadding(new Insets(5));
vboxBottom.getChildren().addAll(separator1, new Group(hboxBottomElements));
vboxBottom.setPadding(new Insets(3));
hboxBottomMain.getChildren().addAll(new Group(moneyBox), vboxBottom);
hboxBottomMain.setPadding(new Insets(3));
layout.setBottom(hboxBottomMain);
By using a Group here
vboxBottom.getChildren().addAll(separator1, new Group(hboxBottomElements));
you're creating a layout structure that resizes hboxBottomElements to it's prefered size independent of the space available.
HBox simply moves elements out the right side of it's bounds, if the space available does not suffice. This means if the Group containing moneyBox grows, the Button is moved out of the HBox...
The following simpler example demonstrates the behavior:
#Override
public void start(Stage primaryStage) {
Button btn = new Button("Do something");
HBox.setHgrow(btn, Priority.NEVER);
btn.setMinWidth(Region.USE_PREF_SIZE);
Region filler = new Region();
filler.setPrefWidth(100);
HBox.setHgrow(filler, Priority.ALWAYS);
Rectangle rect = new Rectangle(200, 50);
HBox hBox = new HBox(rect, filler, btn);
Scene scene = new Scene(hBox);
primaryStage.setScene(scene);
primaryStage.show();
}
This will resize filler to make the HBox fit the window.
Now replace
Scene scene = new Scene(hBox);
with
Scene scene = new Scene(new Group(hBox));
and the Button will be moved out of the window...
My code creates a window and lays it out exactly how I want... initially. However, if I maximise the window, the top and bottom parts of the border pane do not remain in the centre. They drift off to the top left and bottom left corners.
I tried to disable the maximise window option, but again it messes up the look of the page, with the top and bottom parts moving.
Here is my code:
#Override
public void start(Stage startWindow) {
startWindow.setTitle("QuizApp");
BorderPane borderPane = new BorderPane();
borderPane.setTop(addHorizontalBoxWithMessage());
borderPane.setCenter(addImageView());
borderPane.setBottom(addHorizontalBoxWithButton());
Scene scene = new Scene(borderPane, 750, 663);
startWindow.setScene(scene);
scene.getStylesheets().add(StartWindow.class.getResource("application.css").toExternalForm());
// startWindow.resizableProperty().setValue(Boolean.FALSE);
startWindow.show();
}
public HBox addHorizontalBoxWithMessage() {
HBox hBox = new HBox();
hBox.setId("hBox");
hBox.setMinWidth(750);
hBox.setMinHeight(50);
hBox.setMaxWidth(750);
hBox.setMaxHeight(50);
hBox.setPadding(new Insets(0, 10, 0, 10));
hBox.setSpacing(10);
hBox.setAlignment(Pos.CENTER);
Text message = new Text("Welcome to the QuizApp!");
message.setId("message");
hBox.getChildren().add(message);
return hBox;
}
public ImageView addImageView() {
Image image = new Image(getClass().getResourceAsStream("quiz.jpg"));
ImageView imageView = new ImageView();
imageView.setImage(image);
imageView.setFitWidth(750);
imageView.setFitHeight(563);
return imageView;
}
public HBox addHorizontalBoxWithButton() {
HBox hBox = new HBox();
hBox.setId("hBox");
hBox.setMinWidth(750);
hBox.setMinHeight(50);
hBox.setMaxWidth(750);
hBox.setMaxHeight(50);
hBox.setPadding(new Insets(10, 10, 10, 10));
hBox.setSpacing(10);
hBox.setAlignment(Pos.CENTER);
Button registerButton = new Button("Register");
registerButton.setPrefSize(100, 30);
Button loginButton = new Button("Login");
loginButton.setPrefSize(100, 30);
hBox.getChildren().add(registerButton);
hBox.getChildren().add(loginButton);
return hBox;
}
I only started teaching myself JavaFX last night but can't seem to figure out where I am going wrong, or find a solution to my problem.
Thanks in advance for any advice.
In your code replace : hBox.setMaxWidth(750);
with:
hBox.setMaxWidth(Region.USE_COMPUTED_SIZE);
The problem was that after resizing your hbox, the width was still 750 px long
Another easy option is to use JavaFX Scene Builder to figure out how GUI components works.
I have a Class that extends the CustomMenuItem. This MenuItems are added to a ContextMenu. Now i need to get the X-Coordinates from the right side of the CustomMenuItem.
The Problem is, that I have no idea how I can get the Coordinates.
The CustMenuItem has no function for getting the Coordinates like getX() or getY().
So how can I solve this problem?
This thing I would like to get:
Here we can see a Sample for a Context Menu (red lines). In the Context Menu are a lot of different CustomMenuItems implemented. Now I would like to get the right top corner Coordinate of the CustomMenuItem.
Thank you for your very nice help.
Before dealing with menu items, let's start saying that a ContextMenu is a popup window, so it has Windowproperties. You can ask for (x,y) left, top origin, and for (w,h).
But you have to take into account the effects, since by default it includes a dropshadow. And when it does, there's an extra space added of 24x24 pixels to the right and bottom.
.context-menu {
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
}
Since this default dropshadow has a radius of 12px, and Y-offset to the bottom of 8px, the right and bottom coordinates of the context menu, including the 24x24 area, are given by:
X=t.getX()+cm.getWidth()-12-24;
Y=t.getY()+cm.getHeight()-(12-8)-24;
where t could be a MouseEvent relative to the scene, and values are hardcoded for simplicity.
Let's see this over an example. Since you don't say how your custom menu items are implemented, I'll just create a simple Menu Item with graphic and text:
private final Label labX = new Label("X: ");
private final Label labY = new Label("Y: ");
#Override
public void start(Stage primaryStage) {
final ContextMenu cm = new ContextMenu();
MenuItem cmItem1 = createMenuItem("mNext", "Next Long Option",t->System.out.println("next"));
MenuItem cmItem2 = createMenuItem("mBack", "Go Back", t->System.out.println("back"));
SeparatorMenuItem sm = new SeparatorMenuItem();
cm.getItems().addAll(cmItem1,cmItem2);
VBox root = new VBox(10,labX,labY);
Scene scene = new Scene(root, 300, 250);
scene.setOnMouseClicked(t->{
if(t.getButton()==MouseButton.SECONDARY || t.isControlDown()){
// t.getX,Y->scene based coordinates
cm.show(scene.getWindow(),t.getX()+scene.getWindow().getX()+scene.getX(),
t.getY()+scene.getWindow().getY()+scene.getY());
labX.setText("Right X: "+(t.getX()+cm.getWidth()-12-24));
labY.setText("Bottom Y: "+(t.getY()+cm.getHeight()-4-24));
}
});
scene.getStylesheets().add(getClass().getResource("root.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
primaryStage.setTitle("Scene: "+scene.getWidth()+"x"+scene.getHeight());
}
private MenuItem createMenuItem(String symbol, String text, EventHandler<ActionEvent> t){
MenuItem m=new MenuItem(text);
StackPane g=new StackPane();
g.setPrefSize(24, 24);
g.setId(symbol);
m.setGraphic(g);
m.setOnAction(t);
return m;
}
If you remove the effect:
.context-menu {
-fx-effect: null;
}
then these coordinates are:
X=t.getX()+cm.getWidth();
Y=t.getY()+cm.getHeight();
Now that we have the window, let's go into the items.
MenuItem skin is derived from a (private) ContextMenuContent.MenuItemContainer class, which is a Region where the graphic and text are layed out.
When the context menu is built, all the items are wrapped in a VBox, and all are equally resized, as you can see if you set the border for the item:
.menu-item {
-fx-border-color: black;
-fx-border-width: 1;
}
This is how it looks like:
So the X coordinates of every item on the custom context menu are the same X from their parent (see above, with or without effect), minus 1 pixel of padding (by default).
Note that you could also go via private methods to get dimensions for the items:
ContextMenuContent cmc= (ContextMenuContent)cm.getSkin().getNode();
System.out.println("cmc: "+cmc.getItemsContainer().getBoundsInParent());
Though this is not recommended since private API can change in the future.
EDIT
By request, this is the same code removing lambdas and css.
private final Label labX = new Label("X: ");
private final Label labY = new Label("Y: ");
#Override
public void start(Stage primaryStage) {
final ContextMenu cm = new ContextMenu();
MenuItem cmItem1 = createMenuItem("mNext", "Next Long Option",action);
MenuItem cmItem2 = createMenuItem("mBack", "Go Back", action);
SeparatorMenuItem sm = new SeparatorMenuItem();
cm.getItems().addAll(cmItem1,cmItem2);
VBox root = new VBox(10,labX,labY);
Scene scene = new Scene(root, 300, 250);
scene.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent t) {
if(t.getButton()==MouseButton.SECONDARY || t.isControlDown()){
// t.getX,Y->scene based coordinates
cm.show(scene.getWindow(),t.getX()+scene.getWindow().getX()+scene.getX(),
t.getY()+scene.getWindow().getY()+scene.getY());
labX.setText("Right X: "+(t.getX()+cm.getWidth()-12-24));
labY.setText("Bottom Y: "+(t.getY()+cm.getHeight()-4-24));
}
}
});
primaryStage.setScene(scene);
primaryStage.show();
primaryStage.setTitle("Scene: "+scene.getWidth()+"x"+scene.getHeight());
}
private MenuItem createMenuItem(String symbol, String text, EventHandler<ActionEvent> t){
MenuItem m=new MenuItem(text);
StackPane g=new StackPane();
g.setPrefSize(24, 24);
g.setId(symbol);
SVGPath svg = new SVGPath();
svg.setContent("M0,5H2L4,8L8,0H10L5,10H3Z");
m.setGraphic(svg);
m.setOnAction(t);
return m;
}
private final EventHandler<ActionEvent> action = new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
System.out.println("action");
}
};