Бутстрап с JavaFX

Я создаю GUI в проекте java fxml, используя netbeans. Я хотел использовать bootstrap для стилизации gui, но я заметил, что все в javafx имеет префикс fx-. Есть ли способ заставить bootstrap работать в любом случае для моего проекта? Может ли bootstrap работать с javafx?

Ответы

Ответ 1

Рендеринг бутстрапа внутри JavaFX WebView

Bootstrap - это основанная на HTML структура.

Итак, чтобы использовать Bootstrap в JavaFX, используйте компонент рендеринга HTML JavaFX WebView для рендеринга Bootstrap HTML/CSS и JavaScript.

Пример приложения

Пример приложения, выполняющего базовую интеграцию Bootstrap и интерфейса JavaFX.

Кнопки JavaFX в верхней части экрана перемещаются по странице WebView, чтобы отображать различные компоненты 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());
                }
            });
        }
    }
}

Дополнительный, слегка не связанный вопрос

Можно ли перехватить события нажатия кнопок из веб-представления?

Да. Вы можете присоединить обработчики кликов в Java-коде через доступ к веб-интерфейсу W3c DOM API WebEngine. Подробнее см. Документацию WebEngine:

Доступ к модели документа

Объекты WebEngine создают и управляют объектной моделью документа (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);

Однако для меня часто проще обрабатывать взаимодействие с документами w3c с использованием JavaScript (в частности, jQuery), а не Java. Ниже приведен пример из кода Java, вызов jQuery для предоставления обработчиков кликов в WebView.

В Fextile (Bootstrap искать собственные элементы управления JavaFX)

Почему бы не просто загрузить bootstrap.css, чтобы соответствовать соглашениям об именах javafx?

Потому что:

  • Существует больше загрузочного файла, чем просто css, это полноценная среда пользовательского интерфейса с активными элементами управления на основе JavaScript и механизмом расширения пользователя.
  • Рендеринг в WebView превратит bootstrap html в JavaFX точно так же, как если бы он был в веб-браузере, так почему порт, когда у вас уже есть что-то, что будет работать без каких-либо дополнительных усилий?
  • Это движущаяся цель, проект соединительной линии bootstrap.css получает много вкладов от сотен разработчиков, было бы трудно идти в ногу с тем, что с самодельным портом JavaFX, хотя, если вы выбрали только меньшее подмножество функций начальной загрузки синхронизация будет проще.

Тем не менее, можно сделать порт (как указано в ответе Филиппа), и это то, что создал Такаюки Окадзаки в своем проекте Fextile: "Twitter Bootstrap как интерфейс пользовательского интерфейса для JavaFX. Примените темы к вашему приложению так же, как Twitter Bootstrap через JavaFX CSS". Не ожидайте точного совпадения с бутстрапом в HTML, но это должно позволить вашим элементам управления JavaFX, которые не используют HTML, иметь довольно близкий взгляд на то, что вы достигнете с помощью начальной загрузки в HTML.

Вы также можете создать гибридное приложение, в котором некоторые части пользовательского интерфейса находятся из HTML с бутстрапом, а некоторые из них отображаются с помощью элементов управления JavaFX, используя Fextile. Если вы применили такой подход к образцу приложения в этом ответе, то кнопки JavaFX "progress", "jumbotron" и т.д. Будут выглядеть как их копии для бутстрапа HTML, придавая всему приложению более последовательный внешний вид.

Также обратите внимание, что существует аналогичный проект для стилей Foundation для JavaFX, как было объявлено в этом Сообщение форума Oracle JavaFX. Этот проект имитирует базовый Foundation поиск собственных элементов управления JavaFX. Для некоторых применений использование стилей Foundation может быть более подходящим, чем стили Bootstrap, поскольку проект меньше по размеру, чем Bootstrap (насколько я знаю).

Вот Q & A (из сообщения форума Oracle JavaFX) о том, как создать стиль Foundation (чтобы кто-то мог получить относительное представление о том, что связано с расширением Fextile для дополнительных функций стиля Bootstrap). Обратите внимание, что Q & A немного стар, и с тех пор в SceneBuilder добавлен анализатор CSS:

1) Насколько трудной была эта работа?

Нет вообще: весь опыт был очень приятным и очень легким. Это мое первое приложение JavaFX (редактор стиля карты в режиме реального времени предварительный просмотр)

2) Было ли это очень много времени?

Нет: с помощью предварительного просмотра ScenceBuilder 1.1 стили обновляются на fly - SceneBuilder мог сделать со встроенным редактором CSS, но это только незначительный: рабочий процесс был довольно прост в любом случае

3). Для простого порта вы считаете, что вам нужны какие-либо дизайнерские навыки в или кто-нибудь действительно мог это сделать, кто знает немного CSS/HTML/JavaFX?

Любой может сделать это: мой фон - это код на стороне сервера - я этого не делаю в основном, на передний план - я знаю JS и HTML очень хорошо, но мой CSS оставляет мне много желаемого: так что в принципе, если я могу это сделать...

4) Была ли разница между синтаксисом javafx css и html css синтаксис - большая боль или не проблема?

Как только я привык к этому, не имело никакого значения, хотя я продолжаю забыв добавить '-fx-' и -fx-text-fill, я всегда печатаю как -fx-text-color...

5) Точно так же и отсутствие взаимно однозначного соответствия между html теги документа (например, теги заголовков) и JavaFX усложняют это?

Нет

6) Будет ли предлагаемая поддержка расширенного текста в JavaFX 8 упростить (или сделать возможно) больше из этих видов портов?

Мне нужно взглянуть на это: как я уже сказал, я полный новичок с JavaFX, поэтому я все еще догоняю текущую реализацию.

Стили бутстрапа будут очень приятными: много людей, которых я показало, что приложение довольно изумлено, когда я говорю им свою Java, а не встроенное веб-приложение.