PopOver JavaFX control released with ControlsFX 8.0.3

PopOver JavaFX control released with ControlsFX 8.0.3

The PopOver control (formerly PopupEditor) has seen the light of day yesterday when it was released as part of ControlsFX 8.0.3. Go and check it out. Any input much appreciated.

13 Comments

  1. Hi,
    Thx for the popOver editor but I’am facing some issues on showing it correctly.
    The problem is that I can’t get The popOver to show correctly under my control !!

    This is the program I’ve been working on, it’s just a custom layout:

    Main.java

    import com.minedun6.org.AnimatedField;
    import com.minedun6.org.LabeledImage;
    import com.minedun6.org.StyledImage;
    import javafx.application.Application;
    import javafx.geometry.Insets;
    import javafx.geometry.Pos;
    import javafx.geometry.Rectangle2D;
    import javafx.scene.Cursor;
    import javafx.scene.Node;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.control.Label;
    import javafx.scene.image.Image;
    import javafx.scene.image.ImageView;
    import javafx.scene.input.MouseEvent;
    import javafx.scene.layout.BorderPane;
    import javafx.scene.layout.HBox;
    import javafx.scene.layout.Priority;
    import javafx.scene.layout.VBox;
    import javafx.scene.paint.Color;
    import javafx.stage.Screen;
    import javafx.stage.Stage;
    import javafx.util.Duration;
    import org.controlsfx.control.PopOver;
    import org.controlsfx.glyphfont.FontAwesome;
    import org.controlsfx.glyphfont.GlyphFont;
    import org.controlsfx.glyphfont.GlyphFontRegistry;

    /*
    * To change this license header, choose License Headers in Project Properties.
    * To change this template file, choose Tools | Templates
    * and open the template in the editor.
    */
    /**
    *
    * @author Minedun6
    */
    public class ApplicationLayout extends Application {

    GlyphFont font = GlyphFontRegistry.font(“FontAwesome”);

    private final Button btn_profile = new Button(“Profile”, font.fontColor(Color.WHITE).fontSize(20).create(FontAwesome.Glyph.USER_MD.toString()));
    private final Button btn_settigns = new Button(“Paramètres”, font.fontColor(Color.WHITE).fontSize(20).create(FontAwesome.Glyph.GEARS.toString()));
    private final Button btn_logou = new Button(“Paramètres”, font.fontColor(Color.WHITE).fontSize(20).create(FontAwesome.Glyph.SIGNOUT.toString()));

    private final StyledImage user_image = new StyledImage(new ImageView(new Image(getClass().getResource(“Icon-user.png”).toExternalForm(), 50, 50, true, true, true)), 10);

    private final Label main = new Label(“Menu Principal”);

    private VBox ver_menu;
    private HBox hor_menu;

    private PopOver pop;

    private final ImageView logo = new ImageView();
    private final AnimatedField search_field = new AnimatedField();

    private final Button btn_acceuil = new Button(“Acceuil”, font.fontSize(25).fontColor(Color.WHITE).create(FontAwesome.Glyph.HOME.toString()));
    private final Button btn_clients = new Button(“Clients”, FontAwesome.Glyph.GROUP.create());
    private final Button btn_actions = new Button(“Actions”, FontAwesome.Glyph.CODE.create());
    private final Button btn_comptes = new Button(“Comptes Bancaires”, FontAwesome.Glyph.MONEY.create());
    private final Button btn_settings = new Button(“Réglages”, FontAwesome.Glyph.GEAR.create());
    private final Button btn_logout = new Button(“Déconnexion”, FontAwesome.Glyph.SIGNOUT.create());

    @Override
    public void start(Stage stage) throws Exception {
    Rectangle2D rec = Screen.getPrimary().getVisualBounds();
    BorderPane layout = new BorderPane();
    Scene scene = new Scene(layout);
    stage.setScene(scene);
    scene.getStylesheets().add(getClass().getResource(“application-layout.css”).toExternalForm());
    ver_menu = createVerticalMenu();
    hor_menu = createHorizantalMenu();
    setControls(stage);
    createUserMenu();
    stage.setMaximized(true);
    layout.setTop(hor_menu);
    layout.setLeft(ver_menu);
    stage.setWidth(rec.getWidth());
    stage.setHeight(rec.getHeight());
    stage.setTitle(“Application Layout”);
    stage.show();
    }

    public static void main(String[] args) {
    launch(args);
    }

    private VBox createVerticalMenu() {
    VBox vmenu = new VBox(10);
    vmenu.getChildren().addAll(main, btn_acceuil, btn_comptes, btn_actions, btn_clients, btn_settings, btn_logout);
    vmenu.getStyleClass().add(“vertical_menu”);
    main.getStyleClass().add(“mainText”);
    return vmenu;
    }

    private HBox createHorizantalMenu() {
    HBox hmenu = new HBox(10);
    hmenu.getChildren().addAll(logo, createBigSpace(), search_field, user_image, createBigSpace());
    hmenu.setAlignment(Pos.CENTER);
    hmenu.getStyleClass().add(“horizantal_menu”);
    return hmenu;
    }

    private Node createBigSpace() {
    HBox box = new HBox();
    HBox.setHgrow(box, Priority.ALWAYS);
    return box;
    }

    private Node createSmallSpace() {
    HBox box = new HBox();
    HBox.setHgrow(box, Priority.SOMETIMES);
    return box;
    }

    private void setControls(Stage stage) {
    btn_acceuil.setMaxWidth(Double.MAX_VALUE);
    btn_actions.setMaxWidth(Double.MAX_VALUE);
    btn_comptes.setMaxWidth(Double.MAX_VALUE);
    btn_logout.setMaxWidth(Double.MAX_VALUE);
    btn_settings.setMaxWidth(Double.MAX_VALUE);
    btn_clients.setMaxWidth(Double.MAX_VALUE);
    btn_profile.setMaxWidth(Double.MAX_VALUE);
    btn_settigns.setMaxWidth(Double.MAX_VALUE);
    btn_logou.setMaxWidth(Double.MAX_VALUE);
    ver_menu.setPrefWidth(500);
    ver_menu.prefWidthProperty().bind(stage.widthProperty().divide(7));
    hor_menu.setPrefHeight(50);
    hor_menu.prefHeightProperty().bind(stage.heightProperty().divide(12));
    }

    private void createUserMenu() {
    VBox box = new VBox(10, btn_profile, btn_settigns, btn_logou);
    pop = new PopOver(box);
    pop.setHideOnEscape(true);
    pop.setArrowLocation(PopOver.ArrowLocation.TOP_CENTER);
    pop.setId(“popover”);
    pop.setAutoFix(true);
    user_image.setCursor(Cursor.HAND);
    user_image.setOnMouseEntered((MouseEvent t) -> {
    });
    }

    }

    StyledImage.java

    /*
    * To change this license header, choose License Headers in Project Properties.
    * To change this template file, choose Tools | Templates
    * and open the template in the editor.
    */
    package com.minedun6.org;

    import javafx.scene.image.ImageView;
    import javafx.scene.layout.StackPane;
    import javafx.scene.paint.Color;
    import javafx.scene.shape.Circle;

    /**
    *
    * @author Minedun6
    */
    public class StyledImage extends StackPane {

    private ImageView imageview = new ImageView();
    private final Circle cadre = new Circle(25, Color.FIREBRICK);

    public StyledImage(ImageView img, int radius) {
    this.imageview = img;
    cadre.setStrokeWidth(5);
    getChildren().addAll(cadre, imageview);

    }

    public ImageView getView(){
    return imageview;
    }

    }

    application-layout.css

    .horizantal_menu{
    -fx-background-color: rgba(44, 62, 80,1.0);
    -fx-opacity:0.9;
    }

    .vertical_menu{
    -fx-background-color: rgba(44, 62, 80,1.0);
    -fx-opacity:0.9;
    -fx-alignment: BASELINE_LEFT;
    }

    .vertical_menu .button{
    -fx-background-color: transparent, transparent, transparent, transparent;
    -fx-padding: 10 5 10 5;
    -fx-font-size:15;
    -fx-font-weight: bold;
    -fx-alignment: BASELINE_LEFT;
    -fx-graphic-text-gap:5;
    -fx-content-display:left;
    -fx-opacity: 0.9;
    -fx-text-fill: #ffffff;
    -fx-font-family: “Tahoma”;
    }

    .vertical_menu .button:hover{
    -fx-background-color: rgba(26, 188, 156,1.0);
    -fx-cursor: hand;
    -fx-opacity: 1;
    -fx-alignment: BASELINE_CENTER;
    }

    .mainText{
    -fx-font-size: 25;
    -fx-font-weight: BOLD;
    -fx-effect: innershadow(three-pass-box, #000, 1, .5, 1, 1);
    -fx-text-fill: #ffffff;
    -fx-underline: true;
    }

    .popover{
    -fx-padding: 3 0 3 0;
    -fx-opacity: 0.5;
    }

    .popover .button{
    -fx-effect: innershadow(one-pass-box, #fff, 2, 0 ,1 ,1);
    -fx-background-color: transparent;
    -fx-padding: 5 3 5 3;
    -fx-text-fill: #ccc;
    -fx-font-size: 15;
    -fx-content-display: left;
    -fx-graphic-text-gap:5;
    -fx-content-display:left;
    }

    .popover .button:hover{
    -fx-background-color:#3333ff;
    }

    I hope it’s not too much of a code.

    All I want is that the popover shows correctly under the styledimage.

    and thx again

  2. I am sorry for the late reply but I was on vacation until today. When I run your app (after fixing it because of missing classes and resource files) I see a window show up, which rapidly minimizes itself until it disappears. Is that the problem you are facing, too?

  3. Still the same for me. A window pops up and then it minimizes itself until its invisible. No idea what is going on here. Can you add a screenshot of the problem? What do you mean by “not correctly” showing under your control?

  4. The controls in your window use coordinates relative to your window, the popover needs the coordinates relative to the screen. So your button might be located at x=100,y=100 inside the window but on the screen the button is actually at x=500,y=700.

    You can call control.localToScreen(0,0) to calculate the screen coordinates of the upper left corner of your control. Then you add half the width and the height of your control. Pass that to the show() method of the PopOver.

    The next release of PopOver hopefully has a utility method on it where you can simply say popOver.show(myControl).

  5. like I said, do yu mind showing me an example ??

    pop.show(user_image, user_image.localToScreen(0, 0).getX() + user_image.getWidth() / 2, user_image.localToScreen(0, 0).getY() + user_image.getHeight(), Duration.millis(500));

    for some damn reason, the X value does not go beyond a certain value, I don’t know why !!
    Plz help ^^

  6. Hey again,

    Here’s the ScreenShot, as yu can see, the pop shows perfectly on the Y Axis but as for the X axis, not the same ^^

    Have a good day.

  7. I think this is the autofix kicking in.

    The PopOver does not fit below the round button anymore. Use the arrow location TOP_RIGHT or disable autofix.

    Dirk

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s