Resize menu into layer - java

I have this JavaFX menu which is not working properly:
public class CreatingMenus {
// Generate Menu
public void initMenu(Stage primaryStage, Group root, Scene scene) {
// Call Menu Actions from Java Method MenuActions
final MenuActions ma = new MenuActions();
MenuBar menuBar = new MenuBar();
// File menu - new, save, close, exit
Menu menu = new Menu("File");
menu.getItems().add(new MenuItem("New"));
menu.getItems().add(new MenuItem("Save"));
menu.getItems().add(new MenuItem("Close"));
menu.getItems().add(new SeparatorMenuItem());
MenuItem menuItem = new MenuItem("Exit");
// Exit from the application
menuItem.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent e) {
// This Java Method is called from the Java Class MenuActions
ma.programExit(); // Exit program
}
});
menu.getItems().add(menuItem);
menuBar.getMenus().add(menu);
// Options menu - Preferences
Menu options = new Menu("Options");
options.getItems().add(new MenuItem("Preferences"));
menuBar.getMenus().add(options);
// Help menu - About
Menu help = new Menu("Help");
MenuItem helpItem = new MenuItem("About");
// Exit from the application
helpItem.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent e) {
aboutDialog();
}
});
help.getItems().add(helpItem);
menuBar.getMenus().add(help);
menuBar.prefWidthProperty().bind(primaryStage.widthProperty());
menuBar.setLayoutX(0);
menuBar.setLayoutY(0);
root.getChildren().add(menuBar);
}
public void aboutDialog() {
final int xSize = 640;
final int ySize = 480;
final String logoImage = "/logo.png";
final Color backgroundColor = Color.WHITE;
final String text = "SQL Browser";
final String version = "Product Version: 1.0";
final String license = "License Information";
final Stage aboutDialog = new Stage();
aboutDialog.initModality(Modality.WINDOW_MODAL);
GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(20, 20, 20, 20));
// Logo
Image image = new Image(getClass().getResourceAsStream(logoImage));
ImageView logo = new ImageView(image);
grid.add(logo, 1, 0);
// Product name
Text productName = new Text(text);
productName.setFont(Font.font("Verdana", 12));
grid.add(productName, 0, 2);
// Product version
Text productVersion = new Text(version);
productVersion.setFont(Font.font("Verdana", 12));
grid.add(productVersion, 0, 3);
// Product License
Text productLicense = new Text(license);
productLicense.setFont(Font.font("Verdana", 12));
grid.add(productLicense, 0, 4);
// Close Button
Button closeButton = new Button("Close");
closeButton.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent arg0) {
// Close the dialog when "Close" button is pressed
aboutDialog.close();
}
});
grid.add(closeButton, 5, 18);
// Configure dialog size and background color
Scene aboutDialogScene = new Scene(grid, xSize, ySize, backgroundColor);
aboutDialog.setScene(aboutDialogScene);
aboutDialog.show();
}
}
When I add this menu it overrides the other components into the application and they are not responsible because I suppose they are behind this layer. Can you tell how I can isolate this menu in separate layer because I don't want to place other components behind.
EDIT
When I use the menu code I get this result:
When I remove the the menu code I get this result and the application is working properly:
The problem somewhere into the menu code.

Scene Width Binding
Stage width contains window borders and a title bar - which are irrelevant to internal layout.
To fill the scene width with something using binding, bind the preferred size of the thing to a scene size and not the stage size:
menuBar.prefWidthProperty().bind(menuBar.getScene().widthProperty());
Or (usually preferred) you can use alternate layout panes and layout constraints which perform the sizing automatically. For your particular layout a BorderPane might be useful.
You may have additional issues with your implementation which cause problems (I have not checked).
Using Groups for Layout
Your pastebin code uses a Group for the main scene layout root. Group is generally a poor choice for laying out a flexibly sized screen like your example. A group is not re-sizable. Instead it is advisable to use a re-sizable layout pane as referred to above.
Tool Support
ScenicView is invaluable in debugging existing layout issues.
SceneBuilder is great for rapid prototyping of various layouts.
I strongly advise using these tools to help understand how layouts work and to provide you with the tools and knowledge you need to debug layout issues yourself.

Works for me without any changes. You might should check your Java/JavaFx versions. I am using 1.7_17, 64 bits on windows.
I have added some images (I don't have yours) to get sure the behaviour you get is not because of them.

Related

How can a class like BorderPane display the change when it is later being coded and not when initialised?

I was working on JavaFX, and I realised something which kept me thinking. So, there's a scene in my constructor which adds the variable root of the type BorderPane. In the main class, this class' constructor is called first, thereby initialising the BorderPane in the Scene. However, the BorderPane is being modified and edited in a method called build. I am confused how the BorderPane is still being able to display its updated version from the build() since in the constructor it has already been commanded to display.
Here's my code:
public class SnacksOrDrinks
{
private BorderPane root;
private Stage primaryStage;
private Scene scene;
private Cart crt;
public SnacksOrDrinks(Stage primaryStage, Cart crt)
{
// BorderPane is being initialised and is being put inside the scene:
BorderPane root1 = new BorderPane();
this.scene = new Scene(root1, 800, 475);
this.crt = crt;
ImageView imgview = new ImageView("./application/MountainPainting.jpg");
imgview.fitWidthProperty().bind(primaryStage.widthProperty());
imgview.fitHeightProperty().bind(primaryStage.heightProperty());
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
this.primaryStage = primaryStage;
this.root = root1;
root.setStyle("-fx-background-color: blue");
root.getChildren().add(imgview);
}
public void build(Dispenser dis)
{
// ItemsPaneProp extends GridPane and stores the common properties shared in other classes.
ItemsPaneProp pane = new ItemsPaneProp();
// Header Created:
CommHeaderProp header = new CommHeaderProp("Lopes Vending Machine");
// However, BorderPane is being modified here, and the constructor has already been called.
BorderPane.setAlignment(header, Pos.CENTER);
root.setTop(header);
// Create a Line:
Line line = new Line(100, 10, 300, 10);
line.setFill(Color.GOLDENROD);
line.setStrokeWidth(2);
line.setSmooth(true);
pane.add(line, 0, 0);
// Create all the Scene's Components and setup the Event Handlers
ImageView img = new ImageView("./application/softdrink.jpg");
img.setFitWidth(75);
img.setFitHeight(75);
Button btn1 = new Button("Select to get Drinks", img);
btn1.setStyle("-fx-background-color: white");
btn1.setFont(Font.font("Times New Roman", FontWeight.BOLD, FontPosture.REGULAR, 12));
btn1.setContentDisplay(ContentDisplay.TOP);
pane.add(btn1, 0, 1);
ImageView img1 = new ImageView("./application/potato-chips.png");
img1.setFitWidth(75);
img1.setFitHeight(75);
Button btn2 = new Button("Select to get Snacks", img1);
btn2.setStyle("-fx-background-color: white");
btn2.setFont(Font.font("Times New Roman", FontWeight.BOLD, FontPosture.REGULAR, 12));
btn2.setContentDisplay(ContentDisplay.TOP);`enter code here`
pane.add(btn2, 1, 1);
root.setCenter(pane); // The BorderPane is being modified here too, but the constructor isn't updating the scene. Then, how does it still work?
btn1.setOnMouseClicked(new EventHandler<MouseEvent>()
{
#Override
public void handle(MouseEvent e)
{
// Create, build, and show Scene 2
DrinksList scene = new DrinksList(primaryStage, crt);
scene.build(dis);
scene.show();
}
});
btn2.setOnMouseClicked(new EventHandler<MouseEvent>()
{
#Override
public void handle(MouseEvent e)
{
// Create, build, and show Scene 2
SnacksList scene = new SnacksList(primaryStage, crt);
scene.build(dis);
scene.show();
}
});
}
public void show()
{// setting scene:
primaryStage.setScene(scene);
}
}
Take a look at https://docs.oracle.com/javase/8/javafx/scene-graph-tutorial/scenegraph.htm#JFXSG107
The JavaFX scene graph is a retained mode API, meaning that it maintains an internal model of all graphical objects in your application. At any given time, it knows what objects to display, what areas of the screen need repainting, and how to render it all in the most efficient manner.
Your borderPane - part of SceneGraph, so JavaFX knows, when you change anything in your borderPane, and automatically invoking redraw method for it.

Invalid Image url

I can't seem to use the Image class. My colleague and I are working on a project together and he seems to be able to run all the code fine without any errors. When I try to run the same code, with the src organized the same way, I get an invalid URL or resource not found error. I have had this problem on other projects and it seems like it is specific to my computer or file system. Any help would be much appreciated. Here is a sample of the code.
public class HomePageGUI extends Application {
//Create the dispenser. Generates 5 Products in an array within the dispenser class.
private final Dispenser dispenser = new Dispenser();
//Get background image and add it to the stack pane
private final Image bgImage = new Image("/Dispenser Design/Background & Button Images/Background.png");
private final Button backButton = new Button("", new ImageView(
new Image("/Dispenser Design/Background & Button Images/Navigation Buttons/Back Button.png")));
private StackPane backgroundPane = new StackPane();
private Scene scene;
#Override
public void start(Stage primaryStage) {
primaryStage = homePage(primaryStage);
primaryStage.show();
}
//Display the home page
private Stage homePage(Stage stage) {
//IMAGE CREATION
Image drinksCategoryImage = new Image (
"/Dispenser Design/Background & Button Images/Starter Page/Drinks Button.png");
Image gumCategoryImage = new Image (
"/Dispenser Design/Background & Button Images/Starter Page/Gum Button.png");
Image sweetsCategoryImage = new Image (
"/Dispenser Design/Background & Button Images/Starter Page/Sweets Button.png");
//END IMAGE CREATION
//Create the buttons with the image displayed on them.
Button drinksCategoryButton = new Button(
"", new ImageView(drinksCategoryImage));
drinksCategoryButton.setOnAction(e -> {
drinksCategory(stage); });
Button gumCategoryButton = new Button(
"", new ImageView(gumCategoryImage));
gumCategoryButton.setOnAction(e -> {
gumCategory(stage); });
Button sweetsCategoryButton = new Button(
"", new ImageView(sweetsCategoryImage));
sweetsCategoryButton.setOnAction(e -> {
sweetsCategory(stage); });
//END BUTTON CREATION
Ok so after many hours of troubleshooting I figured out that I needed to add file: to the image path. I am not sure why my colleagues did not need to add the file: extension to make the images work, but that is how it ended up working for me.
productsForSale[ 4] = new Gum("Wriggleys", "Big Red", .75, 1, new Image(
"file:src/DispenserDesign/IndividualProducts/BigRedGum.jpg"));

JavaFX New Scene on Button Click

The title may be a bit vague, so allow me to define it a little better. I have a working piece of code (down below): a simple main menu for a game I am working on. Everything works well, except for the Start button.
What I want to be able to do is click the Start button, and have a new scene appear on the same stage (window). I do not want to see a new window open. I have talked with someone more experienced in Java, and they told me to create separate classes for the MenuFX and the GameFX. If that is the case, I would need to call some start or launch method on the GameFX class from the MenuFX class, correct? Is this the best approach, or would I want to keep all FX-related code in one class? Also, I should keep the same stage for all FX work, no?
This post shed some light on things, but I am not well-versed in some of the terms discussed- for instance, I still do not understand the concept of Root.
Also, this post talks about a similar application, but I am not using FXML or SceneBuilder... I do not know if any of it is relatable.
MenuFX.java - I have removed some of the working code, simply for brevity. You can see that all I need help with is tying the Start button to some functionality that makes a new empty scene.
/*
* This is simply working on the title screen.
*/
// Asssume all imports are correct
import java.everythingNeeded
public class MenuFX extends Application {
#Override
public void start (Stage primaryStage) {
// Make the window a set size...
primaryStage.setResizable(false);
// Create menu vbox and set the background image
VBox menuVBox = new VBox(30);
menuVBox.setBackground(new Background(new BackgroundImage(new
Image("image/bambooBG.jpg"), null, null, null, new BackgroundSize(45,
45, true, true, true, true))));
// Create start button
Button startButton = new Button("Start Game");
// TODO Some things...
// Need assistance here
// Create help button
Button helpButton = new Button("Help");
helpButton.setOnAction(e -> THINGS);
// Create music toggle button
ToggleButton musicButton = new ToggleButton("Music On/Off");
musicButton.setOnAction(e -> THINGS);
// Create credits button
Button creditsButton = new Button("Credits");
creditsButton.setOnAction(THINGS);
// Create exit button and set it to close the program when clicked
Button endButton = new Button("Exit Game");
endButton.setOnAction(e -> Platform.exit());
// Add all nodes to the vbox pane and center it all
// Must be in order from top to bottom
menuVBox.getChildren().addAll(startButton, helpButton, musicButton, creditsButton, endButton);
menuVBox.setAlignment(Pos.CENTER);
// New scene, place pane in it
Scene scene = new Scene(menuVBox, 630, 730);
// Place scene in stage
primaryStage.setTitle("-tiles-");
primaryStage.setScene(scene);
primaryStage.show();
}
// Needed to run JavaFX w/o the use of the command line
public static void main(String[] args) {
launch(args);
}
}
Restating: I want to click the Start button and have the currently open window change to an empty scene.
Here is a pastebin of the MenuFX class in its entirety:
http://pastebin.com/n6XbQfhc
Thank you for any help,
Bagger
The basic idea here is you would do something like:
public class GameFX {
private final BorderPane rootPane ; // or any other kind of pane, or Group...
public GameFX() {
rootPane = new BorderPane();
// build UI, register event handlers, etc etc
}
public Pane getRootPane() {
return rootPane ;
}
// other methods you may need to access, etc...
}
Now back in the MenuFX class you would do
Button startButton = new Button("Start Game");
startButton.setOnAction(e -> {
GameFX game = new GameFX();
primaryStage.getScene().setRoot(game.getRootPane());
});

How to create a popup window in javafx [duplicate]

This question already has an answer here:
JavaFX 2 custom popup pane
(1 answer)
Closed 7 years ago.
I want to create a popup window in a JavaFX application. Give me some ideas.
When I click on Check button it opens the popup window.
How to do it?
You can either create a new Stage, add your controls into it or if you require the POPUP as Dialog box, then you may consider using DialogsFX or ControlsFX(Requires JavaFX8)
For creating a new Stage, you can use the following snippet
#Override
public void start(final Stage primaryStage) {
Button btn = new Button();
btn.setText("Open Dialog");
btn.setOnAction(
new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
final Stage dialog = new Stage();
dialog.initModality(Modality.APPLICATION_MODAL);
dialog.initOwner(primaryStage);
VBox dialogVbox = new VBox(20);
dialogVbox.getChildren().add(new Text("This is a Dialog"));
Scene dialogScene = new Scene(dialogVbox, 300, 200);
dialog.setScene(dialogScene);
dialog.show();
}
});
}
If you don't want it to be modal (block other windows), use:
dialog.initModality(Modality.NONE);
The Popup class might be better than the Stage class, depending on what you want. Stage is either modal (you can't click on anything else in your app) or it vanishes if you click elsewhere in your app (because it's a separate window). Popup stays on top but is not modal.
See this Popup Window example.
Take a look at jfxmessagebox (http://en.sourceforge.jp/projects/jfxmessagebox/) if you are looking for very simple dialog popups.
Have you looked into ControlsFx Popover control.
import org.controlsfx.control.PopOver;
import org.controlsfx.control.PopOver.ArrowLocation;
private PopOver item;
final Scene scene = addItemButton.getScene();
final Point2D windowCoord = new Point2D(scene.getWindow()
.getX(), scene.getWindow().getY());
final Point2D sceneCoord = new Point2D(scene.getX(), scene.
getY());
final Point2D nodeCoord = addItemButton.localToScene(0.0,
0.0);
final double clickX = Math.round(windowCoord.getX()
+ sceneCoord.getY() + nodeCoord.getX());
final double clickY = Math.round(windowCoord.getY()
+ sceneCoord.getY() + nodeCoord.getY());
item.setContentNode(addItemScreen);
item.setArrowLocation(ArrowLocation.BOTTOM_LEFT);
item.setCornerRadius(4);
item.setDetachedTitle("Add New Item");
item.show(addItemButton.getParent(), clickX, clickY);
This is only an example but a PopOver sounds like it could accomplish what you want. Check out the documentation for more info.
Important note: ControlsFX will only work on JavaFX 8.0 b118 or later.

Absolute layout- centering of buttons

I'm working on a project, and I need to make two buttons absolutly centered on the scene.
I haven't found any built in pane option to do the work, so I had to use alot of binding.
The code for that is really long and I'm quite sure there is an easier way to do the job.
Here is a demo: http://screencast.com/t/pvi5WLko
So what I want to know is, if there's an easy way to do the same thing and preferably with built in panes or something.
I want the buttons to be centered, no matter how the window is resized. Example:
The probably easiest way would be to use a VBox:
public void start(final Stage stage) throws Exception {
final Button button0 = new Button("Start learning");
final Button button1 = new Button("Customize");
final VBox box = new VBox();
box.setFillWidth(true);
box.getChildren().setAll(button0, button1);
box.setAlignment(Pos.CENTER);
stage.setScene(new Scene(box));
stage.setWidth(200);
stage.setHeight(100);
stage.show();
}
Another possible way of doing this is with a GridPane:
public void start(final Stage stage) throws Exception {
final Button button0 = new Button("Start learning");
final Button button1 = new Button("Customize");
final GridPane cPane = new GridPane();
cPane.getChildren().addAll(button0, button1);
GridPane.setConstraints(button0, 0, 0, 1, 1, HPos.CENTER, VPos.CENTER);
GridPane.setConstraints(button1, 0, 1, 1, 1, HPos.CENTER, VPos.CENTER);
final ColumnConstraints columnn0 = new ColumnConstraints();
columnn0.setPercentWidth(100);
cPane.getColumnConstraints().addAll(columnn0);
final RowConstraints row0 = new RowConstraints(1);
row0.setPercentHeight(50);
final RowConstraints row1 = new RowConstraints(1);
row1.setPercentHeight(50);
cPane.getRowConstraints().addAll(row0, row1);
stage.setScene(new Scene(cPane));
stage.setWidth(200);
stage.setHeight(100);
stage.show();
}
The idea here would be to configure the rows and columns in the grid to fill your scene using the according constraints objects. The above defines one column and two rows. You can then align your components within the cells of the Grid, using GridPane.setConstraints(...).
You might want to alter the code slightly to have the top button align to VPos.BOTTOM and the lower one to VPos.TOP, depending on whether you want the buttons to stick together (you'll then have to define a margin for both, of course).

Categories