css - 使用 JavaFX Bootstrap

Question

我正在使用 netbeans 在 java fxml 元素中创建一个 GUI。我想使用 bootstrap 来设置 gui 的样式，但我注意到 javafx 中的所有内容都以 fx- 为前缀。仍然有办法让 bootstrap 为我的元素工作吗？ bootstrap 甚至可以与 javafx 一起使用吗？

Answer 1

在 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());
                }
            });
        }
    }
}

附加的、稍微不相关的问题

Is it possible to intercept button click events from a web view?

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

Access to Document Model

The WebEngine objects create and manage a Document Object Model (DOM) for their Web pages. The model can be accessed and modified using Java DOM Core classes. The getDocument() method provides access to the root of the model. Additionally DOM Event specification is supported to define event handlers in Java code.

The following example attaches a Java event listener to an element of a Web page. Clicking on the element causes the application to exit:

EventListener listener = new EventListener() {
    public void handleEvent(Event ev) {
        Platform.exit();
    }
};

Document doc = webEngine.getDocument();
Element el = doc.getElementById("exit-app");
((EventTarget) el).addEventListener("click", listener, false);

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

在 Fextile 上(Bootstrap 查找 native JavaFX 控件)

Why not just port bootstrap.css to conform to the javafx naming conventions?

因为:

• bootstrap 不仅仅是 css，它是一个完整的响应式 UI 框架，具有基于 JavaScript 的事件控件和用户扩展机制。
• 在 WebView 中呈现将呈现 JavaFX 中的 Bootstrap html，就好像它在 Web 浏览器中一样，那么当您已经拥有无需额外努力即可完美运行的东西时，为什么还要移植呢？
• 这是一个不断变化的目标，bootstrap.css 主干元素得到了数百名开发人员的许多贡献，如果您只选择了一小部分 Bootstrap 功能，则很难使用本地开发的 JavaFX 端口跟上它保持同步会更容易。

仍然可以进行移植(如 Philippe 的回答中所链接)，这就是 Takayuki Okazaki 在他的 Fextile project 中创建的内容。 :“Twitter Bootstrap 类似于 JavaFX 的 UI 框架。将主题应用到您的应用程序，就像通​​过 JavaFX CSS 的 Twitter Bootstrap 一样。”。不要指望与 HTML 中的 Bootstrap 完全匹配，但它应该允许不使用 HTML 的 JavaFX 控件非常接近于使用 HTML 中的 Bootstrap 实现的效果。

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

另外，请注意 Foundation styles for JavaFX 有一个类似的元素，如本公告所述Oracle JavaFX forum post .该元素模仿基本的 Foundation寻找 native JavaFX 控件。对于某些用途，采用 Foundation 样式可能比 Bootstrap 样式更合适，因为元素的范围比 Bootstrap 小(据我所知)。

这是关于如何创建 Foundation 样式的问答(来自 Oracle JavaFX 论坛帖子)(因此有人可以相对了解扩展 Fextile 以获得额外的 Bootstrap 样式功能所涉及的内容)。请注意，问答有点旧，从那时起 CSS analyzer已添加到 SceneBuilder:

1) How difficult was this work?

No at all: the whole experience was very pleasant and very easy to do. This is my first JavaFX app (a map style editor with real time preview)

2) Was it very time consuming?

No: using the preview ScenceBuilder 1.1 the styles are updated on the fly - the SceneBuilder could do with a built in CSS editor, but that's only minor: the workflow was quite simple anyway

3) For a simple port do you think that you need any design skills at all, or could anybody have really done this who knows a bit of css/html/javafx?

Anyone can do this: my background is server side code - I don't do much in the way of front ends - I know JS and HTML very well but my CSS leaves a lot to me desired: so basically if I can do it ...

4) Was the difference between the javafx css syntax and the html css syntax a major pain or not really an issue?

Once I got used to it, made no difference although I do keep forgetting to add '-fx-' and the -fx-text-fill I always type as -fx-text-color ...

5) Similarly did a lack of a one-to-one correspondence between html document tags (e.g. the header tags) and JavaFX complicate this?

No

6) Will the upcoming rich text support in JavaFX 8 simplify (or make possible) more of these kinds of ports?

I need to have a look at this: as I said I'm a complete beginner with JavaFX so I'm still catching up on the current implementation.

The bootstrap styles would be really nice: a lot of people who I've showed the app to are quite amazed when I tell them its Java and not an embedded web app.