I'm implementing a toolbox-like pane, so user can only pick one tool at a time, and I switched from Button to RadioButton for its behavior.
But I found that RadioButton uses its own skin with a dot, however I still want it to display like a normal Button. I'm a beginner with JavaFX and FXML, so anyone know how can I accomplish this?
First Create a radio button, remove the radio-button style and then add the toggle-button style like
RadioButton radioButton=new RadioButton("Radio");
radioButton.getStyleClass().remove("radio-button");
radioButton.getStyleClass().add("toggle-button");
Hope that solves your problem
Finally I went with another way around. You can extend ToggleButton so that it behaves like a RadioButton. This does not have the weird click effect of consuming mouse release.
public class RadioToggleButton extends ToggleButton {
// As in RadioButton.
/**
* Toggles the state of the radio button if and only if the RadioButton
* has not already selected or is not part of a {#link ToggleGroup}.
*/
#Override
public void fire() {
// we don't toggle from selected to not selected if part of a group
if (getToggleGroup() == null || !isSelected()) {
super.fire();
}
}
}
Then in FXML:
<fx:define>
<ToggleGroup fx:id="toolToggleGroup" />
</fx:define>
<RadioToggleButton toggleGroup="$toolToggleGroup" />
<RadioToggleButton toggleGroup="$toolToggleGroup" />
And it is done.
Here is the style you can use to get rid of the dot
.radio-button > .radio {
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-background-radius: 0px;
-fx-padding: 0.0em; /* 4 8 4 8 */
}
.radio-button:selected > .radio > .dot {
-fx-background-color: transparent;
}
Documenting here; in case someone finds it useful.
You can use ToggleButton and ToggleGroup, but you have to create an extension of ToggleGroup to keep the selected one selected. Here's an example.
Related
Is it possible to set the corner of a listview to a specific color or to hide it/make it transparent and if so you how would I do that?
Below are my current attempts to style the listview using css.
.list-view .scroll-bar:vertical {
-fx-background-color:#2c365d;
}
.list-view .increment-button ,.list-view .decrement-button {
-fx-background-color:transparent;
-fx-border-color:transparent;
}
.list-view .scroll-bar:vertical .thumb {
-fx-background-color:#455491;
-fx-background-insets: 5, 5, 5;
-fx-background-radius: 5;
}
.list-view .scroll-bar:horizontal {
-fx-scale-x: 0;
}
You can style the corner of your scroll pane like this:
.scroll-bar > .corner {
-fx-background-color: #2c365d ;
}
I highly recommend Scene Builder and its CSS Analyzer, is great for looking up things like this. Using the CSS Analyzer you can view the "Styleable path" and find the .corner style class, as can be seen in the image below.
Even if you create your GUI in code, you could still use Scene Builder to simply look up things like this and create quick mock-ups.
EDIT:
Though the above answer is fine for Scroll Panes, it's not the exact same for a ListView which is what op wanted - my bad. The ListView have the styleable path:
.list-view .virtual-flow .corner
So this should work to style a corner of a list-view.
.virtual-flow > .corner {
-fx-background-color: #2c365d ;
}
I'm assuming that you will only have one of those ListView and then you could give it an id and only style the corners of your specific ListView.
I've tried a lot to remove the stage buttons in my JFX project frame. I'm using a decorator to fresh up the design.
I only want to remove the maximize, resize and minimize buttons. The close button should not be removed. Can you give me a tip, how I can deal with this?
JFXDecorator decorator = new JFXDecorator(primaryStage, gridContainer);
I've tried this to remove the resizable button this way:
primaryStage.setResizable(false);
.jfx-decorator{
-fx-decorator-color: #2196F3;
-fx-text-fill: black;
-fx-background-color: transparent;
-fx-border-color: #2196F3;
}
.jfx-decorator .jfx-decorator-buttons-container{
-fx-background-color: -fx-decorator-color;
}
.jfx-decorator .resize-border{
-fx-border-color: #2196F3;
-fx-border-width: 0 4 4 4;
}
.jfx-decorator .jfx-decorator-buttons{
-fx-background-color: red;
}
You have to pass the exact number of arguments.
boolean values are...
1 full screen
2 Maximize/Restore
3 Minimize
JFXDecorator decorator = new JFXDecorator(mainStage, root, false, false, false);
It is actually pretty simple.
If you take a look into the constructor of the decorator:
public JFXDecorator(Stage stage, Node node) {
this(stage, node, true, true, true);
}
You can set the three Boolean values to false, which exceeds to the wanted solution.
Am hoping someone can advise what is need to be changed to remove the hideous border (?) from this menu (see image).
Have extracted modena from the java jar to see how they do it but to no avail. Sure it's very very simple just drawing a blank at the moment.
The css at the moment is very simple just not sure which element need to be changed / added.
.menu-bar {
-fx-background-color:#237a72;
/*-fx-border-width:2;*/
}
.menu-bar .label {
-fx-text-fill:#ffffff;
}
.menu-bar .label:hover {
-fx-text-fill:yellow;
}
.menu-item {
-fx-background-color:#237a72;
-fx-border-color: #237a72;
}
Many Thanks.
The white border is the background color of the context-menu.
So if you want to get rid of it, you could remove the padding:
.context-menu {
-fx-padding: 0;
}
Is there any way to use FontAwesome for buttons in Grid? I tried to make it as an html - but buttos dont parse html but I can only see it as text.
I also tried to make a custom renderer (from https://vaadin.com/forum#!/thread/9418390/9765924) but it does not work - no errors, it just wont change text no matter how i do it.
I would like to have 3 buttons with FontAwesome icons and tooltips in every row. Is there some simple way to do that?
I guess what you want is clickable icons that don't necessarily need to be buttons.
So instead of using ButtonRenderer to add buttons, for which you can only provide a caption, a simple solution is to use HtmlRenderer to add the FontAwesome icon (1 column for each icon), then use an ItemClickListener. Use ItemClickEvent#getPropertyId() to detect which column was clicked.
I've a simple workaround for the FontIcon issue.
I've used a normal ButtonRenderer and I've overridden the getValue() method of PropertyValueGenerator object to return the icon codepoint.
wrapperContainer.addGeneratedProperty("delete", new PropertyValueGenerator<String>() {
#Override
public String getValue(Item item, Object itemId, Object propertyId) {
return "\uF014"; //FontAwesome.TRASH_O
}
#Override
public Class<String> getType() {
return String.class;
}
});
I've put in scss the right font-family for button element:
button {
border: 0;
background-color: transparent;
background-size: 25px;
color: $v-blue-color;
font-family: FontAwesome;
height: 25px;
width: 25px;
}
Pure-Java solution for Vaadin 8:
final ButtonRenderer<Person> renderer = new ButtonRenderer<>(event -> onPersonClicked(event.getItem()));
renderer.setHtmlContentAllowed(true);
grid.addColumn(person -> VaadinIcons.EXTERNAL_BROWSER.getHtml(), renderer).setWidth(60);
There is lots of alternative
Like add with HtmlRenderer or CellStyleGenerator and anothers
But HtmlRenderer uploading for every row like this data
25=<span class="v-icon v-icon-caret_square_up_o" style="font-family: Vaadin-Icons;"></span>
This is big problem for network traffic
So I like to use
Grid.Column gridColumn = grid.addColumn(a -> (char) FontAwesome.BTC.getCodepoint());
gridColumn.setStyleGenerator(item -> "cssStyleName");
With this network usage is better as you see
27= //unshowing character is icon character code
but don't forget to add "cssStyleName" to css / for example
.cssStyleName {font-family: FontAwesome; }
And listen clicks with
grid.addItemClickListener(event -> {
if (!event.getMouseEventDetails().isDoubleClick()) {
//To Do
}
}
This is compatible with Vaadin 8
A button with just an icon and a tooltip can be created like this:
Button button = new Button(FontAwesome.ANDROID);
button.setDescription("Any tooltip");
To generate buttons for each row, just use any fitting loop (for or while).
I'm trying to change the highlight/focus/hover color of menu items.
I'm trying to change the blue background to another color, but nothing seems to work?
I've tried a few things with no luck from: How do you set the style for a JavaFX ContextMenu using css? and How to style menu button and menu items
.context-menu:focused {
-fx-background-color:white;
-fx-focus-color:white;
}
.menu-item:focused {
-fx-background-color:white;
-fx-focus-color:white;
}
.menu:focused {
-fx-background-color:white;
-fx-focus-color:white;
}
and many other variations...
Also some example code that's using the menu item's
// Menu
final ContextMenu contextMenu = new ContextMenu();
and construct a MenuItem:
maximizeMenuItem = new MenuItem(Config.getString("Maximize"));
maximizeMenuItem.setOnAction(new EventHandler<ActionEvent>() { /* do stuff */ }
I could try a:
contextMenu.setStyle("-fx-focus-color:white");
or
maximizeMenuItem.setStyle("-fx-focus-color:white");
but I can't seem to figure out which -fx- css tag controls that blue background color...
If possible, please post the FXML solution as well as the in-line code solution.
Ok, a little embarrassed. I had my layers messed up to where my stylesheet wasn't being applied like I thought it was.
So the correct way to change the menu-item's background color when focused is:
.menu-item:focused {
-fx-background-color: #969A9F;
}
Once I found and sorted out my css layering problem, it now works as expected as result it: