【JAVAFX-HUD2未来世界科技感十足UI】

简介
HUD界面本来科技感就非常好,可惜网上的资料太少,psd素材,heml模板设计都没有太理想的.至于效果非常好的只是网络图片而已,尤其是psd的也很少.至于界面实现的,key说no ,没有.今天给大家带来一个javafx 实现的UI界面.效果展示
现来看看效果吧,哈哈哈:

效果怎么样.

核心代码实现
- 1. 核心组件[MenuComputer]

import com.liangchao.futureworld.entity.MenuContent;
import com.liangchao.futureworld.frame.App;
import com.liangchao.futureworld.frame.R;
import com.liangchao.futureworld.utils.Logs;
import com.liangchao.futureworld.utils.RS;
import com.liangchao.futureworld.utils.javafx.FxUtil;
import com.liangchao.futureworld.utils.javafx.JfxExtends;
import com.liangchao.futureworld.utils.javafx.ui.MenuAssemblyHandle;
import de.felixroske.jfxsupport.AbstractFxmlView;
import de.jensd.fx.glyphs.GlyphIcons;
import de.jensd.fx.glyphs.fontawesome.FontAwesomeIcon;
import javafx.event.Event;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.control.Accordion;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.*;

import java.util.List;


public class MenuComputer {
    private static final String            LEFT_ROOT_NAME = "leftRoot"; //左侧根容器
    private              Pane              pane; // 菜单主容器
    private              BorderPane        borderPane; // 内容根容器
    private              List list; // 菜单数据源
    private              Object            source; // 加载FXML 容器数据
    private              Object            chilerSource; // 加载FXML 容器数据 子菜单面板

    
    public MenuComputer(Pane pane, List list, BorderPane borderPane) {
        this.pane       = pane;
        this.list       = list;
        this.borderPane = borderPane;

        initNodes();
    }

    
    private void action(Pane box, MenuContent menu, Pane parent) {
        if (menu == null || menu.getMethod() == null) {
            return;
        }

        this.select(parent, box);

        this.execute(menu.getHandleClassBeanName(), menu.getMethod(), null);
    }

    
    public void binds() {
        if (list == null || list.size() == 0 || pane == null || borderPane == null) {
            return;
        }

        // 创建菜单列表
        VBox singleMenuBox = new VBox();
        singleMenuBox.getStyleClass().add("singleMenuBox");

        Accordion  accordion  = new Accordion();
        ScrollPane scrollPane = new ScrollPane(new VBox(accordion, singleMenuBox));
        scrollPane.setMinWidth(0);
        scrollPane.getStyleClass().addAll(LEFT_ROOT_NAME, "scroll-vertical");
        scrollPane.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
        this.pane.getChildren().add(scrollPane);


        AnchorPane anchorPane;
        TitledPane titledPane;
        int        ii = 0;// 单个菜单索引

        //添加弧形菜单
        for (int i = 0; i < list.size(); i++) {
            MenuContent parent = list.get(i);
            // 子节点 有子节点容器
            if (parent.getNode() != null) {
                VBox vbox = new VBox();
                vbox.getStyleClass().add("titledPaneVbox");
                vbox.prefWidthProperty().bind(scrollPane.widthProperty());
                anchorPane = new AnchorPane(vbox);
                anchorPane.getStyleClass().add("menuBoxPane");

                titledPane = new TitledPane();
                titledPane.setContent(anchorPane);
                titledPane.setText(parent.getName());
                accordion.getPanes().add(titledPane);

                for (int j = 0; j < parent.getNode().size(); j++) {
                    MenuContent menuContent = parent.getNode().get(j);
                    this.menu(vbox, menuContent, j);
                }
            }
            // 单个节点
            else {
                this.menu(singleMenuBox, parent, ii);
                ii++;
            }
        }
    }

    
    public void menu(VBox vbox, MenuContent menuContent, int j) {
        Enum ficon = menuContent.getIcon();
        Node                       icon  = R.icon(ficon != null ? ficon : FontAwesomeIcon.CUBE);
        icon.getStyleClass().add("textIcon");

        // 菜单名称
        HBox hboxlable = new HBox(new Label(menuContent.getName()));
        hboxlable.setAlignment(Pos.CENTER_LEFT);
        HBox.setHgrow(hboxlable, Priority.ALWAYS);

        // 序列号
        HBox indexbox = new HBox(new Label(j < 9 ? "0" + (j + 1) : (j + 1) + ""));
        indexbox.getStyleClass().add("indexbox");
        indexbox.setAlignment(Pos.CENTER_LEFT);

        // 右侧标记容器
        HBox rhbox = new HBox(new Label(RS.RM.nextInt(1000) + ""));
        rhbox.getStyleClass().add("rhbox");
        rhbox.setAlignment(Pos.CENTER_RIGHT);

        HBox hbox = new HBox();
        hbox.setAlignment(Pos.CENTER_LEFT);
        hbox.getStyleClass().add("menuHbox");
        hbox.getChildren().add(indexbox);
        hbox.getChildren().add(icon);
        hbox.getChildren().add(hboxlable);
        hbox.getChildren().add(rhbox);
        vbox.getChildren().add(hbox);
        HBox.setHgrow(hboxlable, Priority.ALWAYS);
        hbox.setOnMouseClicked(event -> {

            //添加事件
            switch (menuContent.getTypes()) {
                case FXML:
                    fxml(hbox, vbox, borderPane, menuContent);
                    break;
                case ACTION:
                    action(hbox, menuContent, pane);
                    break;
                case link:
                    link(hbox, menuContent, pane, false);
                    break;
                case MENU_LIST:
                    //只存在主菜单->子菜单两层数据
                    throw new RuntimeException("子菜单数据信息无效,只存在主菜单->子菜单两层数据");
            }
        });
    }

    
    public void bindsContent(Object bean, boolean shrink, Object... openParam) {
        JfxExtends.beforcHandle(source);

        AbstractFxmlView fxmlView = null;
        // class 参数
        if (bean instanceof Class) {
            fxmlView = (AbstractFxmlView) App.getBean((Class) bean);
        }
        // bean name参数
        else {
            fxmlView = (AbstractFxmlView) App.getBean(bean.toString());
        }

        if (fxmlView != null) {
            // 添加到容器面板
            borderPane.setCenter((fxmlView.getView()));
            FxUtil.loadingStyleSheel(fxmlView);

            // 更新宽度
            if (fxmlView.getView() instanceof Pane) {
                Pane pane = (Pane) fxmlView.getView();
                // 指定根容器样式定义
                pane.getStyleClass().add(RS.PAGE_STYLE_CLASS_KEY);
                FxUtil.initAnchorPane(pane, 20d);
                //设置边距
                pane.setPadding(new Insets(5));
            }

            JfxExtends.afterHandle(fxmlView, openParam);
            source = fxmlView;
        }
    }

    
    public void bindsContent(Object bean, Region regionPane, Object openParam) {
        JfxExtends.beforcHandle(source);

        AbstractFxmlView fxmlView = null;
        // class 参数
        if (bean instanceof Class) {
            fxmlView = (AbstractFxmlView) App.getBean((Class) bean);
        }
        // bean name参数
        else {
            fxmlView = (AbstractFxmlView) App.getBean(bean.toString());
        }

        if (fxmlView != null) {
            Node bodyNode = null;
            if (fxmlView.getPresenter() instanceof MenuAssemblyHandle) {
                Logs.msg(fxmlView.getView() + " MenuAssemblyHandle 容器处理完成.");

                MenuAssembly menuAssembly = new MenuAssembly();
                // 设置调用控制器
                menuAssembly.setController(fxmlView.getPresenter());
                // 绑定菜单
                menuAssembly.addMenus(((MenuAssemblyHandle) fxmlView.getPresenter()).bindMenus());
                // 给控制器设置当前组件对象
                ((MenuAssemblyHandle) fxmlView.getPresenter()).drive(menuAssembly);

                // 加一个AnchorPane外壳
                VBox       box  = new VBox(menuAssembly.getNode(), fxmlView.getView());
                AnchorPane temp = new AnchorPane();
                temp.getChildren().add(box);
                FxUtil.initAnchorPane(box, 0d, 0d, 0d, 0d);

                bodyNode = temp;
            } else {
                bodyNode = fxmlView.getView();
            }

            // 添加到容器面板
            if (regionPane instanceof BorderPane) {
                ((BorderPane) regionPane).setCenter(bodyNode);
            } else if (regionPane instanceof ScrollPane) {
                ((ScrollPane) regionPane).setContent(bodyNode);
            } else if (regionPane instanceof Pane) {
                ((Pane) regionPane).getChildren().clear();
                ((Pane) regionPane).getChildren().add(bodyNode);
            } else {
                throw new RuntimeException("regionPane is not ScrollPane or Pane , not is add");
            }

            FxUtil.loadingStyleSheel(fxmlView);
            // 更新宽度
            if (bodyNode instanceof Pane) {
                Pane pane = (Pane) bodyNode;
                // 指定根容器样式定义
                pane.getStyleClass().add(RS.PAGE_STYLE_CLASS_KEY);
                FxUtil.initAnchorPane(pane, 0d);
                //设置边距
                // pane.setPadding(new Insets(5));

                //高度
                pane.prefWidthProperty().bind(regionPane.widthProperty());
                pane.prefHeightProperty().bind(regionPane.heightProperty());

                // 当前节点下第一级节点pane样式
                if (pane.getChildren().size() > 0) {
                    pane.getChildren().get(0).getStyleClass().add(RS.CONTENT_PANES);
                }
            }

            JfxExtends.afterHandle(fxmlView, openParam);
            source = fxmlView;
        }
    }

    
    public void bindContent(Object fxml, Object openParam) {
        this.bindsContent(fxml, borderPane, openParam);
    }

    
    public void cleanContent() {
        JfxExtends.beforcHandle(chilerSource);
        JfxExtends.beforcHandle(source);

        borderPane.setCenter(null);
        source       = null;
        chilerSource = null;
    }

    
    public void execute(String beanName, String methodName, Event event) {
        try {
            if (methodName != null && beanName != null) {
                ExecuteHandle.execute(App.getBean(beanName), methodName, event);
            } else if (methodName != null && beanName == null) {
                ExecuteHandle.execute(methodName, event);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    
    private void fxml(Pane box, MenuContent menu, Pane parent) {
        if (menu == null || menu.getData() == null) {
            return;
        }

        this.select(parent, box);

        // 设置数据内容
        this.bindsContent(menu.getData(), true);
    }

    
    public void fxml(Pane box, Pane parent, Pane rightBody, MenuContent menu) {
        if (menu == null || menu.getData() == null || parent == null || rightBody == null) {
            return;
        }

        this.select(parent, box);

        // 设置数据内容
        this.bindsContent(menu.getData(), rightBody, null);
    }

    
    private void initNodes() {
        //只清理菜单
        this.pane.getChildren().clear();

    }

    
    private void link(Pane box, MenuContent menu, Pane parent, boolean isChiler) {
        if (menu == null || menu.getData() == null) {
            return;
        }

        this.select(parent, box);
        JfxExtends.beforcHandle(isChiler ? chilerSource : source);

        // 浏览器专用视图 InternetExplorerUI
        //        bindsContent(InternetExplorerUI.class, false, menu.getData());
    }

    
    private void list(Pane box, MenuContent menu, Pane parent) {
        if (menu == null) {
            return;
        }

        this.select(parent, box);

        //创建右侧子菜单
        // bindChilerMenus(menu.getNode(), chilerPaneBox);
    }

    
    public void select(Pane select) {
        if (pane == null || select == null) {
            return;
        }

        for (Node node : this.pane.getChildren()) {
            if (node instanceof Pane) {
                node.getStyleClass().remove(RS.STYLE_CLASS_SELECT_KEY);

                //选中
                if (node.equals(select)) {
                    node.getStyleClass().add(RS.STYLE_CLASS_SELECT_KEY);
                }
            }
        }
    }

    
    public void select(Pane pane, Pane select) {
        if (pane == null || select == null) {
            return;
        }

        for (Node node : pane.getChildren()) {
            if (node instanceof Pane) {
                node.getStyleClass().remove(RS.STYLE_CLASS_SELECT_KEY);
                //选中
                if (node.equals(select)) {
                    node.getStyleClass().add(RS.STYLE_CLASS_SELECT_KEY);
                }
            }
        }
    }
}

 - 2. 核心组件[MenuContent]

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import lombok.*;

import java.util.linkedList;
import java.util.List;


@Setter
@Getter
@ToString
@NoArgsConstructor
@AllArgsConstructor
@JsonIgnoreProperties(value = {"hibernateLazyInitializer", "handler"})
public class MenuContent extends FontIcon {

    private Integer  id; //ID
    private String   name; //菜单名称
    private MenuType types;//菜单类型
    private String   method; //执行方法名称
    private String   handleClassBeanName;//执行方法类Bean名称
    private String   data;//数据对象
    private Object   tip;//子菜单右侧数据
    private String   explains;

    private List node = new linkedList<>();//子菜单组

    public MenuContent(Integer id, String name, String icon, MenuType types, String method, String handleClassBeanName, String data, Object tip, String explains, List node) {
        this.id                  = id;
        this.name                = name;
        this.icon                = icon;
        this.types               = types;
        this.method              = method;
        this.handleClassBeanName = handleClassBeanName;
        this.data                = data;
        this.tip                 = tip;
        this.explains            = explains;
        this.node                = node;
    }

    
    public MenuContent(Integer id, String name, Object icon, MenuType types, String method, String handleClassBeanName, String data, Object tip, String explains, List node) {
        this.id                  = id;
        this.name                = name;
        this.types               = types;
        this.method              = method;
        this.handleClassBeanName = handleClassBeanName;
        this.data                = data;
        this.tip                 = tip;
        this.explains            = explains;
        this.node                = node;

        this.setIcon(icon);
    }
}