Wednesday, May 30, 2012

Embed WebView in FXML, to load OpenLayers with OpenStreetMap.

Last article demonstrate how to "Embed OpenLayers with OpenStreetMap in JavaFX WebView". This article demonstrate how to do it in FXML.

Embed WebView in FXML, to load OpenLayers with OpenStreetMap.

New a JavaFX FXML Application in NetBeans.

Copy openstreetmap.html from last article.

Create, extends Region.
package javafxml_web;

import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

 * @web
public class MyBrowser extends Region{
        HBox toolbar;

        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        public MyBrowser(){
            final URL urlGoogleMaps = getClass().getResource("openstreetmap.html");

Modify Sample.fxml to add MyBrowser, and remove un-used elements.
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafxml_web.*?>

<AnchorPane id="AnchorPane" prefHeight="500" prefWidth="660" xmlns:fx="" fx:controller="javafxml_web.Sample">
        <MyBrowser id="mybrowser" layoutX="10" layoutY="10" prefHeight="460" prefWidth="620" fx:id="mybrowser" />

Modify to remove un-used code.
package javafxml_web;

import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;

 * @web
public class Sample implements Initializable {
    private MyBrowser mybrowser;
    private void handleButtonAction(ActionEvent event) {

    public void initialize(URL url, ResourceBundle rb) {
        // TODO


  1. Hello there is a failure after compiling:
    MyBrowser is not a valid type

    Can you help me?

    1. hello,

      make sure the statement <?import javafxml_web.*?> in Sample.fxml match with your package name.