Setting an imageview as an icon on a button - button

I was trying to write a JavaFX application; I wanted to put images in my icons and make them transparent, so that you would click on the ImageView without seeing the button.
Here i have the scenebuilder were i got the imageview and in the button in style i said: -fx-background-color transparent
Then we have here the preview of what is going to show
And lastly, this is the application when i run it on netbeans

i wanted to put images in my icons and make them transparent so you clicked on the imageview and you didn't saw the button.
Just call btn.setBackground(Background.EMPTY); to remove the default background of the button.
eg:
#Override
public void start(Stage primaryStage) {
ImageView iv = new ImageView("https://image.flaticon.com/icons/png/512/33/33949.png");
iv.setPreserveRatio(true);
iv.setFitWidth(60);
Button btn = new Button("", iv);
btn.setBackground(Background.EMPTY);
StackPane root = new StackPane();
root.getChildren().add(btn);
Scene scene = new Scene(root, 300, 250);
primaryStage.setScene(scene);
primaryStage.show();
}
Produces:

Related

Javafx Popup can't get focus if other application gains focus

I use a JavaFX Popup in my application to change the Shipping Address of a customer. That often requires copy pasting the Address from the web browser. If I click on the Popup after the application lost focus it will not regain focus. I first need to click the parent window behind the popup and then click the Popup again to be able to interact with it.
Is there any way to solve that problem, besides using an undecorated stage instead of a Popup?
EDIT:
Here I made a minimal example:
public class HelloApplication extends Application {
#Override
public void start(Stage stage) throws IOException {
Scene scene = new Scene(new VBox(), 600, 600);
stage.setTitle("Hello!");
stage.setScene(scene);
stage.show();
Popup popup = new Popup();
Button btn = new Button("This is a very nice button!");
btn.setOnAction(actionEvent -> System.out.println("button clicked"));
TextField textField = new TextField();
textField.setOnMouseClicked(mouseEvent -> System.out.println("textField clicked"));
VBox popupVBox = new VBox(btn, textField);
popupVBox.setStyle("-fx-background-color: white");
popupVBox.setPadding(new Insets(10));
popup.getContent().add(popupVBox);
popup.show(scene.getWindow());
}
public static void main(String[] args) {
launch();
}
}
If you click outside of the application (for example the web browser, to copy some value) then you can not enter Text into the TextField anymore. The button action listener and even the TextField mouse Listener still work and output "button clicked" and "textField clicked" but the blue halo around them does not apppear and you can not enter (or paste) text into the TextField. After you click somewhere on the main Stage of the application it works again.
I tried adding textField.requestFocus();
to the mouse Listener of the textfield but that does not do anything.
EDIT 2 after the comment from kleopatra:
I tried adding the following code:
popupVBox.setOnMouseEntered(mouseEvent -> {
popup.getOwnerWindow().requestFocus();
parentVBox.toFront(); //This is created above and passed to the new Scene instead of diectly passing new VBox() as in the code snippet posted above
});
With that code added, popup and its children seem to have focus if the mouse is hoverd over it after an other application had focus, i.e. if clicked with the mouse the blue border appears around the button and textField, and if there is any text in the textField I can move the cursor with the mouse and select the text with the mouse, buy any keyboard inputs are ignored. Actually they are executed in the other application which had focus before. If I ctrl+c in Intellij and try to ctrl+v into the textfield it will be pasted to the Intellij editor. Also the arrow keys move the cursor in the intellij window instead of the textField.
The only way to be able to type anything in the TextField is to click the parent window first.
Also
textField.setOnMouseClicked(mouseEvent -> {
textField.requestFocus();
});
does not do anything
not an answer, just to clarify the comment (will delete if seen by OP :)
public class PopupFocus extends Application {
#Override
public void start(Stage stage) throws IOException {
Scene scene = new Scene(new VBox(), 300, 300);
stage.setTitle("Hello!");
stage.setScene(scene);
stage.setX(10);
stage.show();
Popup popup = new Popup();
Button btn = new Button("This is a very nice button!");
btn.setOnAction(actionEvent -> System.out.println("button clicked"));
TextField textField = new TextField();
textField.setOnMouseClicked(mouseEvent -> {
System.out.println("textField clicked");
stage.toFront();
});
VBox popupVBox = new VBox(btn, textField);
popupVBox.setStyle("-fx-background-color: white");
popupVBox.setPadding(new Insets(10));
popup.getContent().add(popupVBox);
// original
popup.show(scene.getWindow());
}
public static void main(String[] args) {
launch();
}
}

Showing a PNG file with transparent background using javafx

Am actually working on a splash Screen unsing javaFX, everythink works fine but I want to show a png image with a transparent background on the splash screen, but am unable to do it, can someone please tell me if it's possible to do it from JavaFX Scene Builder or not ?
I'm in a bit of a rush, but below is a quick example to show you how it can be done by setting the StageStyle to Transparent and the scene fill to the color "transparent".
#Override
public void start(Stage aStage) throws Exception {
Pane root = new Pane();
ImageView img = new ImageView();
img.setImage(new Image(getClass().getResource("pathToYourPngLocatedInYourResourcesFolder.png").toExternalForm()));
root.getChildren().add(img);
Scene scene = new Scene(root, 500, 500);
scene.setFill(Color.TRANSPARENT);
aStage.initStyle(StageStyle.TRANSPARENT);
aStage.setScene(scene);
aStage.show();
}
Let me know how it works out :)

