I am currently using Scene Builder and to design my FXML UI in Java. However when loading the scene, I would like to loop through a user's devices and display them as buttons inside a scroll pane:
public DeviceSelectorController() {
for (Device device : OrderBird.getInstance().getProfileManager().getActiveProfile().getDevices()) {
Label label = new Label(device.getName());
Button button = new Button(device.getName());
listView.getItems().add(device.getName());
}
}
I cannot do this through Scene Builder as far as I know because I cannot access the cached HashMap.
Related
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 make a button stacked behind a Label clickable?
Button
Button btn = new Button();
//TODO: button's main function, like onPressed, onReleased etc. here...
Custom label
CustomLabel sp = new CustomLabel("Some texts here"));
//TODO: custom label's main function, like a translucent background etc here...
//main purpose of this is to overlay the button
Main Pane
StackPane mainPane = new StackPane();
mainPane.getChildren.addAll(btn, sp);
With this, the area which the custom label overlays becomes unclickable.
Is there anyway to make the button still clickable even though overlay-ed, for example?
Or is there another way to do it? Something like setting label to not visible on click?
EDIT : To answer Itamar Green 's question..
By using the example as shown in this link: Mouse Events get Ignored on the Underlying Layer , it still does not seems to work. The button stacked under the layer is still not clickable.
sp.setPickOnBounds(false);
You can set the mouseTransparent property of the element(s) drawn on top to true. Note that this way all descendants of the node are ignored for mouse events:
#Override
public void start(Stage primaryStage) {
Button btn = new Button("Say 'Hello World'");
btn.setOnAction((ActionEvent event) -> {
System.out.println("Hello World!");
});
Region region = new Region();
region.setStyle("-fx-background-color: #0000ff88;");
region.setMouseTransparent(true);
StackPane root = new StackPane(btn, region);
Scene scene = new Scene(root, 100, 100);
primaryStage.setScene(scene);
primaryStage.show();
}
Comment out
region.setMouseTransparent(true);
and the button will no longer react to mouse events in any way...
thanks for your help. I think I have solved my own question.
All I did was set a clickable event for my label.
Label sp = new Label("some texts here")
sp.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent e) {
//copy over the button's event.
}
});
Not sure if there is any better way of doing this...
in addition with the correct answer. you can enable or disable " mouse transparent " property via fxml with scenebuilder
I'm making a Javafx game with a pane to hold my elements. The background color is set to black (instead of the default white) using the Scene.setFill(); method.
public class backgroundColor extends Application{
#Override
public void start(Stage stage) throws Exception {
Pane background = new Pane();
Scene scene = new Scene(background, 800, 600);
scene.setFill(Color.BLACK);
//Button button = new Button("Just a button");
stage.setScene(scene);
stage.show();
}
}
This works fine and the background is displayed as black... However, when I un-comment the button line, the fill color is suddenly displayed as white. Notice that the button is only initialized, it isn't being used, eclipse even gives me the warning that the data field "button" is unused.
Is this a weakness of Scene.setFill()? Or is this a unintended feature of creating a controller?
I am working on a game where I switch between different displays by changing the scene's "root" property using Scene.setRoot(), and before I created a button the color was fine no matter how many times I set different panes as the scene's new root node. However, after I created the button I discovered that I had to use a significantly more complicated workaround:
background.setBackground(new Background(new BackgroundFill(Color.BLACK, null, null)));
to fix the issue. Is there a better way to fix the background for the scene, or do I really have to set the background manually for all panes?
I have a titled pane, and I'm displaying an image in this pane, but the image is very big so I resize it, to fit the pane. Since the image becomes smaller, the user might want to view it in original size, so I implemented a method on mouse click opening the original image in new bigger window.
imgViewPicture.setFitWidth(titledPanePicture.getPrefWidth());
imgViewPicture.setPreserveRatio(true);
imgViewPicture.setSmooth(true);
imgViewPicture.setCache(true);
titledPanePicture.setContent(imgViewPicture);
The problem is, when I click on titledPanePicture the small image disappears, its content is cleared. Why? For the solution I added a reloading of the content on mouseclick event. But I dont like it, I think the content should stay the same for titledPanePicture.
Here is my mouseclick event:
Stage stage = new Stage();
stage.initModality(Modality.APPLICATION_MODAL);
Group root = new Group();
Scene scene = new Scene(root);
scene.setFill(Color.BLACK);
HBox box = new HBox();
imgViewPicture.setFitWidth(0);
box.getChildren().add(imgViewPicture);
root.getChildren().add(box); // before tPane
stage.setTitle("Picture Original Size");
stage.setScene(scene);
stage.sizeToScene();
stage.show();
reloadContentofTitledPane(); // This line is the fix but I find it unnecessary
Tips would be appreciated.
You seem to use the same ImageView in both scenes. However a Node can only be placed at a single place in a single scene graph.
Create a new node for your new Scene.
ImageView newImageView = new ImageView(imgViewPicture.getImage());
...
box.getChildren().add(newImageView);
There is plenty of online resource on how to add a graphic to a JavaFX button.
However I would like to know if there is a way to add a second (or any number, but more than 2 images probably woudn't make much sense in most situations) image.
My use case : i have a button with a square icon on the left, followed by a text label. The image is a representation of some real-life concept that button is linked with (could e.g. a car or a person). I would like to add a small icon to the right of some buttons, a "right chevron" to indicate the nature of the interaction.
I was thinking maybe to use a HBox with the full width as the graphic node of the button, and add the 2 images to it, but I don't think it is possible to put the text on top of the graphic node.
Any idea ?
Create your own custom node with icons and text and set it as graphic. Of course you don't show the button text because it's already in your custom graphic node.
Here's a simple example. You need to provide the files icon1.png and icon2.png.
public class ButtonWithMultipleIcons extends Application {
#Override
public void start(Stage primaryStage) {
try {
Group group = new Group();
Button button = new Button();
button.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
HBox hBox = new HBox();
ImageView icon1 = new ImageView( getClass().getResource( "icon1.png").toExternalForm());
ImageView icon2 = new ImageView( getClass().getResource( "icon2.png").toExternalForm());
Label label = new Label("Text");
//make the button grow if you want the right icon to always be on the right of the button :
label.setMaxWidth(Long.MAX_VALUE);
HBox.setHgrow(label, Priority.ALWAYS);
hBox.getChildren().addAll( icon1, label, icon2);
button.setGraphic(hBox);
group.getChildren().add( button);
Scene scene = new Scene(group,400,400);
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
You can try using html formatting in your button and adding an image with the tag before and after your text.
You can find more information about it in here:http://docs.oracle.com/javase/tutorial/uiswing/components/html.html
I had the same thing to get along with. You describing the solution with using a HBox. I think this would also be the best way.
Do the following:
Create a new CustomButton with your own specific layout maybe using a HBox and extending Button class from JavaFX. Style it your way you need it and you can add as many images you want to have in your custom button. Maybe it can look like this:
public class CustomButton extends Button
{
private HBox hbox;
private ImageView image1;
private ImageView image2;
public CustomButton()
{
super();
// Here add your specific images to global or local variables and then add all the children (images) to your HBox layout and this one to the button.
}
}
The problem ist, that JavaFX provides normal buttons and not such deeply customized components. If you want to style it, you can use CSS anyway.