Populate Table from XML Source

This step by step tutorial demonstrates how to perform a simple data population of a Table Component in Nexaweb Studio using an XML data source. For this tutorial, we are using the following environment -

Nexaweb Platform 4.5.62
Nexaweb Studio 6.1.0

Creating the UI

We will be creating our UI in the java-index.xal file which is by default the starting page in the Nexaweb project. First we need to create a basic table. The table is an employee data table and will have the following columns -

Department Name
Last Name
First Name
Employee ID
Phone

In your Eclipse IDE, drag a Table component from the Palette section into the java-index.xal visual editor. Go to the Source view for the table and create the columns like below -

Table markup

<xal xmlns="http://openxal.org/ui/java">
	<rootPane>
		<freePane height="768px" width="1024px">
			<label fontSize="24px" gridHorizontalGrabSpace="false" height="50px"
				text="Table Data Binding XML" width="280px" x="120px" y="50px"/>
			<table height="300px" id="employees_table" width="500px" x="60px" y="140px">

				<column width="100px">
					<header text="Dept Name"/>
				</column>
				<column width="100px">
					<header text="Emp Lname"/>
				</column>
				<column width="100px">
					<header text="Emp Fname"/>
				</column>
				<column width="50px">
					<header text="Emp Id"/>
				</column>
				<column width="100px">
					<header text="Phone"/>
				</column>

			</table>
		</freePane>
	</rootPane>
</xal>

Your table will look something like this -

Now that we have the basic UI, we need to create an XML data source. The XML file that I am using is saved in the root directory, and in the Nexaweb project it is located under WebContent folder. I have named the file employees.xml -

Employees.xml

<?xml version="1.0" encoding="UTF-8"?>
<employees>
    <employee>
        <emp_id>10</emp_id>
        <emp_fname>Deepanjan</emp_fname>
        <emp_lname>Das</emp_lname>
        <dept_name>Management</dept_name>
        <phone>6176155356</phone>
    </employee>
    <employee>
        <emp_id>02</emp_id>
        <emp_fname>Bharat</emp_fname>
        <emp_lname>Raju</emp_lname>
        <dept_name>Machine Learning</dept_name>
        <phone>8676621514</phone>
    </employee>
    <employee>
        <emp_id>11</emp_id>
        <emp_fname>Jake</emp_fname>
        <emp_lname>McMillan</emp_lname>
        <dept_name>Artificial Intelligence</dept_name>
        <phone>6172331178</phone>
    </employee>
    <employee>
        <emp_id>21</emp_id>
        <emp_fname>Bhagat</emp_fname>
        <emp_lname>Singh</emp_lname>
        <dept_name>Open Source</dept_name>
        <phone>9177726663</phone>
    </employee>
</employees>

Next step is to bind the XML data source to the table. Right click on the table UI (in Visual Editor mode) and select Populate with Iterator -

In the Select Data Source dialog box that opens, click on Add new data source... and then click Next button.

In the next page, click on the Document Data Source (XML) option, since we are populating from an XML. The Data Source Id field can be left as the default ds value, or you can give your own. Once done, click on Next.

In the next page, select the XML File option under Server Side on the left hand column and on the right hand column select your already existing XML file. Then click on Next.

In the next window, Data Source Attributes, just click Next button.

The window Competed will give you a preview of the data source tag. It is based on the data source ID and the actual XML file name and path. After verifying it, click on Next.

In the Configure the iterator window, you can give a name for the iterator. In my case, I have kept it default as ds_iterator. Her you are given two data binding options - namely One Time and One Way. One Time data binding populates the table once only and does not change the data even when the data source is updated. The One Way data binding updates the table to reflect the changes in the data source, however changing anything in the table will not affect the actual data in the data source. I prefer using One Way as I want to reflect changes in the UI if my data source values change. Based on your choices, the Iterator Tag will reflect its code. Click Next.

In the next window, Select the type of data binding, we will bind each individual data nodes in the XML file to our table. In our example, click on employee node on the left hand column so that its child components appear in the right hand column. Now check all the child components in the right hand column. We are selecting all the components because we want each of those data to show in the table. Once done, click Next.

In the next window, Configure table column, you can configure the column name and width. The column names are taken from the table UI column names. I re-arranged the column orders to reflect the sequence (left-to-right) in the table UI. Once done, click Next.

In the window Configure iterator children, we are configuring the type of data that will be shown in each of the columns. Click on each cell first and then click on Add bound attribute. This will open up the Attribute chooser and make sure that text is chosen (specific to this example).

Each cell has the same order as the columns ordered from left to right in the table UI. So make sure that the correct value is selected for each cell. When done, click Finish.

Now if you check the Source of the java-index.xal file, you will see the code of the table has been updated with the data iterator as shown -

<table height="300px" id="employees_table" width="500px" x="60px" y="140px">


				<column width="100px">
					<header text="Dept Name"/>
				</column>
				<column width="100px">
					<header text="Emp Lname"/>
				</column>
				<column width="100px">
					<header text="Emp Fname"/>
				</column>
				<column width="50px">
					<header text="Emp Id"/>
				</column>
				<column width="100px">
					<header text="Phone"/>
				</column>
				<data:iterator dataSource="ds" name="ds_iterator" select="/employees/employee"
					type="ONE_WAY" xmlns:data="http://openxal.org/core/data">
					<row>
						<cell text="{*('dept_name')}"/>
						<cell text="{*('emp_lname')}"/>
						<cell text="{*('emp_fname')}"/>
						<cell text="{*('emp_id')}"/>
						<cell text="{*('phone')}"/>
					</row>
				</data:iterator>
			</table>

If you want the row to be draggable, you can add the following attribute to the row tag - <row draggable="true">

Now build the project and run it. The table is now populated with the XML data as shown in the output -