使用JavaFX进行引导 [英] Bootstrap with JavaFX

问题描述

我在使用netbeans的java fxml项目中创建一个GUI。我想使用bootstrap风格的gui，但我注意到，在javafx中的所有内容前缀为 fx - 。有没有办法让我的项目的引导工作？

解决方案

在JavaFX WebView中渲染Bootstrap

Bootstrap是一个基于HTML的框架。

因此，要在JavaFX中使用Bootstrap，请使用JavaFX的HTML呈现组件 。

在Fextile上（Bootstrap查找原生JavaFX控件）

为什么不只是端口bootstrap.css符合javafx命名约定？

因为：

• 还有更多的引导不只是css，它是一个完全响应的UI框架，基于JavaScript的主动控件和用户扩展机制。


• 在WebView中渲染将使JavaFX中的引导HTML与在Web浏览器中完全相同，因此，为什么要在没有额外工作的情况下可以正常工作？


• 这是一个移动的目标，bootstrap.css trunk项目从数百个开发人员获得了很多贡献，这将是很难跟上一个自制的JavaFX端口，虽然如果你

仍然可以做端口（作为链接）在Philippe的回答），这是Takayuki冈崎在他的 Fextile项目创建：Twitter Bootstrap喜欢用于JavaFX的UI框架。将主题应用于您的应用程序，就像通​​过JavaFX CSS的Twitter Bootstrap。不要期望在HTML中与引导完全匹配，但它应该允许不使用HTML的JavaFX控件与HTML中使用bootstrap实现的内容非常接近。

您还可以创建一个混合应用程序，其中UI的一些部分来自带有引导的HTML，一些是使用Fextile从JavaFX控件呈现的。如果在这个答案中对示例应用程序应用了这样的方法，那么JavaFX按钮progress，jumbotron等将看起来像它们的HTML引导对象，使整个应用程序具有更一致的外观和感觉。 >

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

这里是一个Q& ; A（来自Oracle JavaFX论坛帖子）关于如何创建Foundation样式（所以有人可以得到一个相对的想法，涉及扩展Fextile为额外的Bootstrap风格的功能）。请注意，Q& A有点老，从那时起， CSS分析器添加到SceneBuilder：

1）这项工作有多难？

在所有：整个经验是非常愉快的，非常容易做。
这是我的第一个JavaFX应用程序（实时
预览的地图样式编辑器）

2）是非常耗时吗？

否：使用预览ScenceBuilder 1.1，样式在
上更新 - SceneBuilder可以使用内置的CSS编辑器，但是这是
：工作流很简单

3）对于一个简单的端口，你认为你需要任何设计技能在
，或者任何人真的做这个谁知道一点
css / html / javafx？

任何人都可以这样做：我的背景是服务器端代码 - 我不做
很多在前端的方式 - 我知道JS和HTML非常好，但我的
CSS留给了很多我想要的：所以基本上如果我可以做...

4）javafx css语法和html css
语法之间的区别是一个主要的痛苦还是不是一个问题？

一次我习惯了它，没有什么区别，虽然我保留
忘记添加-fx-和-fx文本填充我总是键入
-fx-text-color ...

5）类似地，html
文档标签之间缺少一对一的对应关系

6）将在JavaFX中支持即将到来的富文本格式8简化（或使
可能）更多的这些端口？

我需要看看这个：因为我说我是一个完整的初学者
JavaFX所以我仍然赶上当前的实现。

引导风格会非常好：很多人
显示的应用程序是非常惊讶，当我告诉他们其Java，而不是
嵌入式web应用程序。

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?

解决方案

Rendering Bootstrap inside a JavaFX WebView

Bootstrap is an HTML based framework.

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

Sample Application

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

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

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?

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

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

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.

On Fextile (Bootstrap look for native JavaFX controls)

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

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.

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.

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.

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 Foundation look 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).

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 analyzer has been added to 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.

这篇关于使用JavaFX进行引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！