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.

New a JavaFX FXML Application in NetBeans.

Copy openstreetmap.html from last article.

Create MyBrowser.java, extends Region.

package javafxml_web;

import java.net.URL;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class MyBrowser extends Region{
        HBox toolbar;

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

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="http://javafx.com/fxml" fx:controller="javafxml_web.Sample">
    <children>
        <MyBrowser id="mybrowser" layoutX="10" layoutY="10" prefHeight="460" prefWidth="620" fx:id="mybrowser" />
    </children>
</AnchorPane>

Modify Sample.java to remove un-used code.

package javafxml_web;

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

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class Sample implements Initializable {
    
    @FXML
    private MyBrowser mybrowser;
    
    @FXML
    private void handleButtonAction(ActionEvent event) {

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