I was wondering How one can achieve following button style where text resides underneath of image in JavaFx?
I tried a lot but all in vain. Any help would be appreciated.
The key is the contentDisplay property, set it to "TOP".
With fxml:
<Button contentDisplay="TOP" layoutX="101.0" layoutY="51.0" mnemonicParsing="false" text="Button">
<graphic>
<ImageView mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#image.png" preserveRatio="false" smooth="false" />
</image>
</ImageView>
</graphic>
</Button>
Or CSS:
.your-selector {
-fx-content-display: top;
}
Check the CSS reference here.
You can simply achieve that just by doing
Button b = new Button("text", graphics);
b.setContentDisplay(ContentDisplay.TOP);
And for cool icons, take a look at http://fxexperience.com/controlsfx/features/ it include icone from FontAwesome and IcoMoon
Related
<ToggleButton fx:id="toggleButton" text="xxxxxxxx" style="-fx-background-color: transparent;">
<tooltip>
<Tooltip text="xxxxxxx"></Tooltip>
</tooltip>
</ToggleButton>
How can highlight it`s background blue when mouse is on it?
I tried to use css but since i don`t really know the language im not sure if im doing it properly.
You would have to define the styling for the hover action in an external styles.css file as suggested by James_D. Simply apply toggle button style like below.
Attach a stylesheet with your container or the control in the .fxml file (scene builder can bee used):
<VBox alignment="CENTER" prefHeight="480.0" prefWidth="640.0" spacing="20.0" stylesheets="#../../../styles.css" xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.javafxdemo.HelloController">
<StackPane fx:id="myPane" prefHeight="150.0" prefWidth="200.0">
<children>
<ToggleButton fx:id="myToggleButton" mnemonicParsing="false" prefHeight="26.0" prefWidth="137.0" text="My toggle button" />
</children></StackPane>
</VBox>
styles.css file:
.toggle-button {
/* default color here */
}
.toggle-button:hover {
-fx-background-color: #178dfc;
}
I'm using SVG for an image in a button. But I'm not able to fill in color for it through CSS.
Below is the code to render a button.
<Button onAction="#closeApplication" >
<graphic>
<SVGPath content="M10,16 10,0 0,8z" styleClass="button‐icon‐shape" />
</graphic>
</Button>
here is the css
.button-icon-shape SVGPath{
-fx-fill: red;
}
here is how it worked.
I had to style the button and use the class to style the svg in the button.
<Button onAction="#closeApplication" styleClass="closeButton">
<graphic>
<SVGPath content="M10,16 10,0 0,8z" />
</graphic>
</Button>
here is the css
.closeButton{
}
.closeButton SVGPath{
-fx-fill: red;
}
I am aware this is an old question but this OP solution is not the best one to my mind. If you encountered the same kind of problem, my advise is to read the JavaFX CSS Reference Guide (JFX 8) and especially the redirection to this selectors link.
The simplest solution here with the initial code was the following:
<Button onAction="#closeApplication">
<graphic>
<SVGPath content="M10,16 10,0 0,8z" styleClass="button-icon-shape" />
</graphic>
</Button>
And the JavaFX CSS associated would be :
.button-icon-shape {
-fx-fill:red;
}
I am trying to insert an image in a button using JavaFX CSS. Although, I can do it easily using the "-fx-graphic" tag, I cannot find a way to resize the image in whatever size I want.
I can do this through the following FXML code, where I give 30 to my preferred width of image, but I would like to do this with pure CSS. Is there any way to do that?
FXML
<Button text="Press Me">
<graphic>
<ImageView fitWidth="30">
<image>
<Image url="myImage.png"/>
</image>
</ImageView>
</graphic>
</Button>
CSS
#buttonWithImage {
-fx-graphic: url("myImage.png");
}
I had the same problem and found a workaround: instead of using -fx-image, I use -fx-background-image.
Note: I use an additional lib to use svg file in the following example.
CSS
#buttonWithImage {
-fx-background-image: url('myimage.svg');
-fx-background-size: 30px;
-fx-background-repeat: no-repeat;
-fx-background-position: 90%;
}
I was making an app that allows users to create custom shops from a game graphically but I was having troubles as I wanted to add a label which shows how much of an item is in a shop but since the imageview is already on a Tile pane, it creates a label beside it but I wanted to create a label on top of it.
You could make your items labels and apply the images as graphic nodes to the labels. When the items are selected, you can invoke label.setText("text string") on the label to change the label's text or css style as needed. If the items need to be interactive, you might want to make the buttons instead of labels.
The approach below has a bit of trickery in it by using a combination of contentDisplay="TOP" graphicTextGap="-40.0" and -fx-padding: 0 0 20 0; to position text, which is a little counterintuitive.
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<StackPane id="StackPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="-1.0" prefWidth="-1.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
<children>
<TilePane hgap="10.0" prefColumns="3" prefHeight="-1.0" prefRows="1" prefWidth="-1.0" style="-fx-background-color: linear-gradient(palegreen, forestgreen);
-fx-padding: 20px;" vgap="10.0">
<children>
<Label contentDisplay="TOP" graphicTextGap="-40.0" style="-fx-font-size: 20px;
-fx-text-fill: gold;
-fx-padding: 0 0 20 0;" text="Roast Beef">
<graphic>
<ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="http://icons.iconarchive.com/icons/rockettheme/ecommerce/256/piggy-bank-icon.png" backgroundLoading="true" />
</image>
</ImageView>
</graphic>
</Label>
<Label contentDisplay="TOP" graphicTextGap="-40.0" style="-fx-font-size: 20px;
-fx-text-fill: gold;
-fx-padding: 0 0 20 0;
-fx-border-color: palegoldenrod;
-fx-border-width: 5px;
-fx-border-radius: 10px;
-fx-border-insets: -5px;
" text="Bag 'o' Love">
<graphic>
<ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="http://icons.iconarchive.com/icons/rockettheme/ecommerce/256/bag-icon.png" backgroundLoading="false" />
</image>
</ImageView>
</graphic>
</Label>
<Label contentDisplay="TOP" graphicTextGap="-40.0" style="-fx-font-size: 20px;
-fx-text-fill: gold;
-fx-padding: 0 0 20 0;" text="Show Me">
<graphic>
<ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="http://icons.iconarchive.com/icons/rockettheme/ecommerce/256/wallet-icon.png" backgroundLoading="true" />
</image>
</ImageView>
</graphic>
</Label>
</children>
</TilePane>
</children>
</StackPane>
<!-- icon usage license:
Creative Commons with attribution,
back link to http://www.rockettheme.com required -->
This is perhaps not the best way to achieve what you want, as you could create a custom ShopItem component derived from Region. With the custom component, you would provide layout logic to internally layer your text (and other graphics as needed) over the top of your item image. This layout logic should be a bit more intuitive than the mechanism provided above.
Another approach would be to make each shop item an AnchorPane which contained the image and text label.
The custom component approach, though more flexible, is a bit more complicated, so I just provided the simple label based solution here.
My extension is an overlay that has some images inside a toolbar. I need to display these images small (about 15px), but they render always at the same height of toolbar.
I've already tried to define height and maxHeight of image and of hbox where them are palced but it doesn't work.
here is the piece of code:
...
<toolbox id="navigator-toolbox">
<toolbar id="my-toolbar">
<label>images:</label>
<hbox id="rsour_inputRating">
<image id="rsour_1" />
<image id="rsour_2" />
<image id="rsour_3" />
<image id="rsour_4" />
<image id="rsour_5" />
</hbox>
<toolbarseparator />
...
The correct way is to use -moz-box-align in CSS, or align attribute in xul, so the image doesn't stretch vertically:
#rsour_inputRating{
-moz-box-align:center;
}
#rsour_inputRating img{
list-style-image : url("chrome://...");
width:20px;
height:15px;
}
At the top of the file, add:
<?xml-stylesheet href="chrome://your_ext_name/content/cssFile.css" type="text/css"?>
Then in the css file:
#rsour_inputRating img {height:15px;}