I have this code (simplified/shortend/pseudo):
StackPane background = new StackPane();
GridPane overlay = new GridPane();
BorderPane pane = new BorderPane(background);
pane.setLeft(overlay);
I want the background/Stack pane to cover the entire window (in the background, surprise), and the overlay/Grid to cover a part of the background. The issue is that when I add an ImageView to the StackPane, the image shows up and nothing else. The overlay is not visible. I have tried overlay.toFront, overlay.preferredHeight, and background.toBack, with no success.
Try putting the border pane into the stack pane, instead of the other way around, and then making sure you add the image as the first element of the stack pane's children.
GridPane overlay = new GridPane();
BorderPane pane = new BorderPane();
pane.setLeft(overlay);
StackPane background = new StackPane(pane);
// ...
ImageView imageView = ... ;
background.getChildren().add(0, imageView);
// ...
scene.setRoot(background);
Alternatively, just use a BorderPane as the root and add the nodes in the usual way. Then, in an external style sheet, do
.root {
-fx-background-image: url(relative/path/to/image);
}
Related
I'm working on a school project in Java FX, I'd like to add an icon next to my primarystage title and center the title, just like the one in the picture. I have looked around in the javadoc for Stage but i can only find the setTitle() method. Here is a link to what i'd like to do :
You can set your stage to undecorated, set your scene root to a border pane and create your own custom top bar.
BorderPane root = new BorderPane();
root.setTop(new Pane(bb, label));
Scene scene = new Scene(root, 400, 400);
ButtonBar topBar = new ButtonBar(… insert buttons in here....);
// eg: Button b = new Button("X); b.setOnAction(e->{stage.close();});
root.setTop(topBar);
stage.initStyle(StageStyle.UNDECORATED);
I'm switching from using a flowpane to a tabpane. I have no idea how to.
I want to use a canvas and a pane within the tabpane is this possible?
Below is my code without all the styling etc.
public View(TabPane root) {
this.root = root;
tab1 = new Tab();
root.getTabs().add(tab1);
tab2 = new Tab();
root.getTabs().add(tab2);
ui = new Pane();
canvas = new Canvas(600,600);
//gc is graphics context
gc = canvas.getGraphicsContext2D();
//this is where the problem is??
//i have no idea how to add ui and canvas to my tab1
tab1.getChildren().addAll(ui, canvas);
}
Tab is not a subclass of Pane, so it has no getChildren() method.
Instead, it has a content property whose value is the node displayed in the tab (note there is only one node in a tab).
So you can display the canvas in the tab with
tab1.setContent(canvas);
and of course if you have two things to display, you would put them in some other container and set the content of the tab to the container:
VBox vbox = new VBox(ui, canvas);
tab1.setContent(vbox);
I have a Pane and a VBox inside of a StackPane. I added the Pane first and the VBox on top of it. The VBox includes several kes that in turn have Buttons as children. I use the normal Pane as a "canvas" to position Lines on it. The Lines as well as the Buttons need to be interactive. So by clicking on them they shall for example change their color.
But at the moment the Pane and its Line objects are shown but they are covered by the VBox so I can not interact with them but only with the Buttons.
How can I provide that I can interact with the Line as well, though they are in a lower layer of the StackPane?
You can set the pickOnBoundsProperty of your container Nodes (VBox and HBox) to false.
Defines how the picking computation is done for this node when
triggered by a MouseEvent or a contains function call. If pickOnBounds
is true, then picking is computed by intersecting with the bounds of
this node, else picking is computed by intersecting with the geometric
shape of this node.
As result, "transparent" areas of the HBox and the VBox will not register the click event.
Example:
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
try {
BorderPane root = new BorderPane();
Scene scene = new Scene(root,400,400);
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
Pane pane = new Pane();
pane.setStyle("-fx-background-color:red;");
StackPane sp = new StackPane();
VBox vbox = new VBox();
HBox hbox = new HBox();
hbox.setSpacing(30);
for (int i = 0; i< 5; i++) {
Button b = new Button("Button");
b.setOnAction(e -> System.out.println("Button clicked"));
hbox.getChildren().add(b);
}
vbox.getChildren().add(hbox);
sp.getChildren().addAll(pane, vbox);
Line line = new Line(10, 10, 500, 10);
line.setStrokeWidth(3);
pane.getChildren().add(line);
line.setOnMouseClicked(e -> {
System.out.println("Line Clicked!");
});
// Set pickOnBounds to vbox and hbox
vbox.setPickOnBounds(false);
hbox.setPickOnBounds(false);
root.setCenter(sp);
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
They are covered cause the VBOX is in front of the Pane.
First Way:
You can setVisible(false) the VBox so the Pane can be accessible and then setVisible(true) the VBox again.
Second Way:
You can use methods called toBack(); and toFront(); and bring a Node back or front to the hierarchy:
vBox.toBack(); //the the vBox goes back to the hierarchy,it is like zOrder in html
and then use:
vBox.toFront(); //to bring the vBox again in front.
Finally:
You can somewhere provide a ToggleButton that when is pressed the VBox is appearing and when is not pressed the VBox is disappeared.
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);
Here is my summary code
public class KlArgon extends Application {
BorderPane border ;
Scene scene ;
Stage stage;
#Override
public void start(Stage stage) {
:
border = new BorderPane();
:
HBox infoBox = addInfoHBox();
border.setTop(infoBox);
:
VBox menuBox = addMenuVBox();
border.setLeft(menuBox);
:
border.setCenter(addAnchorPane(addGridPane()));
// setRight and setBottom is not used
:
scene = new Scene (border);
stage.setScene(scene);
stage.show();
}
private Node addAnchorPane(GridPane grid) {
AnchorPane anchorpane = new AnchorPane();
anchorpane.getChildren().add(grid);
AnchorPane.setTopAnchor(grid, 10.0);
return anchorpane;
}
private GridPane addGridPane() {
GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(0, 10, 0, 10));
grid.add(addWhiteboard(), 1, 0);
return grid;
}
private Node addWhiteboard() {
Canvas canvas = new Canvas (wboardWd, wdboardHt);
GraphicsContext gc = canvas.getGraphicsContext2D();
drawShapes(gc);
drawfromClipboard(gc);
return canvas;
}
}
I refer to the Center pane as the "Whiteboard". Among other things, I have two buttons in menuBox - btnCopyFromClipboard and btnClearWhiteboard.
When user presses btnCopyFromClipboard - the user should be able to draw an rectangle in the "Whiteboard" only (i.e. Center pane only) and then the clipboard image will be copied (scaled) into that rectangle.
So I made border,scene, stage as global and I am trying to get this to work - not only it is buggy/ugly- to me it looks like a hack. Is there a cleaner way to do this i.e. manage Center Pane when button in left pane is pressed?
Basically I want the Center Pane to be the Canvas and the GraphicsContext operations are performed whe the Buttons in Left Pane is pressed.
What I have working is pressing the btnCopyFromClipboard lets me draw the rectangle anywhere/everywhere (instead of limiting it to the Center Pane / the whiteboard). I want to restrict the rectangle to be drawn inside the Center Pane / the whiteboard only.
Some inputs/pointers from someone who has been through this will be very much appreciated.
http://docs.oracle.com/javafx/2/layout/builtin_layouts.htm was helpful to get me started.
I was in a fix as well and here is a question which I asked in Oracle Forums, to which, James gave me a vivid reply. Please go through this, it has your answer
https://community.oracle.com/thread/2598756