Bootstrap with JavaFX

Question

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

Answer 1

Rendering Bootstrap внутри JavaFX WebView

Bootstrap является основой на основе HTML.

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

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

Пример приложение выполняет базовую интеграцию Bootstrap и 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()); 
       } 
      }); 
     } 
    } 
} 

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

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

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

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

Объекты WebEngine создания и управления Document Object Model (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, a jQuery call to provide click handlers in a WebView.

На Fextile (Bootstrap ищет родных элементов управления JavaFX)

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

Потому что:

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

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

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

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

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

1) Насколько сложно было работать?

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

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 Simplify (или сделать возможно) больше подобных портов?

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

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

Answer 2

Это не полная реализация стиля начальной загрузки, но вы можете начать с этого CSS файла: https://github.com/watermint/Fextile/blob/master/src/main/resources/fextile.css