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