使用JavaFX引导程序

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

另外,略有不相关的问题

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

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

访问文档模型

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

以下示例将Java事件侦听器附加到Web页面的元素.单击该元素会导致应用程序退出:

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文档的接口.下面是一个从Java代码发出的示例,它是一个jQuery调用,用于在WebView中提供单击处理程序.

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

为什么不直接使用bootstrap.css来符合javafx命名约定？

因为:

• 除了css之外,还有更多的引导程序,它是一个完整的响应式UI框架,具有基于JavaScript的主动控件和用户扩展机制.
• 在WebView中渲染将在JavaFX中呈现引导程序html与在Web浏览器中呈现的完全相同,那么为什么在已经拥有可以完美工作而无需额外工作的情况下移植？
• 这是一个移动目标,bootstrap.css中继项目得到了数百名开发人员的许多贡献,但是如果你只选择一小部分引导程序功能保持同步,那么很难跟上自己开发的JavaFX端口.会更容易.

不过,有可能做端口(正如Philippe的答案所链接),这就是Takayuki Okazaki在他的Fextile项目中创建的:"Twitter Bootstrap就像JavaFX的UI框架.将主题应用到你的应用程序就像Twitter Bootstrap通过JavaFX CSS." 不要指望与HTML中的引导程序完全匹配,但它应该允许不使用HTML的JavaFX控件非常接近于使用HTML中的引导程序所实现的内容.

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

此外,请注意JavaFX的Foundation样式有一个类似的项目,正如此Oracle JavaFX论坛帖子中所宣布的那样.该项目模仿了本机JavaFX控件的基本Foundation外观.对于某些用法,采用Foundation样式可能比Bootstrap样式更合适,因为项目的范围小于Bootstrap(据我所知).

以下是关于如何创建Foundation样式的问答(来自Oracle JavaFX论坛帖子)(因此有人可以了解扩展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-text-fill我总是键入-fx-text-color ...

5)同样,html文档标签(例如标头标签)和JavaFX之间缺乏一对一的对应关系会使这个问题复杂化吗？

没有

6)JavaFX 8中即将推出的富文本支持是否会简化(或使其可能)更多这类端口？

我需要看看这个:正如我所说,我是JavaFX的初学者,所以我仍然在追赶当前的实现.

引导程序样式非常好:当我告诉他们Java而不是嵌入式Web应用程序时,我展示应用程序的很多人都非常惊讶.

Answer 2

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