CODEWITHSUNDEEP
cssjavafxfxml
Piotr
Piotr

Reputation: 649

Text on java fx menu bar

I'm writing app using JavaFx with fxml file for view. How can I add text on right side of menu (like on attached picture). Scene Builder allows me to add only Menu, but then the text is on the left (where the white box is) and I must disable this menu (because it is not menu). I also wanted to change the style of this menu, but it is not working. It is possible for only one menu?.

My fxml:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>

<MenuBar xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="pl.controler.MainMenuController">
    <menus>
        <Menu fx:id="fileMenu" mnemonicParsing="false" text="%file">
            <items>
                <MenuItem fx:id="closeMenuItem" mnemonicParsing="false" text="%close" />
            </items>
        </Menu>
        <Menu fx:id="menuHelp" mnemonicParsing="false" text="%help">
            <items>
                <MenuItem fx:id="aboutMenuItem" mnemonicParsing="false" text="%about.title" />
            </items>
        </Menu>
      <Menu fx:id="loginName" mnemonicParsing="false" style="font-weight: bold; color: black;">
        <items>
          <MenuItem mnemonicParsing="false" text="Action 1" />
        </items>
      </Menu>
    </menus>
</MenuBar>

Attachment:

enter image description here

Upvotes: 2

Views: 4172

Answers (1)

James_D
James_D

Reputation: 209418

If you want just text at the right end, you can use a Label. Wrap the MenuBar and the Label in, for example, an AnchorPane to get the desired layout:

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

<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.Label?>

<AnchorPane xmlns:fx="http://javafx.com/fxml/1">
    <MenuBar AnchorPane.leftAnchor="0" AnchorPane.topAnchor="0">
        <Menu text="File">
            <items>
                <MenuItem text="Close"/>
            </items>
        </Menu>
        <Menu text="Help">
            <items>
                <MenuItem text="About"/>
            </items>
        </Menu>
    </MenuBar>
    <Label text="Some text" AnchorPane.rightAnchor="0" AnchorPane.topAnchor="0" AnchorPane.bottomAnchor="0" 
        style="-fx-font-weight: bold; -fx-text-fill: black; " />
</AnchorPane>

This gives the following:

enter image description here

You may want to experiment with some CSS to get the style the way you want, but this will position everything the way you need it. A very quick way to style it so that the AnchorPane is styled like the menu bar is just to add styleClass="menu-bar" to the AnchorPane element:

<AnchorPane xmlns:fx="http://javafx.com/fxml/1" styleClass="menu-bar">

Which now gives

enter image description here

For (maybe) a more robust approach, add id="menu-bar-container" to the AnchorPane and id="menu-bar" to the menu bar. Then the following external CSS will move the default menu bar styles to the anchor pane:

#menu-bar {
    -fx-padding: 0 ;
    -fx-background-color: transparent ;
    -fx-background-insets: 0 ;
    -fx-background-radius: 0 ;
}

#menu-bar-container {
    -fx-padding: 0.0em 0.666667em 0.0em 0.666667em; /* 0 8 0 8 */
    -fx-background-color:
        linear-gradient(to bottom, derive(-fx-base,75%) 0%, -fx-outer-border 90%),
        linear-gradient(to bottom, derive(-fx-base,46.9%) 2%, derive(-fx-base,-2.1%) 95%);
    -fx-background-insets: 0 0 0 0, 1 0 1 0;
    -fx-background-radius: 0, 0 ;
}

Upvotes: 3

Related Questions