JavaFX - MenuItem mit Icon

[delphiking1980]

Hallo zusammen,

ich beschäftige mich jetzt mal mit JavaFX (zum erstenmal) und wollte nun ein einfaches Menü erstellen mit Icons.

Das Menü war ja einfach auch die Grafik nur leider liegt der Text nun über der Grafik, in CSS würde ich das einfach mit einem Padding erledigen leider funzt das jedoch nicht
- ein -fx-padding:18; macht fast was ich will, nur leider wird das ja über alle gesetzt (top,left,bottom,right)
- ein -fx-padding: 0, 18, 0, 0; hat keine Auswirkung.

Meine FXML Datei:

[XML]
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox id="vbox" prefHeight="900" prefWidth="900" xmlns:fx="http://javafx.com/fxml"
fx:controller="MenuController">
<MenuBar fx:id="menuBar" onKeyPressed="#handleKeyInput">
<menus>
<Menu text="%datei">
<items>
<MenuItem text="%datei.neu" fx:id="neuItem"/>
<MenuItem text="%datei.oeffnen"/>
<MenuItem text="%datei.speichern"/>
<MenuItem text="%datei.speichernunter"/>
<SeparatorMenuItem />
<MenuItem text="%datei.beenden" onAction="#handleCloseApplication"/>
</items>
</Menu>
<Menu text="%bearbeiten">
<items>
<MenuItem text="%bearbeiten.ausschneiden"/>
<MenuItem text="%bearbeiten.kopieren"/>
<MenuItem text="%bearbeiten.einfuegen"/>
</items>
</Menu>
<Menu text="%extras">
<items>
<Menu text="%extras.sprache">
<items>
<MenuItem text="%extras.sprache.deutsch" fx:id="lang_de" onAction="#handleLanguage"/>
<MenuItem text="%extras.sprache.englisch" fx:id="lang_en" onAction="#handleLanguage"/>
</items>
</Menu>
</items>
</Menu>
<Menu text="%hilfe">
<items>
<MenuItem text="%hilfe.infoueber"/>
</items>
</Menu>
</menus>
</MenuBar>
</VBox>
[/XML]

Meine CSS Datei:

.root {
     -fx-background-image: url("icons/background.jpg");
}

#myLabel{
-fx-font: 24px "Serif";
}

.menu{
  -fx-font: 14px "Serif";
}

#neuItem{
	-fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
   -fx-background-image: url("icons/document-new.png");
   -fx-background-repeat:no-repeat;
   -fx-background-position: 5,center;
}

#neuItem .label{
  -fx-border-width:15;
}

#neuItem:focused .label {
    -fx-text-fill: #FFD175;
    -fx-font-weight:bold;
}

 

[dzim]

Dein Problem könnte sein, dass du nun mal den Background des MenuItem veränderst, anstatt das Icon in den dafür vorgesehenen Graphics-Node zu geben:
Im FXML z.B. via
[XML]
<graphic>
<ImageView fx:id="imageViewDownIcon">
<image>
<Image url="@../../res/down_neu.png"/>
</image>
</ImageView>
</graphic>
[/XML]

in der caspian.css (Teil vom Java7 "jfxrt.jar") findet man folgendes:

/*******************************************************************************
 *                                                                             *
 * MenuItem                                                                    *
 *                                                                             *
 ******************************************************************************/

.menu-item {
/*    -fx-skin: "com.sun.javafx.scene.control.skin.MenuItemSkin";*/
    -fx-background-color: transparent;
    -fx-padding: 0.333333em 0.41777em 0.333333em 0.41777em;  /* 4 5 4 5 */
}

.menu-item .left-container {
    -fx-padding: 0.458em 0.791em 0.458em 0.458em;
}

.menu-item .graphic-container {
    -fx-padding: 0em 0.333em 0em 0em;
}

.menu-item .label {
    -fx-padding: 0em 0.5em 0em 0em;
    -fx-text-fill: -fx-text-base-color;
}

.menu-item:disabled .label {
    -fx-opacity: -fx-disabled-opacity;
}

.menu-item:focused {
     -fx-background: -fx-accent;
     -fx-background-color: -fx-selection-bar;
     -fx-text-fill: -fx-selection-bar-text;
}

.menu-item:focused .label {
    -fx-text-fill: white;
}
.menu-item .right-container {
    -fx-padding: 0em 0em 0em 0.5em;
}

.menu-item:show-mnemonics .mnemonic-underline {
    -fx-stroke: -fx-text-fill;
} 

/*
 * ......................
 */

Ich denke, wenn du nun

.menu-item .graphic-container {
    -fx-padding: 0em 0.333em 0em 0em;
}

anpasst (".menu-item" --> "#neuItem") und da dein Bild lädst, könnte es auch klappen.