We Keep Coding

How to set width of AnchorPane to resize with parent JFXDialogLayout

I am trying to make the AnchorPane resize with its parent JFXDialoglayout. I tried this in scene builder, but wouldn't let me position/resize it correctly. Now I am trying to do it manually instead as seen below. As seen in the code I tried to bind the width and height of the AnchorPane to the JFXDialoglayout, but this did still not work. I also tried setting the pref height/width of them both equally, still did not work. The problem is that the height of the AnchorPane is smaller than the JFXDialogLayout but the width is the same. How do I make the heights equal?
private JFXDialogLayout getDialogLayout() {
JFXDialogLayout layout = new JFXDialogLayout();
layout.setPrefWidth(600);
layout.setPrefHeight(300);
AnchorPane pane = new AnchorPane();
pane.prefHeightProperty().bind(layout.prefHeightProperty());
pane.prefWidthProperty().bind(layout.prefWidthProperty());
Label heading = new Label("Heading");
Text body = new Text("This is the body of the dialog.");
JFXButton button = new JFXButton("ACCEPT");
pane.getChildren().addAll(heading, body, button);
layout.getChildren().addAll(pane);
return layout;
}

I have been making JavaFX apps using SceneBuilder and Netbeans for quite some time. What you are trying to do, can be done easily at the Tab "Layout" and more specific in the tab "Anchor Pane Constraints". Inside the four boxes you have to put the standard distance you like, between the Hbox sides and the Anchor Pane outer sides. Please, check the screenshot below, with my example for a Horizontal Box inside an Anchor Pane. The HBox gets smaller or bigger when the user resizes the Anchor Pane.

JavaFX - Add image to ColorPicker

I'm using netBeans and SceneBuilder to create a small window with a few text editor options. One of the buttons I've included in the screen is a colorPicker that I have modified according to the following style;
<ColorPicker fx:id="clrFill" layoutX="119.0" layoutY="18.0" prefHeight="30.0" prefWidth="30.0" style="-fx-color-label-visible: false; -fx-color-rect-height: 3; -fx-color-rect-width: 17;" styleClass="button" stylesheets="/css/colorPickerStyle.css" />
Here is the current stylesheet being used;
.color-picker .color-picker-label .picker-color
{
-fx-alignment : bottom-center;
}
colorPicker.getStyleClass().add("button");
.color-picker{
-fx-background-image: "/gui_resources/fill.png"
-fx-background-size: 20 20;
-fx-background-position: top center;
}
My objective is to have an image display above the modified colorpicker 'rectangle' that displays the current color. Initially, I tried to treat the colorPicker as a Button class, as I have changed the style to a "button", but I was unable to place an image using the setGraphic method. As you can see from the css file, I have also tried to implement a background image unsuccessfully.
Here is a copy of what my screen currently looks like. The colorPicker is located beside the ComboBox dropdown.

In case you were trying to change the ColorPicker style class inside the css file, that won't work, you can't place code there.
Actually, to use an image, you don't need to change its style class, you just need to use url(image.png) (image placed in the same folder as FXML), or with a relative path to the FXML file like url(../image.png), or using # in case of an absolute path.
This should work:
.color-picker {
-fx-background-image: url(fill.png);
-fx-background-size: 20 20;
-fx-background-position: top center;
-fx-background-repeat: no-repeat;
}
.color-picker .color-picker-label .picker-color {
-fx-alignment : bottom-center;
}
You can check the <uri> format for the image here.

How to get back the onclick effect on a button in JavaFX

