web-dev-qa-db-ja.com

Vaadinグリッドとテーブル

Grid と TableVaadin 7のコンポーネントの違いは何ですか？

どちらを使用すればよいですか？

javadatagridvaadinvaadin7vaadin-grid
19
Daniel Hári

グリッドは、テーブルの後継となるはずの新しいより強力なコンポーネントです（ テーブルが死んでいる、グリッドの寿命が長い を参照）。したがって、グリッドよりもテーブルを優先する必要はありません。

テーブルからグリッドに移行するVaadin abooutによる一連の記事の最初は次のとおりです： https://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to -grid-basic

15
Vojtech Ruzicka

概要

グリッド→新規＆すばらしい
表→崇高で信頼できる

Table は、Vaadinの初期のバージョンに組み込まれた非常に優れたデータグリッド表示ウィジェットです。

Grid は、Tableに取って代わるように設計された、ゼロからの大規模な書き換えです。 Vaadinチームは、「私たちが今知っていることを知っていれば」という経験から得た彼らの知恵を活用して、今日のWebテクノロジーで可能な限り最高のデータグリッドを実現しています。グリッドは非常に重要なので、 独自のバニティページ を取得します。概要については この会社のブログ投稿 を参照してください。

だから、一般的に言えば、私はあなたにグリッドに焦点を当てることをお勧めします。それを試して、最初にそれを学び、それがあなたのニーズを満たしているかどうかを確認してください。バグや問題が発生した場合、またはグリッドに欠けている機能が必要な場合は、Tableにフォールバックします。プロジェクトでは両方を組み合わせて使用​​できますが、外観や動作が異なるとユーザーが混乱する可能性があることに注意してください。

Gridは、約束に満ち、大人になりたいと願う早熟な青年と考えてください。Table成熟した大人が中年のプライムイヤーで懸命に働きながら、将来の定年退職が日没に向かって航海することを夢見ています。

細部

継続中のプロジェクトでVaadin 6を使用している場合、または非常に古いブラウザをサポートする必要がある場合は、Tableが唯一の選択肢です。 GridにはVaadin 7以降が必要です。

以下は、現在グリッドに欠けているいくつかの主要なテーブル機能です。

  • ドラッグアンドドロップ機能（後で追加）。
  • ユーザーが列ヘッダーの端をドラッグして列のサイズを変更します。

どちらも多くの機能を共有しています。彼らは、ブラウザーへの遅延ロードを練習し、Webブラウザーに過負荷をかけないように、サーバー側から必要な場合にのみデータを自動的にロードします。どちらもユーザーは列をドラッグして並べ替えることができます。どちらもユーザーは列を表示/非表示にできます。

行の選択

どちらも単一行または複数行を選択できます。

グリッドには、チェックボックスの列を追加する自動機能もあります。ユーザーは、マウスやマウス+キーボードを使用する代わりに、これらのチェックボックスをクリックして複数の行を選択できます。ほとんどではないにしても、多くのユーザーはマウス駆動の複数行選択に不器用です。 このスクリーンショット を参照して、最初の列に注目してください。

選択のプログラミングサポートは異なります。グリッドは拡張しない AbstractSelect 代わりに、独自の選択APIを定義します。 addSelectionListener() を呼び出して、 SelectionListener を定義します。 The Book Of Vaadin を参照してください。

ヘッダーとフッター

どちらにもヘッダーとフッターがありますが、グリッドにはより多くのオプションがあります。グリッドは、テキストの代わりにウィジェットを配置できます。グリッドは複数行のヘッダーを持つことができます。グリッドは、HTMLテーブルのスパニングのように、ヘッダーセルを結合できます。

インプレイス編集

どちらもデータのインプレース編集を提供しますが、方法は異なります。テーブルでは、セル内のデータを編集できます。グリッドは、小さなデータ入力フォームであるミニウィンドウを表示して行全体を編集するために、別のアプローチを採用しました。このフォームには、確認とキャンセルのボタンのペアが含まれています。このフォームは、テーブルのセル編集よりもはるかに柔軟です。

フィルタリング

グリッドはユーザーが制御するフィルタリングを提供し、入力可能なセルの行がヘッダーの下に表示されます。ユーザーが入力すると、フィルターが適用され、一致する行のみが表示されます。 このスクリーンショット を参照してください。テーブルでは、ある種のユーザーインターフェイスを作成し、フィルタリングを適用する必要があります。

データコンテナーによる支援

UPDATE：Vaadin 8は 新しく改善され大幅に簡略化されたデータモデル を活用する新しいバージョンのグリッドをもたらします。これは、テーブルではなくグリッドを使用するmajor理由です。元のグリッドとテーブルの両方が Vaadin 7互換性レイヤー を介してVaadin 8で引き続き使用できることに注意してください。

次の古い情報はそのまま残りました…

テーブルとグリッドはどちらもプレゼンテーション専用のウィジェットであり、 Vaadin Data Model に従って Container インターフェースを実装する個別のデータオブジェクトによってサポートされています。

Tableクラスも機能しますas常に混乱していたコンテナ。グリッドがより明確で明確な分離を維持していることを嬉しく思います。

