tablePane の追加
次に、tablePane コンポーネントを HomePage.cls に追加します。このコンポーネントは、Web ページに HTML テーブルを作成し、SQL クエリに基づく Caché データをこのテーブルに自動的に入力します。テーブルの各行には、クエリ結果の 1 行から取得されたデータが保管されます。
次の tablePane を中央の vgroup に追加します。
<vgroup width="90%">
<tablePane
width="900px"
id="contactTable"
tableName="ZenTutorial.Contact"
maxRows="1000"
pageSize="10"
showRowNumbers="true"
showZebra="true"
useSnapshot="true"
extraColumnWidth="5%"
caption="US Contacts"
valueColumn="ID">
<column colName="ID" hidden="true"/>
<column header="Name" width="20%" colName="Name" filterType="text"/>
<column header="Type" width="9%" colName="ContactType"/>
<column header="Street" width="20%" colName="Address1_Street"/>
<column header="City" width="12%" colName="Address1_City"/>
<column header="State" width="5%" colName="Address1_State"/>
<column header="Zip" width="7%" colName="Address1_Zip"/>
<column header="" width="5%" linkCaption="edit"
link="javascript:zenPage.showContactForm('#(%query.ID)#');"/>
<column header="" width="12%" linkCaption="view phones"
link="javascript:zenPage.displayPhones('#(%query.ID)#');"/>
</tablePane>
</vgroup>
この tablePane について、以下のことに注意してください。
-
Caché データの取得に使用される SQL クエリは、このテーブルにより自動的に生成されます。tableName 属性の値 (この例では、ZenTutorial.Contact) はクエリの FROM 節を指定します。<column> 要素は、colName 属性を通じて、SELECT 節を指定します。この例では、クエリにより、テーブルの列すべてが選択されます。テーブルにデータを入力するクエリを指定する方法は他にもいくつかあります。tablePane の詳細へのリンクは、下記のメモを参照してください。
-
<tablePane> の extraColumnWidth 属性は、既定でテーブルに追加表示される 2 つの列の幅を指定します。これらの列の 1 つには、行番号が含まれます。もう 1 つには、現在選択されている行を表すアイコンが表示されます。rowNumbers 列を削除するには、showRowNumbers 属性を 0 (既定値) に設定します。また、rowSelection 列を削除するには、rowSelect 属性を 0 (既定値は 1) に設定します。
-
<tablePane> の valueColumn 属性は、テーブルの値を含む ID 列を指定します。これは、JavaScript getProperty('value') メソッドが、現在選択されている行のこの列に値を返すことを意味します。
-
最初の <column> 要素の hidden 属性の値は true です。これは、この列が Web ページに表示されないことを意味します。
-
2 番目の Name 列は、filterType の値として text を指定します。これにより、この列の上に “フィルタ” が作成されます。このフィルタを使用して、連絡先名を基準にテーブルを検索することができます。この例では、どのようなテキストでもこのボックスに入力できます。
-
最後の 2 列にはデータは含まれません。これらの列には、クリックしたときに、クライアント側 JavaScript 関数を実行する列のリンクが含まれます。これらの関数は、チュートリアルの後半で追加します。どの場合も、関数呼び出しは、行で表わされる連絡先の ID を渡します。サーバがページを生成するときに、実行時式 #(%query.ID)# が値を関数呼び出しに挿入します。
列のリンクを含む tablePane コンポーネント、およびさまざまなクエリの指定方法の詳細は、"Zen コンポーネントの使用法" の "Zen のテーブル" を参照してください。
Zen 実行時式の詳細は、"Zen アプリケーションの開発" の "Zen アプリケーション" のセクションにある "Zen 実行時式" を参照してください。