Google Web Toolkitフレームワーク入門

Google Web Toolkit (GWT)は、開発者がJavaを使用して高性能のAJAXアプリケーションを簡単に作成できるようにする、オープン・ソースのWeb開発フレームワークです。GWTを使用すると、フロント・エンドをJavaで記述し、ソース・コードをコンパイルして高度に最適化されたブラウザ準拠のJavaScriptとHTMLを生成できます。「最新のWebアプリケーションの作成は、面倒でエラーの発生しやすいプロセスです。90%の時間がブラウザの癖への対応に費やされ、JavaScriptにモジュール性がないためにAJAXコンポーネントの共有、テスト、再利用は壊れやすくて困難です。そのようなことではいけません」とGoogle Web Toolkitサイトに書かれています。

このチュートリアルでは、上記の原則が実際のアプリケーションにどのように適用されるかを学習します。同時に、NetBeans IDEのGWTサポートの概要を学び、これらの機能のいくつかを使用する単純なアプリケーションをビルドします。

目次

このページの内容は、NetBeans IDE 6.xから7.0に適用されます

このチュートリアルを完了するには、次のソフトウェアとリソースが必要です。

ソフトウェアまたはリソース 必須バージョン
NetBeans IDEのJavaバンドル版 バージョン6.x
Java Development Kit (JDK) バージョン5またはそれ以降
GlassFishサーバー
または
Tomcatサーブレット・コンテナ
v3またはOpen Source Edition 3.0.1
 
バージョン6.x
Google Web Toolkit (GWT) バージョン1.5またはそれ以降
NetBeans GWTプラグイン バージョン2.x

注意:

  • Javaダウンロード・バンドルでは、GlassFishサーバーとApache Tomcatサーブレット・コンテナ6.0.xをオプションでインストールできます。このチュートリアルの手順に従うには、これらのいずれかをインストールする必要があります。
  • NetBeans GWTプラグインは、https://gwt4nb.dev.java.net/からダウンロードするかわりに、IDEのプラグイン・マネージャから直接ダウンロードしてインストールできます。次に示すように、メイン・メニューから「ツール」>「プラグイン」を選択し、プラグインをインストールします。
    プラグイン・マネージャに表示されたGWTプラグイン
    IDEでフレームワーク・プラグインをインストールする手順の詳細は、Webフレームワークのサポートの追加を参照してください。
  • このチュートリアル用の機能するサンプル・アプリケーションおよびGWTを使用する他のアプリケーションをダウンロードできます。
  • GWTの詳細は、http://code.google.com/webtoolkit/を参照してください。IDEでのGWTのサポートの詳細は、https://gwt4nb.dev.java.net/を参照してください。GWTに精通している場合は、GWTプラグイン・プロジェクトへのコードに参加してみてください。
  • このチュートリアルでは、『Google Web Toolkit: GWT Java AJAX Programming』(Prabhakar Chaganti著、Packt Publishing発行、2007年2月)で紹介されている例のいくつかを使用します。

環境の設定

まず、IDEを使用して基本的なソース構造を生成します。完成したら、GWTの内部の仕組みを理解するために詳細を調べることができます。

GWTアプリケーションのソース構造の作成

