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に示すようにアプリケーション・ウィンドウが変更されます。