我正在使用netbeans在Java fxml项目中创建GUI。我想使用bootstrap来设置gui的样式,但是我注意到javafx中的所有内容都以fx-为前缀。是否仍然有办法让 bootstrap 继续为我的项目工作? bootstrap 甚至可以与javafx一起使用吗?

最佳答案

JavaFX WebView内的呈现 bootstrap

Bootstrap是基于HTML的框架。

因此,要在JavaFX中使用Bootstrap,请使用JavaFX的HTML呈现组件WebView呈现Bootstrap HTML / CSS和JavaScript。

示例应用程序

示例应用程序执行Bootstrap和JavaFX UI的基本集成。

屏幕顶部的JavaFX按钮在WebView页面上导航,以呈现各种Bootstrap组件。

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ToolBar;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class BaseJump extends Application {
    private static final String BOOTSTRAP_PREFIX = "http://getbootstrap.com/components/#";

    private enum Anchor { progress, jumbotron, badges, pagination }

    @Override public void start(Stage stage) throws Exception {
        final WebView webview = new WebView();

        final ToolBar nav = new ToolBar();
        for (Anchor anchor : Anchor.values()) {
            nav.getItems().add(
                new NavButton(
                    anchor,
                    webview
                )
            );
        }

        VBox layout = new VBox();
        layout.getChildren().addAll(
            nav,
            webview
        );

        Scene scene = new Scene(layout);
        stage.setScene(scene);
        stage.show();
    }

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

    private class NavButton extends Button {
        public NavButton(final Anchor anchor, final WebView webview) {
            setText(anchor.toString());

            setOnAction(new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent event) {
                    webview.getEngine().load(BOOTSTRAP_PREFIX + anchor.toString());
                }
            });
        }
    }
}

其他无关紧要的问题



是。您可以通过WebEngine提供的w3c DOM API访问,以Java代码附加单击处理程序。有关详细信息,请参见WebEngine文档:



但是,对我来说,通常更容易使用JavaScript(特别是jQuery)而不是Java处理与w3c文档的接口(interface)。这是从Java代码a jQuery call to provide click handlers in a WebView发出的示例。

在Fextile上( bootstrap 查找本机JavaFX控件)



因为:
  • 除了CSS之外,还有更多要引导的内容,它是具有基于JavaScript的 Activity 控件和用户扩展机制的完全响应式UI框架。
  • WebView中的
  • 渲染将在JavaFX中渲染引导html,就像在网络浏览器中一样。因此,当您已经拥有可以完全正常工作的东西时,为什么还要移植呢?
  • 这是一个移动的目标,bootstrap.css干线项目从成百上千的开发人员中获得了很多贡献,如果使用自己开发的JavaFX端口,则很难跟上它的步伐,尽管如果您只选择保留一小部分的bootstrap功能,同步会更容易。

  • 尽管如此,仍然可以进行移植(如Philippe的答案中所述),这就是冈崎孝之在其Fextile project中创建的:“Twitter Bootstrap类似于JavaFX的UI框架。就像通过JavaFX CSS的Twitter Bootstrap一样,将主题应用于您的应用程序”。不要指望与HTML中的引导完全匹配,但是它应该允许不使用HTML的JavaFX控件与使用HTML中的引导所实现的外观非常接近。

    您还可以创建一个混合应用程序,其中UI的某些部分来自带有 bootstrap 的HTML,而某些则是使用Fextile从JavaFX控件呈现的。如果您在此答案中将这种方法应用于示例应用程序,则JavaFX按钮“progress”,“jumbotron”等将看起来像它们的HTML bootstrap对应物,从而使整个应用程序具有更加一致的外观。

    另外,请注意,此Foundation styles for JavaFX中宣布了Oracle JavaFX forum post的类似项目。该项目模仿了本机JavaFX控件的基本Foundation外观。对于某些用法,采用Foundation样式可能比Bootstrap样式更合适,因为该项目的范围小于Bootstrap(据我所知)。

    这是有关如何创建Foundation样式的问题解答(来自Oracle JavaFX论坛帖子)(以便有人可以相对了解扩展Fextile以获取其他Bootstrap样式功能所涉及的内容)。请注意,Q&A有点旧,从那时起,CSS analyzer已添加到SceneBuilder:

    10-05 22:12
    查看更多