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)# が値を関数呼び出しに挿入します。