トップ > NetBeans > GWTではろー

GWTではろー

NetBeans Java

今度はjavascriptによる完全なクライアントサイドのコードで。いちいちJavascriptで書いてると大変なため、できたてほやほやのGWT 1.5を使う。やはり型がないと補完もまともにうごかないし、Javaのほうが慣れていることもあって効率が良い。

メニューからツール-プラグインを選択。ここでGWTのプラグインを選択すると、自動的にダウンロードが始まりインストールが完了する。


さて、プロジェクト作成だ。どうやらWebプロジェクトで作ればいいらしい。そしてウィザードを進めるとプラグインにGWTが選択できるようになっていた。

これにチェックを入れてGWTのインストールパスをセットする。するとライブラリの設定も自動でされるようだ。何も考える必要はない。



GWTのシンプルなソースが出来上がっていたのでこれを以下のように修正した。

public class MainEntryPoint implements EntryPoint {
    private TextBox textBox;
    private Label label;
    private Button button;

    public void onModuleLoad() {
        textBox = new TextBox();
        label = new Label("ここに結果が表示される");
        button = new Button("実行");
        
        button.addClickListener(new ClickListener(){
            public void onClick(Widget w) {
                if(textBox.getText().length() == 0){
                    Window.alert("名前を入力してください。");
                    textBox.setFocus(true);//テキストにフォーカスを移す
                    return;
                }
                
                //ラベルを更新
                String text = "はろー "+ textBox.getText() +" さん";
                label.setText( text );
            }
        });
        
        RootPanel.get().add(textBox);
        RootPanel.get().add(button);
        RootPanel.get().add(label);
    }

}

これだけ。実行。Java2Javascriptコンパイルも自動ではしって、セットアップしたサーバーが起動され（サーバーのコードは一切つかっていないため、この場合軽いTomcatでいいだろう）ブラウザが起動する。

何も入力せずに実行すると以下のように。

名前を入力するとこのようになる。


GWTは完全にレイアウトもGWTにまかせるほかにhtmlの特定のidにコンポーネントを配置するということも出来る。
例えばhtmlを以下のように修正。bodyの直下のdivタグの中が丸ごと追加された部分だ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta name='gwt:module' content='gwttest.Main=gwttest.Main'>
        <title>Main</title>
    </head>
    <body>
        <script language="javascript" src="gwttest.Main/gwttest.Main.nocache.js"></script>
        <div align="center" style="position:relative;
        border-style:solid;border-color:red;border-width:3px;width:300px;height:200px" >
            <p>
                <span id="text"></span>
                <span id="button"></span>
            </p>
            <hr>
            <div id="result"></div>
        </div>
    </body>
</html>

エントリポイントのソースの最後のところ以下のように修正。これでidにマッピングされるようだ。

        RootPanel.get("text").add(textBox);
        RootPanel.get("button").add(button);
        RootPanel.get("result").add(label);

実行画面はこうなる。


Webアプリに慣れてる人はこっちのほうがレイアウトしやすいのかもしれない。


GWTは独自の高効率のRPCのほかにJSONとXMLも扱うことが出来るので、サーバーはJSONやXMLのやりとりだけに特化するのもありかもしれない。つまりJAX-RSやT2Frameworkがベストということになるだろうか。