ツリーとテーブル

このドキュメントでは、Nexaweb Java Application UI開発時に利用可能なテーブルやツリーのコンポーネントについて、簡単な説明をしています。またこのドキュメントではテーブルとツリーのコンポーネント属性の概要を提供しています。

table

コラムと行で配列されたデータ集合体です。

Nexaweb Studio では Paletteview でこのウィジットが利用可能で、そこからVisual Editorの UI ファイルにドラッグ&ドロップすることができます。

freePane でこのウィジットを使用した XAL の例:

<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 ファイルにドラッグ&ドロップすることができます。

freePane でこのウィジットを使用した XAL の例:

<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

ツリーとテーブルを組み合わせテーブル形式で階層的データを表示する

Nexaweb Studio では Paletteview でこのウィジットが利用可能で、そこから Visual Editor の UI ファイルにドラッグ&ドロップすることができます。

freePane でこのウィジットを使用した XAL の例:

 <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

テーブルセルは、テーブル行で一つのセルです。セルはテーブル使用用に効率化されています。行はどのような種類のコンポーネントも保有することはできますが、セルを使用した方がより効率的です。

次の表は 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

テーブルのシングルコラムのプロパティを定義します。

次の表ではコラム特有の属性のリストと概要を示しています:

属性	説明
dataType	このコラムでのセルのデータ型 (number、string, bigDecimal 等）を指定する。テーブルは異なるデータタイプをソートする異なるメソッドを使用する。
editable	ユーザーがこのコラムのセルを編集できるかどうかを指定するTrue=yes; false=no
editor	コラムのカスタムeditor を指定する。これは、UI ドキュメントの defs セクションで宣言されている textField または comboBox を参照にしている。editable コラムのデフォルトエディタはシンプルな textBox。
selected	選択または未選択としてコラムの状態を指定。True=selected; false=unselected.
sort	コラムのソートの順番を指定: 昇順または降順 DOM のこの属性値には、常にコラムのソート状態が反映
sortable	コラムヘッダーをクリックすることでコラムがソート可能にするかどうかを指定するTrue=yes; false=no.
sortPriority	テーブルソートで優先するかを指定する。優先順位として最少が１、これが一番優先順位が高くなる。テーブルの複数のコラムの優先順位が設定される場合、テーブルは優先順位が高いコラム（一番小さい数字）がソートされるようにテーブルはソートされるが、一方で2番目のコラムはプライオリティが高いコラムに対しソートされる。つまり2番目のコラムの値は全てソートされず、最初のコラムで tie されている要素のみソートされる。unstable ソートは、並び替えしている間 tie を保存しないため、stable に設定されている sortType 属性と併せてこの属性を使用する。
visualIndex	コラムのビジュアルインデックス（視覚的指標）。これは、コラムがユーザーにより再配置されるたび更新される。インデックスは0-based。これはDisplayService.getVisualColumnIndex() と同様である。この属性はリードオンリーを意図されており、UI には効果はないよう設定されている。
width	コラムの固定幅を指定する。デフォルトで、この属性を指定しなければ、Nexaweb がそのコンポーネントのサイズ設定を自動的に行う。 DOM のこの属性の値は常にコラムの現在の幅を反映する。

Row

横のcell集合体とテーブルの他のコンポーネントを定義します。

次の表は行特有の属性の一覧と概要を示しています:

属性	説明
collapsedImage	非表示の行を視覚的に表示する画像この属性を設定するとテーブルの collapsedImage より優位になる
expanded	行を拡大もしくは縮小するよう指定する True=expanded; false=contracted DOM のこの属性値は常に UI の現在の拡大状況を反映している。
expandedImage	拡大した行を視覚的に表示する画像を指定する。この属性を設定するとテーブルの expandedImage より優位になる
height	行の固定された高さを指定する。デフォルトでは、この属性を指定できなければ、Nexaweb はコンポーネントがそれにフィットするよう自動的にサイズ調整をする。
leafImage	子なしで行に使用するアイコンを指定する。この属性を設定するとテーブルの leafImage より優位になる。
selected	選択済みまたは未選択として行の状態を指定する。 true=選択、 false=未選択