作成するアプリケーションのソース構造には、GWT JARファイル、GWTモジュール・プロジェクト構成ファイルに加えて、Javaエントリ・ポイントなどのいくつかの標準アーティファクトが含まれている必要があります。IDEを使用しているため、これらすべてのファイルを手動で作成する必要はありません。かわりに、ウィザードを使用します。特に、新規Webアプリケーション・ウィザードの最後のパネルは、GWTアプリケーションの作成において非常に役立ちます。

  1. 「ファイル」>「新規プロジェクト」([Ctrl]-[Shift]-[N]、Macの場合は[⌘]-[Shift]-[N])を選択します。「カテゴリ」から「Web」(または「Java Web」)を選択します。「プロジェクト」で「Webアプリケーション」を選択します。「次」をクリックします。
  2. ステップ2の「名前と場所」で、「プロジェクト名」に「HelloGWT」と入力します。プロジェクトの場所は、コンピュータ上のパスを「プロジェクトの場所」フィールドに入力しても指定できます。「次」をクリックします。
  3. 「サーバーと設定」ステップでは、IDEに登録済のいずれかのサーバーを選択します。IDEのインストール時にTomcatまたはGlassFishサーバーを含めた場合は、それらがドロップダウン・リストに表示されます。

    IDEにサーバーを登録するには、「追加」ボタンをクリックして、登録処理の手順を指示するウィザードを開きます。
  4. 使用しているJavaのバージョンを指定します。「次」をクリックします。

    注意: このチュートリアルでは、GWTバージョン1.5以降がサポートされます。GWT 1.4はJava EE 5をサポートしていないため、このバージョンを使用している場合は、「Java EEバージョン」を1.4に設定する必要があります。そうしないと、たとえば、Java EE 5注釈によってコンパイル・エラーが発生します。

  5. 「フレームワーク」ステップでは、GWTを選択します。
    新規プロジェクト・ウィザードの「フレームワーク」パネルに表示されたGWT
    GWTフレームワークを選択すると、次のフィールドが使用可能になります。
    • GWTインストール・フォルダ: このチュートリアルの冒頭でGoogle Web Toolkitをダウンロードしたフォルダへのパスを指定します。間違ったパスを指定した場合は、赤いエラー・メッセージが表示され、ウィザードは完了しません。
    • GWTモジュール: ウィザードの完了時にIDEで生成されるプロジェクト・モジュールの名前と場所を指定します。プロジェクト・モジュールは、GWTアプリケーションを構成するXMLファイルです。たとえば、モジュールがロードされたときにGWTによってインスタンス化されるクラスを指定するために使用されます。ウィザードのこのフィールドによって、アプリケーションのメイン・パッケージも決まります。デフォルトでは、メイン・パッケージはorg.yournamehere、プロジェクト・モジュールはMainです。このチュートリアルでは、デフォルトのエントリのままにします。
  6. 「終了」をクリックします。IDEによってHelloGWTプロジェクトが作成されます。このプロジェクトには、ソース、ライブラリ、プロジェクトのAntビルド・スクリプトなどのプロジェクト・メタデータがすべて含まれます。IDEでプロジェクトが開きます。ファイル構造を「ファイル」ウィンドウ([Ctrl]-[2]、Macの場合は[⌘]-[2])で、論理構造を「プロジェクト」ウィンドウ([Ctrl]-[1]、Macの場合は[⌘]-[1])で表示できます。
    HelloGWTプロジェクトが表示された「プロジェクト」ウィンドウ
  7. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。アプリケーションがビルドされ、Webアーカイブ(WAR)が作成されます。それがサーバーにデプロイされます。サーバーが実行されていない場合は起動します。コンピュータのデフォルトのブラウザが開き、アプリケーションの開始ページが表示されます。
    ブラウザに表示されたHello GWTメッセージ
    ボタンをクリックすると、下のテキストが消えます。
    ボタンの下のテキストが消える

次の項では、生成されたファイルを詳細に調査し、上記の単純なアプリケーションがどのように作成されたかを調べます。

GWTアプリケーションのソース構造の確認

IDEの新規Webアプリケーション・ウィザードによっていくつかのソース・ファイルが作成されました。ファイルを調べて、それらがGWTアプリケーションのコンテキスト内で互いにどのように関連しているかを確認しましょう。

  • Main.gwt.xml: プロジェクトのルート・パッケージに含まれている、プロジェクト・モジュールのXMLファイルは、GWTプロジェクトに必要な完全なアプリケーション構成を保持するXMLファイルです。ウィザードで生成されるデフォルトのプロジェクト・モジュールは次のようになります。
    <?xml version="1.0" encoding="UTF-8"?>
    <module>
            <inherits name="com.google.gwt.user.User"/>
            <entry-point class="org.yournamehere.client.MainEntryPoint"/>
            <!-- Do not define servlets here, use web.xml -->
    </module>

    デフォルトのプロジェクト・モジュール内の要素は次のとおりです。

    • inherits: このモジュールに継承されるモジュールを指定します。この単純な例では、GWTフレームワークに組み込まれているUserモジュールで提供される機能のみを継承します。アプリケーションがより複雑になると、モジュール継承によって機能の一部を簡単に効率よく再利用できます。
    • entry-point: モジュールがロードされたときにGWTフレームワークによってインスタンス化されるクラスを指します。
    注意: 詳細は、プロジェクトの編成: モジュールXMLファイルを参照してください。
  • MainEntryPoint.java: Main.gwt.xmlで指定されている、アプリケーションのメイン・エントリ・ポイントを指定するクラスです。このクラスは、EntryPointクラスを拡張し、GWTモジュールがフレームワークでロードされたときにインスタンス化され、そのonModuleLoad()メソッドが自動的にコールされます。ウィザードで生成されるデフォルトのエントリ・ポイントは次のようになります。
    package org.yournamehere.client;
    
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.Button;
    import com.google.gwt.user.client.ui.ClickListener;
    import com.google.gwt.user.client.ui.Label;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.google.gwt.user.client.ui.Widget;
    
    public class MainEntryPoint implements EntryPoint {
    
        /** Creates a new instance of MainEntryPoint */
        public MainEntryPoint() {
        }
    
        /**
            The entry point method, called automatically by loading a module
            that declares an implementing class as an entry-point
        */
        public void onModuleLoad() {
            final Label label = new Label("Hello, GWT!!!");
            final Button button = new Button("Click me!");
    
            button.addClickListener(new ClickListener(){
                public void onClick(Widget w) {
                    label.setVisible(!label.isVisible());
                }
            });
    
            RootPanel.get().add(button);
            RootPanel.get().add(label);
        }
    
    }
    上記のスニペットで、EntryPointのデフォルトのonModuleLoad()メソッドは、次のコンポーネントをアプリケーションに追加します。
    • Label: 新しいGWT Labelが作成され、「Hello, GWT!!!」というテキストが表示されます。コードの最後の行RootPanel.get().add(label)により、ラベルがRootPanelに追加されます。
    • Button: 新しいGWTButtonが作成され、「Click me!」というテキストとともに、ClickListenerで実装されるボタン・リスナーが表示されます。このボタン・リスナーは、ボタンがクリックされたときにラベルを非表示にするように指定します。
      public void onClick(Widget w) {
          label.setVisible(!label.isVisible());
      }
      コードの最後から2番目の行により、ボタンがRootPanelに追加されます。
      RootPanel.get().add(button)
  • welcomeGWT.html: アプリケーションの指定の開始ファイルである、生成されたHTMLホスト・ページです。web.xmlファイルは、welcome-file要素を使用して、このホスト・ページがアプリケーションのデプロイ時にブラウザに表示される最初のページであることを指定します。ホスト・ページは、JavaScriptソース・コードへのパスを参照し、アプリケーションのスタイル・シートを参照できます。ウィザードで生成されるデフォルトのホスト・ページは次のようになります。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta name='gwt:module' content='org.yournamehere.Main=org.yournamehere.Main'>
            <title>Main</title>
        </head>
        <body>
            <script language="javascript" src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script>
        </body>
    </html>
    上記のスニペットのmetaタグとscriptタグは、GWTにとって特別な意味を持ちます。
    • meta: アプリケーションのプロジェクト・ディレクトリを指します。このタグは、HTMLページとアプリケーションの間のリンクを提供します。
    • script: GWTフレームワークのJavaScriptファイルからコードをインポートします。このファイルには、GWTフレームワークのブートストラップに必要なコードが含まれています。プロジェクト・モジュール内の構成を使用し、エントリ・ポイントをコンパイルすることによって作成されたJavaScriptを動的にロードして、アプリケーションを表示します。JavaScriptファイルは、アプリケーションをホストされたモードで実行したとき、またはアプリケーションをコンパイルしたときに、GWTフレームワークによって生成されます。

AJAXランダム引用文ジェネレータの作成

