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
I am trying to create a choicebox in my application using javafx/scenebuilder in IntelliJ but so far am not able to get Strings to show as menu items - in the example screenshot below I have just tried to create an option with the letter C? The code I have used is below. Any ideas what I am doing wrong? I thought it might be a font issue but I can't find a way to change the font of the menu items.
<AnchorPane prefHeight="45.0" prefWidth="127.5">
<children>
<Text fill="WHITE" strokeType="OUTSIDE" strokeWidth="0.0" text="I" AnchorPane.leftAnchor="11.0" AnchorPane.topAnchor="4.0">
<font>
<Font name="Courier Bold" size="40.0" />
</font>
</Text>
<ChoiceBox fx:id="keyChoice" prefWidth="79.0" style="-fx-background-color: #FBC5B8;" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="8.0">
<items>
<FXCollections fx:factory="observableArrayList">
<String fx:value="C" />
</FXCollections>
</items>
</ChoiceBox>
</children>
</AnchorPane>
So this was a font issue as suspected, couldn't find a way to change it in FXML so created a CSS file which works fine.
.choice-box .menu-item .label {
-fx-font-family: "monospace";
}
.choice-box {
-fx-font-family: "monospace";
}
In my JavaFX program I am using FontAwesomeFX to add icons to buttons, labels, etc.
The way how I style this is through the .fxml file:
<Button fx:id="btnGoToWeb"
onAction="#btnGoToWeb">
<tooltip>
<Tooltip text="Go to Web"/>
</tooltip>
<graphic>
<FontAwesomeIconView glyphName="GLOBE" size="1.6em"/>
</graphic>
</Button>
Producing this button:
I would like to know how I can add 2 icons to one button. I would like to have something like shown below (please note the image is modified to illustrate the desired output):
Per #Slaw comment.
<Button mnemonicParsing="false" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
<graphic>
<HBox alignment="CENTER" spacing="5.0">
<children>
<FontAwesomeIconView />
<FontAwesomeIconView />
</children>
</HBox>
</graphic>
<tooltip>
<Tooltip text="Go to Web" />
</tooltip>
</Button>
I am looking for an elegant way of setting a padding to a TabPane, but without padding the tab bar:
<TabPane>
<padding>
<Insets top="10" bottom="10" right="10" left="10" />
</padding>
<Tab text="red">
<Rectangle fill="RED" width="200" height="200" />
</Tab>
<Tab text="blue">
<Rectangle fill="BLUE" width="200" height="200" />
</Tab>
</TabPane>
gives:
however,
<TabPane>
<Tab text="red">
<VBox>
<padding>
<Insets top="10" bottom="10" right="10" left="10" />
</padding>
<Rectangle fill="RED" width="200" height="200" />
</VBox>
</Tab>
<Tab text="blue">
<VBox>
<padding>
<Insets top="10" bottom="10" right="10" left="10" />
</padding>
<Rectangle fill="BLUE" width="200" height="200" />
</VBox>
</Tab>
</TabPane>
gives:
which is exactly what i want, however I want to simplify the FXML structure, mainly by refactoring the <padding> element so it's declared in one place (shorter and non-repeating code) and not in every tab of the pane.
So is there any way to achieve this? Or am I stuck with my repeated <padding> elements? I'd prefer an FXML solution, but if no way exists a Java one is OK.
In a word: no.
Each Tab of the TabPane accepts a Node for it's contentProperty. The content itself is not a Region and therefore cannot have Insets or padding applied to it. The TabPane itself does not contain a method that allows you to style the content of all the child Tabs at once.
You must first add a container of some sort to the Tab in order to apply padding. So the second method in your question is the simplest way to accomplish what you are trying to do.
A Workaround
While this cannot be done with FXML, you could use a Java loop to add the same padding to all of your Tab objects after loading the scene:
Insets insets = new Insets(10);
for (Tab tab : tabPane.getTabs()) {
((VBox) tab.getContent()).setPadding(insets);
}
This assumes, of course, that you use a VBox for the content of all your tabs.
EDIT: I updated the answer to use the CSS selectors from fabian's comment down below.
You can set padding for most JavaFX scene graph objects in a separate css file. You will need to link the css file to your FXML file which I will show below. The css file and the FXML file will need to be in the same directory, otherwise you will have to edit the value="..." tag.
style.css
.tab-pane > .tab-content-area > * {
-fx-padding: 10 10 10 10;
}
This sets padding to all the VBoxes that happen to be under a Tab somewhere (no matter how deep in the hierarchy)
main.fxml
<TabPane>
<Tab text="red">
<VBox>
<Rectangle fill="RED" width="200" height="200" />
</VBox>
</Tab>
<Tab text="blue">
<VBox>
<Rectangle fill="BLUE" width="200" height="200" />
</VBox>
</Tab>
<stylesheets>
<URL value="#style.css" />
</stylesheets>
</TabPane>
I used fitWidth and preserveRatio to size the ImageView in the FXML, but the image does not scale to it but instead shows its full size (too big in my case). How do I set the size of the image using FXML or css?
FXML
<Button
fx:id="buttonUp"
GridPane.columnIndex="0"
GridPane.rowIndex="0"
onAction="#buttonUp">
<graphic>
<ImageView fitWidth="10.0" pickOnBounds="true" preserveRatio="true">
</ImageView>
</graphic>
</Button>
CSS
#buttonUp {
-fx-graphic: url('up.png');
}
#buttonUp:pressed {
-fx-graphic: url("up_pressed.png");
}
I don't want a JavaFX code solution because I want to keep my styling in the fxml and css.
If this really isn't possible in FXML or css then I'd concede in doing it with java, in that case just leave a comment.
Image in FXML
When I try
<ImageView id="buttonDownImage" fitHeight="40.0" fitWidth="40.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="resources/down.png" />
</image>
</ImageView>
Then there follows an java.lang.IllegalArgumentException: Invalid URL: Invalid URL or resource not found while I'm sure the file is there (the css could find it) and the IntellJ autocomplete even suggested to start with resources in the url.
Not tested, but try using the CSS on the ImageView itself:
<Button
fx:id="buttonUp"
GridPane.columnIndex="0"
GridPane.rowIndex="0"
onAction="#buttonUp">
<graphic>
<ImageView id="buttonUpGraphic" fitWidth="10.0" pickOnBounds="true" preserveRatio="true">
</ImageView>
</graphic>
</Button>
and then in CSS:
#buttonUp #buttonUpGraphic {
-fx-image: url('up.png');
}
#buttonUp:pressed #buttonUpGraphic {
-fx-image: url('up_pressed.png');
}
If the pictures are too big, well, then resize them! Bad solution, but better than nothing.
I've solved the problem to bring an icon image into the header of a TitledPane like this:
<TitledPane fx:id="x2" text="Strukturen">
<graphic>
<ImageView >
<image>
<Image url="#/de/myres/icons/arrow-out.png" />
</image>
</ImageView>
</graphic>
<content>
<AnchorPane id="Content" minHeight="0.0" minWidth="0.0"
prefHeight="180.0" prefWidth="200.0" />
</content>
</TitledPane>
This looks like the following:
As you can see, it looks not very nice when the arrow for collapsing and this icon are shown beside each other directly.
How can i achieve to get the icon to the right side of the title bar?
You could leave the TitledPane text blank and set the icon node to be an HBox containing a Label on the left and an ImageView on the right.