web-dev-qa-db-fra.com

Bootstrap avec JavaFX

Je crée une interface graphique dans un projet Java fxml utilisant des netbeans. Je voulais utiliser bootstrap pour styliser l'interface graphique mais j'ai remarqué que tout dans javafx est préfixé) avec fx-. Existe-t-il encore un moyen de faire fonctionner bootstrap de toute façon pour mon projet? Est-ce que bootstrap fonctionne même avec javafx?

csstwitter-bootstrapnetbeansjavafxfxml
18
jamespick

Rendu Bootstrap dans une JavaFX WebView

Bootstrap est un framework basé sur HTML.

Donc, pour utiliser Bootstrap dans JavaFX, utilisez le composant de rendu HTML de JavaFX WebView pour rendre Bootstrap HTML/CSS et JavaScript).

Exemple d'application

Exemple d'application effectuant une intégration de base de Bootstrap et une interface utilisateur JavaFX.

Les boutons JavaFX en haut de l'écran parcourent une page WebView pour afficher différents types de composants Bootstrap.

jumbotron

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

Question supplémentaire, peu liée

Est-il possible d'intercepter des événements de clic de bouton à partir d'une vue Web?

Oui. Vous pouvez attacher des gestionnaires de clics dans Java via l'accès à l'API DOM w3c fourni par WebEngine. Voir la documentation WebEngine pour plus de détails:

Accès au modèle de document

Les objets WebEngine créent et gèrent un modèle d'objet de document (DOM) pour leurs pages Web. Le modèle est accessible et modifiable à l'aide de Java classes DOM Core. La méthode getDocument () permet d'accéder à la racine du modèle. De plus, la spécification d'événement DOM est prise en charge pour définir les gestionnaires d'événements dans Java code.

L'exemple suivant attache un écouteur d'événements Java Java à un élément d'une page Web. En cliquant sur l'élément, l'application se ferme:

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, il est souvent plus facile de gérer l'interfaçage avec des documents w3c en utilisant JavaScript (spécifiquement jQuery), plutôt que Java. Voici un exemple de sortie de Java, n appel jQuery pour fournir des gestionnaires de clics dans une WebView .

Sur Fextile (Look Bootstrap pour les contrôles JavaFX natifs)

Pourquoi ne pas simplement porter bootstrap.css pour se conformer aux conventions de dénomination javafx?

Car:

  • Il y a plus à bootstrap que juste le CSS, c'est un cadre d'interface utilisateur complet réactif avec des contrôles actifs basés sur JavaScript et un mécanisme d'extension utilisateur.
  • Le rendu dans WebView rendra le bootstrap html dans JavaFX exactement comme s'il était dans un navigateur Web, alors pourquoi porter quand vous avez déjà quelque chose qui fonctionnera parfaitement sans effort supplémentaire?
  • C'est une cible mouvante, le projet de tronc bootstrap.css reçoit de nombreuses contributions de centaines de développeurs, il serait difficile de suivre cela avec un port JavaFX local, bien que si vous ne sélectionniez qu'un petit sous-ensemble de bootstrap les fonctionnalités de synchronisation seraient plus faciles.

Pourtant, il est possible de faire le portage (comme lié dans la réponse de Philippe), et c'est ce que Takayuki Okazaki a créé dans son Projet Fextile : "Twitter Bootstrap like Cadre d'interface utilisateur pour JavaFX. Appliquez des thèmes à votre application comme Twitter Bootstrap via JavaFX CSS. ". Ne vous attendez pas à une correspondance exacte avec bootstrap en HTML, mais cela devrait permettre à vos contrôles JavaFX qui n'utilisent pas HTML d'avoir une vision assez proche de ce que vous obtiendriez avec bootstrap en HTML.

Vous pouvez également créer une application hybride, où certaines parties de l'interface utilisateur proviennent de HTML avec bootstrap et d'autres sont rendues à partir de contrôles JavaFX à l'aide de Fextile. Si vous avez appliqué une telle approche à l'exemple d'application dans ce réponse, les boutons JavaFX "progress", "jumbotron", etc. ressembleraient à leurs équivalents HTML bootstrap, donnant à l'ensemble de l'application une apparence et une convivialité plus cohérentes.

Notez également qu'il existe un projet similaire pour Styles de base pour JavaFX , comme annoncé dans ce Article de forum Oracle JavaFX . Ce projet imite la recherche de base Foundation pour les contrôles JavaFX natifs. Pour certains usages, l'adoption de styles Foundation peut être plus appropriée que Bootstrap styles car le projet est plus petit que Bootstrap (pour autant que je sache).

Voici un Q&A (du post du forum Oracle JavaFX) sur la façon de créer le style Foundation (afin que quelqu'un puisse avoir une idée relative de ce qui est impliqué pour étendre Fextile pour des fonctionnalités supplémentaires Bootstrap style). Notez que le Q&A est un peu ancien et depuis lors, un analyseur CSS a été ajouté à SceneBuilder:

1) Dans quelle mesure ce travail a-t-il été difficile?

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

2) Cela a-t-il pris beaucoup de temps?

Non: en utilisant l'aperçu ScenceBuilder 1.1, les styles sont mis à jour à la volée - le SceneBuilder pourrait faire avec un éditeur CSS intégré, mais ce n'est que mineur: le flux de travail était de toute façon assez simple

3) Pour un simple port, pensez-vous que vous avez besoin de compétences en conception, ou est-ce que quelqu'un aurait vraiment pu le faire qui connaît un peu le css/html/javafx?

Tout le monde peut le faire: mon arrière-plan est le code côté serveur - je ne fais pas beaucoup de frontaux - je connais très bien JS et HTML mais mon CSS me laisse beaucoup à désirer: donc en gros si je peux le faire. ..

4) La différence entre la syntaxe javafx css et la syntaxe html css était-elle une douleur majeure ou pas vraiment un problème?

Une fois que je m'y suis habitué, cela n'a fait aucune différence bien que j'oublie toujours d'ajouter '-fx-' et le -fx-text-fill que je tape toujours comme -fx-text-color ...

5) De même, l'absence de correspondance biunivoque entre les balises de document html (par exemple les balises d'en-tête) et JavaFX a-t-elle compliqué cela?

Non

6) La prochaine prise en charge du texte enrichi dans JavaFX 8 simplifiera-t-elle (ou rendra-t-elle possible) plus de ces types de ports?

Je dois y jeter un œil: comme je l'ai dit, je suis un débutant complet avec JavaFX, donc je suis toujours en train de rattraper l'implémentation actuelle.

Les styles bootstrap seraient vraiment sympas: beaucoup de gens à qui j'ai montré l'application sont assez étonnés quand je leur dis son Java et pas un application web intégrée.

30
jewelsea

Ce n'est pas une implémentation complète du style bootstrap mais vous pouvez commencer avec ce fichier css: https://github.com/watermint/Fextile/blob/master/src/main /resources/fextile.css

4
Philippe Jean