この項では、ランダムな引用文をWebページに表示します。この例のアプリケーションで、GWTアプリケーションの様々なコンポーネントに慣れることができます。ランダムな引用文は、サーバーに保存されている引用文のリストから選択されます。アプリケーションは、サーバーによって提供されるランダムな引用文を毎秒取得し、真のAJAXスタイルでWebページに表示するため、ユーザーがページをリフレッシュする必要はありません。

この機能の作成プロセスでは、GWT RPC (Remote Procedure Call)サービスを利用します。

サービス・スタブの生成

NetBeans GWTプラグインには、RPCサービスを作成するためのウィザードがあります。このウィザードは基本的なサービス・クラスを生成します。ここでは、GWT RPCサービス・ウィザードについて紹介します。

  1. IDEのメイン・ツールバーにある「新規ファイル」(「新規ファイル」アイコン)アイコンをクリックします。新規ファイル・ウィザードの「Google Web Toolkit」カテゴリに、「GWT RPCサービス」という名前のファイル・テンプレートが表示されます。
    GWT RPCサービス・ウィザードの最初のパネル
    「GWT RPCサービス」を選択し、「次」をクリックします。
  2. 必要に応じて、生成されるファイルを格納するサブパッケージを入力します。このチュートリアルでは、「サブパッケージ」フィールドに「sampleservice」と入力します。
    GWT RPCサービス・ウィザードの2番目のパネル
    注意: このステップで「使用例クラスを作成」オプションを選択したままにすると、IDEでGWTServiceUsageExampleクラスを生成でき、サービスの呼出しに使用できます。
  3. 「終了」をクリックします。新規GWT RPCサービス・ウィザード(上のイメージ)に表示されているファイルが生成され、「プロジェクト」ウィンドウが変更を反映して自動的に更新されます。
    新規作成されたファイルを表示するように更新された「プロジェクト」ウィンドウ

生成されたクラスの確認

GWT RPCサービス・ウィザードによっていくつかのソース・ファイルが作成されます。ここでは、ファイルを調べて、それらがGWTサービスのコンテキスト内で互いにどのように関連しているかを確認します。

GWTサービス・クラスの詳細は、Creating Servicesを参照してください。

  • GWTService: サービスのクライアント側の定義です。このインタフェースはRemoteServiceタグ・インタフェースを拡張します。
    package org.yournamehere.client.sampleservice;
    
    import com.google.gwt.user.client.rpc.RemoteService;
    import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
    
    @RemoteServiceRelativePath("sampleservice/gwtservice")
    public interface GWTService extends RemoteService {
        public String myMethod(String s);
    }
  • GWTServiceImpl: GWTServiceインタフェースを実装し、ランダムな引用文をRPC経由で取得する機能を提供するサーブレットです。
    package org.yournamehere.server.sampleservice;
    
    import com.google.gwt.user.server.rpc.RemoteServiceServlet;
    
    import org.yournamehere.client.sampleservice.GWTService;
    
    public class GWTServiceImpl extends RemoteServiceServlet implements GWTService {
    
        public String myMethod(String s) {
            // Do something interesting with 's' here on the server.
            return "Server says: " + s;
        }
    
    }
  • GWTServiceAsync: 元のGWTServiceインタフェースに基づく非同期インタフェースです。サーバーとクライアントの間の非同期通信を有効にするコールバック・オブジェクトを提供します。
    package org.yournamehere.client.sampleservice;
    
    import com.google.gwt.user.client.rpc.AsyncCallback;
    
    public interface GWTServiceAsync {
        public void myMethod(String s, AsyncCallback<String> callback);
    }
  • GWTServiceUsageExample: テスト用クライアントとして生成されたサンプル・ユーザー・インタフェースです。サービスを呼び出すために使用できます。
    package org.yournamehere.client.sampleservice;
    
    import com.google.gwt.core.client.GWT;
    
    import com.google.gwt.user.client.rpc.AsyncCallback;
    import com.google.gwt.user.client.rpc.ServiceDefTarget;
    
    import com.google.gwt.user.client.ui.Label;
    import com.google.gwt.user.client.ui.Widget;
    import com.google.gwt.user.client.ui.Button;
    import com.google.gwt.user.client.ui.TextBox;
    import com.google.gwt.user.client.ui.VerticalPanel;
    
    import com.google.gwt.event.dom.client.ClickEvent;
    import com.google.gwt.event.dom.client.ClickHandler;
    
    public class GWTServiceUsageExample extends VerticalPanel {
        private Label lblServerReply = new Label();
        private TextBox txtUserInput = new TextBox();
        private Button btnSend = new Button("Send to server");
    
        public GWTServiceUsageExample() {
            add(new Label("Input your text: "));
            add(txtUserInput);
            add(btnSend);
            add(lblServerReply);
    
            // Create an asynchronous callback to handle the result.
            final AsyncCallback<String> callback = new AsyncCallback<String>() {
                public void onSuccess(String result) {
                    lblServerReply.setText(result);
                }
    
                public void onFailure(Throwable caught) {
                    lblServerReply.setText("Communication failed");
                }
            };
    
            // Listen for the button clicks
            btnSend.addClickHandler(new ClickHandler(){
                public void onClick(ClickEvent event) {
                    // Make remote call. Control flow will continue immediately and later
                    // 'callback' will be invoked when the RPC completes.
                    getService().myMethod(txtUserInput.getText(), callback);
                }
            });
        }
    
        public static GWTServiceAsync getService() {
            // Create the client proxy. Note that although you are creating the
            // service interface proper, you cast the result to the asynchronous
            // version of the interface. The cast is always safe because the
            // generated proxy implements the asynchronous interface automatically.
    
            return GWT.create(GWTService.class);
        }
    }

