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).
Related
I have a checkboxgroup which has multiple checkboxes. I have certain checkboxes which needs to look different, either by bold text or colored text ,which wont change irrespective of selection/unselection.
I have following code to build checkboxgroup. But I am not able to put style specific to one checkbox, because I dont have access to it. How can I do that
CheckBoxGroup<ReferenceScreenResultAnswer> answersOptionGroup = new CheckBoxGroup<>(question.getText());
List<ReferenceScreenResultAnswer> checkBoxItems = new ArrayList<>();
answersOptionGroup.setItems(checkBoxItems);
.......
// this is where i want to put CSS to specific checkbox/values
for (Answer answer : preSelectedAnswer)
{
ReferenceScreenResultAnswer rsra = new ReferenceScreenResultAnswer();
rsra.setAnswer(answer);
rsra.setReferenceScreenResultQuestion(rsrq);
answersOptionGroup.select(rsra);
}
I can do invidiual checkboxes like
CheckBox cb = new CheckBox();
cb.setCaptionAsHtml(true);
cb.setCaption("<b> hello </b> there");
But I am not able to access individual checkboxes from CheckBoxGroup. Any idea how to access them
i found the answer:
// css style the pre selected answer, so they look different irrespective
// of their selection
answersOptionGroup.setItemCaptionGenerator(new ItemCaptionGenerator<ReferenceScreenResultAnswer>()
{
#Override
public String apply(ReferenceScreenResultAnswer item)
{
if (preSelectedAnswer.contains(item.getAnswer()))
return "<strong>" + item.getAnswer().toString() + "</strong>";
else
return item.getAnswer().toString();
}
});
I am writing a program which needs to print notes about deliveries made. Currently using the JavaFX 8 printing methods I've been able to create a basic delivery note however the default style for displaying a TableView contains a lot of greyscale which makes a physical printed copy look strange and difficult to read.
I have used CSS to style the TableView to be solid black and white however when printing it seems to ignore the CSS that I have set.
Here's what I have currently:
private void printDeliveryNote(){
PrinterJob job = PrinterJob.createPrinterJob();
PageLayout pageLayout = Printer.getDefaultPrinter().createPageLayout(Paper.A4, PageOrientation.PORTRAIT, Printer.MarginType.HARDWARE_MINIMUM);
Group pane = new Group();
pane.getChildren().addAll(getNodeToPrint());
pane.getStylesheets().add("css/main.css");
if (job != null && job.showPrintDialog(new Stage())){
boolean success = job.printPage(pageLayout, pane);
if (success){
job.endJob();
}
}
}
private Node getNodeToPrint() {
Group group = new Group();
Label prntDeliveryId = new Label("Delivery Id: " + txtDeliveryId.getText());
prntDeliveryId.setLayoutX(txtDeliveryId.getLayoutX());
prntDeliveryId.setLayoutY(txtDeliveryId.getLayoutY());
Label prntDate = new Label("Date: " + txtDate.getText());
prntDate.setLayoutX(txtDate.getLayoutX() - 20);
prntDate.setLayoutY(txtDate.getLayoutY());
Label prntTitle = new Label(lblTitle.getText());
prntTitle.setLayoutX(lblTitle.getLayoutX());
prntTitle.setLayoutY(lblTitle.getLayoutY());
prntTitle.setFont(lblTitle.getFont());
ImageView imgBarcode = new ImageView(SwingFXUtils.toFXImage(handleBarcode(txtDeliveryId.getText()), null));
imgBarcode.setLayoutX(txtDeliveryId.getLayoutX());
imgBarcode.setLayoutY(txtDeliveryId.getLayoutY());
TableView<InstrumentContainer> prntInstrumentList = new TableView<InstrumentContainer>();
setupInstrumentList(prntInstrumentList);
prntInstrumentList.setLayoutY(lstInstruments.getLayoutY() + 40);
prntInstrumentList.setPrefWidth(lstInstruments.getPrefWidth());
System.out.println(prntInstrumentList.getHeight());
prntInstrumentList.setLayoutX(lstInstruments.getLayoutX());
group.getChildren().addAll(
prntDeliveryId,
prntDate,
prntInstrumentList,
prntTitle,
imgBarcode
);
return group;
}
The CSS file looks like this (which works when displaying on a form rather than when printed):
.table-row-cell{
-fx-table-cell-border-color: #424242;
}
.column-header{
-fx-border-color: #424242;
-fx-background-color: #ffffff;
}
The TableView with the style applied to it on the form looks like this:
But when printed it still has the default style:
Any ideas of how to style a node which is being printed?
This is probably a precedence issue. JavaFX includes its own default stylesheet modena.css* which can, and often does, use higher specificity rules than any custom ones you may have added.
One way to get around this would be to add !important to each of the declarations:
.table-row-cell {
-fx-table-cell-border-color: #424242 !important;
}
.column-header {
-fx-border-color: #424242 !important;
-fx-background-color: #ffffff !important;
}
If you have a lot of properties to override this might become a bit tedious. You could look at the default styles in the default stylesheet (linked above) and use a specificity calculator to work out how to make your selector more specific than the default one.
* Older versions may use different default stylesheets.
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.
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;
}
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: