Bootstrap mit JavaFX

Question

Ich erstelle eine GUI in einem Java-fxml-Projekt mit Netbeans. Ich wollte Bootstrap verwenden, um die GUI zu stylen, aber ich habe festgestellt, dass alles in javafx fx- vorangestellt ist. Gibt es noch einen Weg, den Bootstrap für mein Projekt zu nutzen? Funktioniert Bootstrap überhaupt mit javafx?

Answer 1

Rendering Bootstrap in einem JavaFX WebView

Bootstrap ist ein HTML-basiertes Framework.

Um Bootstrap in JavaFX zu verwenden, verwenden Sie die HTML Rendering-Komponente WebView von JavaFX, um Bootstrap HTML/CSS und JavaScript zu rendern.

Beispielanwendung

Beispielanwendung eine grundlegende Integration von Bootstrap und einer JavaFX UI durchführen.

Die JavaFX-Schaltflächen im oberen Bildschirmbereich navigieren auf einer WebView-Seite, um verschiedene Arten von Bootstrap-Komponenten zu rendern.

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

Zusätzliche, leicht unabhängige Frage

Ist es möglich, Tastenklick Ereignisse aus einer Web-Ansicht abfangen?

Ja. Sie können Click-Handler in Java-Code über den W3c-DOM-API-Zugriff, den WebEngine bereitstellt, anhängen. Siehe die WebEngine Dokumentation:

Zugang zu Dokumentmodell

Die WebEngine Objekte erstellen und verwalten ein Document Object Model (DOM) für ihre Web-Seiten. Auf das Modell kann über Java DOM Core-Klassen zugegriffen und diese geändert werden. Die Methode getDocument() bietet Zugriff auf das Stammverzeichnis des Modells. Zusätzlich wird die DOM-Event-Spezifikation unterstützt, um Event-Handler in Java-Code zu definieren.

Im folgenden Beispiel wird ein Java-Ereignis-Listener an ein Element einer Webseite angehängt. Ein Klick auf das Element bewirkt, dass die Anwendung beenden:

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

Doch für mich ist oft einfacher ist, mit w3c Dokumente zu verarbeiten Schnittstelle mit Hilfe von JavaScript (speziell jQuery), anstatt Java. Hier ist ein Beispiel für die Ausgabe von Java-Code, a jQuery call to provide click handlers in a WebView.

Auf Fextile (Bootstrap-Look für native Steuerelemente JavaFX)

Warum zum javafx Namenskonventionen nicht nur Port bootstrap.css entsprechen?

Denn:

• Es ist mehr die CSS Bootstrap als nur, es ist ein voll ansprechbar UI-Framework mit JavaScript-basierten aktiven Kontrollen und einem Benutzererweiterungsmechanismus.
• Rendering in WebView wird das Bootstrap HTML in JavaFX genau so, als ob es in einem Webbrowser wäre, also warum Port, wenn Sie bereits etwas haben, die perfekt ohne zusätzlichen Aufwand funktioniert?
• Es ist ein bewegliches Ziel, das Bootstrap.css Trunk-Projekt bekommt viele Beiträge von Hunderten von Entwicklern, es wäre schwierig, mit einem selbstgewachsenen JavaFX-Port mitzuhalten, wenn Sie nur eine kleinere Teilmenge von Bootstrap-Features ausgewählt haben Synchronisieren wäre einfacher.

Dennoch ist es möglich, den Hafen zu tun (wie in Philippe Antwort verbunden sind), und das ist, was Takayuki Okazaki in seiner Fextile project geschaffen hat. „Twitter Bootstrap wie UI-Framework für JavaFX Themen auf Ihre Bewerbung Bewerben einfach wie Twitter Bootstrap via JavaFX CSS. ". Erwarten Sie keine exakte Übereinstimmung mit Bootstrap in HTML, aber es sollte Ihren JavaFX-Steuerelementen, die kein HTML verwenden, erlauben, ziemlich genau zu sehen, was Sie mit dem Bootstrap in HTML erreichen würden.

Sie können auch eine Hybridanwendung erstellen, in der einige Teile der Benutzeroberfläche aus HTML mit Bootstrap und einige aus JavaFX-Steuerelementen mit Fextile gerendert werden. Wenn Sie in dieser Antwort einen solchen Ansatz auf die Beispielanwendung anwenden, sehen die JavaFX-Schaltflächen "progress", "jumbotron" usw. wie ihre HTML-Bootstrap-Gegenstücke aus und geben der gesamten Anwendung ein konsistenteres Erscheinungsbild.

Beachten Sie auch, dass es ein ähnliches Projekt für Foundation styles for JavaFX gibt, wie in dieser Oracle JavaFX forum post angekündigt. Dieses Projekt ahmt die grundlegende Foundation Suche nach nativen JavaFX-Steuerelementen nach. Für einige Verwendungszwecke ist die Verwendung von Foundation-Stilen möglicherweise besser geeignet als Bootstrap-Stile, da das Projekt im Umfang kleiner ist als Bootstrap (soweit ich weiß).

Hier ist eine Q & A (aus dem Oracle JavaFX Forumsbeitrag) zum Erstellen des Foundation-Stils (damit jemand eine relative Vorstellung davon bekommen kann, was für die Erweiterung von Fextile für zusätzliche Bootstrap-Stil-Funktionen nötig ist). Beachten Sie, dass die Q & A ein wenig alt ist und hat seitdem eine CSS analyzer zu SceneBuilder hinzugefügt:

1) Wie schwierig war diese Arbeit?

Nein, die ganze Erfahrung war sehr angenehm und sehr einfach zu machen. Dies ist meine erste JavaFX-App (ein Kartenstil-Editor mit Echtzeit Vorschau)

2) War es sehr zeitaufwendig?

No: die Vorschau ScenceBuilder 1.1 mithilfe der Vorlagen auf der fly aktualisiert - die SceneBuilder mit einem CSS-Editor gebaut tun könnte, aber das ist nur geringe: der Workflow ganz einfach ohnehin

war für

3) ein einfacher Port denkst du, dass du alle Designfertigkeiten bei alle brauchen, oder könnte jemand wirklich das getan haben wer weiß ein bisschen von css/html/javafx?

Jeder kann dies tun: mein Hintergrund ist Server-Seite Code - Ich tue nicht viel in der Art von Frontends - ich weiß, JS und HTML sehr gut, aber mein CSS läßt mich viel zu wünschen: so im Grunde Wenn ich es kann ...

4) War der Unterschied zwischen der Javafx CSS-Syntax und der HTML-CSS Syntax ein großer Schmerz oder nicht wirklich ein Problem?

Sobald ich mich daran gewöhnt habe, machte keinen Unterschied, obwohl ich halte zu vergessen ‚-fx-‘ hinzuzufügen und die -fx-Text-fill ich immer geben als -fx-text-color ...

5) Ebenso fehlte eine 1: 1-Entsprechung zwischen html Dokument-Tags (zB die Header-Tags) und JavaFX komplizieren dies?

Keine

6) Wird die kommende Rich-Text-Unterstützung in JavaFX 8 simplify (oder möglich machen) mehr dieser Arten von Häfen?

Ich muss mir das mal anschauen: Wie gesagt, ich bin ein absoluter Anfänger mit JavaFX, also bin ich immer noch auf der aktuellen Implementierung. Die Bootstrap-Stile wären wirklich nett: Viele Leute, die ich habe zeigte die App, sind ziemlich erstaunt, wenn ich ihnen ihre Java-und nicht eine eingebettete Web-App.

Answer 2

Es ist nicht eine vollständige Implementierung des Stils Bootstrap aber Sie können mit dieser CSS-Datei starten: https://github.com/watermint/Fextile/blob/master/src/main/resources/fextile.css