次に、エントリ・ポイント・クラスを変更して、GWTServiceUsageExampleオブジェクトをインスタンス化することによってサービスを呼び出します。前の項で、GWT RPCウィザードで「使用例クラスを作成」オプションを選択したため、GWTServiceUsageExampleクラスが作成されています。

  1. アプリケーションのメイン・エントリ・ポイント(MainEntryPoint.java)のonModuleLoad()メソッドで、GWTのLabelButtonを除去し、GWTServiceUsageExampleの新しいインスタンスをRootPanelに追加します。
    public void onModuleLoad() {
         RootPanel.get().add(new GWTServiceUsageExample());
    }
    注意: onModuleLoad()メソッドを変更した後、sampleservice.GWTServiceUsageExampleクラスにインポート文を追加する必要があります。これを行うには、エディタの左の列で、GWTServiceUsageExample()メソッドが表示される場所に表示されるヒントをクリックし、「org.yournamehere.client.sampleservice.GWTServiceUsageExampleをインポートに追加」を選択します。
    エディタに表示された「インポートを修正」サポート
  2. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。サーバーが実行されていない場合は起動します。プロジェクトがコンパイル(この場合は再コンパイル)され、サーバーにデプロイされます。ブラウザが開き、テキスト・フィールドが表示されます。メッセージを入力し、ボタンをクリックします。ラベルおよび送信したメッセージが表示されます。
    ユーザーのメッセージが表示されたブラウザ出力

IDEのGWT RPCウィザード使用してGWT RPCサービスが正しく作成されました。さらに、GWTServiceUsageExampleインスタンスをアプリケーションのメイン・エントリ・ポイントのonModuleLoad()メソッドに追加して、実行時にアプリケーションからサービスが呼び出されるようにしました。次の項では、生成されたクラスを拡張することによってサービスをカスタマイズし、HTMLホスト・ページにスタイル・シートを添付します。

生成されたクラスの拡張

