Symfoware

Symfowareについての考察blog

Google Web Toolkit 2.1 チュートリアル1 GWTプロジェクトの作成

Google Web Toolkit 2.1のEclipseプラグインをインストールしてみました。
Google Web Toolkit 2.1のEclipseプラグインをインストールする

・・・全然使い方がわかりません。
しょうがないので、Google Codeで公開されているチュートリアルをこなすことにしました。


Step 1: Create a GWT Project
こちらを参考に進めていきます。




1. Creating a GWT application



プラグインの機能を利用して、GWTアプリケーションを作成します。
ツールバーの「新規Webアプリケーション・プロジェクト」を選択。

02_001_20101103122046.png


最初なのでチュートリアルどおりに進めます。
プロジェクト名に「StockWatcher」
パッケージに「com.google.gwt.sample.stockwatcher」
を入力。

Google SDKの項目は
Google Webツールキットを使用にチェック(デフォルト)
Google Appエンジンを使用するにチェック(デフォルト)

この状態で、完了を押下します。

02_002_20101103122046.png



ごりごり雛形のファイルが作成されていきます。
雛形ファイルの生成が完了すると、パッケージ・エクスプローラーの表示は
こんな感じになっているかと思います。

02_003_20101103122046.png





2. Testing the default project components



作成したStockWatcherアプリケーションを起動してみます。

パッケージ・エクスプローラーで「StockWatcher」プロジェクトを
選択した状態で、ツールバーの実行の右にある下矢印をクリック。
StockWatcherという構成が追加されていると思いますので、選択します。

02_004_20101103122046.png


Eclipseの下のほうにあるタブに「Development Mode」が追加されます。
以下の図は起動中の模様。
※初回起動はこの状態でちょっと待ちました。

02_005_20101103122046.png


起動が完了すると、こんな表示に変わります。

02_006_20101103122043.png


表示されているURL
「http://127.0.0.1:8888/StockWatcher.html?gwt.codesvr=127.0.0.1:9997」
の箇所は選択可能です。
ダブルクリックするとブラウザが起動します。
※使用ブラウザはChromeに固定されているかも。
Chromeをインストールしておく必要があるかもしれません。



初回起動時、「Google Web Toolkit Developer Plugin」のインストールを求められます。
「Download the GWT Developer Plugin For Chrome」を選択して、
プラグインのインストールを実行します。

02_007_20101103122143.png


リンクをクリックすると、ブラウザの下に確認が表示されます。
「続行」を押して、プラグインのインストールを続行します。

02_008_20101103122142.png


インストールの確認画面が表示されます。
「インストール」を選択します。

02_009_20101103122142.png



プラグインのインストールが終わった後ブラウザをリロードすると
こんな画面が表示されるかと思います。

02_010_20101103122142.png


適当に文字列を入力して「Send」を押すと、こんなポップアップが
表示されました。

02_011_20101103122142.png






3. Examining the project components



自動生成したアプリケーションなので、中身がよくわかっていません・・・

パッケージ・エクスプローラー上で、
「com.google.gwt.sample.stockwatcher」
ここにある「StockWatcher.gwt.xml」で基本設定を行うようです。

02_012_20101103122142.png



xmlの内容は以下のとおり。


<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='stockwatcher'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet. You can change     -->
  <!-- the theme of your GWT application by uncommenting         -->
  <!-- any one of the following lines.                            -->
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

  <!-- Other module inherits                                     -->

  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.google.gwt.sample.stockwatcher.client.StockWatcher'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>

</module>






以下の部分で、使用するcssのタイプを指定。

<inherits name='com.google.gwt.user.theme.standard.Standard'/>




以下の部分が、実際に実行されるソースの部分なんだろうなと思っています。

<entry-point class='com.google.gwt.sample.stockwatcher.client.StockWatcher'/>





お試しで、StockWatcher.javaの40行目付近を以下のように
変更してみました。


    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        final Button sendButton = new Button("サーバーに送信");
        final TextBox nameField = new TextBox();
        nameField.setText("初期値");
        final Label errorLabel = new Label();





予想通り、テキストボックスの初期値とボタンの名称が変更できました。

02_013_20101103122217.png





関連記事



Google Web Toolkit 2.1 チュートリアル2 アプリケーションの設計
Google Web Toolkit に関する記事の一覧










関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2010/11/03(水) 12:24:22|
  2. Google Web Toolkit
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Google Web Toolkit 2.1 チュートリアル2 アプリケーションの設計 | ホーム | Google Web Toolkit 2.1のEclipseプラグインをインストールする>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
https://symfoware.blog.fc2.com/tb.php/630-e65e6b16
この記事にトラックバックする(FC2ブログユーザー)