Displaying Data from a Data-centric Web Page with Sun Java Creator 2

From the 2k5Java data source you will be displaying the data from the table called Argentina as shown in the following window, which shows the Servers window in the Sun Java Creator 2 IDE.

Now click on the table Argentina and click on the Table in the Design view of the web page. This changes the table column by bringing all the columns from the data source to the Table as shown. The rows in the design are just showing some data types, but not any from the data source.

The act of dropping the table object from the data source onto the Table control on the web page has altered the outline of the page as shown. It is possible to click on the table element in the Outline and view the corresponding item on the Design view. You also see that a "SessionBean" has been automatically created and the argentinaDataProvider has been added to the page.

Changes to page source code

The page content changes as the Table is added, and it gets bound by your action of dropping the data source onto the table. Here is an extracted content for the table alone in the source view. In addition to the data binding of the table columns with rows of retrieved data from the data source, you also see considerable script support in the [CDATA[...]] section for data filtering and so forth.

 <ui:table augmentTitle="false" binding="#{Page1.table1}" 
id="table1" style="height: 104px" title="Table" width="600">

<script><![CDATA[
/* ----- Functions for Table Preferences Panel ----- */
/*
* Toggle the table preferences panel open or closed
*/
function togglePreferencesPanel() {
var table = document.getElementById("form1:table1");
table.toggleTblePreferencesPanel();
}
/* ----- Functions for Filter Panel ----- */
/*
* Return true if the filter menu has actually changed,
* so the corresponding event should be allowed to continue.
*/
function filterMenuChanged() {
var table = document.getElementById("form1:table1");
return table.filterMenuChanged();
}
/*
* Toggle the custom filter panel (if any) open or closed.
*/
function toggleFilterPanel() {
var table = document.getElementById("form1:table1");
return table.toggleTableFilterPanel();
}
/* ----- Functions for Table Actions ----- */
/*
* Initialize all rows of the table when the state
* of selected rows changes.
*/
function initAllRows() {
var table = document.getElementById("form1:table1");
table.initAllRows();
}
/*
* Set the selected state for the given row groups
* displayed in the table.  This functionality requires
* the 'selectId' of the tableColumn to be set.
*
* @param rowGroupId HTML element id of the tableRowGroup component
* @param selected Flag indicating whether components should be selected
*/
function selectGroupRows(rowGroupId, selected) {
var table = document.getElementById("form1:table1");
table.selectGroupRows(rowGroupId, selected);
}
/*
* Disable all table actions if no rows have been selected.
*/
function disableActions() { // Determine whether any rows are currently 

selected var table = document.getElementById("form1:table1");
var disabled = (table.getAllSelectedRowsCount() > 0) ? false : true; 

// Set disabled state for top actions document.getElementById("form1:

table1:tableActionsTop:deleteTop").setDisabled(disabled);
 // Set disabled state for bottom actions document.getElementById("form1:

table1:tableActionsBottom:deleteBottom").setDisabled(disabled);
}
</script> <ui:tableRowGroup binding="#{Page1.tableRowGroup1}" 
id="tableRowGroup1" rows="10" 
sourceData="#{Page1.argentinaDataProvider}" 
sourceVar="currentRow">
<ui:tableColumn binding="#{Page1.tableColumn1}" 
headerText="CustomerID" 
id="tableColumn1" 
sort="CustomerID">
<ui:staticText binding="#{Page1.staticText1}" 
id="staticText1" text="#{currentRow.value

['CustomerID']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{Page1.tableColumn2}" 
headerText="OrderDate" 
id="tableColumn2" 
sort="OrderDate">
<ui:staticText binding="#{Page1.staticText2}" 
id="staticText2" 
text="#{currentRow.value['OrderDate']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{Page1.tableColumn3}" 
headerText="RequiredDate" 
id="tableColumn3" 
sort="RequiredDate">
<ui:staticText 
binding="#{Page1.staticText3}" 
id="staticText3" 
text="#{currentRow.value['RequiredDate']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{Page1.tableColumn4}" 
headerText="ShipName" id="tableColumn4" sort="ShipName">
<ui:staticText binding="#{Page1.staticText4}" 
id="staticText4" text="#{currentRow.value['ShipName']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{Page1.tableColumn5}" 
headerText="KeyVal" 
id="tableColumn5" 
sort="KeyVal">
<ui:staticText binding="#{Page1.staticText5}" 
id="staticText5" text="#{currentRow.value['KeyVal']}"/>
</ui:tableColumn>
</ui:tableRowGroup>
</ui:table>