Page Comparison

...

This example uses a table as the component to display data. The table includes an iterator to populate the rows and columns with data from the employees documentDataSource that represents the employees data in XML format. The employees data could come from any physical data-source: a JDBC compatible database, REST or SOAP web services or from a proprietary or custom source that you provide.

Code Block

<table id="employees_table" onSelect="mco:handler.clickPopulateForm()"
   height="250px" width="650px">
   <column>
     <header text="ID"/>
   </column>
   <column>
     <header text="First Name"/>
   </column>
   <column>
     <header text="Last Name"/>
   </column>
   <column>
     <header text="Department"/>
   </column>
   <column>
     <header text="Phone"/>
   </column>
   <data:iterator dataSource="employees"
     name="rowIterator" select="//myResult/resultSet/row" type="ONE_WAY">
     <row draggable="true" >
       <data:iterator dataSource="rowIterator"
         name="cellIterator" select="*" type="ONE_WAY"> 
         <cell fieldName="{*('name(.)')}" text="{*('.')}"/> 
       </data:iterator>
     </row>
   </data:iterator>
</table>

Datasource and Bindings

This example includes a data-source from which the form obtains the data. It also includes bindings from which the data-source obtains data from the table's source. The XPath query is configured to work with XML data that will derive from the selected row in the table component.

Code Block

<data:documentDataSource x
  mlns:data="http://openxal.org/core/data" id="form"/>
 <data:binding xmlns:data="http://openxal.org/core/data" 
  id="emp_id" dataSource="form"
  select="/row/cell[@fieldName='emp_id']/@text" type="ONE_WAY"/>
 <data:binding xmlns:data="http://openxal.org/core/data" 
  id="emp_fname" dataSource="form"
  select="/row/cell[@fieldName='emp_fname']/@text" type="ONE_WAY"/>
 <data:binding xmlns:data="http://openxal.org/core/data" 
  id="emp_lname" dataSource="form"
  select="/row/cell[@fieldName='emp_lname']/@text" type="ONE_WAY"/>
 <data:binding xmlns:data="http://openxal.org/core/data" 
  id="dept_name" dataSource="form"
  select="/row/cell[@fieldName='dept_name']/@text" type="ONE_WAY"/>
 <data:binding xmlns:data="http://openxal.org/core/data" 
  id="phone" dataSource="form" 
  select="/row/cell[@fieldName='phone']/@text" type="ONE_WAY"/>

...

Form

The form includes fields to display data from the datasource, using the bindings created above. The bindings are ONE_WAY, so that they auto-refresh when handling the event (next section).

...

Code Block

 <textField disabled="true" id="tf_emp_id" text="{bind(binding:emp_id)}" 
  height="25px" width="120px" />
<textField id="tf_emp_fname" text="{ bind(binding:emp_fname) }" 
  height="25px" width="250px" />
<textField id="tf_emp_lname" text="{ bind(binding:emp_lname) }" 
  height="25px" width="250px" />
<textField id="tf_emp_phone" text="{ bind(binding:phone) }" 
  height="25px" width="250px" />

...

Handling Event

The following MCO method handles the user event and populates the form. The table onSelect event calls this method. This method parses the XML from the selected row into a document (com.nexaweb.xml.Document) and then adds it to the form datasource. Setting the source refreshes the bindings in the form fields and updates the data that the form fields display.

...

Code Block

language	java
linenumbers	true

 public void clickPopulateForm() {
//helper method for getting the current row from the UI table
  _selectedRow = getSelectedRow("employees_table");
  if (_selectedRow != null) {
       try {
       String xml =_selectedRow.toXmlWithoutAutoAssignedIds(true);
//parse the row into a document
       Document document = ParserFactory.getParser().parseXml(xml);
       DocumentDataSource dataSource = getDocumentDataSource("form");
//set this document to the "form" DocumentDataSource
       dataSource.setSource(document);
       } catch (ParserException ex) {
         ex.printStackTrace();
       } 
  } 
 }

Versions Compared

Old Version 1

New Version Current

Key