本格派エンジニアの工具箱

第37回 NetBeansとJavaFX Scene Builderで作るJava GUIアプリケーション その2

この記事を読むのに必要な時間:およそ 4 分

WebViewを使ってWebページを表示する

今度は,Scene BuilderでFXMLを変更してみます。ためしに,Webブラウザのレンダリングエンジンの機能を持るWebViewを使ってみることにしましょう。UIはButtonとURLを入力するTextField,そしてWebViewを組み合わせて図8のようにしました。ノードの配置は,右の「Library」パネルから使いたい部品をドラッグ&ドロップするだけです。

図8 WebViewの利用

図8 WebViewの利用

コンテナがAnchorPaneなので,各ノードに対して縁からの距離を指定できます。例えばWebViewは,図9のように設定すれば四辺からの距離が固定されて,ウィンドウの大きさに応じてWebViewの表示領域も自動で修正されるようになります。

図9 AnchorPaneによるレイアウトの設定

図9 AnchorPaneによるレイアウトの設定

変更後のSample.fxmlは次のようになりました。AnchorPane.xxxxAnchor属性によって,縁からの距離の指定が行われていることがわかります。このファイルを手動で編集する必要はありません。

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.web.*?>

<AnchorPane id="AnchorPane" 
	    prefHeight="200.0" prefWidth="320.0" 
	    xmlns:fx="http://javafx.com/fxml" 
	    fx:controller="javafxsample.SampleController">
  <children>

    <Button fx:id="button" layoutY="14.0" 
	    onAction="#handleButtonAction" 
	    prefHeight="19.0" prefWidth="74.00009999999747" 
	    text="GO!" AnchorPane.rightAnchor="13.0" />
    <TextField id="textField1" fx:id="urlField" layoutY="13.0" 
	       prefHeight="20.0" prefWidth="212.0" 
	       text="Please input URL..." 
	       AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="94.0" />
    <WebView id="webView1" fx:id="webView" 
	     prefHeight="139.0" prefWidth="291.9998779296875" 
	     AnchorPane.bottomAnchor="14.0" AnchorPane.leftAnchor="14.0" 
	     AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="47.0" />
  </children>
</AnchorPane>

SampleController.javaは次のようにします。

public class SampleController implements Initializable {  
  @FXML
  private TextField urlField;
  @FXML
  private WebView webView;
  
  @FXML
  private void handleButtonAction(ActionEvent event) {
    String url = urlField.getText();
    webView.getEngine().load(url);
  }
  
  @Override
  public void initialize(URL url, ResourceBundle rb) {
    // TODO
  }  
}

TextFieldにURLを入力してButtonをクリックすると,そのURLのコンテンツをWebViewに読み込んで表示するというものです。WebViewからはgetEngine()メソッドでWebEngineオブジェクトが取得できるので,それに対してload()メソッドを実行すればWebページを読み込ませることができます。

完成したら実行してみましょう。最初に図10のように表示され,Webページを読み込ませれば図11のようにWebView上に内容が表示されます。

図10 URLを入力して[GO!]ボタンをクリック

図10 URLを入力して[GO!]ボタンをクリック

図11 WebView上にWebページが表示される

図11 WebView上にWebページが表示される

Scen Builderを使えば,JavaコードやFXMLコードを記述することなく,グラフィカルな操作だけでJavaFXアプリケーションのUIを構築することができるため,コーディング作業はJavaのプログラムのみに集中することができます。まだ開発途中のツールなため機能不足な部分もありますが,AWT/Swingの頃に比べればコードの見通しが良く,UI開発の生産性の向上が見込めるのではないかと思います。

著者プロフィール

杉山貴章(すぎやまたかあき)

ONGS Inc.所属のプログラマ兼テクニカルライター。雑誌,書籍,Webメディアで多数の著作をもつ。

著書