この項では、前の項で調べたクラスを調整および拡張します。この項が終わると、機能するAJAXランダム引用文ジェネレータが完成します。

  1. GWTServiceImplは、作成中のサービスを実装するサーブレットです。

    アプリケーションのweb.xmlデプロイメント・ディスクリプタを開くと、サーブレットの宣言とマッピングがすでに追加されていることがわかります。

    <servlet>
        <servlet-name>GWTService</servlet-name>
        <servlet-class>org.yournamehere.server.sampleservice.GWTServiceImpl</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>GWTService</servlet-name>
        <url-pattern>/org.yournamehere.Main/sampleservice/gwtservice</url-pattern>
    </servlet-mapping>
    GWTServiceImplクラスに、サービス固有の論理を含むGWTServiceインタフェースを実装します。ランダム引用文ジェネレータを作成するには、次のコードをGWTServiceImplに追加します。
    public class GWTServiceImpl extends RemoteServiceServlet implements GWTService {
    
        private Random randomizer = new Random();
        private static final long serialVersionUID = -15020842597334403L;
        private static List quotes = new ArrayList();
    
        static {
            quotes.add("No great thing is created suddenly - Epictetus");
            quotes.add("Well done is better than well said - Ben Franklin");
            quotes.add("No wind favors he who has no destined port - Montaigne");
            quotes.add("Sometimes even to live is an act of courage - Seneca");
            quotes.add("Know thyself - Socrates");
        }
    
        public String myMethod() {
            return (String) quotes.get(randomizer.nextInt(5));
        }
    
    }
    注意: IDEのエディタ内で任意の場所を右クリックし、「インポートを修正」を選択すると、IDEによって正しいインポート文が作成されます。そのとき、com.google.gwt.user.client.Randomではなく必ずjava.util.Randomを選択してください。
    「すべてのインポートを修正」ダイアログ
  2. 生成された使用例クラス(GWTServiceUsageExample)からサービスを呼び出すかわりに、アプリケーションのエントリ・ポイント・クラス(MainEntryPoint)から直接呼び出すようにします。まず、GWTServiceUsageExamplegetService()メソッドをコピーし、MainEntryPointに貼り付けます。変更場所は太字で示されています。
    public class MainEntryPoint implements EntryPoint {
    
        /**
         * Creates a new instance of MainEntryPoint
         */
        public MainEntryPoint() {
        }
    
        public static GWTServiceAsync getService() {
            // Create the client proxy. Note that although you are creating the
            // service interface proper, you cast the result to the asynchronous
            // version of the interface. The cast is always safe because the
            // generated proxy implements the asynchronous interface automatically.
    
            return GWT.create(GWTService.class);
        }
    
        ...
  3. エディタ上で右クリックし、「インポートを修正」を選択します。次の3つのインポート文がMainEntryPointに追加されます。
    import com.google.gwt.core.client.GWT;
    import org.yournamehere.client.sampleservice.GWTService;
    import org.yournamehere.client.sampleservice.GWTServiceAsync;
  4. エントリ・ポイント・クラスのonModuleLoad()メソッドを次のように変更します。
    /**
     * The entry point method, called automatically by loading a module
     * that declares an implementing class as an entry-point
     */
    
    public void onModuleLoad() {
    
        final Label quoteText = new Label();
    
        Timer timer = new Timer() {
    
            public void run() {
                //create an async callback to handle the result:
                AsyncCallback callback = new AsyncCallback() {
    
                    public void onFailure(Throwable arg0) {
                        //display error text if we can't get the quote:
                        quoteText.setText("Failed to get a quote");
                    }
    
                    public void onSuccess(Object result) {
                        //display the retrieved quote in the label:
                        quoteText.setText((String) result);
                    }
                };
                getService().myMethod(callback);
            }
        };
    
        timer.scheduleRepeating(1000);
        RootPanel.get().add(quoteText);
    
    }
  5. エディタ上で右クリックし、「インポートを修正」を選択します。そのとき、必ずcom.google.gwt.user.client.Timercom.google.gwt.user.client.ui.Labelを選択してください。
    「すべてのインポートを修正」ダイアログ
  6. クラスGWTServiceUsageExampleを削除します。それはコンパイルされなくなります。アプリケーションはサービスをメイン・エントリ・ポイント・クラスからコールできるため、サービスを呼び出すためのGWTServiceUsageExample使用例クラスは必要なくなりました。
  7. GWTServiceGWTServiceAsyncの生成されたスタブには、myMethod()のStringパラメータがありましたが、ランダム引用文ジェネレータには必要ありません。

    GWTServiceクラスで、このStringパラメータをmyMethod()から除去し、次のようなインタフェースにします。
    public interface GWTService extends RemoteService {
        public String myMethod();
    }
  8. 非同期サービス(GWTServiceAsync)のメソッド署名は、GWTServiceのものと一致する必要があります(ただし、最後のパラメータとしてAsyncCallbackオブジェクトを含む)。したがって、StringパラメータをmyMethod()から除去して、次のようなインタフェースにします。
    public interface GWTServiceAsync {
        public void myMethod(AsyncCallback callback);
    }
    非同期サービス・インタフェースの詳細は、公式GWTドキュメントの非同期コールの実行および非同期コールに慣れるを参照してください。
  9. プロジェクトを実行します。アプリケーションがデプロイされ、ブラウザが開くと、毎秒新しい引用文がサーバーから受信されることがわかります。
    ブラウザに表示されたAJAX引用文ジェネレータ

次の項では、スタイル・シートを適用して引用文の外観を変更します。

外観のカスタマイズ

この項では、HTMLホスト・ページにスタイル・シートを添付します。また、エントリ・ポイント・クラスでそれを参照します。具体的には、エントリ・ポイント・クラスでラベルのスタイル名をスタイル・シート内のスタイル名に設定します。実行時に、GWTによってラベルにスタイルが適用され、カスタマイズされたラベルがブラウザに表示されます。

  1. welcomeGWT.cssというスタイル・シートを作成します。ファイルを作成するには、「プロジェクト」ウィンドウで「Webページ」ノードを右クリックし、「新規」>「その他」を選択します。新規ファイル・ウィザードが表示されます。
  2. 「カテゴリ」から「Web」を選択し、「ファイル・タイプ」から「Cascading Style Sheet」を選択します。ウィザードを完了すると、新しい空のファイルがエディタで開きます。
  3. 次に示す新しいスタイル・シートのquoteLabelセレクタを作成します。
    .quoteLabel {
        color: white;
        display: block;
        width: 450px;
        padding: 2px 4px;
        text-decoration: none;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        border: 1px solid;
        border-color: black;
        background-color: #704968;
        text-decoration: none;
    }
    これで、スタイル・シート・エディタに次のように表示されるはずです。
    エディタに表示されたCSSプレビュー

    CSSプレビューとスタイル・ビルダーを表示するには、メイン・メニューから「ウィンドウ」>「その他」を選択します。

  4. アプリケーションの開始ページ(welcomeGWT.html)からスタイル・シートにリンクします。同時に、アプリケーションをユーザーに紹介するテキストを追加します。HTMLページの新しい部分は太字で強調表示されています。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
        <head>
            <meta name='gwt:module' content='org.yournamehere.Main=org.yournamehere.Main'>
            <link rel="stylesheet" type="text/css" href="welcomeGWT.css">
    
            <title>Main</title>
        </head>
    
        <body>
            <script language="javascript" src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script>
    
            <p>This is an AJAX application that retrieves a random quote from
                the Random Quote service every second. The data is retrieved
                and the quote updated without refreshing the page!</p>
    
        </body>
    </html>
  5. エントリ・ポイント・クラス(MainEntryPoint.java)のonModuleLoad()メソッド内に、成功時はスタイル・シートに定義されているスタイルをラベルに適用するように指定します。下記で、新しい行は太字で強調表示されています。
    public void onSuccess(Object result) {
        //display the retrieved quote in the label:
        quoteText.setText((String) result);
        quoteText.setStyleName("quoteLabel");
    }
    入力時に[Ctrl]-[Space]を押すと、IDEに組み込まれているコード補完が有効になります。コード補完は、コードを完成させる方法を提案するポップアップ・ウィンドウをトリガーし、関連するJavadocを表示することによって機能します。
    エディタで提供されるコード補完サポート
    IDEでの作業中に継続的にGWTドキュメントにアクセスする必要がある場合は、IDEのJavadocウィンドウを開くこともできます。これを行うには、メイン・メニューから「ウィンドウ」>「その他」>「Javadoc」を選択します。エディタで入力するとき、カーソルの位置に応じてJavadocウィンドウ内のドキュメントが更新されます。
    Javadocウィンドウ
  6. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。今回は、この項で作成したスタイル・シートを使用して、ラベルがカスタム・スタイルで表示されます。
    ブラウザに表示されたスタイルシートの効果

コンパイルとデバッグ

「ファイル」ウィンドウ([Ctrl]-[2]、Macの場合は[⌘]-[2])を開き、buildフォルダを展開します。(buildフォルダが存在しない場合は、IDEでbuildフォルダを再生成するために、プロジェクトを再ビルドする必要があります。)次のように表示されるはずです。
「ファイル」ウィンドウに表示されたBuildフォルダ
このフォルダは、アプリケーションのコンパイル時にGWTによって自動的に生成されます。このフォルダは、デプロイの準備ができているクライアント・アプリケーションで構成されます。これらのファイルが何を表しているかについては、GoogleコードFAQ - キャッシュ/ ノーキャッシュ、変わった名前のファイルは何ですかを参照してください。

また、GWTアプリケーションを操作するときに、IDEに組み込まれているデバッガを利用することもできます。これにより、GWTのホストされたモードでのデバッグが有効になりますGWTおよびホストされたモードのメイン・ウィンドウとWebブラウザが自動的に開きます。

Mac OS Xユーザー向けの注意: GWTのホストされたモードは、Mac OS Xでは32ビット・アーキテクチャ向けにコンパイルされますが、それはJava 1.5に対してのみ存在します。64ビット・バージョンのJava 1.6を実行している場合は、32ビット・バージョンに切り替える必要があります。それにはOS Xの「Java設定」パネルを使用できます。Javaバージョンを切り替えた後は、IDEを再起動してください。

ソース・ファイルにフィールド、メソッド、および行のブレークポイントを設定するには、IDEのエディタの左マージンをクリックします。
行ブレークポイントが表示されたエディタ
次に、Webプロジェクトと同じ通常の方法で「デバッグ」を選択します(たとえば、プロジェクトのノードを右クリックして「デバッグ」を選択するか、「プロジェクトをデバッグ」アイコン(「プロジェクトをデバッグ」アイコン)をクリックします)。設定したブレークポイントでアプリケーションが停止するので、コードをステップ実行して変数と式の値を調べることができます(たとえば、「ウィンドウ」>「デバッグ」>「ローカル変数」を使用して「ローカル変数」ウィンドウに値を表示する)。
ブレークポイントで停止したデバッガ
また、エディタで式または値の上にカーソルを置くと、現在の値がポップアップで通知されます(上のイメージに示すとおり)。
GWTのホストされたモードのメイン・ウィンドウとWebブラウザが開きます。機能するアプリケーションがブラウザに表示されます。
GWTのホストされたモードのブラウザ

まとめ

このチュートリアルでは、次のことを学びました。

  • Google Web Toolkitアプリケーションの典型的なアプリケーション・ソース構造。
  • Google Web Toolkitアーティファクトの相互関係。
  • Google Web Toolkitを使用するためのIDEの設定方法。
  • 特にGoogle Web Toolkitを使用するための、IDEで使用できるツール。

GWTフレームワークは、ブラウザ関連のコード生成と、さらに下のレベルのXmlHttpRequest APIコードの作成を処理するため、フレームワークを利用して、アプリケーションで提供する必要がある機能に焦点を絞ることができます。したがって、概要で説明したとおり、GWTを使用するとブラウザの互換性に関連する問題を回避できると同時に、Web 2.0特有の、標準に準拠した動的な操作性を同様にユーザーに提供できます。このチュートリアルで示したとおり、Javaクラスからブラウザ準拠のJavaScriptおよびHTMLへの変換をGWTコンパイラに実行させることができるため、GWTフレームワークを適用してフロント・エンドを完全にJavaで記述できます。また、IDEにはこのすべてを簡単に効率よく行うための完全なツール・セットがあり、GWTアプリケーションの基本インフラストラクチャを手動でコーディングする必要がないことも説明しました。


関連項目

これで、Google Web Toolkitフレームワーク入門のチュートリアルは終わりです。関連する資料およびさらに高度な資料については、次のリソースを参照してください。

GWTのリソース

Java Webフレームワーク用NetBeansドキュメント

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2015, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo