Populating A Form

This document provides general instructions and an example for how you can populate a form in your Nexaweb application UI from a table or other component bound to an external database or web resource.

General Steps

1. Create a table or other component in your Nexaweb Application UI in which you want to display data from an external data source.

2. Get data from external data source.

• Create a serviceRequest to get the data from the external data source
• Set the target of the serviceRequest  to a documentDataSource to store the data in an XML formal

3. Create a documentDataSource to serve data to the form from the documentDataSource created to hold the data retrieved by the serviceRequest.

4. Create one way data bindings for the data in the documentDataSource that you want to use in the form. By creating one-way data bindings, you ensure that the data auto-refreshes when the event handler executes.

5. Create the UI form and connect the fields in the UI form to the data bindings.

6. Create an event - such as doubleclick, drag and drop, or onCommand - to handle populating the form from the data bound component. Create this event to reference the MCO created to manage a class with methods for handling the data.

7. Create a class with methods to handle the data event including:

• To get selected elements from the documentDataSource created to store data retrieved by the serviceRequest
• To parse selected rows from this documentDataSource
• Add document to documentDataSource that feeds data bindings to form fields

Example

The following example shows the XAL syntax for populating a form from a data bound table.

Table

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.

<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.

<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).

 <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.

 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();
       } 
  } 
 }