Solución:
Representación de Bootstrap dentro de un WebView JavaFX
Bootstrap es un marco basado en HTML.
Entonces, para usar Bootstrap en JavaFX, use el componente de representación HTML de JavaFX WebView para representar Bootstrap HTML / CSS y JavaScript.
Aplicación de muestra
Aplicación de muestra que realiza una integración básica de Bootstrap y una interfaz de usuario JavaFX.
Los botones JavaFX en la parte superior de la pantalla navegan por una página WebView para representar diferentes tipos de componentes 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()
@Override
public void handle(ActionEvent event)
webview.getEngine().load(BOOTSTRAP_PREFIX + anchor.toString());
);
Pregunta adicional, ligeramente no relacionada
¿Es posible interceptar eventos de clic de botón desde una vista web?
Si. Puede adjuntar controladores de clics en código Java a través del acceso a la API DOM de w3c que proporciona WebEngine. Consulte la documentación de WebEngine para obtener más detalles:
Acceso al modelo de documento
Los objetos WebEngine crean y administran un modelo de objetos de documento (DOM) para sus páginas web. Se puede acceder al modelo y modificarlo mediante las clases de Java DOM Core. El método getDocument () proporciona acceso a la raíz del modelo. Además, se admite la especificación de eventos DOM para definir controladores de eventos en código Java.
El siguiente ejemplo adjunta un detector de eventos de Java a un elemento de una página web. Al hacer clic en el elemento, la aplicación se cierra:
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);
Sin embargo, para mí a menudo es más fácil manejar la interfaz con documentos w3c usando JavaScript (específicamente jQuery), en lugar de Java. Aquí hay un ejemplo de emisión desde código Java, una llamada jQuery para proporcionar controladores de clics en un WebView.
En Fextile (Bootstrap busca controles nativos de JavaFX)
¿Por qué no simplemente portar bootstrap.css para cumplir con las convenciones de nomenclatura de javafx?
Porque:
- Hay más en bootstrap que solo el CSS, es un marco de interfaz de usuario de respuesta completa con controles activos basados en JavaScript y un mecanismo de extensión de usuario.
- La representación en WebView hará que el html de arranque en JavaFX sea exactamente igual que si estuviera en un navegador web, entonces, ¿por qué migrar cuando ya tiene algo que funcionará perfectamente sin esfuerzo adicional?
- Es un objetivo en movimiento, el proyecto troncal bootstrap.css recibe muchas contribuciones de cientos de desarrolladores, sería difícil mantenerse al día con eso con un puerto JavaFX de cosecha propia, aunque si seleccionó solo un subconjunto más pequeño de características de arranque que se mantienen sincronizadas sería más fácil.
Aún así, es posible hacer el puerto (como se vincula en la respuesta de Philippe), y eso es lo que Takayuki Okazaki ha creado en su proyecto Fextile: “Twitter Bootstrap como marco de interfaz de usuario para JavaFX. Aplique temas a su aplicación como Twitter Bootstrap a través de JavaFX CSS. “. No espere una coincidencia exacta con bootstrap en HTML, pero debería permitir que sus controles JavaFX que no usan HTML tengan una apariencia bastante cercana a lo que lograría con bootstrap en HTML.
También puede crear una aplicación híbrida, donde algunas partes de la interfaz de usuario son de HTML con bootstrap y otras se renderizan desde controles JavaFX usando Fextile. Si aplicara un enfoque de este tipo a la aplicación de muestra en esta respuesta, entonces los botones JavaFX “progreso”, “jumbotron”, etc. se verían como sus contrapartes HTML bootstrap, dando a toda la aplicación una apariencia más consistente.
Además, tenga en cuenta que hay un proyecto similar para los estilos Foundation para JavaFX, como se anunció en esta publicación del foro de Oracle JavaFX. Este proyecto imita el aspecto básico de Foundation para los controles nativos de JavaFX. Para algunos usos, adoptar estilos Foundation puede ser más apropiado que los estilos Bootstrap, ya que el proyecto tiene un alcance más pequeño que Bootstrap (hasta donde yo sé).
Aquí hay una sesión de preguntas y respuestas (de la publicación del foro Oracle JavaFX) sobre cómo crear el estilo Foundation (para que alguien pueda tener una idea relativa de lo que implica extender Fextile para características adicionales de estilo Bootstrap). Tenga en cuenta que las preguntas y respuestas son un poco antiguas y, desde entonces, se ha agregado un analizador de CSS a SceneBuilder:
1) ¿Qué tan difícil fue este trabajo?
No en absoluto: toda la experiencia fue muy agradable y muy fácil de hacer. Esta es mi primera aplicación JavaFX (un editor de estilo de mapa con vista previa en tiempo real)
2) ¿Le llevó mucho tiempo?
No: con la vista previa de ScenceBuilder 1.1, los estilos se actualizan sobre la marcha; el SceneBuilder podría funcionar con un editor de CSS incorporado, pero eso es solo menor: el flujo de trabajo fue bastante simple de todos modos
3) Para un puerto simple, ¿cree que necesita alguna habilidad de diseño, o podría haberlo hecho alguien que sepa un poco de css / html / javafx?
Cualquiera puede hacer esto: mi experiencia es el código del lado del servidor, no hago mucho en cuanto a interfaces, conozco muy bien JS y HTML, pero mi CSS me deja mucho que desee: básicamente, si puedo hacerlo. ..
4) ¿Fue la diferencia entre la sintaxis javafx css y la sintaxis html css un problema importante o no realmente un problema?
Una vez que me acostumbré, no hizo ninguna diferencia, aunque sigo olvidándome de agregar ‘-fx-‘ y el -fx-text-fill que siempre escribo como -fx-text-color …
5) De manera similar, ¿la falta de una correspondencia uno a uno entre las etiquetas de los documentos html (por ejemplo, las etiquetas de encabezado) y JavaFX complicó esto?
No
6) ¿El próximo soporte de texto enriquecido en JavaFX 8 simplificará (o hará posible) más de este tipo de puertos?
Necesito echar un vistazo a esto: como dije, soy un principiante completo con JavaFX, así que todavía me estoy poniendo al día con la implementación actual.
Los estilos de bootstrap serían realmente agradables: muchas personas a las que les he mostrado la aplicación se sorprenden cuando les digo que es Java y no una aplicación web incorporada.
No es una implementación completa del estilo de arranque, pero puede comenzar con este archivo css: https://github.com/watermint/Fextile/blob/master/src/main/resources/fextile.css
Reseñas y valoraciones
Si te mola la invitación, tienes la opción de dejar un ensayo acerca de qué te ha impresionado de esta crónica.