我正在使用netbeans在Java fxml项目中创建GUI。我想使用bootstrap来设置gui的样式,但是我注意到javafx中的所有内容都以fx-
为前缀。是否仍然有办法让 bootstrap 继续为我的项目工作? bootstrap 甚至可以与javafx一起使用吗?
最佳答案
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());
}
});
}
}
}
其他无关紧要的问题
是。您可以通过WebEngine提供的w3c DOM API访问,以Java代码附加单击处理程序。有关详细信息,请参见WebEngine文档:
但是,对我来说,通常更容易使用JavaScript(特别是jQuery)而不是Java处理与w3c文档的接口(interface)。这是从Java代码a jQuery call to provide click handlers in a WebView发出的示例。
在Fextile上( bootstrap 查找本机JavaFX控件)
因为:
尽管如此,仍然可以进行移植(如Philippe的答案中所述),这就是冈崎孝之在其Fextile project中创建的:“Twitter Bootstrap类似于JavaFX的UI框架。就像通过JavaFX CSS的Twitter Bootstrap一样,将主题应用于您的应用程序”。不要指望与HTML中的引导完全匹配,但是它应该允许不使用HTML的JavaFX控件与使用HTML中的引导所实现的外观非常接近。
您还可以创建一个混合应用程序,其中UI的某些部分来自带有 bootstrap 的HTML,而某些则是使用Fextile从JavaFX控件呈现的。如果您在此答案中将这种方法应用于示例应用程序,则JavaFX按钮“progress”,“jumbotron”等将看起来像它们的HTML bootstrap对应物,从而使整个应用程序具有更加一致的外观。
另外,请注意,此Foundation styles for JavaFX中宣布了Oracle JavaFX forum post的类似项目。该项目模仿了本机JavaFX控件的基本Foundation外观。对于某些用法,采用Foundation样式可能比Bootstrap样式更合适,因为该项目的范围小于Bootstrap(据我所知)。
这是有关如何创建Foundation样式的问题解答(来自Oracle JavaFX论坛帖子)(以便有人可以相对了解扩展Fextile以获取其他Bootstrap样式功能所涉及的内容)。请注意,Q&A有点旧,从那时起,CSS analyzer已添加到SceneBuilder: