I'm new to both JavaFX and CSS. I'm using Scene Builder, and have an accordion that I want to use as a menu bar. I want the background of the accordion to either be transparent or to match the background of the page behind it, and the text to be fully opaque and a different color. Also, I do not want the arrows beside the text to appear. I've tried the various options that Scene Builder provides, but none enabled me to do either of these two things. Is this something I'll need to do with CSS, and if so, how?
I solved the issue with css. JavaFX uses a file called caspian.css for its standard styling.
An accordion module contains titled panes that consist of a title and a content area.
To remove the background color of the content you need to overwrite the styleClass of the titled panes:
.accordion .titled-pane > *.content {
-fx-background-color: null;
}
You could also assign a custom styleClass to your titled panes or accordion if you don't want to overwrite the style application-wide.
Hope this helps.
Related
I encountered a frustrating problem with styling a javafx graph. Hope that somebody can help me out.
Using the JavaFx-library I made a StackedBarChart and a LineChart combined in one scene:
StackPane stackpane = new StackPane();
stackpane.getChildren().addAll(lineChart,stackedBarChart);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
Style.css looks as follows:
.default-color0.chart-series-line { -fx-stroke-width: 4px;-fx-stroke: #3F48CC; -fx-stroke-dash-array: 12 12 12 12;}
.default-color0.chart-bar { -fx-bar-fill: #AA3B3B }
.default-color1.chart-bar { -fx-bar-fill: #FFC000 }
.chart-plot-background { -fx-background-color: transparent; }
The resulting image is:
Resulting image
Now I want to turn everything that is lightgrey (the background) into white. I tried that by adding the following styling:
.chart {-fx-background-color: white}
But this simple action makes the linechart (with the title of the chart) disappear:
Resulting image after adding style line
It seems that the .chart class refers to the background of the barchart, which is covering the linechart. Therefore: how to set the background of the entire image? Or should I make the background of the barchart-layer transparent and the background of the linechart-layer white? And if so: how to do that?
Thanks a lot!
If you use SceneBuilder, you can drop a control onto the design page, then click on View / Show CSS Analyser and it will open a window at the bottom that shows all of the styling properties for the selected object. If an object has multiple components on it, you can click on each one and see the related styling options.
Also, at the top of that lower window, you will see and arrow in a circle ... click on it to see more sub layer styling info that is related to whatever you have selected in the design window.
I had a hard time figuring out why my transparent stage refuses to be transparent. Finally I found out, that it was caused by a Tooltip that was installed into an ImageView:
ImageView imageViewIcon = new ImageView();
imageViewIcon.setFitWidth(70);
imageViewIcon.setFitHeight(70);
imageViewIcon.setPreserveRatio(false);
imageViewIcon.setImage(new Image("./next.png"));
Tooltip tooltip = new Tooltip("Tooltip!");
if (this.config.getShowTooltip("true")) {
Tooltip.install(imageViewIcon, tooltip);
}
When I comment out the last 4 lines, the transparency works as expected, but with the Tooltip installed the stages background is grayish (e.g. the default window background). Though it's obvious what the button does and the tooltip is not essential for my layout it'd be nice to have, just to give a little hint...
Any suggestions or workarounds?
Solution
Set the style -fx-background-color: transparent on the root node of the scene.
Background
Similar behavior is discussed in an Oracle JavaFX Forum post on the JavaFX Scene/Fill Color.
Relevant comments from the thread by David Grieve, the lead developer for the JavaFX CSS features:
This happens because modena.css sets the background color of the root node. Setting the style -fx-background-color: transparent on the root node of the scene is the solution.
BorderPane root = new BorderPane();
root.setStyle("-fx-background-color: transparent;");
Scene scene = new Scene(root, 600, 400, Color.BLACK);
The default user agent stylesheet is loaded the first time a Control is instantiated. The reason for this is to avoid loading stylesheets and reduce CSS overhead in scene-graphs that contain nodes that don't use CSS.
The history behind it is that the designer of the modena theme felt that the controls looked better on this particular background color, which is a very light grey. Unfortunately, the Scene's background fill cannot be styled from CSS, so the style was set on the root node of the scene. There is an issue logged in JIRA to make Scene so that it can be styled by CSS (RT-31282)
The merit of loading in this way is to avoid css overhead in scene's that don't use controls. This would be typical of a splash screen, for example. Or maybe a game. This design choice was made a long time ago when CSS performance was a big issue, but it still makes sense for embedded devices.
In the case of your question, Tooltip is a control, so when you add it to the scene it implicitly triggers the default modena.css stylesheet to be loaded for the scene (which sets the background of the root node of the scene to gray rather than a null or transparent fill which is used when there are no controls in the scene). To retain the transparent background for the application when a control is used in the scene, it is necessary to explicitly set the scene root node background to transparent.
Sample code for a transparent stage:
//this is where the transparency is achieved:
//the three layers must be made transparent
//(i) make the VBox transparent (the 4th parameter is the alpha)
root.setStyle("-fx-background-color: rgba(0, 0, 0, 0);");
//(ii) set the scene fill to transparent
scene.setFill(null);
//(iii) set the stage background to transparent
stage.initStyle(TRANSPARENT);
I am trying to develop an app using JavaFX 8 and I'm stuck with a resizing problem. The Selected File and Password fields in the below figure doesn't realign as I wish it to be in the AnchorPane..i.e. to be in the center with exact distances from the top navigation bar and the footer. I have tried AnchorPane Constraints in Scene Builder. I was unable to get a perfect match.
Hoping to get an alternate approach or a small overview of AnchorPane constraints.
Note: I'm new to JavaFX graphics library.
Below enclosed are the images and the FXML file that I'm working on.
What I want is this kind of alignment in full screen mode too.
This is the actuality when I switch to full screen.
For a quick fix, try wrapping your AnchorPane in a simple layout, such as an HBox, and set the alignment of the HBox to Pos.CENTER.
However, AnchorPane is probably not the best layout pane to use here. You should read through the layout tutorial and figure out a different strategy: probably you want a BorderPane as the overall structure with HBoxs and/or GridPanes inside.
I am making a desktop application in Java and confused as to which swing component to use to achieve this result.
Here is the screenshot of the app.
I want to know the component for the content shown in the JScrollPane.
I am thinking of JList or JTable with Providing a Custom Renderer.
There will be alphabet headers and rows containing information.
Each row can be clicked to open a new window.
Row will also change its color on hovering.
there are two ways
JTreeTable (non_free Jide or SwingX)
Accordion (implemented in JavaFX)
You should go with JavaFX Accordion
Titled Pane and Accordion
I am trying to use JavaFX Scene Builder to create the UI for my application.
I am using a CSS file to style controls in my interface. I have noticed that some controls (TableView, TreeView) have a default grey border which I don't want.
I have tried setting the -fx-border-style: none; and the -fx-border-width: 0; neither of which have worked. I then tried to set the border color for individual sides (-fx-border-right-color:#FFF;) but this did not work either. The only thing I can change is the border color for all sides.
Does anyone know how to get rid of the default border, and also how to style the border for individual sides of these controls?
for me the following worked:
TreeView tv = (TreeView) scene.lookup("#myTree");
// ... setup your tree
tv.setStyle("-fx-border-style: none; -fx-background-color:transparent;");
HTH,