CSS 使用 JavaFX 引导程序

Bootstrap with JavaFX

提问by jamespick

I am creating a GUI in a java fxml project using netbeans. I wanted to use bootstrap to style the gui but I have noticed that everything in javafx is prefixed with fx-. Is there still a way to get bootstrap to work anyway for my project? Does bootstrap even work with javafx?

我正在使用 netbeans 在 java fxml 项目中创建 GUI。我想使用引导程序来设置 gui 的样式，但我注意到 javafx 中的所有内容都以fx-. 有没有办法让引导程序无论如何都能为我的项目工作？bootstrap 甚至可以与 javafx 一起使用吗？

回答by jewelsea

Rendering Bootstrap inside a JavaFX WebView

在 JavaFX WebView 中渲染 Bootstrap

Bootstrap is an HTML based framework.

Bootstrap 是一个基于 HTML 的框架。

So to use Bootstrap in JavaFX, use JavaFX's HTML rendering component WebViewto render Bootstrap HTML/CSS and JavaScript.

所以要在JavaFX中使用Bootstrap，使用JavaFX的HTML渲染组件WebView来渲染Bootstrap HTML/CSS和JavaScript。

Sample Application

示例应用程序

Sample application performing a basic integration of Bootstrap and a JavaFX UI.

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

The JavaFX buttons on the top of the screen navigate around a WebView page to render different kinds of Bootstrap components.

屏幕顶部的 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());
                }
            });
        }
    }
}

Additional, slightly unrelated question

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

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

是否可以从 Web 视图中拦截按钮单击事件？

Yes. You can attach click handlers in Java code through the w3c DOM API access WebEngine provides. See the WebEngine documentation for details:

是的。您可以通过 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);

访问文档模型

WebEngine 对象为其网页创建和管理文档对象模型 (DOM)。可以使用 Java DOM Core 类访问和修改模型。getDocument() 方法提供对模型根的访问。此外，DOM 事件规范支持在 Java 代码中定义事件处理程序。

以下示例将 Java 事件侦听器附加到网页元素。单击元素会导致应用程序退出：

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);

However, for me often is is easier to handle interfacing with w3c documents using JavaScript (specifically jQuery), rather than Java. Here is an example of issuing from Java code, a jQuery call to provide click handlers in a WebView.

但是，对我来说，使用 JavaScript（特别是 jQuery）而不是 Java 来处理与 w3c 文档的接口通常更容易。下面是一个从 Java 代码发出的示例，这是一个jQuery 调用，用于在 WebView 中提供单击处理程序。

On Fextile (Bootstrap look for native JavaFX controls)

在 Fextile（引导程序查找本机 JavaFX 控件）

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

为什么不只是移植 bootstrap.css 以符合 javafx 命名约定？

Because:

因为：

• There is more to bootstrap than just the css, it's a full responsive UI framework with JavaScript based active controls and a user extension mechanism.
• Rendering in WebView will render the bootstrap html in JavaFX exactly the same as if it were in a web browser, so why port when you already have something which will work perfectly with no extra effort?
• It's a moving target, the bootstrap.css trunk project gets many contributions from hundreds of developers, it would be difficult to keep up with that with a home-grown JavaFX port, though if you selected just a smaller subset of bootstrap features keeping in sync would be easier.

• 引导程序不仅仅是 css，它是一个完整的响应式 UI 框架，具有基于 JavaScript 的活动控件和用户扩展机制。
• 在 WebView 中渲染将使 JavaFX 中的引导程序 html 与在 Web 浏览器中完全相同，那么当您已经拥有无需额外工作即可完美运行的东西时，为什么还要移植？
• 这是一个不断变化的目标，bootstrap.css 主干项目得到了数百名开发人员的许多贡献，但如果您只选择保持同步的引导程序功能的一小部分子集，则很难用自己开发的 JavaFX 端口跟上这一点会更容易。

