How can i implement a transparent panel with non-transparent children in JavaFX 2?
The effect i want to achieve is for example applied to menus in Blender:
The menu-panel / window is transparent, but the text items are not transparent which leads to a pretty effect.
Set the background of your pane to a color with an alpha component. You can use a stylesheet or an inline style for this.
For example, if your pane was named glass, then the following will give it a rounded, translucent cyan background:
glass.setStyle("-fx-background-color: rgba(0, 100, 100, 0.5); -fx-background-radius: 10;");
You could also accomplish similar effects using blends, stackpanes or groups of items with the opacity set for items at the back of the stackpane or group.
Here is an executable example using the css background method.
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class TranslucentPane extends Application {
#Override public void start(final Stage stage) throws Exception {
final ImageView imageView = new ImageView(
new Image("https://upload.wikimedia.org/wikipedia/commons/b/b7/Idylls_of_the_King_3.jpg")
);
imageView.setFitHeight(300);
imageView.setFitWidth(228);
final Label label = new Label("The Once\nand\nFuture King");
label.setStyle("-fx-text-fill: goldenrod; -fx-font: italic 20 \"serif\"; -fx-padding: 0 0 20 0; -fx-text-alignment: center");
StackPane glass = new StackPane();
StackPane.setAlignment(label, Pos.BOTTOM_CENTER);
glass.getChildren().addAll(label);
glass.setStyle("-fx-background-color: rgba(0, 100, 100, 0.5); -fx-background-radius: 10;");
glass.setMaxWidth(imageView.getFitWidth() - 40);
glass.setMaxHeight(imageView.getFitHeight() - 40);
final StackPane layout = new StackPane();
layout.getChildren().addAll(imageView, glass);
layout.setStyle("-fx-background-color: silver; -fx-padding: 10;");
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) { launch(args); }
}
Sample program output:
Related
can I somehow only style the bottom border of an textfield?
I already tried
textfield.setStyle("-fx-border-bottom-color: #FF0000");
but it hasn't worked.
Is there an possibility to color the bottom border??
Greetings
MatsG23
Here is a quick and dirty example of how that can be done.
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class TextFieldStyleTest extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
BorderPane root = new BorderPane();
VBox vBox = new VBox();
vBox.setAlignment(Pos.CENTER);
root.setCenter(vBox);
HBox hBox = new HBox();
hBox.setAlignment(Pos.CENTER);
vBox.getChildren().add(hBox);
TextField textField = new TextField("Hello World");
textField.setAlignment(Pos.BASELINE_CENTER);
hBox.getChildren().add(textField);
textField.setStyle("-fx-border-color: red; -fx-border-width: 0 0 10 0;");
Scene scene = new Scene(root, 800, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
class TextFieldStyleTestLauncher {public static void main(String[] args) {TextFieldStyleTest.main(args);}}
Yes, it is possible to give each side a different color. From the JavaFX CSS Reference Guide, for Region:
CSS Property: -fx-border-color
Values: <paint> | <paint> <paint> <paint> <paint> [ , [<paint> | <paint> <paint> <paint> <paint>] ]*
Default: null
Comments: A series of paint values or sets of four paint values, separated by commas. For each item in the series, if a single paint value is specified, then that paint is used as the border for all sides of the region; and if a set of four paints is specified, they are used for the top, right, bottom, and left borders of the region, in that order. If the border is not rectangular, only the first paint value in the set is used.
Note: The above is actually from one row of a table, but Stack Overflow doesn't give a way of formatting things in a table.
Meaning you can target the bottom border only by using:
.text-field {
-fx-border-color: transparent transparent red transparent;
}
The -fx-border-width CSS property (and really all the CSS properties dealing with the Region#background and Region#border properties) behaves the same way. This means you can accomplish the same thing by setting the width of every side but the bottom to zero, just like in mipa's answer.
Here's an exaple using inline CSS (i.e. setStyle):
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class App extends Application {
#Override
public void start(Stage primaryStage) {
TextField field = new TextField("Hello, World!");
field.setStyle("-fx-border-color: transparent transparent red transparent;");
field.setMaxWidth(Region.USE_PREF_SIZE);
primaryStage.setScene(new Scene(new StackPane(field), 300, 150));
primaryStage.show();
// Remove blue outline from when TextField is focused. This
// makes it easier to see the red border.
primaryStage.getScene().getRoot().requestFocus();
}
}
Which gives the following output:
Note that most of the "borders" added by modena.css (the default user-agent style sheet in JavaFX 8+) are not actually borders. Instead, they're multiple backgrounds with different insets.
Javafx linear-gradient repeat seems to reflect the colours rather than repeat.
I wrote a simple application to show what I see when using linear-gradient with repeat to create a striped pattern in my application on a custom Node (a StackPane). In my application this are added as overlays to a XYChart and their height varies. Using a Rectangle wasn't working well which is why I use a Stackpane and set a style on it rather than creating the LinearGradient programmatically.
The colour list is dynamic and varies in size in the application.
The issue is the way linear-gradient flips the list and reflects the colours on each repeat rather than just repeat.
This link describes a similar issue but just adding in endless stops seemless like a messy solution for my issue, it would be much better to add the colours once and repeat.
linear gradient repeat on css for javafx
java.util.List;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
try {
BorderPane root = new BorderPane();
List<Color> colors = Arrays.asList( Color.RED,Color.BLUE,Color.YELLOW,Color.GREEN);
StackPane stackPane = new StackPane();
stackPane.setStyle(getLinearGradientStyle(colors));
root.setCenter(stackPane);
Scene scene = new Scene(root, 400, 400);
primaryStage.setScene(scene);
primaryStage.show();
}
catch (Exception e) {
e.printStackTrace();
}
}
private String getLinearGradientStyle(List<Color> colors) {
StringBuilder stringBuilder = new StringBuilder("-fx-background-color: linear-gradient(from 0px 0px to 10px 10px, repeat,");
for (int i = 0; i < colors.size(); i++) {
stringBuilder.append("rgb(")
.append((int) (colors.get(i).getRed() * 255)).append(",")
.append((int) (colors.get(i).getGreen() * 255)).append(",")
.append((int) (colors.get(i).getBlue() * 255))
.append(")")
.append(" ").append(getPercentage(i+1, colors.size()+1) );
if (i < colors.size() - 1) {
stringBuilder.append(",");
}
}
stringBuilder.append(");");
System.out.println("Main.getLinearGradientStyle():"+stringBuilder);
return stringBuilder.toString();
}
private String getPercentage(float i, int size) {
return (((1.0f / size) * 100 )*i)+ "%";
}
public static void main(String[] args) {
launch(args);
}
Here's a CSS3 example using repeating-linear-gradient:
https://tympanus.net/codrops/css_reference/repeating-linear-gradient/
scroll down to the following text: will create a striped background, where each linear gradient is a three-stripe gradient, repeated infinitely (this is the example)
My example uses a diagonal pattern which is what I need but the above example shows what I'd like to see in terms of solid repeating colours with out reflection in normal css.
Thanks for any help
This looks like a bug. If you run the following example (moved the CSS into a file):
Main.java
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Region;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
Region region = new Region();
region.backgroundProperty().addListener((obs, ov, nv) ->
System.out.println(nv.getFills().get(0).getFill()));
Scene scene = new Scene(region, 500, 300);
scene.getStylesheets().add("Main.css");
primaryStage.setScene(scene);
primaryStage.show();
}
}
Main.css
.root {
-fx-background-color: linear-gradient(from 0px 0px to 10px 10px, repeat, red 20%, blue 40%, yellow 60%, green 80%);
}
You'll see the following printed out:
linear-gradient(from 0.0px 0.0px to 10.0px 10.0px, reflect, 0xff0000ff 0.0%, 0xff0000ff 20.0%, 0x0000ffff 40.0%, 0xffff00ff 60.0%, 0x008000ff 80.0%, 0x008000ff 100.0%)
As you can see, despite using "repeat" in the CSS the LinearGradient that is created uses "reflect".
There is likely nothing you can do about this bug yourself, but if you don't mind setting the background in code (or probably even FXML) then the following should do what you want:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.Region;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
LinearGradient gradient = new LinearGradient(0, 0, 10, 10, false, CycleMethod.REPEAT,
new Stop(0.2, Color.RED),
new Stop(0.4, Color.BLUE),
new Stop(0.6, Color.YELLOW),
new Stop(0.8, Color.GREEN)
);
Region region = new Region();
region.setBackground(new Background(new BackgroundFill(gradient, null, null)));
Scene scene = new Scene(region, 500, 300);
primaryStage.setScene(scene);
primaryStage.show();
}
}
You can move the creation of the LinearGradient into a method that takes an arbitrary number of Colors, just like you're currently doing.
If you're interested, I believe the bug is located in javafx.css.CssParser around line 1872 (in JavaFX 12):
CycleMethod cycleMethod = CycleMethod.NO_CYCLE;
if ("reflect".equalsIgnoreCase(arg.token.getText())) {
cycleMethod = CycleMethod.REFLECT;
prev = arg;
arg = arg.nextArg;
} else if ("repeat".equalsIgnoreCase(arg.token.getText())) {
cycleMethod = CycleMethod.REFLECT;
prev = arg;
arg = arg.nextArg;
}
As you can see, it erroneously sets the CycleMethod to REFLECT when the text is equal to "repeat".
A bug report has been filed: JDK-8222222 (GitHub #437). Fix version: openjfx13.
I want to have transparent progressindicator, which is indefinite.
here is the code, it shows grey background state/scene.
i wanted fully transparent.
I tried following code, but it shows background stage which is not transparent.
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ProgressIndicator;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
public class Main extends Application {
#Override
public void start(Stage stage) {
/*
*
* my css file content:
*
* .progress-indicator .indicator { -fx-background-color: transparent;
* -fx-background-insets: 0; -fx-background-radius: 0;
*
* } .progress-indicator { -fx-progress-color: green ; }
*
*
*
*/
Stage initStage = new Stage();
initStage.initStyle(StageStyle.TRANSPARENT);
ProgressIndicator loadProgress = new ProgressIndicator();
loadProgress.setSkin(null);
loadProgress.setPrefWidth(50);
VBox box = new VBox();
box.getChildren().add(loadProgress);
final Scene scene = new Scene(box, 150, 150);
scene.setFill(Color.TRANSPARENT);
initStage.setScene(scene);
scene.getStylesheets().add("application.css");
initStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
For modena.css (the default JavaFX look and feel definition in Java 8), a slight shaded background was introduced for all controls (and also to panes if a control is loaded).
You can remove this by specifying that the default background is transparent. This can be done by adding the following line to your application's CSS file:
.root { -fx-background-color: transparent; }
This is in addition to other settings you already have in your code to initialize the style of the stage and background fill of the scene.
stage.initStyle(StageStyle.TRANSPARENT);
scene.setFill(Color.TRANSPARENT);
Note: in the questions's sample code, an additional stage (initStage) is created instead of using the passed in stage for the start method. The passed in stage can be initialized, utilized and shown directly by your code rather than creating an additional initStage.
stage.initStyle(StageStyle.TRANSPARENT);
this is for hide the top bar ( minimize, Restore Down and close)
scene.setFill(Color.TRANSPARENT);
this is for the frame color ( you can replace TRANSPARENT with any color GREEN YELLOW RED BLUE ...) but for me I want glass view if you can understand me, and with different color so the solution is
primaryStage.setOpacity(0.2);
The number 0.2 is between 0 and 1. 0 is hidden and 1 is normal form but between the numbers transparent so choose your number and run your program and see if this is what you want there is this code for full screen.
primaryStage.setFullScreen(true);
and in the css file do this
.root { -fx-background-color:rgba(0,0,0,1); }
and you can change the color with changed the number in rgba(0,0,0,1)
This works for me.
Parent root = FXMLLoader.load(getClass().getResource("login.fxml"));
Scene scene = new Scene(root);
scene.setFill(Color.TRANSPARENT);
stage.setScene(scene);
stage.initStyle(StageStyle.TRANSPARENT);
stage.show();
U just need mainly 2 things:
scene.setFill(Color.TRANSPARENT);
stage.initStyle(StageStyle.TRANSPARENT);
I have a square label with some text, and I was wondering is there was a way to e.g. color the first 3/4 of the label blue, and the last 1/4 red.
If that's not possible, is it then possible with a rectangle?
Label box = new Label();
box.setStroke(Color.GRAY);
box.setPrefWidth(50);
box.setPrefHeight(100);
Use a background color with a linear gradient. The best way to do this is in an external CSS file, using the rule
-fx-background-color: linear-gradient(to right, blue 75%, red 75%);
The format used by the CSS linear-gradient function is described in the JavaFX CSS documentation.
SSCCE:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class ColoredLabel extends Application {
#Override
public void start(Stage primaryStage) {
Label label = new Label("Some text");
label.getStyleClass().add("split");
StackPane root = new StackPane(label);
Scene scene = new Scene(root, 350, 120);
scene.getStylesheets().add("split-background-label.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
with the split-background-label.css file
.split {
-fx-background-color: linear-gradient(to right, blue 75%, red 75%);
-fx-text-fill: white ;
}
I want to change background and border color of TextField use JavaFX CSS. I don't understand why -fx-border-color reset border radius of TextField?
As you can see the second TextField doesn't have border radius.
sample/style.css:
.validation-error {
-fx-background-color: #FFF0F0;
-fx-border-color: #DBB1B1;
}
sample/Main.java
package sample;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception{
TextField txtWithoutStyle = new TextField();
txtWithoutStyle.setText("Without Style");
TextField txtWithStyle = new TextField();
txtWithStyle.setText("With Style");
txtWithStyle.getStyleClass().add("validation-error");
VBox root = new VBox();
root.setPadding(new Insets(14));
root.setSpacing(14);
root.getChildren().addAll(txtWithoutStyle, txtWithStyle);
root.getStylesheets().add("/sample/style.css");
Scene scene = new Scene(root, 300, 275);
primaryStage.setTitle("Hello World");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Update 1
Additional question: Why -fx-background-color remove TextField border (just remove -fx-border-color from style.css to reproduce it)?
The default stylesheet applies borders to text fields (and almost all other controls) by using "nested backgrounds" instead of borders.
Some of the settings for the TextInputControl from the default stylesheet are:
-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 0, 1;
-fx-background-radius: 3, 2;
This basically sets two background colors (both defined by a linear gradient), one (the "outer" one) with a color based on -fx-text-box-border, and the other with a color based on -fx-control-inner-background. The "outer" background is outside the "inner" background because they have insets of 0 and 1, respectively; the curved edge to the resulting apparent border is created by having radii of 3 and 2 for each background, respectively.
This is, anecdotally at least, far more efficient than using actual borders in the CSS, so this choice of technique is for performance reasons.
So to preserve the radius for the border, you can use the same technique, and just override the two background colors:
.validation-error {
-fx-background-color: #DBB1B1, #FFF0F0 ;
}
Note that you can also just replace the "looked-up-colors", which would also preserve the subtle linear gradients being used:
.validation-error {
-fx-text-box-border: #DBB1B1 ;
-fx-control-inner-background: #FFF0F0 ;
}
For highlighting when focused, the default uses colors named -fx-focus-color and -fx-faint-focus-color: so in the latter version you would probably want to redefine those too:
.validation-error {
-fx-text-box-border: #DBB1B1 ;
-fx-control-inner-background: #FFF0F0 ;
-fx-focus-color: #FF2020 ;
-fx-faint-focus-color: #FF202020 ;
}