その4では、テスト用で作ったCarのリストをTableに表示した訳ですが
今回は、サーバからTable表示用の一覧を取得します。
新しくAppView2.javaを作成します。
AppView2は、PagingToolBarを持っていて
結果を1ページあたり10件ごと表示します。
まず、はじめに
新規にGWTリモートサービスを作成します。
#eclipse+cypal使っているだろうから。。。
AppRemoteService.java
AppRemoteServiceAsync.java
AppRemoteServiceImpl.java
作成したAppRemoteServiceに以下のインターフェースを追加します。
AppRemoteServiceAsyncには自動でメソッド追加されているはず。
このリターンやらパラメータが肝ですかね。
conditionは検索条件みたいなイメージです。
public PagingLoadResult<Car> getRemoteCars(Car condition, PagingLoadConfig config);
＃とりあえずその2で作成したAppController.javaで使われている
＃AppViewをAppView2に変更してください。
で、以下が、Remote+Paginationなテーブルです。
AppView2.java
package com.gethapp.sample.mvc.client;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.SelectionMode;
import com.extjs.gxt.ui.client.binder.TableBinder;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.event.TableEvent;
import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Controller;
import com.extjs.gxt.ui.client.mvc.View;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.PagingToolBar;
import com.extjs.gxt.ui.client.widget.Text;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.table.DateTimeCellRenderer;
import com.extjs.gxt.ui.client.widget.table.Table;
import com.extjs.gxt.ui.client.widget.table.TableColumn;
import com.extjs.gxt.ui.client.widget.table.TableColumnModel;
import com.extjs.gxt.ui.client.widget.table.TableItem;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.RootPanel;
public class AppView2 extends View {
//1ページあたりの表示数
private static final int PAR_PAGE=10;
private Viewport v;
[…]
Posted on 8月 8th, 2008 by mitsu
Filed under: Ext, java, 開発メモ | No Comments »
地図好きにExt 2.2 Released（jsのほうね）を教えてもらった。GMapPanelなんてのがあったので、
GXT+gwt-google-apisのMaps API
で地図を出してみた。
Using Google Maps in a projectページに沿って、進めていくわけなのですが、
肝心のmaps.jarみたいのが出てこないし、真似して、コード書いていってもMapWidgetクラスがNotFoundで赤いままだし。
って、Downloadページにあるファイルに入っているjarファイル入れてもダメだし。
で、Search横にあるリストをCurrent DownloadsからAll Downloadsに変更してみると
あるじゃないですか、gwt-maps、
でもDeprecatedだと?!って
まぁ、非推奨なだけで動くとは思うのでgwt-maps-0.0.290.zipをダウンロード、
解凍した後、
gwt-maps.jarをincludeして、無事にtutorial通り、地図が出ました。
レイアウトとかサイズとかコンポーネントは適当ですw
デモはこちら
Posted on 8月 8th, 2008 by mitsu
Filed under: Ext, GWT, java, 地図, 開発メモ | No Comments »
その3で作ったモデルクラス(Car)のリストをTableに表示してみます。
まずは、イメージが掴めるように、簡単に考えてみます。
＃多分、一番簡単なやり方だと思います。
その2で作ったAppView.javaに
Button
Text
Table
を追加します。
Button押したら、Tableにデータをロードして、
そのTableから1行選択し、選択内容をTextに表示します。
テーブル表示用のCarのリストは、130行目以下でテスト用に作っていて
85行目あたりでstoreに追加して、Tableにバインドしています。
ListStore
TableBinder
package com.gethapp.sample.mvc.client;
import java.util.ArrayList;
import java.util.List;
import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.SelectionMode;
import com.extjs.gxt.ui.client.binder.TableBinder;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.event.TableEvent;
import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Controller;
import com.extjs.gxt.ui.client.mvc.View;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Text;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.table.DateTimeCellRenderer;
import com.extjs.gxt.ui.client.widget.table.Table;
import com.extjs.gxt.ui.client.widget.table.TableColumn;
import com.extjs.gxt.ui.client.widget.table.TableColumnModel;
import com.extjs.gxt.ui.client.widget.table.TableItem;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.ui.RootPanel;
public class AppView extends View {
private Viewport v;
private ContentPanel cp;
//コンポーネント追加
private Table table;
private Text text;
private Button button;
[…]
Posted on 8月 8th, 2008 by mitsu
Filed under: Ext, java, 開発メモ | 2 Comments »
ExtGWTでMVC
ExtGWTでMVC (その2)
も見てね。
BaseTreeModelクラスを使って、モデルクラスを定義して、サーバとデータを受け渡しをします。
例えば、車を表すCarクラスを定義します。
アクセッサメソッドでsetXXXXを作ってもいいですが、
面倒だし、どうせ使わないだろうから
引数付きのコンストラクタを定義してみます。
Car.java
package com.gethapp.sample.mvc.client;
import java.util.Date;
import com.extjs.gxt.ui.client.data.BaseTreeModel;
public class Car extends BaseTreeModel<Car> {
private static final long serialVersionUID = -5728466318167505208L;
//車名
private String name;
//価格
private int price;
//年式？
private Date mDate;
public Car() {
//デフォルトコンストラクタ
}
public Car(String name, int price, Date mDate) […]
Posted on 8月 6th, 2008 by mitsu
Filed under: Ext, java, 開発メモ | No Comments »