JavaFX WebView

febrero 23, 2017

Este componente nos permite insertar contenido web dentro de nuestra aplicación JavaFX, WebView es capaz de realizar las tareas comunes de navegación web como: guardar el historial de navegación, ir a una página al hacer clic en un enlace, acceder al DOM del contenido HTML y ejecutar JavaScript, entre otras cosas.

Programando un navegador web

Para crear un navegador web primero agregamos un WebView a nuestra GUI, del mismo modo como lo hacemos con cualquier otro control JavaFX, para manipular el contenido web debemos obtener un objeto WebEngine para ello usaremos el método getWebEngine(), luego el método load() nos permitirá cargar la página web deseada.

WebView webView = new WebView();

WebEngine webEngine = webView.getEngine();
webEngine.load("http://www.google.com");

StackPane root = new StackPane();
root.getChildren().add(webView);

Scene scene = new Scene(root, 300, 250);

primaryStage.setTitle("JavaFX Navegador Web");
primaryStage.setScene(scene);
primaryStage.show();

Otra forma de agregar contenido al WebView es utilizando contenido almacenado en memoria o en disco para ello usaremos el método loadContent por medio de este podemos carga HTML o cualquier contenido soportado por el WebView indicando su tipo, por ejemplo: “text/html”, “image/png”, etc.

// cargar contenido HTML
String html = "<html><head><title>Tutor de Programacion</title></head>" +
              "<body><h1>Hello JavaFX WebView</h1></body></html>";
webEngine.loadContent(html);

// cargar contenido tipo texto
String text = "Hello JavaFX WebView";
webEngine.loadContent(text, "text/plain");

Podemos monitores algunos eventos interesantes producidos al cargar una página web, por ejemplo, la propiedad titleProperty cambia al navegar a una nueva página, la utilizaremos para sincronizar el titulo de la ventana con el de la web actual, la propiedad progressProperty contiene el progreso de carga, lo mostraremos en un control ProgressBar.

// cambiar el titulo al cargar una nueva pagina web
webEngine.titleProperty()
        .addListener((p, o, t) -> primaryStage.setTitle(t));

// mostrar el progreso de cargar de la web
webEngine.getLoadWorker().progressProperty()
        .addListener((p, o, v) -> progressBar.setProgress(v.doubleValue()));

Lo siguiente que haremos será crear una barra de navegación, en ella podremos indicar la URL de la web, navegar hacia adelante y atrás en el historial de navegación.

Historial de navegación

Para manipular el historial de navegación usaremos la clase WebHistory, obtenemos una instancia de esta clase usando el método webEngine.getHistory() sobre el usamos el método go(+1) para navegar hacia adelante y go(-1) para navegar hacia atrás.

Label urlLabel = new Label("URL");

// cuadro de busqueda
TextField urlText = new TextField("http://www.google.com");
HBox.setHgrow(urlText, Priority.ALWAYS);

// botones de navegacion
Button btnIr = new Button("Ir");
Button btnNext = new Button("Siguiente");
Button btnPrev = new Button("Anterior");

// historial de navegacion
WebHistory history = webEngine.getHistory();

// acciones para cada uno de los botones
btnIr.setOnAction(a -> webEngine.load(urlText.getText()));
btnNext.setOnAction(a -> history.go(+1));
btnPrev.setOnAction(a -> history.go(-1));

Para evitar errores al usar el historial de navegación debemos asegurarnos de no pasar los límites, para ello deshabilitaremos los botones cuando estemos en el límite.

WebHistory history = webEngine.getHistory();

history.currentIndexProperty().addListener((p, oldValue, newValue) -> {
    int currentIndex = newValue.intValue();

    if (currentIndex <= 0) {
        btnPrev.setDisable(true);
    } else {
        btnPrev.setDisable(false);
    }

    if (currentIndex >= history.getEntries().size() - 1) {
        btnNext.setDisable(true);
    } else {
        btnNext.setDisable(false);
    }
});

Si deseamos construir un explorador para el historial de navegación podemos acceder a datos mas detallados usando historial.getEntry() la clase Entry representa una visita a una web almacenada en el historial, contiene información como titulo, URL, fecha de la última visita.

ObservableList<Entry> entries = history.getEntries();

entries.stream().forEach((entry) -> {
    System.out.println("Titulo: " + entry.getTitle()
            + ", URL: " + entry.getUrl()
            + ", Fecha: " + entry.getLastVisitedDate());
});