I want make JavaFX MediaView stretch to fill parent container.
I tried some methods from google before,but nothing helpful(maybe i'm not apply it right),and there is a question with same name as this,but solutions in that question maybe not suit me.
first i use the ahchorpane to anchor mediaview but find it can not stretch mediaview,and I don't know why because other controls like button can work.
Then i try bind its width and height to anchorpane(parent of mediaview)
Region region=(Region) mediaplayer.getParent();
mediaplayer.setPreserveRatio(false);
mediaplayer.fitWidthProperty().bind(region.widthProperty());
mediaplayer.fitHeightProperty().bind(region.heightProperty());
it's can expand mediaview exactly when i resize window,but can't Shrink down!
I guess it's maybe because size of region depend on it childs?
finally,i try to bind mediaview'size to stage'size,it's work,but the code looks like ugly,because i need calculate size manully.
mediaplayer.setPreserveRatio(false);
mediaplayer.fitWidthProperty().bind(stage.widthProperty().subtract(200));
mediaplayer.fitHeightProperty().bind(stage.heightProperty().subtract(135));
are there have any better solutions?
Using the code below you will see that you are able to stretch and shrink the mediaView as much as you like ( depending of the stage dimensions)
import java.io.File;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;
import javafx.stage.FileChooser;
import javafx.stage.Stage;
public class TestApp extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) {
BorderPane pane = new BorderPane();
FileChooser fc = new FileChooser();
File mediaFile = fc.showOpenDialog(null);
MediaView moviePlayer;
if (mediaFile != null) {
MediaPlayer player = new MediaPlayer(new Media(mediaFile.toURI().toString()));
moviePlayer = new MediaView(player);
moviePlayer.setPreserveRatio(false);
moviePlayer.fitWidthProperty().bind(pane.widthProperty());
moviePlayer.fitHeightProperty().bind(pane.heightProperty());
pane.getChildren().add(moviePlayer);
player.play();
}
Scene scene = new Scene(pane, 300, 300);
stage.setScene(scene);
stage.show();
}
}
This code works with AnchorPane as well so I guess there is something else wrong with your code if you still have the issue or I haven't understand what you need. Make a simple runnable program to demonstrate the issue.
Try to add this Action-Listener for rescaling the size:
MediaView.getParent().layoutBoundsProperty().addListener(new ChangeListener<Bounds>() {
#Override
public void changed(ObservableValue<? extends Bounds> observable, Bounds oldValue, Bounds newValue) {
mediaView.setFitHeight(newValue.getHeight());
mediaView.setFitWidth(newValue.getWidth());
}
});
This should be called every time the parent-size got changed or maximized and then the view should be resized to parent, too.
Related
In JavaFX, is there a way to "autofit" elements on a page so they take up the entire thing?
Currently, I'm trying to make the window have two buttons that together take up the entire canvas, but I am not sure how to do that, given that it is possible to stretch the window, etc. I've tried playing around with Button.setPrefSize, but the button size stays the same, it just shows you a window with two outsized buttons, the text of which is not visible.
What I currently have
What I want (but for any window size)
Here's one way (code here but also possible in Scene Builder and FXML):
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.stage.Stage;
public class TestApplication extends Application {
#Override
public void start(Stage stage) throws Exception {
Button button1 = new Button("Button1");
HBox.setHgrow(button1, Priority.SOMETIMES);
button1.setMaxWidth(Double.MAX_VALUE);
button1.setMaxHeight(Double.MAX_VALUE);
Button button2 = new Button("Button2");
HBox.setHgrow(button2, Priority.SOMETIMES);
button2.setMaxWidth(Double.MAX_VALUE);
button2.setMaxHeight(Double.MAX_VALUE);
HBox hBox = new HBox(button1, button2);
AnchorPane.setLeftAnchor(hBox, 0.0);
AnchorPane.setRightAnchor(hBox, 0.0);
AnchorPane.setTopAnchor(hBox, 0.0);
AnchorPane.setBottomAnchor(hBox, 0.0);
AnchorPane rootContainer = new AnchorPane(hBox);
Scene scene = new Scene(rootContainer, 600, 600);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}
I am trying to lose the white background on the webviewer
i have tried work around and other things but nothing seems to work
public static String url = "URL"; //lets say this has a transparent image on it (it does in my case)
public static Scene FrameWorks;
public static StackPane InnerFrame;
public static WebView viewer;
public static WebEngine webEngine;
public static void web() {
viewer = new WebView();
webEngine = viewer.getEngine();
webEngine.executeScript("document.width");
WebSite(url);
}
public static void WebSite(String URL) {
webEngine.executeScript("window.location = \""+URL+"\";");
}
public void start(Stage Level) {
web();
InnerFrame = new StackPane();
FrameWorks = new Scene(InnerFrame, 909, 609);
InnerFrame.getChildren().add(viewer);
FrameWorks.setFill(Color.TRANSPARENT);
InnerFrame.setStyle("-fx-background-color: rgba(255, 0, 0, 0);");
Level.setScene(FrameWorks);
Level.initStyle(StageStyle.TRANSPARENT);
Level.show();
}
I'm not sure that I fully understand your problem so correct me if I am wrong. Do you want everything other than the webview to be transparent? To more or less copy paste a comment from another post, on here I (we) want a Minimal, Complete, and Verifiable example demonstrating the problem. You should also remember to check if the question has already been asked and answered before asking your own question.
Now that I got that out of the way, here's an example where you can see the stack pane with a black background and the webview with a white background.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
import javafx.scene.layout.Background;
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Hello World!");
WebView v = new WebView();
v.setOpacity(1); // 0 = fully transparent, 1 = fully visible.
v.setPrefWidth(100);
v.setMaxWidth(100);
v.setMaxHeight(100);
v.setPrefHeight(100);
v.setStyle("-fx-background-color:black;");
StackPane root = new StackPane();
root.getChildren().add(v);
root.setStyle("-fx-background-color:black;");
/*
* Remove the setStyle above, and use either one of these to only have the webview
* visible. root.setBackground(Background.EMPTY);
* root.setStyle("-fx-background-color:TRANSPARENT;");
*/
Scene scene = new Scene(root, 300, 250);
scene.setFill(Color.TRANSPARENT);
primaryStage.setScene(scene);
primaryStage.initStyle(StageStyle.TRANSPARENT);
primaryStage.show();
}
}
If you remove the line:
root.setStyle("-fx-background-color:black;");
and replace it with either one of the lines that currently are in comments then you will now only see the webview:
/*
* Remove the setStyle above, and use either one of these to only have the webview
* visible.
* root.setBackground(Background.EMPTY);
* root.setStyle("-fx-background-color:TRANSPARENT;");
*/
And you can of course also set a transparency on the actual webview if you want to do that for some reason:
v.setOpacity(0); /*0.0 Fully Transparent - 1.0 Fully Visible*/
Please note that to do this I had to set the StageStyle to transparent, and unfortunately I'm not sure if it is possible to do it in any other way. Maybe someone else can put in comments if it is possible or not.
I hope this answers your question.
I have a simple stage with StageStyle.TRANSPARENT (no default buttons).
Therefore I tried to create my own custom buttons, represented each by an ImageView with the next events activated: setOnMouseEntered, setOnMouseExited and of course setOnMouseClicked.
Problem is for the Minmized Button. Is a simple implementation like below
ImageView.setOnMouseClicked((MouseEvent event) -> {
stage.setIconified(true);
});
Lets imagine that my ImageView is a White rectangle. On mouse enter event, it changes its color into Black. On mouse exit, it is going back to White color.
When the ImageView is clicked, the window will be minimized, everything perfectly workable until now.
Problem is when the application is restored (maximized), the Minimized custom button is stuck with color Black (the color that represent the button is hovered), instead of White (default color when is not focused).
P.S. it seems that everything like relocate, setImage etc. inside the onMouseClicked handler is cut by the the setInconified(true);
Any help would be most appreciated.
Thank you for your time of reading this.
Updates to clear a bit the question
The normal print-screen image (when it is not hovered)
The hover print-screen (when it is hovered)
As you can observe, everything works perfectly. In the moment when "-" button (minimize button) is pressed, when the application is restored, it will remain stuck in hover mode, until the mouse cursor will hover again the button (then everything comes back to normal). Sadly neither CSS approach or event listeners on image view dose not seems to solve this issue.
Update code loaded
This is a simple one source file with just a button that call minimize
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
public class Main extends Application {
private Scene scene;
private Stage stage;
#Override
public void start(Stage stage) {
try {
this.stage = stage;
stage.initStyle(StageStyle.TRANSPARENT);
stage.setAlwaysOnTop(true);
stage.setFullScreen(true);
stage.setFullScreenExitHint("");
createScene(stage);
stage.setScene(scene);
stage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
private void createScene(Stage stage) {
Pane layer = new Pane();
layer.setPickOnBounds(false);
scene = new Scene(layer, 800, 600);
scene.getStylesheets().add("application/application.css");
layer.getChildren().add(buildMinimizeImage());
}
private ImageView buildMinimizeImage() {
ImageView imv = new ImageView();
int width = 43 ;
int height = 36;
imv.setId("myImage");
imv.setFitWidth(width);
imv.setFitHeight(height);
imv.setOnMouseClicked((MouseEvent event) -> {
stage.setIconified(true);
});
imv.relocate(100, 100);
return imv;
}
public static void main(String[] args) {
launch(args);
}
}
And the application.css is very simple as well
#myImage
{
-fx-image: url("minimize.png");
}
#myImage:hover
{
-fx-image: url("minimizeIn.png");
}
Issue is reproducible on Ubuntu 14.04 and Windows 10. I do not think is an OS problem
RESOLVED
Please find enclose the Harry Mitchel solution (thank you one more time for it). It is perfectly workable.
If you want to fix the code from above I by adding the setOnMousePressed event.
imv.setOnMousePressed((MouseEvent event) -> {
imv.setImage(image);
});
You can listen to the maximized property of the Stage class. Inside the changed() method, set the ImageView's image.
stage.maximizedProperty().addListener(new ChangeListener<Boolean>() {
#Override
public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) {
//Display the desired icon here.
}
});
Here is a custom minimize button. You provide the two images and the stage as parameters. When the mouse is not over the button, it will show the image referenced in the constructor's first parameter. When the mouse is over the button, it will show the image referenced in the constructor's second parameter. When you click the image the stage will be minimized.
import javafx.event.ActionEvent;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.stage.Stage;
public class MinimizeButton extends Button {
/**
*
* #param img the image when the button is NOT selected
* #param imgHover the image when button is selected
* #param stage the stage that will be minimized
*/
public MinimizeButton(Image img, Image imgHover, Stage stage) {
ImageView imgView = new ImageView(img);
this.setGraphic(imgView);
this.addEventHandler(MouseEvent.MOUSE_ENTERED, (MouseEvent e) -> {
imgView.setImage(imgHover);
});
this.addEventHandler(MouseEvent.MOUSE_EXITED, (MouseEvent e) -> {
imgView.setImage(img);
});
this.setOnAction((ActionEvent event) -> {
stage.setIconified(true);
imgView.setImage(img);
});
}
}
Here is an example app that uses the MinimizeButton class.
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
public class CustomMinimize extends Application {
#Override
public void start(Stage stage) {
Image imgWhite = new Image(getClass().getResourceAsStream("imgWhite.png")); //your image here
Image imgGreen = new Image(getClass().getResourceAsStream("imgGreen.png")); //your hover image here
MinimizeButton btnMinimize = new MinimizeButton(imgWhite, imgGreen, stage);
btnMinimize.setStyle("-fx-background-color: black;");
btnMinimize.setPrefSize(50, 50);
Button btnExit = new Button("X");
btnExit.setMinSize(50,50);
btnExit.setOnAction((ActionEvent event) -> {
System.exit(0);
});
btnExit.setStyle("-fx-background-color: black;");
HBox hBox = new HBox();
hBox.setSpacing(2);
hBox.getChildren().addAll(btnMinimize, btnExit);
AnchorPane anchorPane = new AnchorPane();
anchorPane.getChildren().addAll(hBox);
AnchorPane.setRightAnchor(hBox, 5.0);
AnchorPane.setTopAnchor(hBox, 5.0);
Scene scene = new Scene(anchorPane);
stage.initStyle(StageStyle.TRANSPARENT);
stage.setScene(scene);
stage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
Your question is not very clear (not that it is very unclear though), so I will attempt to solve your problem.
I am assuming that your color change is done through ImageView.setOnMouseEntered() and ImageView.setOnMouseExited(). If this is so, you should instead use CSS.
.myImageView
{
-fx-image: url("my_white_image.png");
}
.myImageView:hovered
{
-fx-image: url("my_black_image.png");
}
For the things in your "PS" section, I couldn't understand, so I would not be able to give any advice on that.
This should be a relatively simple problem, but it is driving me insane. I am trying to create Mine Sweeper in JavaFX (mostly just for practice) but I can not get even a simple rectangle to display. I had the game running once before, but I am trying to make the game more abstract, and hence easier to code, but I am running into the issue of nothing being displayed.
I eliminated all extraneous code so it is as simple as possible. I am basically trying to create a Rectangle with a certain color and size called Box, add the box to the pane, and display the pane. In order to make Box a node that can be displayed on the pane, I made the Box class extend Rectangle, so that a Box would have the same properties as a Rectangle. But when I run the code, it gives just an empty pane with no box in it.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
public class Minesweeper extends Application {
#Override
public void start(Stage stage) {
Pane pane = new Pane();
Box box = new Box();
pane.getChildren().addAll(box);
// Create the scene
Scene scene = new Scene(pane);
stage.setTitle("Minesweeper");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
public class Box extends Rectangle {
public Box() {
Rectangle box = new Rectangle(100, 100, 100, 100);
box.setFill(Color.BLUE);
}
}
I realized if I put the code from Box into the main Minesweeper class, it will display the box. But Box will have a ton of other properties and therefore needs to be a class on its own.
What am I doing wrong that does not allow the box to be displayed?
Thanks in advance for your help and consideration.
You create a new Rectangle in your Box class. This Rectangle is not added to any Parent container, so it's not visible.
Change your code to:
public Box() {
super(100, 100, 100, 100);
setFill(Color.BLUE);
}
As the title says, I need to make a thin progress bar. I used this:
progressBar.setMaxHeight(0.1);
progressBar.setPrefHeight(0.1);
but that doesn't work. Does anyone have an idea?
You'll have to mess around with the styling to get it any smaller. I really recommend taking a look a the caspian.css that's included with Javafx - that's the default style sheet. It helps a lot when trying to override the look and feel of the default skins. Here's an example I put together that shows how it can be done:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class ProgressBarTest extends Application {
public static void main(String[] args) { launch(args); }
#Override
public void start(final Stage stage) throws Exception {
//All the controls are added here
VBox box = new VBox();
box.getStylesheets().add("test.css");
ProgressBar pb = new ProgressBar(50);
box.getChildren().add(pb);
//Setting up your scene
Scene scene = new Scene(box);
stage.setScene(scene);
stage.show();
}
}
And here's the test.css I loaded up:
.progress-bar .bar {-fx-padding:1px; -fx-background-insets:0;}
And here is the output of the test app: