Bootstrap avec JavaFX

Rendu Bootstrap à l'intérieur d'un JavaFX WebView

Bootstrap est un HTML.

Donc d'utiliser Bootstrap en JavaFX, utiliser JavaFX est rendu HTML composant WebView de rendre Bootstrap, HTML/CSS et JavaScript.

Exemple D'Application

Exemple d'application de l'exécution d'une intégration de base de Bootstrap et un JavaFX de l'INTERFACE utilisateur.

Le JavaFX boutons sur le haut de l'écran de naviguer autour d'une WebView page pour afficher différentes sortes de composants 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());
}
});
}
}
}

Supplémentaire, un peu sans rapport avec la question

Est-il possible d'intercepter le clic sur le bouton d'événements à partir d'une vue web?

Oui. Vous pouvez joindre des gestionnaires de clic dans du code Java à travers le DOM du w3c accès aux API WebEngine fournit. Voir la WebEngine la documentation pour plus de détails:

L'accès au Document Modèle

La WebEngine objets de créer et de gérer un Modèle d'Objet de Document (DOM) pour leurs pages Web. Le modèle peut être consulté et modifié à l'aide de Java DOM classes de Base. La méthode getDocument() permet d'accéder à la racine du modèle. En outre DOM spécification d'Événement est pris en charge de définir des gestionnaires d'événements dans du code Java.

L'exemple suivant attache une Java écouteur d'événement à un élément d'une page Web. En cliquant sur l'élément causes de la demande de sortie:

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

Cependant, pour moi, est souvent est plus facile de gérer l'interfaçage avec le w3c documents à l'aide de JavaScript (plus précisément jQuery), plutôt que de Java. Voici un exemple de l'émission à partir du code Java, un jQuery pour fournir des gestionnaires de clic dans une WebView.

Sur Fextile (Bootstrap look natif JavaFX contrôles)

Pourquoi ne pas simplement le port de bootstrap.css pour les rendre conformes à la javafx conventions de nommage?

Parce que:

• Il n'y a plus de bootstrap que juste le css, c'est d'un réactif framework d'INTERFACE avec JavaScript active, basée sur les contrôles d'utilisateur et un mécanisme d'extension.
• Rendu dans WebView rendra le bootstrap html dans JavaFX exactement le même que si elle était dans un navigateur web, alors pourquoi port lorsque vous avez déjà quelque chose qui fonctionne parfaitement sans effort supplémentaire?
• C'est une cible en mouvement, le bootstrap.css tronc projet obtient de nombreuses contributions de centaines de développeurs, il serait difficile de se maintenir qu'avec un home-grown JavaFX port, mais si vous avez sélectionné un sous-ensemble plus restreint de bootstrap fonctions de maintien de la synchronisation serait plus facile.

Encore, il est possible de faire du port (comme lié à Philippe de réponse), et c'est ce que Takayuki Okazaki a créés à son Fextile projet: "Twitter Bootstrap comme framework d'INTERFACE pour JavaFX. Appliquer des thèmes à votre demande tout comme Twitter Bootstrap par JavaFX CSS.". Ne vous attendez pas une correspondance exacte avec bootstrap en HTML, mais il devrait permettre à votre JavaFX les contrôles ne pas utiliser le langage HTML pour avoir un joli regard de près à ce que vous obtiendriez avec bootstrap en HTML.

Vous pouvez également créer une application hybride, où certains éléments de l'INTERFACE utilisateur sont de HTML avec bootstrap et certains sont rendues de JavaFX contrôles à l'aide de Fextile. Si vous avez appliqué une telle approche pour l'exemple d'application de cette réponse, puis le JavaFX boutons "progrès", "jumbotron", etc. ressemblerait leur code HTML de bootstrap homologues, donnant à l'ensemble demande un plus de cohérence et de sens.

Aussi, notez qu'il existe un projet similaire pour La fondation de styles pour JavaFXcomme annoncé dans ce Oracle JavaFX post sur le forum. Ce projet imite la base Fondation look natif JavaFX contrôles. Pour certains usages, l'adoption de la Fondation de styles peut être plus approprié que Bootstrap styles comme le projet est de moindre ampleur que Bootstrap (autant que je sache).

Ici est un Q&A (à partir de l'Oracle JavaFX post sur le forum) sur le comment de la création de la Fondation de style (si quelqu'un peut obtenir une relative idée de ce qu'est, pour l'extension de Fextile pour plus d'Amorçage de caractéristiques de style). Notez que la Q&A est un peu vieux et, depuis lors, un CSS analyseur a été ajouté à SceneBuilder:

1) Comment ce travail?

Pas du tout: l'ensemble de l'expérience a été très agréable et très facile à faire.
C'est ma première JavaFX application (une carte de style de l'éditeur en temps réel
aperçu)

2) Était-il beaucoup de temps?

Pas: l'aide de l'aperçu ScenceBuilder 1.1 les styles sont mis à jour sur le
la mouche - la SceneBuilder pourrait faire avec construit dans l'éditeur CSS, mais c'est
seuls les mineurs: le processus a été assez simple de toute façon

3) Pour un simple port pensez-vous que vous avez besoin de toutes les compétences de conception à
tous, ou quelqu'un pourrait-il ont vraiment fait ce qui en sait un peu de
css/html/javafx?

N'importe qui peut le faire: mon fond est côté serveur de code que je ne fais pas
beaucoup de la manière de frontaux - je sais JS et HTML très bien, mais mon
CSS laisse beaucoup à moi souhaitée: donc, fondamentalement, si je peux le faire ...

4) Est la différence entre le javafx la syntaxe css et le html css
la syntaxe d'une douleur importante ou pas vraiment un problème?

Une fois que je me suis habitué à elle, ne fait pas de différence même si je ne le garder
oublier d'ajouter " - fx-' et l'-fx-texte de remplissage de type que j'ai toujours
-fx-texte-couleur ...

5) de Même fait l'absence d'un " one-to-one correspondance entre html
balises du document (par exemple, les balises d'en-tête) et JavaFX compliquer?

Pas

6) la prochaine le support de texte riche en JavaFX 8 simplifier (ou faire
possible) plus de ces types de ports?

J'ai besoin d'avoir un coup d'oeil à ceci: comme je l'ai dit, je suis un débutant complet avec
JavaFX donc, je suis toujours à rattraper le retard dans la mise en œuvre actuelle.

Le bootstrap styles serait vraiment sympa: beaucoup de gens à qui j'ai
a montré l'application sont très étonnés quand je leur dis que son langage de programmation Java et pas
un intégré à l'application web.