I looked for a solution on this particular issue & found a few ones on Silverlight & JavaScript, but not on JavaFX.
Now on the issue:
I am designing a GUI in JavaFX where I have added two buttons: ADD & REMOVE
I have styled the ADD button using CSS, but it has lost its hovering & onclick effect. I have attached a couple of images for better understanding of the issue
If you look at this photo here, you'll see that when the REMOVE button is clicked, it slightly changes its color to give the effect that it is being clicked currently. Also when the cursor hovers over it, it turns slightly brighter than it usually is.
The code for this button is given below
VBox rightBox = new VBox(remBttn);
rightBox.setPadding(new Insets(10));
rightBox.setAlignment(Pos.CENTER);
remBttn.setPadding(new Insets(100,0,100,0));
remBttn.setPrefWidth(100);
remBttn.setOnAction(
new EventHandler<ActionEvent>()
{
public void handle(ActionEvent ae)
{
myLabel.setText("You Clicked The REMOVE Button");
}
});
remBttn.setFont(Font.font(20));
However, if you look at this photo here, you'll notice that hovering and clicking have no effects on it. I don't know much about CSS, so I copied a snippet of code from a random Website to style my button. But I think that is where I messed it all up.
The code for that give below:
VBox leftBox = new VBox(addBttn);
leftBox.setPadding(new Insets(10));
leftBox.setAlignment(Pos.CENTER);
addBttn.setPadding(new Insets(100,0,100,0));
addBttn.setPrefWidth(100);
addBttn.setStyle("-fx-background-color: #c3c4c4, linear-gradient(#d6d6d6 50%, white 100%), radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%); -fx-background-radius: 30; -fx-background-insets: 0,1,1; -fx-text-fill: black; -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 ); -fx-focus-color: transparent; -fx-base: coral;");
So I want to know what methods or properties can be used to bring back the same effects without changing the style.

The moment you change the background of the button,It will lose its default hover and click effect,So I think the better way of doing it is to set the hover and click effect in css.
By the way instead of setting style again in code, just create a css file in your src folder then link it to your scene using this.
scene.getStylesheets().add(getClass().getResource("your_file_name.css").toExternalForm());
Then add an id to your add button using addBttn.setId("addBttn"); Then
refer to it in your_file_name.css like
#addBttn{
/*Your custom default button style*/
}
#addBttn:hover{
/*Your button style on hover*/
}
#addBttn:pressed{
/*Your button style on pressed*/
}
Hope this solves your problem.

JavaFX8 How to pass the "press" status to child?

I have an ImageView in a Pane, and the pane has been set a MouseEventHandler to do some actions.
The ImageView's Image is defined in a CSS file as below:
.imageView{
-fx-image: url("image/normal.png");
}
.imageView:pressed{
-fx-image: url("/image/press.png");
}
Under normal status, the ImageView's image is 'normal.png'. When the user presses the ImageView, its image will be changed to 'press.png'. Then, when released, its image will be changed back to 'normal.png'.
However, if the user does not press on the ImageView's image exactly, even though Pane's MouseEvent is trigged, the image will not be changed.
How can I do to change ImageView's image when its parent Pane is pressed. For instance, on Android, the image will be switched automatically. It is very convenient.

Add a style class to the pane ("image-container", for example), then in the css do
.imageView{
-fx-image: url("image/normal.png");
}
.image-container:pressed .imageView {
-fx-image: url("/image/press.png");
}

Change MenuBar color in Scene Builder

How does one change the color of a JavaFX 2 MenuBar in JavaFX Scene Builder? I want to make it the same color as the menu bar in the Scene Builder. CSS´s color and background-color doesn't seem to help.
I'd also be happy to know the color of the Scene Builder menu bar (in hexadecimal or decimal RGB).

You can use the fx-background-color css property to set the menu bar background color.
Regarding the Scene Builder menu bar background color, you can use:
-fx-background-color:
derive(#e0e0e0, -0.291),
linear-gradient(
to bottom,
derive(#e0e0e0, 0.353) 0%,
derive(#e0e0e0, -0.058) 100%
);
-fx-background-insets: 0, 0 0 1 0;
I extracted these css "coordinates" from Scene Builder jar, located at SceneBuilderInstalationRoot/lib/SceneBuilder.jar. In the jar, its on the package com.oracle.javafx.authoring.css_stylesheets, file SceneBuilderTheme.css. This css file uses a named constant -fx-color which I inferred to have value #e0e0e0.

You can find help about css directly in scene builder : on the menu View > Show CSS analyser
here you will can see that the menu bar use the class .menu-bar and have this -fx-background-color set with some color. So now you know that you have to put on the style of your MenuBar
-fx-background-color : thecoloryouwant
And that it.