Still, it is possible to do the port (as linked in Philippe's answer), and that is what Takayuki Okazaki has created in his Fextile project: "Twitter Bootstrap like UI framework for JavaFX. Apply themes to your application just like Twitter Bootstrap via JavaFX CSS.". Don't expect an exact match with bootstrap in HTML, but it should allow your JavaFX controls which don't use HTML to have a pretty close look to what you would achieve with bootstrap in HTML.

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

You could also create a hybrid application, where some parts of the UI are from HTML with bootstrap and some are rendered from JavaFX controls using Fextile. If you applied such an approach to the sample application in this answer, then the JavaFX buttons "progress", "jumbotron", etc. would look like their HTML bootstrap counterparts, giving the whole application a more consistent look and feel.

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

Also, note that there is a similar project for Foundation styles for JavaFX, as announced in this Oracle JavaFX forum post. This project mimics the basic Foundationlook for native JavaFX controls. For some usages, adopting Foundation styles may be more appropriate than Bootstrap styles as the project is smaller in scope than Bootstrap (as far as I know).

另请注意，正如Oracle JavaFX 论坛帖子中所宣布的，JavaFX 的基础样式也有一个类似的项目。这个项目模仿了原生 JavaFX 控件的基本Foundation外观。对于某些用途，采用 Foundation 样式可能比 Bootstrap 样式更合适，因为该项目的范围比 Bootstrap 小（据我所知）。

Here is a Q&A (from the Oracle JavaFX forum post) on how to creating the Foundation style (so somebody can get a relative idea of what is involved for extending Fextile for additional Bootstrap style features). Note that the Q&A is a little old and since then a CSS analyzerhas been added to SceneBuilder:

这是关于如何创建 Foundation 样式的问答（来自 Oracle JavaFX 论坛帖子）（因此有人可以相对了解扩展 Fextile 以获取其他 Bootstrap 样式功能所涉及的内容）。请注意，问答有点旧，从那时起，SceneBuilder 中添加了CSS 分析器：

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.

1）这项工作有多难？

完全没有：整个体验非常愉快，而且很容易做到。这是我的第一个 JavaFX 应用程序（具有实时预览功能的地图样式编辑器）

2) 是不是很费时间？

否：使用预览版 ScenceBuilder 1.1，样式会即时更新 - SceneBuilder 可以使用内置的 CSS 编辑器来完成，但这只是次要：工作流程无论如何都非常简单

3）对于一个简单的移植，你认为你根本不需要任何设计技巧，或者知道一点css/html/javafx的人真的可以做到这一点吗？

任何人都可以做到这一点：我的背景是服务器端代码——我在前端方面做得不多——我非常了解 JS 和 HTML，但我的 CSS 给我留下了很多想要的东西：所以基本上如果我能做到的话。 ..

4) javafx css 语法和 html css 语法之间的区别是一个主要的问题还是不是一个真正的问题？

一旦我习惯了它，虽然我总是忘记添加“-fx-”和 -fx-text-fill 我总是输入 -fx-text-color ...

5) 同样，在 html 文档标签（例如标题标签）和 JavaFX 之间缺乏一对一的对应关系是否会使这复杂化？

不

6) JavaFX 8 即将推出的富文本支持是否会简化（或实现）更多此类端口？

我需要看看这个：正如我所说，我是 JavaFX 的完全初学者，所以我仍在追赶当前的实现。

bootstrap 样式会非常好：当我告诉他们它是 Java 而不是嵌入式 Web 应用程序时，很多向我展示该应用程序的人都感到非常惊讶。

回答by Philippe Jean

It's not a complete implementation of the bootstrap style but you can start with this css file: https://github.com/watermint/Fextile/blob/master/src/main/resources/fextile.css

这不是引导程序样式的完整实现，但您可以从这个 css 文件开始：https: //github.com/watermint/Fextile/blob/master/src/main/resources/fextile.css

回答by seinecle

There is a newer port with 400+ stars on Github:

Github 上有一个新的端口，拥有 400 多个星：

https://github.com/kordamp/bootstrapfx

https://github.com/kordamp/bootstrapfx