Tableと同様に、Gridは、コンテナーを正式に作成せずにグリッド自体にデータをスローする必要がある迅速で汚れた状況に対応する便利なメソッドをいくつか提供します。ただし、グリッドの便利なメソッドでは、コンテナのitemおよびproperty用語とは対照的にrowおよびcolumn用語を使用します。これらの用語により、グリッドと通信していることがより明確になりますが、グリッドはデフォルトでアタッチされた IndexedContainer インスタンスに代わって動作しています。

セルの内容

UPDATE：Vaadin 8.1では、グリッドにセル内のコンポーネントを表示する機能が追加されました。 コンポーネントレンダラーのライブデモ を参照してください。

セルコンテンツの処理が異なります。グリッドは列アイコンを直接表示することも、コンポーネント（ウィジェット）をセルに配置することもできません。代わりに、新しい Renderer 機能を使用しました。

ドキュメントとデモ

どちらも The Book Of Vaadin 、 テーブル用に1つ 、および グリッド用に1つ の章があります。

どちらにもライブデモがあります。 One for Table （および TreeTable ）。そして、グリッド用のカップル 1つのフルウィンドウ および さまざまな側面を持つ1つ 。

この グリッドのパンフレットページ を参照してください。埋め込まれたライブデモを含み、詳細なデモへのリンクがあります。

その他の違い

グリッドには、数値を小さな温度計ウィジェットとして表示するための組み込みウィジェットがあります。最後の列の このスクリーンショット を参照してください。

より具体的な違いについては、 The Book Of Vaadin のセクション 5.24.1概要-表との違い を参照してください。

Esoterica…グリッドは Vaadin Components の最初のコンポーネントです。これは、 Google Polymer をベースに構築された高品質のWebコンポーネントセットで、サポートする任意のフレームワークですぐに使用できます Webコンポーネント 。 Vaadinチームは今後数年間Tableをサポートすることを約束しましたが、そのような特別な注意を受けることを期待しないでください。

Vaadin 8

Vaadin 8.0および8.1では、グリッドはさらに改善されています。主な機能強化は次のとおりです。

  • Vaadin 8 の新しいよりシンプルな洗練されたデータモデルで動作します。
    • 表示するエンティティのコレクションを渡します
    • タイプセーフなラムダ構文で列を簡単に定義
      grid.addColumn( Person::getFirstName ).setCaption( "First Name" );
    • Containerがなくなったため、データのレイジーロードがより簡単になりました：
      grid.setDataProvider( ( sortorder , offset , limit) -> service.findAll( offset , limit) , () -> service.count() );
  • レンダラーだけでなくVaadinコンポーネントを表示する機能
  • HTML5で定義されているドラッグアンドドロップサポートを介したドラッグアンドドロップ。
  • さらにスピード

テーブルコンポーネントは、Vaadin 7クラスの使用を継続するために、Vaadin 8の互換性レイヤーを介して引き続き使用できます。

未来

Vaadinチームはグリッドの優れた計画を持っているため、StackOverflowページで読んだ内容の多くは変化します。チームは、今後数か月および数年で、機能、拡張機能、バグ修正を熱心に追加する予定です。短い歴史の中でグリッドには多くの機能強化が既に加えられているため、制限事項や機能の欠如について古いドキュメントを読むときは注意してください。

23
Basil Bourque

実際には、両方で必要なすべてを実装することが可能です。しかし、私の経験では、グリッドはより快適に使用できます。

Tableは理解しやすく、シンプルなテーブルでも簡単に使用できます（ご想像のとおり）。したがって、数行のデータを適切に視覚化して表示したい場合は、テーブルを使用してください。安定していて、その上でうまく機能します。

Gridはテーブルのように見えますが、テーブルに対していくつかの機能があります。レンダリングするデータが大量にある場合、グリッドはより適切に処理できます。また、データを「インライン編集」するための良い方法もあります。グリッドのヘッダーを大幅にカスタマイズする方法があります。 テーブルのようなコンポーネント内で多くのカスタマイズと相互作用を行いたい場合は、グリッドを使用してください。

ここで機能を参照してください：

https://vaadin.com/grid

http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid

これら2つのコンポーネントで行/セルを選択する方法には違いがあります。たとえば、選択用のEventListenerは、それらが返す値に関して少し異なります。また、列と行を追加する方法にも違いがありますが、これは単なる実装であるため、それほど重要ではありません。

1
fuma

フィルターテーブルでは、テーブルヘッダーをクリックすると、最初の行はsetSelectable（true）;というメソッドによってデフォルトで強調表示されますが、グリッドテーブルにはそのようなタイプのアクションはありません。

同じアクションをグリッドテーブルに適用したい。その性質を持つ可能性はありますか？利用可能なメソッドまたはコードはありますか？

以下は、グリッドテーブルで使用したコードです。

private void buildPagedGrid(Class<T> clazz) {

     setWidth("100%");      
     setSelectionMode(SelectionMode.SINGLE);
     setImmediate(true);        
     setSizeFull();
     setContainerDataSource(dataSource);
     setFooterVisible(true);
}
0
fani