Die Anleitung zu JavaFX WebView und WebEngine

1- JavaFX WebView

JavaFX WebView ist ein Mini Browser, oder ein embedded browser in der Applikation JavaFX auch genannt . Die Browser basiert auf WebKit, ein browser engine mit der Open Source , sie unterstützt CSS, JavaScript, DOM und HTML5.
JavaFX WebView hilft Ihnen bei Durchführung der folgenden  Aufgabe in der Applikation JavaFX:
  • Die  Bezeichnung der HTML Inhalt aus lokale URL und Remote
  • Die Sammelung der Web-geschicht
  • Die Durchführung der Javascript
  • Die Durchführung der Anruf vom Javascript zu JavaFX
  • Das Management der Pop- up Fenster
  • Die Anwendung der Effekte für embedded Browser
Bei der jetzige Version ( JavaFX 2.3) unterstützt der  WebView die folgenden Funktionen von HTML5
  • Canvas
  • Media Playback
  • Form controls (except for <input type="color"> )
  • Editable content
  • History maintenance
  • Support for the <meter> and <progress> tags.
  • Support for the <details> and <summary> tags.
  • DOM
  • SVG
  • Support for domain names written in national languages
Unten ist die Struktur von embedded Browser in JavaFX:

WebEngine

Class WebEngine bietet die grundsätzliche Web Funktion.  Er unterstützt den Benutzer bei Submit Form HTML .. obwohl er keine direkte Interaktion mit den Benutzer hat. Class WebEngine geht ein Website in einer Zeitpunkt ein. Er unterstützt die grundsätzliche Web Funktionen wie HTML Herunterladung, Eingang mit DOM oder JavaScript

WebView

Class WebView ist aus class Node ausgeweitert, packt WebEngine ein und zeigt die HTML Inhalt. Sie können die Gegenstand WebEngine aus WebView durch die Methode  getEngine() nehmen
// Create a WebView
WebView browser = new WebView();

// Get WebEngine via WebView
WebEngine webEngine = browser.getEngine();

// Load page
webEngine.load("http://eclipse.com");

2- Das Beispiel mit WebView

Ein URL remote herunterladen
WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();

String url = "https://eclipse.org";

// Load a page from remote url.
webEngine.load(url);
Außer der Anzeige einer URL Herunterladung von fern, können Sie ein HTML Text anzeigen
// A HTML text

String html = "<html><h1>Hello</h1><h2>Hello</h2></html>";

// Load content.
webEngine.loadContent(html);

// Or
webEngine.loadContent(html,"text/html");
Oder ein HTML aus lokalen File herunterladen
File file = new File("C:/test/a.html");
URL url= file.toURI().toURL();

// file:/C:/test/a.html
webEngine.load(url.toString());
Beispiel mit WebView. Notiz:  WebView liegt im Default in einer ScrollPane, die Scroll entsteht wenn die Text als die Anzeigeraum großer ist.
WebViewDemo.java
package org.o7planning.javafx.webview;

import java.io.File;
import java.net.MalformedURLException;
import java.net.URL;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class WebViewDemo extends Application {

    @Override
    public void start(final Stage stage) {

        Button buttonURL = new Button("Load Page https://eclipse.org");
        Button buttonHtmlString = new Button("Load HTML String");
        Button buttonHtmlFile = new Button("Load File C:/test/a.html");

        final WebView browser = new WebView();
        final WebEngine webEngine = browser.getEngine();

        buttonURL.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent event) {
                String url = "https://eclipse.org";
                // Load a page from remote url.
                webEngine.load(url);
            }
        });

        buttonHtmlString.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent event) {
                String html = "<html><h1>Hello</h1><h2>Hello</h2></html>";
                // Load HTML String
                webEngine.loadContent(html);
            }
        });
        buttonHtmlFile.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent event) {
                try {
                    File file = new File("C:/test/a.html");
                    URL url = file.toURI().toURL();
                    // file:/C:/test/a.html
                    System.out.println("Local URL: " + url.toString());
                    webEngine.load(url.toString());
                } catch (MalformedURLException e) {
                    e.printStackTrace();
                }

            }
        });

        VBox root = new VBox();
        root.setPadding(new Insets(5));
        root.setSpacing(5);
        root.getChildren().addAll(buttonURL, buttonHtmlString, buttonHtmlFile, browser);

        Scene scene = new Scene(root);

        stage.setTitle("JavaFX WebView (o7planning.org)");
        stage.setScene(scene);
        stage.setWidth(450);
        stage.setHeight(300);

        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

