Separate graphics?

[dlemmermann]

Just noticed in the ListItemSkin class that you are doing the layout code yourself. Why didn't you set the graphic node directly on the label inside the skin. It has all those layout options, too, right? The "textfield" is of type Label, which subclasses Labeled, which manages a graphic node.

[edvin]

That was actually my first implementation, and it might be the correct one :)

I ran into a problem when I added a FontAwesomeIconView as the graphic node on the labels. Because some of the icons have different width, the label text would not line up nicely in a vertical ListMenu. I could not for the life of me manage to set a fixed width on every icon in the menu with css, so I created a separate graphic node that can be styled with the custom -fx-graphic-fixed-size css property. The skin makes sure the graphic node gets the width specified in the css property, even if the image itself is smaller. Setting a larger value for the css property will increase the padding between the icon and the label text, and it will be the same for all ListItems.

I suppose it is possible to target the graphic node with css and make them all the same width (without stretching the icon), but I couldn't figure out how. Do you know? :)

[edvin]

Here is a small sample that shows the issue (requires FontAwesomeFX on the classpath)

package tornadofx.control.test;

import de.jensd.fx.glyphs.fontawesome.FontAwesomeIcon;
import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class LabelDisalignment extends Application {
    public void start(Stage primaryStage) throws Exception {
        VBox root = new VBox(
            new Button("Contacts", icon(FontAwesomeIcon.USER)),
            new Button("Projects", icon(FontAwesomeIcon.SUITCASE)),
            new Button("Settings", icon(FontAwesomeIcon.COG))
        );

        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }

    private FontAwesomeIconView icon(FontAwesomeIcon icon) {
        FontAwesomeIconView iconView = new FontAwesomeIconView(icon);
        iconView.setGlyphSize(25);
        return iconView;
    }
}

Since the suitcase icon is larger than the other two, the text doesn't line up. Adding padding between the icon and the label is an individual affair, so that doesn't solve the problem. Making the icon take up some predefined width would solve the problem, so long as it doesn't stretch the icon, but I don't know how/if that's possible.

[edvin]

@dlemmermann Do you know if it's possible to achieve the same result I illustrated above without the separate graphics node?