DOC-04-04 在程序中添加WebView组件

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

本章介绍了WebViewSample程序并说明了如何完成在JavaFX程序中添加WebView组件的任务。

WebViewSample程序创建了Browser类，该类封装了WebView对象和有多种UI控件的工具栏。程序中的WebViewSample类创建了scene并在其中添加了Browser对象。

4.1 创建内嵌式浏览器

例4-1展示了如何在程序的scene中添加WebView组件。

例4-1 使用WebView和WebEngine类创建Browser

import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.Node;
import javafx.scene.Scene;
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;
 
 
public class WebViewSample extends Application {
    private Scene scene;
    @Override public void start(Stage stage) {
        // create the scene
        stage.setTitle("Web View");
        scene = new Scene(new Browser(),900,600, Color.web("#666970"));
        stage.setScene(scene);
        scene.getStylesheets().add("webviewsample/BrowserToolbar.css");        
        stage.show();
    }
 
    public static void main(String[] args){
        launch(args);
    }
}
class Browser extends Region {
 
    final WebView browser = new WebView();
    final WebEngine webEngine = browser.getEngine();
     
    public Browser() {
        //apply the styles
        getStyleClass().add("browser");
        // load the web page
        webEngine.load("http://www.oracle.com/products/index.html");
        //add the web view to the scene
        getChildren().add(browser);
 
    }
    private Node createSpacer() {
        Region spacer = new Region();
        HBox.setHgrow(spacer, Priority.ALWAYS);
        return spacer;
    }
 
    @Override protected void layoutChildren() {
        double w = getWidth();
        double h = getHeight();
        layoutInArea(browser,0,0,w,h,0, HPos.CENTER, VPos.CENTER);
    }
 
    @Override protected double computePrefWidth(double height) {
        return 900;
    }
 
    @Override protected double computePrefHeight(double width) {
        return 600;
    }
}

import javafx.application.Application;

import javafx.geometry.HPos;

import javafx.geometry.VPos;

import javafx.scene.Node;

import javafx.scene.Scene;

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;

public class WebViewSample extends Application {

private Scene scene;

@Override public void start(Stage stage) {

// create the scene

stage.setTitle("Web View");

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

stage.setScene(scene);

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

stage.show();

}

public static void main(String[] args){

launch(args);

}

class Browser extends Region {

final WebView browser = new WebView();

final WebEngine webEngine = browser.getEngine();

public Browser() {

//apply the styles

getStyleClass().add("browser");

// load the web page

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

//add the web view to the scene

getChildren().add(browser);

}

private Node createSpacer() {

Region spacer = new Region();

HBox.setHgrow(spacer, Priority.ALWAYS);

return spacer;

}

@Override protected void layoutChildren() {

double w = getWidth();

double h = getHeight();

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

}

@Override protected double computePrefWidth(double height) {

return 900;

}

@Override protected double computePrefHeight(double width) {

return 600;

}

在这段代码中，网页引擎加载了一个指向Oracle公司网站的URL。使用getChildren和add方法将包含网页引擎的WebView对象添加到程序中。

将上面代码片段的编译、运行结果如图4-1所示。

图4-1 程序中的WebView

4.2 创建程序工具栏

添加一个包含4个超链接（Hyperlink）对象的工具栏以在不同的Oracle web资源间进行切换。学习一下例4-2中修改过的Browser类代码。程序中添加了各种不同web资源的URL，包括Oracle产品、博客、Java文档和合作伙伴网络。同样，该代码中也创建了工具栏并在其中添加了超链接。

例4-2 创建工具栏

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.Node;
import javafx.scene.Scene;
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;
 
public class WebViewSample extends Application {
 
    private Scene scene;
 
    @Override public void start(Stage stage) {
        // create scene
        stage.setTitle("Web View");
        scene = new Scene(new Browser(),900,600, Color.web("#666970"));
        stage.setScene(scene);
        scene.getStylesheets().add("webviewsample/BrowserToolbar.css");
        // show stage
        stage.show();
    }
 
    public static void main(String[] args){
        launch(args);
    }
}
class Browser extends Region {
   private HBox toolBar;
 
   final private static String[] imageFiles = new String[]{
        "product.png",
        "blog.png",
        "documentation.png",
        "partners.png"
    };
    final private static String[] captions = new String[]{
        "Products",
        "Blogs",
        "Documentation",
        "Partners"
    };
 
    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"
    };
 
    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();
 
    public Browser() {       
        //apply the styles
        getStyleClass().add("browser");
        
        for (int i = 0; i < captions.length; i++) {
            final 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];
 
            hpl.setOnAction(new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent e) {
                    webEngine.load(url);   
                }
            });
        }        
 
        // load the home page        
        webEngine.load("http://www.oracle.com/products/index.html");
        
        // create the toolbar
        toolBar = new HBox();
        toolBar.getStyleClass().add("browser-toolbar");
        toolBar.getChildren().addAll(hpls);        
    
        //add components
        getChildren().add(toolBar);
        getChildren().add(browser); 
    }
 
    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

import javafx.application.Application;

import javafx.event.ActionEvent;

import javafx.event.EventHandler;

import javafx.geometry.HPos;

import javafx.geometry.VPos;

import javafx.scene.Node;

import javafx.scene.Scene;

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;

public class WebViewSample extends Application {

private Scene scene;

@Override public void start(Stage stage) {

// create scene

stage.setTitle("Web View");

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

stage.setScene(scene);

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

// show stage

stage.show();

}

public static void main(String[] args){

launch(args);

}

class Browser extends Region {

private HBox toolBar;

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

"product.png",

"blog.png",

"documentation.png",

"partners.png"

};

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

"Products",

"Blogs",

"Documentation",

"Partners"

};

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"

};

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();

public Browser() {

//apply the styles

getStyleClass().add("browser");

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

final 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];

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

@Override

public void handle(ActionEvent e) {

webEngine.load(url);

}

});

}

// load the home page

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

// create the toolbar

toolBar = new HBox();

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

toolBar.getChildren().addAll(hpls);

//add components

getChildren().add(toolBar);

getChildren().add(browser);

}

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;

}

上面的代码用了for循环来创建超链接。setOnAction方法定义了超链接的行为。当用户点击链接时，相应的URL的值会传到webEngine的load方法中。修改后的程序编译并运行结果如图4-2所示。

图4-2 有导航栏的内嵌浏览器

打赏一下

支付宝

微信

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

HTML WebView

百度已收录

JavaFX中文资料

DOC-04-04 在程序中添加WebView组件

4.1 创建内嵌式浏览器

4.2 创建程序工具栏

JavaFX中文文档

近期文章

近期评论

标签