3- Das Beispiel von WebView und ProgressBar 

Es kostet Zeit um ein Web auf einen Browser zu laden. Manchmal brauchen Sie ein Progressbar um die Prozent der heruntergeladete Web zu zeigen
WebViewWithProgressDemo.java
package org.o7planning.javafx.webview;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Worker;
import javafx.concurrent.Worker.State;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class WebViewWithProgressDemo extends Application {

   @Override
   public void start(final Stage stage) {

       TextField addressBar = new TextField();
       addressBar.setText("https://eclipse.org");
       Button goButton = new Button("Go!");
       Label stateLabel = new Label();

       stateLabel.setTextFill(Color.RED);
       ProgressBar progressBar = new ProgressBar();

       final WebView browser = new WebView();
       final WebEngine webEngine = browser.getEngine();

       // A Worker load the page
       Worker<Void> worker = webEngine.getLoadWorker();

        // Listening to the status of worker
       worker.stateProperty().addListener(new ChangeListener<State>() {

           @Override
           public void changed(ObservableValue<? extends State> observable, State oldValue, State newValue) {
               stateLabel.setText("Loading state: " + newValue.toString());
               if (newValue == Worker.State.SUCCEEDED) {
                   stage.setTitle(webEngine.getLocation());
                   stateLabel.setText("Finish!");
               }
           }
       });

       // Bind the progress property of ProgressBar
       // with progress property of Worker
       progressBar.progressProperty().bind(worker.progressProperty());

       goButton.setOnAction(new EventHandler<ActionEvent>() {

           @Override
           public void handle(ActionEvent event) {
               String url = addressBar.getText();
               // Load the page.
               webEngine.load(url);
           }
       });
       //

       VBox root = new VBox();
       root.getChildren().addAll(addressBar, goButton, stateLabel, progressBar, browser);

       Scene scene = new Scene(root);

       stage.setTitle("JavaFX WebView (o7planning.org)");
       stage.setScene(scene);
       stage.setWidth(450);
       stage.setHeight(300);

       stage.show();
   }

   public static void main(String[] args) {
       launch(args);
   }

}

4- Die Aufruf auf Javascript vom JavaFX

Nachdem WebView ein Web ladet, können Sie die Web aus JavaFX eingehen. Beispiel: Wenn der Benutzer ein Button in JavaFX klickt, wird ein Funktion JavaScript von auf WebView angezeigten Web geruft 
// Enable Javascript.
webEngine.setJavaScriptEnabled(true);

// Call a JavaScript function of the current page
webEngine.executeScript("changeBgColor();");A
WebViewExecuteJsDemo.java
package org.o7planning.javafx.webview;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class WebViewExecuteJsDemo extends Application {

   // A HTML Content with a javascript function.
   private static String HTML_STRING = //
           "<html>"//
                   + "<head> " //
                   + "  <script language='javascript'> " //
                   + "     function changeBgColor()  { "//
                   + "       var color= document.getElementById('color').value; "//
                   + "       document.body.style.backgroundColor= color; " //
                   + "     } " //
                   + "  </script> "//
                   + "</head> "//
                   + "<body> "//
                   + "   <h2>This is Html content</h2> "//
                   + "   <b>Enter Color:</b> "//
                   + "   <input id='color' value='yellow' /> "//
                   + "   <button onclick='changeBgColor();'>Change Bg Color</button> "//
                   + "</body> "//
                   + "</html> "//
   ;

   @Override
   public void start(final Stage stage) {

       Button button = new Button("Execute Javascript (Call from JavaFX)");

       final WebView browser = new WebView();
       final WebEngine webEngine = browser.getEngine();

       // Enable Javascript.
       webEngine.setJavaScriptEnabled(true);

       webEngine.loadContent(HTML_STRING);

       button.setOnAction(new EventHandler<ActionEvent>() {

           @Override
           public void handle(ActionEvent event) {
               // Call a JavaScript function of the current page
               webEngine.executeScript("changeBgColor();");
           }
       });

       VBox root = new VBox();
       root.setPadding(new Insets(5));
       root.setSpacing(5);
       root.getChildren().addAll(button, browser);

       Scene scene = new Scene(root);

       stage.setTitle("JavaFX WebView (o7planning.org)");
       stage.setScene(scene);
       stage.setWidth(450);
       stage.setHeight(300);

       stage.show();
   }

   public static void main(String[] args) {
       launch(args);
   }

}
Sie können die Gegenstand Javascript durch die Java gegenstand eingehen. Meiste javascript Gegenstand werden von  netscape.javascript.JSObject einpacken. Die Methode von  JSObject:
public Object call(String methodName, Object... args);

public Object eval(String s);

public Object getMember(String name);

public void setMember(String name, Object value);

public void removeMember(String name);

public Object getSlot(int index);

public void setSlot(int index, Object value);
Beispiel
// Back Browser History

webEngine.executeScript("history.back()");

// Or
// Get the object representing the history of JavaScript objects JSObject.
JSObject history = (JSObject) webEngine.executeScript("history");

// Call 'back' method, without parameter.
history.call("back");
ein besonderer Fall : ein Gegenstand DOM (DOM Node) wird beim Anruf ein JavaScript Gegenstand entsteht. In diesem Fall wird das Ergebnis von  JSObject gepackt und auf interface org.w3c.dom.Node. durchgeführt
Element p = (Element) ebEngine.executeScript("document.getElementById('para')");

p.setAttribute("style", "font-weight: bold");

5- Die Aufruf auf JavaFX von JavaScript machen

Oben können Sie vom JavaFX ein Javascript Funktion der auf WebView angezeigten Web rufen. umgekehrt können Sie Upcalls vom JavaScript zu JavaFX
In der JavaFX Seite sollen Sie ein Kommunikationgegenstand einer Class und durch JSObject.setMember() bewährt, dass JavaScript es wisst.Nachdem können Sie die public Methode von Java Gegenstand aus Javascript rufen
// A Bridge class and must a public class
public class Bridge {

    public void showTime() {
        System.out.println("Show Time");

        label.setText("Now is: " + df.format(new Date()));
    }
}

// Get window object of page.
JSObject jsobj = (JSObject) webEngine.executeScript("window");

// Set member cho đối tượng 'window'
jsobj.setMember("myJavaMember", new Bridge());
In der Seite HTML:
<!-- In HTML -->

<button onclick='myJavaMember.showTime();'>Call To JavaFX</button>
Beispiel
WebViewUpCallsDemo.java
package org.o7planning.javafx.webview;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Worker;
import javafx.concurrent.Worker.State;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import netscape.javascript.JSObject;

public class WebViewUpCallsDemo extends Application {

    private DateFormat df = new SimpleDateFormat("dd-MM-yyyy HH:mm:ss");

    private Label label;

    // A Bridge class and must a public class
    public class Bridge {

        public void showTime() {
            System.out.println("Show Time");

            label.setText("Now is: " + df.format(new Date()));
        }
    }

    // A HTML Content with a javascript function.
    private static String HTML_STRING = //
            "<html>"//
                    + "<head> " //
                    + "  <script language='javascript'> " //
                    + "     function callToJavaFX()  { "//
                    + "        myJavaMember.showTime(); " //
                    + "     } " //
                    + "  </script> "//
                    + "</head> "//
                    + "<body> "//
                    + "   <h2>This is Html content</h2> "//
                    + "   <button onclick='callToJavaFX();'>Call To JavaFX</button> "//
                    + "</body> "//
                    + "</html> "//
    ;

    @Override
    public void start(final Stage stage) {

        label = new Label("-");

        final WebView browser = new WebView();
        final WebEngine webEngine = browser.getEngine();

        // Enable Javascript.
        webEngine.setJavaScriptEnabled(true);

        // A Worker load the page
        Worker<Void> worker = webEngine.getLoadWorker();

        // Listening to the status of worker
        worker.stateProperty().addListener(new ChangeListener<State>() {

            @Override
            public void changed(ObservableValue<? extends State> observable, //
                    State oldValue, State newValue) {

                // When load successed.
                if (newValue == Worker.State.SUCCEEDED) {
                    // Get window object of page.
                    JSObject jsobj = (JSObject) webEngine.executeScript("window");

                    // Set member for 'window' object.
                    // In Javascript access: window.myJavaMember....
                    jsobj.setMember("myJavaMember", new Bridge());
                }
            }
        });

        // Load HTML content.
        // Tải nội dung HTML
        webEngine.loadContent(HTML_STRING);

        VBox root = new VBox();
        root.setPadding(new Insets(5));
        root.setSpacing(5);
        root.getChildren().addAll(label, browser);

        Scene scene = new Scene(root);

        stage.setTitle("JavaFX WebView (o7planning.org)");
        stage.setScene(scene);
        stage.setWidth(450);
        stage.setHeight(300);

        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

View more categories: