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