Bootstrap with JavaFX

Question

我正在使用netbeans在java fxml项目中创建GUI。我想用bootstrap来设计gui，但我注意到javafx中的所有内容都以fx-为前缀。无论如何，我的项目是否还有办法让bootstrap工作？ bootstrap甚至可以用于javafx吗？

Answer 1

渲染引导一个JavaFX web视图

引导内部是基于HTML的框架。

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

示例应用程序

示例应用程序进行引导和一个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事件侦听器附加到网页的元素。点击元素上会导致应用程序退出：

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的专）W3C文档接口，而不是Java。这里是一个从Java代码发布的例子，a jQuery call to provide click handlers in a WebView。

在Fextile（引导一下本机的JavaFX控件）

为什么不直接端口bootstrap.css以符合JavaFX的命名约定？

因为：

• 还有更多的不仅仅是CSS来引导，它与基于JavaScript主动控制和用户的扩展机制全响应UI框架。
• 在WebView中渲染将使JavaFX中的引导HTML与在Web浏览器中的引导HTML完全相同，那么为什么当你已经有了一些可以完美工作而没有额外工作的端口时呢？
• 这是一个移动的目标，bootstrap.css主干项目得到了数百名开发人员的许多贡献，使用本土JavaFX端口很难跟上这个目标，尽管如果您只选择了一小部分引导特性保持同步会更容易。

不过，这是可以做到的端口（如在菲利普的答案链接），而这正是孝行冈崎在创造他的Fextile project：“Twitter的引导就像JavaFX的UI框架应用的主题，你的应用程序只就像通过JavaFX CSS的Twitter Bootstrap一样。“不要期望与HTML中的引导程序完全匹配，但它应该允许不使用HTML的JavaFX控件对HTML中的引导程序进行非常仔细的观察。

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

此外，请注意，有Foundation styles for JavaFX的类似项目，如Oracle JavaFX forum post中所公布的。该项目模仿了原生JavaFX控件的基本Foundation外观。对于一些用法，采用基础样式可能比Bootstrap样式更合适，因为项目范围比Bootstrap小（据我所知）。

这是QA（来自Oracle JavaFX论坛帖子）关于如何创建基础样式（所以有人可以获得关于将Fextile扩展到其他Bootstrap样式功能的相关概念）。请注意，将q & A是一老一少，因为再CSS analyzer已添加到SceneBuilder：

1）有多难是这项工作？

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

2）是否非常耗时？

号：使用预览ScenceBuilder 1.1样式的更新上 飞 - 的SceneBuilder可以与内置的CSS编辑器做的，但是这 只有轻微：工作流程相当简单反正

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

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

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

一旦我习惯了，没有什么区别，虽然我不守 忘记加上“-fx-”和-fx文字填写，我总是键入作为 -fx文本颜色...

5）类似地，html 文档标签（例如标题标签）和JavaFX之间缺乏一对一的对应关系会使这变得复杂吗？

没有

6）将在JavaFX的8简化了即将到来的富文本格式支持（或使 可能）以上这些种口的？

我需要看看这个：正如我所说我是一个完整的初学者，并且使用了JavaFX，所以我仍然赶上当前的实现。

引导样式真的很不错：我有很多人，当我告诉他们它的Java而不是 嵌入式Web应用程序时，我的 显示应用程序非常惊讶。

Answer 2

这不是引导风格的完全实现，但你可以用这个css文件启动： https://github.com/watermint/Fextile/blob/master/src/main/resources/fextile.css