このドキュメントでは、Nexaweb Java Application UI開発時に利用可能なテーブルやツリーのコンポーネントについて、簡単な説明をしています。またこのドキュメントではテーブルとツリーのコンポーネント属性の概要を提供しています。
table
コラムと行で配列されたデータ集合体です。
Nexaweb Studio では Paletteview でこのウィジットが利用可能で、そこからVisual Editorの UI ファイルにドラッグ&ドロップすることができます。
...
| Code Block |
|---|
<table height="200px" width="300px" x="10px" y="50px"> <column> <header text="Column #1"/> </column> <column> <header text="Column #2"/> </column> <row> <cell text="Row 1 Cell 1"/> <cell text="Row 1 Cell 2"/> </row> <row> <cell text="Row 2 Cell 1"/> <cell text="Row 2 Cell 2"/> </row> <row> <cell text="Row 3 Cell 1"/> <cell text="Row 3 Cell 2"/> </row> </table> |
tree
階層的形式でデータを表示します。
Nexaweb Studio では Paletteview でこのウィジットが利用可能で、そこから Visual Editor の UI ファイルにドラッグ&ドロップすることができます。
...
| Code Block |
|---|
<tree height="100px" width="180px" x="10px" y="20px">
<column/>
<row>
<cell text="Tree Item 1"/>
<row>
<cell text="Sub Tree Item 1"/>
</row>
<row>
<cell text="Sub Tree Item 2"/>
</row>
</row>
<row>
<cell text="Tree Item 2"/>
</row>
</tree> |
treeTable
ツリーとテーブルを組み合わせテーブル形式で階層的データを表示する
...
| Code Block |
|---|
<treeTable height="120px" width="280px" x="10px" y="170px">
<column>
<header text="Column #1"/>
</column>
<column>
<header text="Column #2"/>
</column>
<row>
<cell text="Tree Item 1"/>
<cell text="Tree Item 1"/>
<row>
<cell text="Sub Tree Item 1"/>
<cell text="Sub Tree Item 1"/>
</row>
<row>
<cell text="Sub Tree Item 2"/>
<cell text="Sub Tree Item 2"/>
</row>
</row>
<row>
<cell text="Tree Item 2"/>
<cell text="Tree Item 2"/>
</row>
</treeTable> |
テーブルとツリー属性
次の表では、テーブルとツリーのコンポーネント特有の属性の概要一覧を示しています:
| 属性 | 説明 |
| altBackgroundColor | デフォルト設定で、テーブルコンポーネントはテーブルの行を交互に異なる背景色を提供する。この属性を使い、テーブルの行を交互にする背景色を指定する。 |
| altColor | テーブルの行のテキストを交互に表すフォント色を指定する。 |
| collapsedImage | 非表示の行を視覚的に表示するために画像を指定する。 |
| expandedImage | 展開行を視覚的に表示するために画像を指定する。 |
| highlightBackgroundColor | 行が選択された時表示されるよう背景色を指定する。 |
| highlightColor | 行が選択された時、テキストのフォント色を指定する。 |
| horizontalLineColor | 行を分ける水平境界線の色を指定する。デフォルトで水平境界線は不透明色になっている。 |
| keyMatchReset | ユーザーが機能に合致したパターンを停止したあとの時間を秒単位で指定する。 |
| leafImage | 子なしの行に使用するアイコンを指定する。 |
| quickEdit | 次と併せて使用する: singleCell に設定された tableselectionMode 属性 true に設定された column editable 属性 その後、この属性を true に設定し、ユーザーが編集できるセルをクリックしユーザーは直ちにそのセルの編集を始めることができる。それに加え、ユーザーが上/下/左/右矢印を押下し、フォーカスが隣接したセルに移動し、それが編集可能な属性が true に設定しているコラムにある場合、ユーザーは直ちに編集を開始することができる。 エンターキーを押すとテキストが決定され、コラムの次のセルに進む。 true に設定されたquickEdit 属性付きのテーブルがフォーカスを受けた時、最後編集されたセルは、可能であればクイック編集モードに配置される。 セルを quckEdit モードから、ユーザーが矢印キーを使用しながら編集をするeditableモードに戻す際、セルをクリックする。Quick edit modeに戻すためには再び quick edit modeCell を右クリックする。またはF2キーを使用しセルの編集モード間の切り替えをする。 |
| resizableColumns | ユーザーがコラムヘッダーをリサイズすることによりユーザーが列をリサイズできるよう指定する true=はい、 false=no。 デフォルトでは "true" |
| rowHeight | テーブルの全ての行の高さを指定する。 |
| rowImageVerticalAlignment | 画像の縦のアライメントをトップまたはセンターに指定する。デフォルト:センター |
| selectionMode | 一回にテーブルで選択するものを指定する。例えば、一行のみ、または一つのセル、または複数行（Shift または Ctl キーを使用） デフォルトではsingleRow |
| sortType | stable または unstable としてコラムソート方法を指定する。 stable: 複数のコラムソートに使用する;イコール要素の順番を保持する。 columnssortPriority 属性と組み合わせる。 unstable: コラム間でtieを作らない。各コラムのソートは、コラム全体をソートし、隣接したコラムに関する特別対応を提供しない。 |
| swappableColumns | ユーザーはコラムヘッダーをドラッグすることにより、ユーザーによるコラムの再調整の指定することができる。 true=はい、 false=no。 デフォルトは "true" |
| treeLineColor | ツリーの行でノードをつなぐ線の色を指定する。 |
| verticalLineColor | コラムを分ける縦の境界線の色を指定する。 デフォルトでは縦の境界線はオパーク（不透明） |
Cell
テーブルセルは、テーブル行で一つの セルです。セルはテーブル使用用に効率化されています。行はどのような種類のコンポーネントも保有することはできますが、セルを使用した方がより効率的です。
...
| 属性 | 説明 |
| editable | ユーザーがこのセルを編集できるかどうか指定できる。指定した場合、この属性の値は、セルがあるコラムに設定されたeditable属性の値よりも優先される。 |
| editing | true に設定されている Editable 属性付きのセルが編集中の場合に表示される。この属性をtrueに設定し、編集可能セルを編集モードにする。一回にひとつの セルのみ編集モードにすることができる。 |
| selected | singleCellまたはmultiCellに設定されているtable\tree\treeTable selctionMode と共に使用する。その後、この属性により セルの選択を指定する。 true=はい、 false=いいえ |
| sortValue | セルに含まれているテキストのソートではなく、セル自身のソートに使用する値を指定する。dataType属性が、テーブルがデータをどのようにソートするのかを管理するため、column dataType 属性に指定されているデータのタイプに合致する sortValue を指定する |
| text | セルのテキスト内容を指定する |
| value | 表示された内容ではなく、cell/list アイテムのロジカル値を指定する。この値はフォームの一部である listBox または treeTable で選択がされたとき、サーバーに戻る。また、ClientEvent またはサーバー URL のイベントパラメーター文字列として報告される。 |
Column
テーブルのシングルコラムのプロパティを定義します。
...