GWT アプリケーション開発の基
        本
その1  ~ DB からデータを読んで Grid に表示する ~


   (株)ケーピーエス 伊東 成幸
目次
   サンプルの紹介
   開発環境
   クライアント・サーバー間通信の概要
   クライアント モジュールの実装
   サーバー モジュールの実装
   RPC 通信の実装
   GWT の可能性 (GXT アプリケーシ...
1.サンプルの紹介
   GWT アプリケーション
2.開発環境
   Java 5.0
   Tomcat 5.5
   GWT 1.6
   postgres 8.2

   Windows Vista Business
   Eclipse 3.4
3.クライアント・サーバー間通信の
概要
   通信の仕組み

  1. GWT では、クライアント・サーバー間通信をメッセージ交換
  ではなく
    手続き呼び出し (Remote Procedure Call ・以下 RPC) を使
...
3.クライアント・サーバー間通信の
概要     Client Module Server Module

GWT 側で提供
                  ServiceDefTarget   RemoteService    Remot...
3.クライアント・サーバー間通信の
概要
   ServiceProxy を生成するネーミングルール

    1. Proxy インターフェース名は『サービスインタフェース名 +
    Async 』

    2. Proxy のメソッ...
4.クライアント モジュールの実
装     Client Module Server Module

GWT 側で提供
                                                          Rem...
4.クライアント モジュールの実
装
■   Service ・ Proxy インターフェースの作成

     ① ShohinServiceの作成
     ② ShohinServiceAsync の作成
4.クライアント モジュールの実
装
ShohinService の作成
a )マーカーインターフェースである RemoteService を継承したサービ
スの作成

b )サーバーが提供するサービスをメソッドとして宣言する。



   ...
4.クライアント モジュールの実
装
②   ShohinServiceAsync の作成
    a )メソッドの戻り値を void とする

    b ) ShohinService のメソッドに AsyncCallback 型のオブジェ...
5.サーバー モジュールの実装
■   サービスメソッドの作成とサーブレット登録

    ① ShohinServiceImpl   の作成
    ② Servlet   への登録
5.サーバー モジュールの実装
    ShohinServiceImpl の作成
    a ) HttpServlet を継承している RemoteServiceServlet を継承する。

    b ) ShohinService ...
5.サーバー モジュールの実装
   ShohinServiceImpl の作成
 


    a ) shohin メソッドの内容

         Class.forName("org.postgresql.Driver");
   ...
5.サーバー モジュールの実装
   JavaBean(Shohin) の内容
 


    a )プロパティの定義とゲッター・セッターのみ

      public class Shohin implements IsSerializa...
5.サーバー モジュールの実装
   RPC 通信で使用できる型
 


    a )基本型・参照型・配列・クラス・ユーザ定義型があります


      基本型
        char 、 byte 、 short 、 int 、 lon...
5.サーバー モジュールの実装
②   Servlet への登録
    a )サービスクラスを Servlet として、『 web.xml 』に登録する。


       <servlet>
            <servlet-nam...
6. RPC 通信の実装
   Entry ポイントの作成
    a )プロキシのインスタンスを取得する。

    b )エントリーポイントにサービスへの接続点を設定する。


       ShohinServiceAsync prox...
6. RPC 通信の実装
②    サービスの結果に対する処理を決める
    a ) AsyncCallback の作成時に「 onSuccess 」と「 onFailure 」を実装し
    ます。

    b )結果により、 「 on...
6. RPC 通信の実装
②   サービスの結果に対する処理を決める
    a ) onSuccess 時の処理
        public void onSuccess(Object result) {
                 ...
6. RPC 通信の実装
③   サービスを呼び出す
    a )作成したプロキシーと AsyncCallback オブジェクトを使いサービスを
    呼び出す。

    b )通信は非同期で行われ、結果は onSuccess と onF...
7. GWT の可能性 (GXT アプリケー
ション )
   GXT とは?

  ExtGWT (以下、 GXT )は、 RIA 開発用の JavaScript フレームワー
  クで
 有名な『 Ext JS 』の GWT 版であり、 ...
7. GWT の可能性 (GXT アプリケー
ション )
   GXT アプリケーション
7. GWT の可能性 (GXT アプリケー
ション )
   KPS フレームワーク
Upcoming SlideShare
Loading in...5
×

Gwt1

