Adding a tablePane

Next we will add a tablePane component to HomePage.cls. This component creates an HTML table on the Web page and automatically fills it with Caché data based on an SQL query. Each row of the table contains the data from one row of the query results.

Add the following tablePane to the central 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>

Note the following about this tablePane:

• This table automatically generates the SQL Query it uses to retrieve the Caché data. The value of the tableName attribute, in this case ZenTutorial.Contact, specifies the FROM clause of the query. The <column> elements, through their colName attributes, specify the SELECT clause. In this case, the query selects all of the table's columns. Note that there are several other ways to specify the query that fills the table. See the note below for a link to more information on tablePane.

• The extraColumnWidth attribute of the <tablePane> specifies the width of two extra columns that appear on the table by default. One of these columns contains row numbers. The other column contains an icon that indicates the currently selected row. Note that you can remove the rowNumbers column by setting the showRowNumbers attribute to 0 (the default value). You can also remove the rowSelection column by setting the rowSelect attribute to 0 (the default value is 1).

• The valueColumn attribute of the <tablePane> specifies that ID column contains the value of the table. This means that the JavaScript getProperty('value') method returns the value in this column for the currently selected row.

• The value of the first <column> element's hidden attribute is true. This means that the column is not displayed on the Web page.

• The second, or Name, column specifies text as the value of its filterType. This creates a “filter” above the column that can be used to search the table by contact name. In this case, any text can be entered into the box.

• The last two columns do not contain data. They contain column links that execute client-side JavaScript functions when clicked. These functions are added on later pages of the tutorial. Note that in each case the function call passes the ID for the contact represented by the row. The runtime expression #(%query.ID)# inserts the value into the function call when the server generates the page.