JAVAFX: How can I put this into one window instead of two?

I've been trying to make a toolbar inside a window with a checkers game, what happens now is, Checkers game opening in a separate window and so is the toolbar, what am I doing wrong? How can I make this code open in one window with both functions?
#Override
public void start(Stage primaryStage) throws Exception {
Stage toolStage = new Stage();
Button btnNewGame = new Button("New Game");
Button btnConcede = new Button("Concede");
Button btnNetwork = new Button("Network");
ToolBar toolBar = new ToolBar();
toolBar.getItems().addAll( new Separator(), btnNewGame, btnConcede, btnNetwork);
BorderPane pane = new BorderPane();
pane.setTop(toolBar);
Scene toolScene = new Scene(pane, 600, 400);
toolStage.setScene(toolScene);
toolStage.show();
Scene scene = new Scene(createContent());
primaryStage.setTitle("Dam spill - OBJ2000 Eksamen 2016");
primaryStage.setScene(scene);
primaryStage.show();
}
You're creating a new Scene+Stage fot the toolbar, show it and then show the content in the primaryStage instead of adding both toolbar and content as parts of the same scene, e.g. by adding the content as center node of the BorderPane:
#Override
public void start(Stage primaryStage) throws Exception {
Button btnNewGame = new Button("New Game");
Button btnConcede = new Button("Concede");
Button btnNetwork = new Button("Network");
ToolBar toolBar = new ToolBar();
toolBar.getItems().addAll( new Separator(), btnNewGame, btnConcede, btnNetwork);
BorderPane pane = new BorderPane();
pane.setTop(toolBar);
pane.setCenter(createContent());
Scene scene = new Scene(pane, 600, 400);
primaryStage.setTitle("Dam spill - OBJ2000 Eksamen 2016");
primaryStage.setScene(scene);
primaryStage.show();
}

JavaFX is there any color gradient editor control?

For an editor that can map a Noise Function (-1 to 1 values) to Colors I need some Control that lets me define a Color Gradient, so something like
Value
- 0 is black
- 0.3 is yellow
- 0.8 is red
- 1 is white
so the whole gradient goes from black to white and thats editable,
is there anything like that built into JavaFX or do I have to write my own Control?
Basically smth like this:
Thanks in advance
Actually, Scene Builder has a powerful gradient editor that allows inserting multiple stops:
The control is called PaintPicker, and it is part of the Scene Builder Kit that you can download from here.
Once you have the jar, you can use the component.
This is a short snippet to show how to easily add it to your scene:
#Override
public void start(Stage primaryStage) {
VBox root = new VBox();
root.setAlignment(Pos.CENTER);
root.setPadding(new Insets(10));
PaintPickerController controller;
final FXMLLoader loader = new FXMLLoader();
loader.setLocation(PaintPicker.class.getResource("PaintPicker.fxml"));
try {
final VBox picker = loader.load();
controller = loader.getController();
controller.paintProperty().addListener((obs, ov, nv) -> System.out.println("Paint: " + nv));
root.getChildren().add(picker);
} catch (IOException ex) {
throw new IllegalStateException(ex);
}
Scene scene = new Scene(root, 320, 600);
primaryStage.setTitle("SceneBuilder PaintPicker");
primaryStage.setScene(scene);
primaryStage.show();
}
With the listener, you will get immediately the gradient:
Paint: linear-gradient(from 60.096% 38.461% to 47.115% 45.192%,
reflect, 0xda7777ff 0.0%, 0x226621ff 28.667%, 0xf2ff1cff 49.333%,
0xff1c5fff 73.0%, 0xffffffff 100.0%)
I think you are looking for a ColorPicker.
More information on how to use it is on JavaFX tutorials page.

JavaFX. How to make the border of imageview, when I click the imageview?

In javaFX, I want make a imageview that can change border when I click.
When click once, then imageview has a border.
When click again, then imageview doesn't have a border.
How can I make that?
Thanks in advance!
Well you will need:
a PseudoClass for toggling the CSS state
a wrapping Region, because the ImageView itself does neither support a background nor a border.
A simple working example (the toggling of the PseudoClass is done with the help of a BooleanProperty, which is common practice and makes the management of its state easier):
#Override
public void start(Stage primaryStage) {
PseudoClass imageViewBorder = PseudoClass.getPseudoClass("border");
ImageView imageview = new ImageView(
new Image("http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast,_Dhaka,_Bangladesh.JPG"));
BorderPane imageViewWrapper = new BorderPane(imageview);
imageViewWrapper.getStyleClass().add("image-view-wrapper");
BooleanProperty imageViewBorderActive = new SimpleBooleanProperty() {
#Override
protected void invalidated() {
imageViewWrapper.pseudoClassStateChanged(imageViewBorder, get());
}
};
imageview.setOnMouseClicked(ev -> imageViewBorderActive
.set(!imageViewBorderActive.get()));
BorderPane root = new BorderPane(imageViewWrapper);
root.setPadding(new Insets(15));
Scene scene = new Scene(root, 700, 400);
scene.getStylesheets().add(
getClass().getResource("application.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
and the necessary CSS:
.image-view-wrapper:border {
-fx-border-color: black;
-fx-border-style: solid;
-fx-border-width: 5;
}

Resources