Simple WebView Sample

JavaFX Flex

The following code is a very simple example how to start loading the url or cancel it.
You can get more details information hereAdding HTML Content to JavaFX Applications | JavaFX 2 Tutorials and Documentation

  • OS version

  • Figure1(During loading the URL)

  • Figure2(When loading has Completed)

  • code1(FXMLDocumentController.java)

The following code shows how to start or cancel loading a url.
This is very easy. First you get the WebEngine and use the load method to get the Web Page.
Since loading happens on a background thread, use the Worker to cancel it.

    public void initialize(URL url, ResourceBundle rb) {
...
        this.engine = webView.getEngine(); // *** 1.get the WebEngine from WebView
...
    }
    @FXML private void loadURL(Event event){
        startLoadState.apply();
        String url = urlText.getText();
        this.engine.load(url);   // *** 2.to start loading the url
    }
    @FXML private void cancelLoad(Event event) {
        startCancelState.apply();
        this.engine.getLoadWorker().cancel();  // *** 3.to cancel loading the url
    }

Thanks to bindings, it is very easy to show progress on indicator.(see figure1)

    public void initialize(URL url, ResourceBundle rb) {
...
        // binding the progressIndicator to the Web LoadWorker
        this.indicator.progressProperty().bind(this.engine.getLoadWorker().progressProperty());
...
    }

You need to add the ChangeListener for changing the state of the screen.
The following code implements SUCCEEDED, CANCELLED and FAILED states, but you can use more.
(FYR seehttp://docs.oracle.com/javafx/2/api/)

    public void initialize(URL url, ResourceBundle rb) {
…
        this.engine.getLoadWorker().stateProperty().addListener(
                (ov, oldState, newState) -> {
                    switch (newState){ 
                        case SUCCEEDED:
                            loadCompletedState.apply();
                            loadCompletedState.setScreenCommonState(this);
                            break;
                        case CANCELLED:
                            loadCanceledState.apply();
                            loadCanceledState.setScreenCommonState(this);
                            break;
                        case FAILED:
                            loadFailedState.apply();
                            loadFailedState.setScreenCommonState(this);
                            break;
                    };
                });
…

I just want to use FunctionalInterface to learn how to use it.
I am not sure if this is the right way.But it is fun to use JavaSE8.

@FunctionalInterface
interface LoadingState{
    void apply();
    default void setScreenCommonState(FXMLDocumentController controller) {
        controller.urlText.setDisable(false);
        controller.loadButton.setDisable(false);
        controller.cancelButton.setDisable(true);
        controller.indicator.setVisible(false);
    }

To change the state of controllers by implementing above FunctionalInterface.

    public void initialize(URL url, ResourceBundle rb) {
        setLoadingState();
…
    }

    private void setLoadingState() {
        initState = () -> {
            loadState.setText("");            
            webView.setVisible(false);
        };
        startLoadState = () -> {
            urlText.setDisable(true);
            loadButton.setDisable(true);
            cancelButton.setDisable(false);
            loadState.setTextFill(Color.BLACK);
            loadState.setText("loading...");            
            webView.setVisible(false);
            indicator.setVisible(true);
        };
        startCancelState = () -> {
            cancelButton.setDisable(true);
            loadState.setTextFill(Color.BLACK);
            loadState.setText("cancelling....");            
        };
        loadCompletedState = () -> {
            loadState.setTextFill(Color.BLACK);
            loadState.setText("completed!");            
            webView.setVisible(true);
        };
        loadFailedState = () -> {
            loadState.setTextFill(Color.RED);
            loadState.setText("failed!!!");            
            webView.setVisible(false);
        };
        loadCanceledState = () -> {
            loadState.setTextFill(Color.ORANGE);
            loadState.setText("canceled!");            
            webView.setVisible(false);
        };
    }

  • code2(FXMLDocument.fxml)
<?xml version="1.0" encoding="UTF-8"?>

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

<AnchorPane id="AnchorPane" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxsimplewebview.FXMLDocumentController">
    <children>
        <WebView fx:id="webView" layoutX="15.0" layoutY="86.0" prefHeight="497.0" prefWidth="773.0" />
        <Label layoutX="30.0" layoutY="33.0" text="URL:" />
        <TextField fx:id="urlText" layoutX="68.0" layoutY="28.0" prefHeight="26.0" prefWidth="592.0" />
        <Button fx:id="loadButton" layoutX="700.0" layoutY="28.0" mnemonicParsing="false" onMouseClicked="#loadURL" prefHeight="26.0" prefWidth="82.0" text="load" />
        <Label fx:id="loadState" layoutX="102.0" layoutY="65.0" prefHeight="16.0" prefWidth="500.0" />
        <Label layoutX="27.0" layoutY="65.0" prefHeight="16.0" prefWidth="75.0" text="load state:" />
        <ProgressIndicator fx:id="indicator" layoutX="163.0" layoutY="119.0" prefHeight="148.0" prefWidth="218.0" progress="0.0" />
        <Button fx:id="cancelButton" layoutX="673.0" layoutY="60.0" mnemonicParsing="false" onMouseClicked="#cancelLoad" prefHeight="26.0" prefWidth="111.0" text="cancel load" />
    </children>
</AnchorPane>

The above code2 is created by Scene Builder.

  • code3(JavaFXSimpleWebView.java)

The main entry point for JavaFX application is here.

public class JavaFXSimpleWebView extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        // *** load the FXML(code2)
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
        Scene scene = new Scene(root);
        stage.setTitle("Simple WebView Sample");
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String[] args) {
        launch(args);  // *** 
    }
}

Assigned the project using Flex, so I created the HTML with swf file before. 2014-05-06 - tomoTakaの日記
I was a little curious about if HTML with Flex works on JavaFX WebView.
It does not work, but it is very fun to try something new by myself.

whole code is herehttps://github.com/tomoTaka01/JavaFXSimpleWebView
just keep coding... ;-)