shinya okino
shiny****@gmail*****
2008年 8月 11日 (月) 23:20:44 JST
沖野です。 すいません、私は今のところWicketを趣味&社内ツールに使っているだけなので、 デザイナーとの連携まで考えていなかったです…。 一応自分の使い方を説明すると、 DataTableは確かにタグが内部に閉じていて扱いにくいですけど、 ソート機能が作りやすいので単純な一覧表示は、DataTableやAjaxFallbackDefaultDataTableを使って、 レイアウト調整が必要なテーブルは、ListViewやGridViewを使っています。 htmlサンプルを作るなら、古川様の提示されたのと同じようなものになると思います。 実際にPanel等でコンポーネントの再利用を進めると、htmlだけで見るのが大変になると言うのはあると思います。 この辺のバランスは他の方の意見も聞いてみたいです。 2008/08/11 13:34 古川 烈 <r_f_315****@hotma*****>: > 古川です、 > すいませんさきほどのHTMLサンプルちょっと無駄なコンテナ記述してました。 > 意図したミニマルセットはこうでした。 > > <table> > > <thead> > <tr> > <th wicket:id="headCells"> > <span wicket:id="data"> > 繰り返し見出し > </span> > </th> > <wicket:remove> > <th> > デザイン見出し１ > </th> > <th> > デザイン見出し２ > </th> > </wicket:remove> > <tr> > </thead> > > <tbody> > <wicket:container wicket:id="bodyList"> > <tr> > <td wicket:id="bodyCells"> > <span wicket:id="data"> > 繰り返しデータ１−１ > </span> > </td> > <wicket:remove> > <td> > デザインデータ１−２ > </td> > <td> > デザインデータ１−３ > </td> > </wicket:remove> > </tr> > <wicket:remove> > <tr> > <td> > デザインデータ２−１ > </td> > <td> > デザインデータ２−２ > </td> > <td> > デザインデータ２−３ > </td> > </tr> > </wicket:remove> > </wicket:container> > </tbody> > > </table> > > > > > > > ________________________________ > From: r_f_315****@hotma***** > To: wicke****@lists***** > Date: Mon, 11 Aug 2008 04:30:12 +0000 > Subject: [Wicket-ja-user 208] RE: Re: 列、行ともに可変の縦横に伸びる表について > > 古川です、 > 謝辞が遅くなり申し訳ございません。 > > 沖野様にご教示頂いたコードで理解できました。 > ありがとうございました。 > > DataTableを飛ばしていきなりAjaxFallbackDefaultDataTableを見に行ったのがまずかったです。 > ちゃんとコードを追うべきでした。。。 > > DataTableのコードを眺めていて思ったのですが、 > 基本的にこのコードはWicketの拡張性の提示であって実際これをそのまま使うのは無理なような気がしました。 > もしも本格的にこのモデルでやりたければ自分でマネをして作りなさいね？という感じですかね。 > > 後思ったのは自分個人としてはプログラム内部で整理されているのは好きですが、 > DataTableを使うとデザイン上ではテーブルタグ一つになってしまいデザイナーとの連携が取りにくいように思いました。 > > そこでデザイナーとの連携も考慮すると下記ぐらいが落としどころかと思ったのですが、 > 沖野様はどう思われますか？ > > <table> > > <thead> > <tr> > <wicket:container wicket:id="headList"> > <th wicket:id="headCells"> > <span wicket:id="ｄata"> > 繰り返し見出し１ > </span> > </th> > </wicket:container> > <wicket:remove> > <th> > デザイン見出し２ > </th> > <th> > デザイン見出し３ > </th> > </wicket:remove> > <tr> > </thead> > > <tbody> > <wicket:container wicket:id="bodyList"> > <tr> > <td wicket:id="bodyCells"> > <span wicket:id="ｄata"> > 繰り返しデータ１−１ > </span> > </td> > <wicket:remove> > <td> > デザインデータ１−２ > </td> > <td> > デザインデータ１−３ > </td> > </wicket:remove> > </tr> > <wicket:remove> > <tr> > <td> > デザインデータ２−１ > </td> > <td> > デザインデータ２−２ > </td> > <td> > デザインデータ２−３ > </td> > </tr> > </wicket:remove> > </wicket:container> > </tbody> > > </table> > > > ________________________________ >> Date: Wed, 6 Aug 2008 13:15:33 +0900 >> From: shiny****@gmail***** >> To: wicke****@lists***** >> Subject: [Wicket-ja-user 203] Re: 列、行ともに可変の縦横に伸びる表について >> >> 沖野です。 >> >> DataTableはコンストラクタに渡すIColumnの配列数が、列の数になります。 >> そこを変えればプログラム側で列の数を変えられます。 >> >> そして、IColumnのpopulateItemメソッドで、１レコードの出力内容が制御できます。実際にはPropertyColumnやAbstractColumnを使うと思います。 >> >> 元のテーブルを実装するとこのような感じになります。 >> public class ProductPage extends WebPage { >> /** >> * 製品クラス >> */ >> private static class Product implements Serializable { >> /** 名前 */ >> private String name; >> /** 特長 */ >> private List<String> featrueList; >> >> public Product(String name, String feature1, String feature2) { >> this.name = name; >> this.featrueList = new ArrayList<String>(); >> featrueList.add(feature1); >> featrueList.add(feature2); >> } >> public String getName() { >> return name; >> } >> public List<String> getFeatrueList() { >> return featrueList; >> } >> } >> >> /** 製品リスト */ >> public static final List<Product> PRODUCT_LIST = new >> ArrayList<Product>() { >> { >> add(new Product("商品 １", "AAA", "あああ")); >> add(new Product("商品 2", "BBB", "いいい")); >> } >> }; >> >> public ProductPage() { >> List<IColumn> columns = new ArrayList<IColumn>(); >> columns.add(new PropertyColumn(new Model("商品名"), "name")); >> >> //特長分の列を追加 >> for (int i = 0; i < 2; i++) { >> final int index = i; >> columns.add(new AbstractColumn(new Model("特長"+ >> Integer.toString(i + 1))){ >> @Override >> public void populateItem(Item cellItem, String componentId, >> IModel rowModel) { >> Product product = (Product) rowModel.getObject(); >> cellItem.add(new Label(componentId, >> product.getFeatrueList().get(index))); >> } >> }); >> } >> >> SortableDataProvider provider = new SortableDataProvider() { >> @Override >> public Iterator iterator(int first, int count) { >> return PRODUCT_LIST.iterator(); >> } >> >> @Override >> public IModel model(Object object) { >> return new Model((Serializable) object); >> } >> >> @Override >> public int size() { >> return PRODUCT_LIST.size(); >> } >> }; >> >> DataTable dataTable = new DataTable("table", (IColumn[]) columns >> .toArray(new IColumn[columns.size()]), provider, >> PRODUCT_LIST.size()); >> >> dataTable.addTopToolbar(new HeadersToolbar(dataTable, provider)); >> >> add(dataTable); >> } >> } >> >> htmlはこれだけです。 >> <body> >> <table wicket:id="table"> >> </table> >> </body> >> >> これでヘッダ行も含めて >> ━━━━━━━━━━ >> 商品名┃特長１┃特長２ >> ━━━━━━━━━━ >> 商品 １┃ AAA ┃あああ. >> ━━━━━━━━━━ >> 商品 ２┃ BBB ┃ いいい >> ━━━━━━━━━━ >> が出力されます。 >> >> もっと複雑な行単位で列の数が可変でcolspanで結合するようなテーブルは扱えないですが、普通の用途には充分だと思います。 >> >> -- >> 沖野信也 >> shiny****@gmail***** >> >> _______________________________________________ >> Wicket-ja-user mailing list >> Wicke****@lists***** >> http://lists.sourceforge.jp/mailman/listinfo/wicket-ja-user > > ________________________________ > 2008年８月 暑い夏を快適に過ごす裏ワザ。ＭＳＮ相談箱で探してみよう！ 人も犬も熱帯魚も!これで暑さ対策はバッチリ > ________________________________ > 2008年８月 暑い夏を快適に過ごす裏ワザ。ＭＳＮ相談箱で探してみよう！ 人も犬も熱帯魚も!これで暑さ対策はバッチリ > _______________________________________________ > Wicket-ja-user mailing list > Wicke****@lists***** > http://lists.sourceforge.jp/mailman/listinfo/wicket-ja-user > > -- 沖野信也 shiny****@gmail*****
