DOC-04-06 完成JavaScript到JavaFX的调用

29 七, 2015 官方文档翻译 javafxchina Permalink

现在你已经知道如何在JavaFX中调用JavaScript。在本章中，你将了解到相反的功能——在web页面中调用JavaFX。

大体上的理念是在JavaFX程序中创建一个接口对象，并通过调用JSObject.setMember()方法使它对JavaScript可见。然后你就可以在JavaScript中调用该对象的public方法、访问public属性了。

6.1 使用JavaScript指令退出JavaFX程序

首先，在help.html文件中再添加一行：<p><a href=”about:blank”

onclick=”app.exit()”>Exit the Application</a></p>。通过点击help.html文件中的“Exit the Application”链接，用户就可以退出WebViewSample程序。如例6-1中展示的那样修改程序来实现这个功能。

例6-1 通过使用JavaScript来关闭JavaFX程序

import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Worker.State;
import javafx.event.ActionEvent;
import javafx.geometry.HPos;
import javafx.geometry.Pos;
import javafx.geometry.VPos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Hyperlink;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.Region;
import javafx.scene.paint.Color;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import netscape.javascript.JSObject;
 
public class WebViewSample extends Application {
 
    private Scene scene;
 
    @Override
    public void start(Stage stage) {
        // create scene
        stage.setTitle("Web View Sample");
        scene = new Scene(new Browser(stage), 900, 600, Color.web("#666970"));
        stage.setScene(scene);
        // apply CSS style
        scene.getStylesheets().add("webviewsample/BrowserToolbar.css");
        // show stage
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}
 
class Browser extends Region {
 
    private final HBox toolBar;
    final private static String[] imageFiles = new String[]{
        "product.png",
        "blog.png",
        "documentation.png",
        "partners.png",
        "help.png"
    };
    final private static String[] captions = new String[]{
        "Products",
        "Blogs",
        "Documentation",
        "Partners",
        "Help"
    };
    final private static String[] urls = new String[]{
        "http://www.oracle.com/products/index.html",
        "http://blogs.oracle.com/",
        "http://docs.oracle.com/javase/index.html",
        "http://www.oracle.com/partners/index.html",
        WebViewSample.class.getResource("help.html").toExternalForm()
    };
    final ImageView selectedImage = new ImageView();
    final Hyperlink[] hpls = new Hyperlink[captions.length];
    final Image[] images = new Image[imageFiles.length];
    final WebView browser = new WebView();
    final WebEngine webEngine = browser.getEngine();
    final Button toggleHelpTopics = new Button("Toggle Help Topics");
    private boolean needDocumentationButton = false;
    
    
    public Browser(final Stage stage) {
        //apply the styles
        getStyleClass().add("browser");
                
        for (int i = 0; i < captions.length; i++) {
            // create hyperlinks
            Hyperlink hpl = hpls[i] = new Hyperlink(captions[i]);
            Image image = images[i]
                    = new Image(getClass().getResourceAsStream(imageFiles[i]));
            hpl.setGraphic(new ImageView(image));
            final String url = urls[i];
            final boolean addButton = (hpl.getText().equals("Help"));  
            
            // process event 
            hpl.setOnAction((ActionEvent e) -> {
                needDocumentationButton = addButton;
                webEngine.load(url);
            });
                    
        }
 
        // create the toolbar
        toolBar = new HBox();
        toolBar.setAlignment(Pos.CENTER);
        toolBar.getStyleClass().add("browser-toolbar");
        toolBar.getChildren().addAll(hpls);
        toolBar.getChildren().add(createSpacer());
 
        //set action for the button
        toggleHelpTopics.setOnAction((ActionEvent t) -> {
            webEngine.executeScript("toggle_visibility('help_topics')");
        });
 
         // process page loading
        webEngine.getLoadWorker().stateProperty().addListener(
            (ObservableValue<? extends State> ov, State oldState, 
                State newState) -> {
                    toolBar.getChildren().remove(toggleHelpTopics);
                    if (newState == State.SUCCEEDED) {
                        JSObject win
                                = (JSObject) webEngine.executeScript("window");
                        win.setMember("app", new JavaApp());
                        if (needDocumentationButton) {
                            toolBar.getChildren().add(toggleHelpTopics);
                        }
                    }
        });
 
        // load the home page        
        webEngine.load("http://www.oracle.com/products/index.html");
 
        //add components
        getChildren().add(toolBar);
        getChildren().add(browser);
    }
    
    // JavaScript interface object
    public class JavaApp {
 
        public void exit() {
            Platform.exit();
        }
    }
 
    private Node createSpacer() {
        Region spacer = new Region();
        HBox.setHgrow(spacer, Priority.ALWAYS);
        return spacer;
    }
 
    @Override
    protected void layoutChildren() {
        double w = getWidth();
        double h = getHeight();
        double tbHeight = toolBar.prefHeight(w);
        layoutInArea(browser,0,0,w,h-tbHeight,0,HPos.CENTER,VPos.CENTER);
        layoutInArea(toolBar,0,h-tbHeight,w,tbHeight,0,HPos.CENTER,VPos.CENTER);
    }
 
    @Override
    protected double computePrefWidth(double height) {
        return 900;
    }
 
    @Override
    protected double computePrefHeight(double width) {
        return 600;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

import javafx.application.Application;

import javafx.application.Platform;

import javafx.beans.value.ObservableValue;

import javafx.concurrent.Worker.State;

import javafx.event.ActionEvent;

import javafx.geometry.HPos;

import javafx.geometry.Pos;

import javafx.geometry.VPos;

import javafx.scene.Node;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.control.Hyperlink;

import javafx.scene.image.Image;

import javafx.scene.image.ImageView;

import javafx.scene.layout.HBox;

import javafx.scene.layout.Priority;

import javafx.scene.layout.Region;

import javafx.scene.paint.Color;

import javafx.scene.web.WebEngine;

import javafx.scene.web.WebView;

import javafx.stage.Stage;

import netscape.javascript.JSObject;

public class WebViewSample extends Application {

private Scene scene;

@Override

public void start(Stage stage) {

// create scene

stage.setTitle("Web View Sample");

scene = new Scene(new Browser(stage), 900, 600, Color.web("#666970"));

stage.setScene(scene);

// apply CSS style

scene.getStylesheets().add("webviewsample/BrowserToolbar.css");

// show stage

stage.show();

}

public static void main(String[] args) {

launch(args);

}

class Browser extends Region {

private final HBox toolBar;

final private static String[] imageFiles = new String[]{

"product.png",

"blog.png",

"documentation.png",

"partners.png",

"help.png"

};

final private static String[] captions = new String[]{

"Products",

"Blogs",

"Documentation",

"Partners",

"Help"

};

final private static String[] urls = new String[]{

"http://www.oracle.com/products/index.html",

"http://blogs.oracle.com/",

"http://docs.oracle.com/javase/index.html",

"http://www.oracle.com/partners/index.html",

WebViewSample.class.getResource("help.html").toExternalForm()

};

final ImageView selectedImage = new ImageView();

final Hyperlink[] hpls = new Hyperlink[captions.length];

final Image[] images = new Image[imageFiles.length];

final WebView browser = new WebView();

final WebEngine webEngine = browser.getEngine();

final Button toggleHelpTopics = new Button("Toggle Help Topics");

private boolean needDocumentationButton = false;

public Browser(final Stage stage) {

//apply the styles

getStyleClass().add("browser");

for (int i = 0; i < captions.length; i++) {

// create hyperlinks

Hyperlink hpl = hpls[i] = new Hyperlink(captions[i]);

Image image = images[i]

= new Image(getClass().getResourceAsStream(imageFiles[i]));

hpl.setGraphic(new ImageView(image));

final String url = urls[i];

final boolean addButton = (hpl.getText().equals("Help"));

// process event

hpl.setOnAction((ActionEvent e) -> {

needDocumentationButton = addButton;

webEngine.load(url);

});

}

// create the toolbar

toolBar = new HBox();

toolBar.setAlignment(Pos.CENTER);

toolBar.getStyleClass().add("browser-toolbar");

toolBar.getChildren().addAll(hpls);

toolBar.getChildren().add(createSpacer());

//set action for the button

toggleHelpTopics.setOnAction((ActionEvent t) -> {

webEngine.executeScript("toggle_visibility('help_topics')");

});

// process page loading

webEngine.getLoadWorker().stateProperty().addListener(

(ObservableValue<? extends State> ov, State oldState,

State newState) -> {

toolBar.getChildren().remove(toggleHelpTopics);

if (newState == State.SUCCEEDED) {

JSObject win

= (JSObject) webEngine.executeScript("window");

win.setMember("app", new JavaApp());

if (needDocumentationButton) {

toolBar.getChildren().add(toggleHelpTopics);

}

});

// load the home page

webEngine.load("http://www.oracle.com/products/index.html");

//add components

getChildren().add(toolBar);

getChildren().add(browser);

}

// JavaScript interface object

public class JavaApp {

public void exit() {

Platform.exit();

}

private Node createSpacer() {

Region spacer = new Region();

HBox.setHgrow(spacer, Priority.ALWAYS);

return spacer;

}

@Override

protected void layoutChildren() {

double w = getWidth();

double h = getHeight();

double tbHeight = toolBar.prefHeight(w);

layoutInArea(browser,0,0,w,h-tbHeight,0,HPos.CENTER,VPos.CENTER);

layoutInArea(toolBar,0,h-tbHeight,w,tbHeight,0,HPos.CENTER,VPos.CENTER);

}

@Override

protected double computePrefWidth(double height) {

return 900;

}

@Override

protected double computePrefHeight(double width) {

return 600;

}

检查例6-1中的粗体代码。JavaApp接口的exit()方法是public的，因此它可以被外部访问。这个方法被调用的时候，就会终止JavaFX程序的运行。

例6-1中的JavaApp接口被设置为JSObject实例的一个成员，因此JavaScript就知道了该接口。在JavaScript中该接口的名称是window.app或者直接就是app，它唯一能被JavaScript调用的方法就是app.exit()。

当你编译、运行WebViewSample程序并点击Help图标，Exit the Application链接会出现在页面底部，如图6-1所示。

图6-1 Exit Application链接

检查文件的内容，然后点击例6-1中的Exit the Application链接来关闭WebViewSample程序。

打赏一下

支付宝

微信

除非注明，博客文章均为原创，转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/07/html_javascript_to_javafx/

HTML JavaScript

百度已收录

JavaFX中文资料

DOC-04-06 完成JavaScript到JavaFX的调用

6.1 使用JavaScript指令退出JavaFX程序

JavaFX中文文档

近期文章

近期评论

标签