I have a project from uni where I have to make an application with Java (in a model view controller format), and I want to make tabs in my application, but it doesn't seem to be working.
I looked up a lot of tutorials, and they all tell me the same way of how to use TabPane, but it doesn't work for me.
Here is the code I have in my Application Loader class:
package main;
import controller.ModuleChooserController;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;
import model.StudentProfile;
import view.ModuleChooserRootPane;
public class ApplicationLoader extends Application {
private ModuleChooserRootPane view;
#Override
public void init() {
//create model and view and pass their references to the controller
StudentProfile model = new StudentProfile();
view = new ModuleChooserRootPane();
new ModuleChooserController(view, model);
}
#Override
public void start(Stage stage) throws Exception {
//whilst you can set a min width and height (example shown below) for the stage window,
//you should not set a max width or height and the application should
//be able to be maximised to fill the screen and ideally behave sensibly when resized
stage.setMinWidth(530);
stage.setMinHeight(500);
TabPane tabPane = new TabPane();
Tab tab = new Tab("Testing");
tabPane.getTabs().add(tab);
stage.setTitle("Final Year Module Chooser Tool");
stage.setScene(new Scene(view));
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
I have the TabPane implemented, but nothing comes up. I also tried implementing the TabPane in my "view" package, but I had no luck there either.
Here is the code for the ModuleRootChooserPane:
package view;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
//You may change this class to extend another type if you wish
public class ModuleChooserRootPane extends BorderPane {
private ButtonPane bp;
private ProfileCreator profileCreator;
public ModuleChooserRootPane() {
//This sets the colour of background
this.setStyle("-fx-background-color: #EDF1F3;");
//Creates a new instance of the buttonPane (Used from ButtonPane.java) and ProfileCreator
bp = new ButtonPane();
profileCreator = new ProfileCreator();
//This adds the padding on the left so that "submit" button is in line with text fields
bp.setPadding(new Insets(0, 0, 0, 120));
//Creates a new VBox which adds the ProfileCreator and the button pane
VBox rootContainer = new VBox(profileCreator, bp);
rootContainer.setPadding(new Insets(100,100,100,100));
this.getChildren().add(rootContainer);
}
}
You choose to work without fxml file, so you need to create your view into the class ModuleChooserRootPane, every graphic element have to be here, or in other classes used here.
So you have to add your TabPane in its constructor too :
public ModuleChooserRootPane() {
...
//this.getChildren().add(rootContainer);
setLeft(rootContainer); // or Top/Bottom/Right/Center
TabPane tabPane = new TabPane();
Tab tab = new Tab("Testing");
tabPane.getTabs().add(tab);
setCenter(tabPane); // or Top/Bottom/Right/Left
}
A BorderPane is good idea for root element because it's has several zones to add element, but fo sor you need to use setLeft(), setRight(), setCenter(), setTop() and setBottom() rather than just getChildren().add() where you cannot control the place
Example for adding content in the different tabs :
TabPane tabPane = new TabPane();
Tab tab = new Tab("Testing");
tab.setContent(new VBox(new Label("Here is the testing place"), new Circle(15, 12, 10)));
Tab tab2 = new Tab("Testing2");
HBox hboxContentTab2 = new HBox();
hboxContentTab2.getChildren().add(new Ellipse(10, 10, 10, 13));
hboxContentTab2.getChildren().add(new Label("Here is the BIS testing place"));
tab2.setContent(hboxContentTab2); // add a Node created before, ot can be whatever you wan, borderpane, gridpane, hbox, vbox, label ...
tabPane.getTabs().addAll(tab, tab2);
Related
I have a javafx application that displays content inside a scrollpane. This content includes a TabPane. Inside the tabpane, there is a VBox containing widgets that can change height based on user interaction, especially:
table view where more rows are shown
TitledPane that are expanded.
When this happens, the application does not resize as expected. I understand the problem is that the tabpane does not expand to match its expanded content.
However, the layout would correctly update if I resized the application window, or just selected another tab and then come back in the original tab.
So I believe what is missing is just "triggering" some re-layout. However, I could not manage it by triggering a requestLayout when the tab content is resized. I tried forcing the tabpane minHeight and maxHeight then the tab content is resized also, but it does not work.
See below a sample program that shows the problem (this is javafx 8, but I believe the issue has not been fixed since then)
import javafx.application.Application;
import javafx.beans.property.ReadOnlyDoubleProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.stage.Stage;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.SingleSelectionModel;
import javafx.scene.layout.VBox;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TitledPane;
import javafx.scene.control.TabPane;
import javafx.scene.control.Tab;
public class TitledPaneBench extends Application {
#Override
public void start(Stage stage) throws Exception {
ScrollPane pane = new ScrollPane();
VBox box = new VBox();
box.getChildren().add(new Label("Test"));
box.getChildren().add(new Label("Test2"));
box.getChildren().add(new Label("Test3"));
VBox cbox = new VBox();
cbox.getChildren().add(new Label("Test ABC"));
cbox.getChildren().add(new Label("Test CDE"));
cbox.getChildren().add(new Label("Test DEF"));
cbox.getChildren().add(new Label("Test EFG"));
TitledPane titledpane = new TitledPane("Test collapsible",cbox);
titledpane.setExpanded(false);
box.getChildren().add(titledpane);
box.getChildren().add(new Label("Test4"));
TabPane tabpane = new TabPane();
Tab tab1 = new Tab();
tab1.setText("First tab");
tab1.setContent(box);
Tab tab2 = new Tab();
tab2.setText("Faire Valoir");
tab2.setContent(new Label("Choucroute"));
tabpane.getTabs().add(tab1);
tabpane.getTabs().add(tab2);
box.heightProperty().addListener(new ChangeListener<Number>() {
#Override
public void changed(ObservableValue<? extends Number> arg0, Number arg1, Number arg2) {
System.err.println("Height changed "+arg1+" <- "+arg2);
SingleSelectionModel<Tab> selectionmodel = tabpane.getSelectionModel();
box.requestLayout();
tabpane.requestLayout();
}
});
pane.setContent(tabpane);
stage.setScene(new Scene(pane));
stage.show();
}
public static void main(String args[]) {
TitledPaneBench tb = new TitledPaneBench();
tb.launch(args);
}
}
Take a look at this I moved some things around to clean it up and make it easier for myself to read and understand the line you are looking for is titledpane.setOnMouseClicked(event -> tabpane.requestLayout());
let me know if I misunderstood the problem I can update the answer unless someone else beats me to it
public class Main extends Application {
#Override
public void start(Stage stage) {
VBox cbox = new VBox();
cbox.getChildren().addAll(
new Label("Test ABC"),
new Label("Test CDE"),
new Label("Test DEF"),
new Label("Test EFG")
);
TabPane tabpane = new TabPane();
TitledPane titledpane = new TitledPane("Test collapsible",cbox);
titledpane.setExpanded(false);
//The line below should solve the issue
titledpane.setOnMouseClicked(event -> tabpane.requestLayout());
VBox box = new VBox();
box.getChildren().addAll(
new Label("Test"),
new Label("Test2"),
new Label("Test3"),
titledpane,
new Label("Test4")
);
tabpane.getTabs().addAll(
new Tab("First tab",box),
new Tab("Faire Valoir",new Label("Choucroute"))
);
box.heightProperty().addListener((arg0, arg1, arg2) -> {
System.err.println("Height changed "+arg1+" <- "+arg2);
SingleSelectionModel<Tab> selectionmodel = tabpane.getSelectionModel();//Unused
});
ScrollPane scrollPane = new ScrollPane(tabpane);
stage.setScene(new Scene(scrollPane));
stage.show();
}
}
I am trying to use JavaFX to create a scene with the program's title positioned at the top-center, and buttons in a vertical line along the left side of the scene. However, both of these elements are displayed clustered up in the top-right of the scene, instead of where I want them to be.
How can I get these elements to be displayed where I want them to?
Here is how I try to set the program title's position:
grid.add(gameTitle, 0, 0);
GridPane.setHalignment(gameTitle, HPos.CENTER);
GridPane.setValignment(gameTitle, VPos.TOP);
I try to set the VBox object similarly:
grid.getChildren().add(buttonBox);
GridPane.setHalignment(buttonBox, HPos.LEFT);
GridPane.setValignment(buttonBox, VPos.CENTER);
This is what is displayed:
My entire MainMenu class. (This class is called in my Main class to construct the scene):
package scenes;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.application.Platform;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
public class MainMenu {
public Pane getMainMenuPane() {
// Create the scene grid
GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
// Set the game title to the top center
Text gameTitle = new Text("Bandit King");
Font titleFont = new Font(75);
gameTitle.setFont(titleFont);
//
grid.add(gameTitle, 0, 0);
GridPane.setHalignment(gameTitle, HPos.CENTER);
GridPane.setValignment(gameTitle, VPos.TOP);
// Create Button objects and put in VBox
Button[] buttArr = makeButtons();
VBox buttonBox = new VBox();
buttonBox.getChildren().addAll(buttArr);
buttonBox.setSpacing(10);
// add Button VBox to GridPane
grid.getChildren().add(buttonBox);
GridPane.setHalignment(buttonBox, HPos.LEFT);
GridPane.setValignment(buttonBox, VPos.CENTER);
return (Pane) grid;
}
private Button[] makeButtons() {
// Create buttons
Button start = new Button("Start a New Game");
Button load = new Button("Load a Saved Game");
Button exit = new Button("Exit the Game");
// set Button actions
start.setOnAction( a -> {
System.out.println("WIP- start game.");
});
load.setOnAction( a -> {
System.out.println("WIP- load game");
});
exit.setOnAction( a -> {
Platform.exit();
System.exit(0);
});
// return Button[] array
Button[] buttArr = {start, load, exit};
return buttArr;
}
}
My Main class (Displays the scene):
package central;
import javafx.stage.Stage;
import scenes.*;
import controllers.*;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
public class Main extends Application {
// Get scene panes
private static Pane mainMenu = new MainMenu().getMainMenuPane();
// Create SceneController object.
private static Scene scene = new Scene(mainMenu, 1600, 900);
public static SceneController SceneControl = new SceneController(scene);
#Override
public void start(Stage stage) {
stage.setTitle("Bandit King");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
The default cell you add the children of a GridPane to is (0, 0) which is what you do in this line:
grid.getChildren().add(buttonBox);
you need to change this to
grid.add(buttonBox, 0, 1);
to set the row index to 1. (There are alternatives to assigning the row index this way, but this is the most convenient option in this case.)
This won't result in the first column taking the full width of the GridPane though. If you also want the first column to take all the width available, you need to specify this by adding ColumnConstraints:
ColumnConstraints constraints = new ColumnConstraints();
constraints.setHgrow(Priority.ALWAYS);
grid.getColumnConstraints().add(constraints);
As far as what I noticed, you added all the nodes in a column and set there positions, but you did not specify how much the column needs to be stretched. GridPane column will not stretch automatically by itself unless specified.
You can debug your program, by enabling the gridLinesVisible of GridPane property to true.
grid.setGridLinesVisible(true);
You need to specify the columnConstraints, to let the GridPane column stretch to the available width.
ColumnConstraints constraint = new ColumnConstraints();
constraint.setHgrow(Priority.ALWAYS);
grid.getColumnConstraints().add(constraint);
How can I create a popover like in the DatePicker class from javafx.scene.control.DatePicker as seen here:
The popover should when displayed be on top of all the other components as seen here (the popover is above the TextField):
Found a pretty simple solution to my problem, here is a code snippet in case people encounter the same problem
package main;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CustomMenuItem;
import javafx.scene.control.Label;
import javafx.scene.control.MenuButton;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
BorderPane rootPane = new BorderPane();
MenuButton openButton = new MenuButton("Open Context Menu");
BorderPane contentPane = new BorderPane();
CustomMenuItem item = new CustomMenuItem(contentPane);
openButton.setStyle("-fx-selection-bar: transparent;"); //this is optional. it makes the blue background that appears when something is focused transparent
contentPane.setPrefSize(300, 300);
Label text = new Label("The ContextMenu will only close when you click the\nbutton below OR click outside of the ContextMenu.\nHow neat is that?");
text.setStyle(" -fx-text-fill: -fx-text-base-color;"); //needs to bet set if you want the selection-bar to be transparent. if not set the text will become invisible
contentPane.setTop(text);
Button closeButton = new Button("Close this popover");
closeButton.setOnAction(x -> {
openButton.hide();
});
contentPane.setBottom(closeButton);
item.setHideOnClick(false); // this will stop the ContextMenu from being hidden when clicking inside of it.
openButton.getItems().add(item);
rootPane.setCenter(openButton);
Scene scene = new Scene(rootPane, 550, 250);
primaryStage.setScene(scene);
primaryStage.show();
}
}
I just placed a Pane with all of my content inside of a CustomMenuItem and added that CustomMenuItem to my MenuButton.
As stated in the title, I have fxml files, I have a UI that is set up with three labels/buttons up top and the lower half of the window has a pane. Every time a label/button is clicked, the pane must switch to that corresponding fxml file. So in other words, the pane must always be in the same position, kind of like a tabbed layout but without tabs.
I know I can achieve this with just loading a new instance of an fxml file but, I want to avoid that because when a user click on a tab he previously was on, he should be able to see his earlier input.
I have some main.java that starts the program. Some controller.java that controls the UI when it is first loaded, and some fxml file corresponding to that initial view. How can I go about implementing this transition functionality? P.S. I am very novice at JavaFX.
Here is a MCVE of how you can achieve it.
It can of course be implemented using FXML :
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class StageTest extends Application{
private Pane pane1, pane2, mainPane;
#Override
public void start(Stage stage) throws Exception {
stage.setTitle("Switch Panes");
Button button1 = new Button("Show Pane 1");
button1.setOnAction(e -> showPane1());
Button button2 = new Button("Show Pane 2");
button2.setOnAction(e -> showPane2());
HBox buttonsPane = new HBox(5.);
buttonsPane.getChildren().addAll(button1, button2);
pane1 = getPane("PANE ONE");
pane2 = getPane("PANE TWO");
mainPane = new StackPane(pane1);
BorderPane root = new BorderPane();
root.setTop(buttonsPane);
root.setCenter(mainPane);
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
private void showPane1() {
mainPane.getChildren().clear();
mainPane.getChildren().add(pane1);
}
private void showPane2() {
mainPane.getChildren().clear();
mainPane.getChildren().add(pane2);
}
private Pane getPane(String txt) {
VBox pane = new VBox();
pane.getChildren().addAll(new TextArea(txt+" add text here: "));
return pane;
}
public static void main(String[] args) {
launch(args);
}
}
I am working on a project using JavaFX. I have included FontAwesome in my project to avoid using images for simple icons. I created the following function in a constants class that generates an HBox with an icon and text that will be called in the setGraphic(Node node). The function is as follows:
public static HBox iconText(String icon, String text) {
return ConstantsClass.iconText(icon, text, 5);
}
public static HBox iconText(String icon, String text, int spacing) {
HBox box = new HBox(spacing);
Label iconLabel = new Label(icon);
iconLabel.setFont(ConstantsClass.fontAwesome);
Label textLabel = new Label(text);
box.getChildren().addAll(iconLabel, textLabel);
return box;
}
The method works perfectly on buttons, such as having a back button with an arrow icon. However it does not seem to work on MenuItems.
I have a menu bar at the top of my application with Menus in them, and MenuItems in those. I tried the same process with a "settings" MenuItem, but the text does not appear unless the cursor is over the item.
MenuItem settings = new MenuItem();
settings.setGraphic(ConstantsClass.iconText(FontAwesome.COG, "Settings")); //Obscuring name of Constants Class
This code has the following results:
When the user just clicks on the menu drop down
When the user hovers over the Menu Item
How can I make the MenuItem always show the icon and text?
It's kind of weird it looks like a bug. If there is no label in the graphic, the graphic seems to display OK (for instance a rectangle seems to work correctly as a graphic). My guess is it is some kind of mess-up in the interaction between the CSS styling rules and the menu skin implementation.
A workaround is to use a snapshot, but that somehow makes the thing being snapshot slightly bold in appearance.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.SnapshotParameters;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class MenuDisplay extends Application {
public void start(Stage stage) throws Exception {
Label label = new Label("(*)");
label.setStyle("-fx-background-color: null;");
Scene dummyScene = new Scene(label, Color.TRANSPARENT);
SnapshotParameters params = new SnapshotParameters();
params.setFill(Color.TRANSPARENT);
Image snapshot = label.snapshot(params, null);
ImageView imageView = new ImageView(snapshot);
Menu menu = new Menu("Choices");
menu.getItems().addAll(
new MenuItem("Broken Label Graphic", new Label("(*)")),
new MenuItem("OK Rect", new Rectangle(16, 16, Color.FORESTGREEN)),
new MenuItem("Fixed Snapshot", imageView)
);
MenuBar menuBar = new MenuBar(menu);
Scene scene = new Scene(
new VBox(menuBar), 100, 100
);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Maybe somebody else can come up with a better workaround (or fix).