2,154

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,154
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Gwt1

  1. 1. GWT アプリケーション開発の基 本 その1  ~ DB からデータを読んで Grid に表示する ~ (株)ケーピーエス 伊東 成幸
  2. 2. 目次  サンプルの紹介  開発環境  クライアント・サーバー間通信の概要  クライアント モジュールの実装  サーバー モジュールの実装  RPC 通信の実装  GWT の可能性 (GXT アプリケーション )
  3. 3. 1.サンプルの紹介  GWT アプリケーション
  4. 4. 2.開発環境  Java 5.0  Tomcat 5.5  GWT 1.6  postgres 8.2  Windows Vista Business  Eclipse 3.4
  5. 5. 3.クライアント・サーバー間通信の 概要  通信の仕組み 1. GWT では、クライアント・サーバー間通信をメッセージ交換 ではなく   手続き呼び出し (Remote Procedure Call ・以下 RPC) を使 う。 2 .クライアント側ではサーバーのサービスメソッドを呼び出して、    その結果を戻り値として受け取る。 GWT で決められた手続きに従って 3 .サーバー側では、サービスメソッドが呼び出される事でクライア ント 作成したモジュールで通信を行いま す。    からの呼び出しと引数を受信する。 (Ajax と同じ XMLHttpRequest をラ 4 .通信は非同期で行われる。 ップ )
  6. 6. 3.クライアント・サーバー間通信の 概要 Client Module Server Module GWT 側で提供 ServiceDefTarget RemoteService RemoteServiceServlet < interface > < interface > 開発者が作成 ServiceProxy Service ServiceImpl ( 注 1) < interface > extends ServiceAsync implements 注 1 GWT が自動生 < interface > 成
  7. 7. 3.クライアント・サーバー間通信の 概要  ServiceProxy を生成するネーミングルール 1. Proxy インターフェース名は『サービスインタフェース名 + Async 』 2. Proxy のメソッド名はサービスインタフェースのメソッド名と 同じにする。 ⇒ 戻り値は『 void 』とする。 ⇒ 引数の最後にサービスの結果を受ける AsyncCallback 型   のオブジェクトを追加する
  8. 8. 4.クライアント モジュールの実 装 Client Module Server Module GWT 側で提供 RemoteServiceServlet ServiceDefTarget RemoteService < interface > < interface > 開発者が作成 ① ③ ServiceProxy ShohinService ShohinServiceImpl ( 注 1) < interface > ② extends ShohinServiceAsync implements < interface > 注 1 GWT が自動生 成
  9. 9. 4.クライアント モジュールの実 装 ■ Service ・ Proxy インターフェースの作成 ① ShohinServiceの作成 ② ShohinServiceAsync の作成
  10. 10. 4.クライアント モジュールの実 装 ShohinService の作成 a )マーカーインターフェースである RemoteService を継承したサービ スの作成 b )サーバーが提供するサービスをメソッドとして宣言する。 public interface ShohinService extends RemoteService { public List shohin(String shohinMakerCode); }
  11. 11. 4.クライアント モジュールの実 装 ② ShohinServiceAsync の作成 a )メソッドの戻り値を void とする b ) ShohinService のメソッドに AsyncCallback 型のオブジェクトを追加 する。 c )非同期での戻り値を AsyncCallback 型のオブジェクトで受け取る。 public interface ShohinServiceAsync { public void shohin(String shohinMakerCode,AsyncCallback callback); }
  12. 12. 5.サーバー モジュールの実装 ■ サービスメソッドの作成とサーブレット登録 ① ShohinServiceImpl の作成 ② Servlet への登録
  13. 13. 5.サーバー モジュールの実装  ShohinServiceImpl の作成 a ) HttpServlet を継承している RemoteServiceServlet を継承する。 b ) ShohinService を実装する。 c )サービスクラスは、サーブレットとして実行されるのでスレッドセー フにする。 public class ShohinServiceImpl extends RemoteServiceServlet implements ShohinService { public List shohin(String shohinMakerCode) { : return list; 内容は次ページに } }
  14. 14. 5.サーバー モジュールの実装  ShohinServiceImpl の作成   a ) shohin メソッドの内容 Class.forName("org.postgresql.Driver"); Connection con =      DriverManager.getConnection("jdbc:postgresql://*****", "*****", "*****"); String sql = "select * from shohin where shohin_maker_cd = ?;"; PreparedStatement st = con.prepareStatement(sql.toString()); st.setString(1,shohinMakerCode); Shohin クラスは ResultSet rs = st.executeQuery(); while (rs.next()) { IsSerializable Shohin shohin = new Shohin(); を shohin.setShohinCd(rs.getString(1)); : 実装した list.add(shohin); JavaBean } return list;
  15. 15. 5.サーバー モジュールの実装  JavaBean(Shohin) の内容   a )プロパティの定義とゲッター・セッターのみ public class Shohin implements IsSerializable { private String shohinCd; 他にも使用でき private String shohinName; る型の限定があ : ります public Shohin(){ (次ページへ) } public String getShohinCd() { return shohinCd; } public void setShohinCd(String shohinCd) { this.shohinCd = shohinCd; }             : }
  16. 16. 5.サーバー モジュールの実装    RPC 通信で使用できる型   a )基本型・参照型・配列・クラス・ユーザ定義型があります 基本型 char 、 byte 、 short 、 int 、 long 、 boolean 、 float 、 double 参照型 String 、 Date 、 Char 、 Byte 、 Short 、 Integer 、 Long 、 Boolean 、 Float 、 Double 配列・クラス 配 列、 List 、 Map 、 Set 、 ArrayList 、 HashMap 、 HashSet 、 Stack 、 Vecto r、 AbstractList 、 AbstractCollection 、 AbstractMap 、 AbstractSet 、 Collectio n ユーザ定義型 IsSerializable インターフェースを実装したユーザ定義クラス
  17. 17. 5.サーバー モジュールの実装 ② Servlet への登録 a )サービスクラスを Servlet として、『 web.xml 』に登録する。 <servlet> <servlet-name>shohin</servlet-name> <servlet-class> jp.co.kpscorp.SeminarGXT.gwt.server.ShohinServiceImpl </servlet-class> </servlet> <servlet-mapping> <servlet-name>shohin</servlet-name> <url-pattern>/SeminarGXT/shohin</url-pattern> </servlet-mapping>
  18. 18. 6. RPC 通信の実装  Entry ポイントの作成 a )プロキシのインスタンスを取得する。 b )エントリーポイントにサービスへの接続点を設定する。 ShohinServiceAsync proxy =   (ShohinServiceAsync)GWT.create(ShohinService.class); ServiceDefTarget entrypoint = (ServiceDefTarget)proxy; String entryURL = GWT.getModuleBaseURL() + "shohin"; entrypoint.setServiceEntryPoint(entryURL); サーブレットの url- pattern
  19. 19. 6. RPC 通信の実装 ② サービスの結果に対する処理を決める a ) AsyncCallback の作成時に「 onSuccess 」と「 onFailure 」を実装し ます。 b )結果により、 「 onSuccess 」 ( 成功 ) と「 onFailure 」 ( 失敗 ) で処 理を振り分ける。 AsyncCallback callback = new AsyncCallback(){ public void onFailure(Throwable caught) { Window.alert(caught.toString()); } public void onSuccess(Object result) { : } } 内容は次ページに
  20. 20. 6. RPC 通信の実装 ② サービスの結果に対する処理を決める a ) onSuccess 時の処理 public void onSuccess(Object result) { List list = (List)result; Grid grid = new Grid(list.size(),5); grid.setStyleName("shohinGrid meisai"); ColumnFormatter cf = grid.getColumnFormatter(); for(int a=0; a<list.size(); a++){ Shohin shohin = (Shohin)list.get(a); grid.setText(a,0,shohin.getShohinCd()); grid.setText(a,1,shohin.getShohinName()); : cf.setStyleName(0,"ShohinCd"); cf.setStyleName(1,"ShohinName"); : } }
  21. 21. 6. RPC 通信の実装 ③ サービスを呼び出す a )作成したプロキシーと AsyncCallback オブジェクトを使いサービスを 呼び出す。 b )通信は非同期で行われ、結果は onSuccess と onFailure に返る。 ShohinServiceAsync proxy =   (ShohinServiceAsync)GWT.create(ShohinService.class); AsyncCallback callback = new AsyncCallback(){ ・・ } String shohin_maker_cd; proxy.shohin(shohin_maker_cd,callback);
  22. 22. 7. GWT の可能性 (GXT アプリケー ション )  GXT とは?   ExtGWT (以下、 GXT )は、 RIA 開発用の JavaScript フレームワー クで  有名な『 Ext JS 』の GWT 版であり、 Java のコードだけで   JavaScript の動的な動き (Ajax) を実現するフレームワークです。   GXT では様々な部品が用意され、サンプルソースも公開されていま す。   最後に、ここまで作成した GWT アプリケーションの GXT 版を紹介し ます。
  23. 23. 7. GWT の可能性 (GXT アプリケー ション )  GXT アプリケーション
  24. 24. 7. GWT の可能性 (GXT アプリケー ション )  KPS フレームワーク
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×