4 アプリケーション・シーンへのWebViewコンポーネントの追加
この章では、WebViewSampleアプリケーションを紹介し、JavaFXアプリケーションのシーンにWebViewコンポーネントを追加するタスクを実装する方法について説明します。
WebViewSampleアプリケーションは、UIコントロールとともにWebViewオブジェクトとツールバーの両方をカプセル化するBrowserクラスを作成します。アプリケーションのWebViewSampleクラスは、シーンを作成し、そのシーンにBrowserオブジェクトを追加します。
埋込みブラウザの作成
例4-1に、アプリケーション・シーンにWebViewコンポーネントを追加する方法を示します。
例4-1 WebViewおよびWebEngineクラスを使用したブラウザの作成
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;
}
}
このコードでは、WebエンジンによってOracle Webサイトを指すURLがロードされます。このWebエンジンを含むWebViewオブジェクトが、getChildrenおよびaddメソッドを使用することでアプリケーション・シーンに追加されます。
このコードを追加、コンパイルおよび実行すると、図4-1に示すようなアプリケーション・ウィンドウが生成されます。
アプリケーション・ツールバーの作成
Oracleの様々なWebリソースを切り替える、4つのHyperlinkオブジェクトが含まれるツールバーを追加します。例4-2に示すBrowserクラスの変更済コードをよく確認します。このコードでは、Oracle製品、ブログ、Javaドキュメントおよびパートナ・ネットワークを含む代替のWebリソースのURLが追加されます。また、このコードではツールバーが作成され、それにハイパーリンクが追加されます。
例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;
}
}
このコードでは、forループを使用してハイパーリンクが作成されます。setOnActionメソッドでは、ハイパーリンクの動作が定義されます。ユーザーがリンクをクリックすると、対応するURL値がwebEngineのloadメソッドに渡されます。変更済のアプリケーションをコンパイルして実行すると、図4-2に示すようにアプリケーション・ウィンドウが変更されます。
