How can i create a Toolbar like this:
LINK: http://s14.postimg.org/99095jk3l/image.png
I already created a toolbar with the correct background. My only problem are the buttons.
I dont know how to style the buttons to be transparant, and how to add the correct on hover and on click effects to match the background.
Thanks in advance
You'll be working with CSS. You can set the background and border to transparent, then have a hover class for adding a semi-transparent border. It would end up being something like this (Please note, you may have to make some tweaks still)
.button {
-fx-background-color: transparent, transparent, transparent, transparent;
}
.button:hover{
-fx-background-color: transparent, rgba(0,0,0,.1), rgba(0,0,0,.1), transparent;
}
.button:armed {
-fx-background-color: transparent, rgba(0,0,0,.1), rgba(0,0,0,.1), rgba(0,0,0,.2);
}
To apply the style sheet you'd use code similar to this:
toolbar.getStylesheets().add("filename.css");
There are lots of good references for this in the "Info" section of the "javafx-2" tag. Here are a few that should prove helpful with this:
JavaFX 2 CSS Reference Guide
caspian.css for JavaFX 2.2 (The default style sheet)
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've been trying to create javafx buttons with a custom font. The font is in the resources directory of my project and applied to the buttons via a css stylesheet. The problem is that the buttons become really tall. As soon as I remove the css line that changes the font, the buttons look just as usual. The buttons themselves are inside a HBox which is in the bottom region of a BorderPane. Does anyone have an idea how to fix this? Manually changing the dimension doesn't help.
#font-face {
font-family: 'MODERNA';
src: url('/fonts/MODERNA_.ttf');
}
.label {
-fx-font-family: 'MODERNA';
-fx-font-size: 20;
}
.button .text {
-fx-font-family: 'MODERNA';
}
.button {
-fx-background-color: #F5E050;
-fx-pref-height: 30px;
-fx-pref-width: 100px;
}
strange, disproportioned buttons with custom font
normal looking buttons with standard font
I found a solution and wanted to let anyone having the same problem know.
#Zephyr wasn't far off, however it was maxHeight but minHeight that created the problem. It has to be set to USE_PREF_SIZE in the SceneBuilder instead of USE_COMPUTED_SIZE wich seems to be the default value. After that simply change you prefSize in SceneBuilder's UI and everything works out great. The problem must have been the system failing to calculate the correct height on its own, for whatever reason, proably something to do with the font, because it didn't happen with any other fonts.
I need to change the very bright (almost white) color visible on the attached image and the color of the font on those TabItems being a part of white TabFolder.
I use CSS and also tried setBackground function called on Composite and TabFolder but without success. The best solution for me would be to change it via CSS if possible
There is no specific code for TabFolder or TabItem in the Eclipse CSS support so they just get the CSS common to all controls such as background-color and color.
color does seem to change the color of the tab folder tab text, background-color does not change the tab background (it changes the background of the rest of the control).
The Eclipse CSS support works by calling normal SWT methods in the controls, since TabFolder does not have methods to set the tab background there is no way this can be done.
CTabFolder is much more flexible and allows new tab renderers to be used which can extend the CSS. Also note that on some platforms CTabFolder looks substantially different from TabFolder (macOS in particular).
You can use CSS classes and ids to restrict your CSS to just your folders. For example in your code use:
CSSUtil.setCSSClass(folder, "my-folder-class");
to set the CSS class of a folder and in the CSS use the class:
CTabFolder.my-folder-class
{
swt-tab-renderer: url('bundleclass://org.eclipse.e4.ui.workbench.renderers.swt/org.eclipse.e4.ui.workbench.renderers.swt.CTabRendering');
swt-shadow-visible: false;
swt-simple: false;
swt-tab-height: 22px;
swt-unselected-tabs-color: black;
swt-selected-tab-fill: black;
swt-outer-keyline-color: black;
swt-tab-outline: black;
swt-shadow-color: black;
swt-unselected-hot-tab-color-background: #2F2F2F;
swt-selected-tabs-background: black black 100%;
color: rgb(128, 128, 128);
}
This CSS also shows the use of the standard Eclipse custom tab folder renderer. This is just an example taken from a dark theme for one of my own RCPs.
I have a TabPane with several Tabs. If the results of an operation in the Tab failed, I want to set the Tab Label to a Fill red or perhaps the texture to hashed (for those with color blindness). I want to reset the Color back to its default, later.
From reading some of the questions here, one can statically set it using a style sheet.
#MyTabPane .tab *.tab-label {
-fx-text-fill: white;
}
How would one access the Tab label and set it's color/texture dynamically?
tab.setStyle("??");
ADDITIONS BY ELLTZ
How can one use inline Styles stated above to change the Paint of both the Label with style class tab-label and the Button(StackPane) also tab-close-button
code examples needed
Setting the graphics and styling it did the trick for me:
Tab tabB = new Tab();
tabB.setText("");
tabPane.getTabs().add(tabB);
tabB.setStyle("-fx-border-color:red; -fx-background-color: blue;");
tabB.setGraphic(new Label("Tab B"));
tabB.getGraphic().setStyle("-fx-text-fill: #c4d8de;");
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,