The Query Screen is the screen to check the data of the card management system per their conditions.
Learn the script to save the data to Dataset by calling the service. 
Learn how to output the data by connecting Dataset to Grid. 
Make the look of the desired output by designing the column of Grid.

Making the Form

1. Select the menu of “Making Form” by (File > New > Item > Form).

2. Designate Name and Location by using the “Create New Form Wizard” window.

3. Designate Inheritance by using the Create New Form Wizard” window.

4. Designate the Position by using the Create New Form Wizard” window.

5. Designate the MLM function by using the “Create New Form Wizard” window.

6. Designate the Widget function by using the “Create New Form Wizard” window.

7. When “Making Form” is completed, the Form made at UX-Studio is open.

Designing the Dataset Column

The Dataset component receives the data from the server and supplies them to Grid.
Dataset does not only keep the data but also advise the state that the data is changed (added/corrected/deleted).  The corrected data keeps the original data before their corrections. 
Since dataset keeps the data with the form of the two dimensional table, it has the Column structure and deals them with the low unit (Row and Record). 
One single Form can have more than one Dataset.
When the data is the contents which are common to the whole project, the Dataset is made at the Global Dataset and can be used at many Forms by connecting them.

Making Dataset - Dataset: Dataset

Select at the component tool bar.

Dataset occurs at the tab of “Invisible Objects” whichever part is clicked.

Since dataset is also a kind of component, the property and event are adjusted by using the “Properties” window.

Designing Dataset Column

Dataset keeps the data with the form of the two dimensional table. 
It can be used when the data for the test is input directly and designed.
The design of Dataset uses the “Dataset Contents Editor” window.
The “Dataset Contents Editor” window is called by clicking the applicable Dataset.

When the “Const Columns” information at the top is the value that all of the  Record and Row have, it is regared as Const Value and makes “Const Column”.
The “Columns” information in the middle is the place where the shape of record is designed. 
The “Rows”at the bottom is the part to select the data for the test.

For the detailed method, please refer to “The Method to use UX-Studio”.

The process to add the column information at Dataset and the data for the test is as follows:

1. Open the “Dataset Contents Editor” window and make one column at “Column” in the middle. By clicking the button located at the tool bar, Column is added.

2. Set “id”,”type” and “size” at the added column information.

   Designate “id” in order to have the value which is not duplicated in the same Dataset.

   The Korean column id is accepted but it is not recommended because it is difficult to be recognized when the encoding is not matched.

   In “type”, there are STRING, INT, FLOAT/BIGDECIMAL, DATE/DATETIME/TIME, BLOB, etc.

   The designation of “size”is free but since the allowance is different from the type, it’s better designate the length as long as the type accepts. In case that the data whose allowance is over, only the data within the allowance range is accepted and the other are cut or neglected.

The completed look is as follows:

3. When the data for the test is designed, make them check the output contents of the form without connection to the server. When the data for the test is added, by clicking the button at the “ Rows”part, add the record and then the data can be registered directly.

4. With the same method as bove, “ds_dept”which is the Dataset only for the department is generated additionally.

Composing Grid

The Grid component outputs the data by binding Dataset.  When Grid is bound to Dataset, the input through Grid is possible and the data of Dataset can be corrected. 
All of the work is executed centrally for the bound Dataset and reflected to the real-time Dataset. 
If the Record is added to Dataset, the added Record is output to the Grid. 
When the data is corrected through Grid, the data of the bound Dataset is corrected immediately. The Grid can give Format when the data is output or input. In order for the user to recognize the data easily, setting to show “-“text at the output is possible. When the date is input, the input form of date can be selected in order not to exceed the scope.

Designing Column

Draw on the form by selecting at the component tool bar.

When Grid is intended to bind Dataset, select the applicable Grid and click the selected item after searching “binddataset” at the “Properties” window. When the designed Dataset and the list of Dataset are open at Form, select the Dataset that is desired to bind.

When Grid is designed, the initial look shows only the space display as above. By dragging the Dataset to connect, put on the Grid.

When Grid is double clicked, it is checked that all the columns of Dataset are designed to Grid.

Select the column desired to change and correct it by using the properties window which is shown at the right.
Select the column desired to delete and work by using the popup menu which is shown when the mouse right button is clicked. When the order of column is changed, use the menu of “Cut” and “Paste”. After selecting the column to change the position, press “Cut”. After selecting the column to change its location, press “Paste". Then " Append /insert” come up with popup. Append moves the cut column to the very end and insert moves it to just at the back of the selected position.
Since at the XPLATFORM program, the data is kept at Dataset and Grid is used by connecting Dataset, design only the column intended to show. 
In case of connecting the column of Grid to the column of Dataset, it is possible only when the value for binddataset of Grid is set.
Select the column of connected Grid. Then the properties window of the connected column is shown at the right. Select the column of Dataset to connect at the “text” item of the “Binding” group. The Grid which will be used at the example designs the column as follows:

The column information to add is as follows:

When all the work is done, by clicking the “OK” button, it is completed.

Connecting the Specific Dataset to Grid

When the specific column at Grid intends to bring the information about the other Dataset, it can be connected through Grid Editor. 
Open Grid Editor and select the department column. Then set displaytype and edittype of the Action area at the right with combo.
At the GridCombo area, bind ds_dept which was made previously to combodataset and then, bind codecolumn to combocodecol and bind datacolumn to combodatacol.
With this connection, the department name, not the code, is executed at the department column.

When there is real Data, Grid is shown on the Form as follows:

Composing the Query Area (Div, Button, Edit, Static)

Add the basic query program to the function of the condition query.
Add the condition part to the Form.
As components, Div, Button, Edit and Static are used.

Making Division (Div)

Select at the component toolbar and make “Div”.

Change the properties of “Div”as follows:

Making Static

Select at the component tool bar and make “Static”.

Change the properties of “Static”as follows:

Making Edit

Select at the component tool bar and make “Edit” at the Form.

Change the properties of “Edit” as follows:

Making Button

Select at the component tool bar and make the Button at the Form.

Change the properties of the Button as follows:

Preparing Script

It is the method to call the service (search. jsp) implemented at the program execution. 
Here, the preparation for the called service will be described at “Query Service – search.jsp”.
Here, the followings are done with the assumption that the applicable service is already completed.
Prepare the script which gets to receive data at Dataset by calling the server service when the button for the service call is made at the Form and clicked.

Making the Service Query Event

In order to prepare the script, select the “Search”button, search the “onclick” event from the event list at the “Properties” window, put the function name to connect to input and press the <Enter> key. Or, by double-clicking the mouse on the blank state, the function name is registered automatically and moves to the script tab of work area. At this time, the function registered automatically is made with “[event name]_[component name] and in case that the function with the same name exists, the input curser moves to the applicable function position of the script tab. When there is not the function with the same name, the function is made at the script and moves to the applicable position.

Preparing the Service Calling Script

The function to cal the service uses “transaction” of Application.
The script contents to prepare are as follows:

function btn_search_onclick(obj:Button, e:ClickEventInfo)
{
	var svcURL = "datasvc::search.jsp";
	transaction("search", svcURL, "", "dsPerson=dsPerson", "", 
		"fn_callBack");
}

The “transaction” of Application uses the callback function in order to handle the result.
The script contents to prepare are as follows:
The function name (fn_callBack) at this time must be identified with the callback argument which is one of the transaction arguments.

function fn_callBack(svcid,strErrCode,strErrMsg) 
{
	if (strErrCode != 0) {
		alert(strErrCode + " : " + strErrMsg);
		return;
	}
}

transaction(strSvcID,strURL,strInDatasets,strOutDatasets,strArgument
    ,strCallbackFunc[,bAsync[,bBinary[,bCompress]]]);

Preparing Event (onload) Script for Dataset

When the server service is called with a method of “load” of Dataset, this calling whose condition is both normal and abnormal generates the “onload” event of the called Dataset. In order to implement the script, register the proper function name by searching the “onload” event of Dataset. For the method of registering the proper function name, please refer to "Making the Service Query Event".

The script implementation about the normal and abnormal conditions is as follows:

function dsPerson_onload(obj:Dataset, e:DSLoadEventInfo)
{
	if (e.errorcode < 0) {
		alert(e.errorcode + ":" + e.errormsg);
		return;
	}
	if (e.reason == 0){
		trace("data "+dsPerson.rowcount+"times were enquired ");
	}
}

When the execution test is done by using the Quick View menu, the Form is executed as follows:

Making the Condition Query Event

For the script preparation, select the edit, search the “ontextchanged” event from the event list at the “Properties” window, put the function name which will be connected to input and then press the <Enter> key. Or at the blank state, double click the mouse. Then the function name is registered authomatically and moves to the script tab of the work area. The function name which is registered automatically is made with “[event name]_[component name]”and in case that there is already the function with the same name, the cursor moves to the applicable function position fo the script tab. If there is not the function with the same name, the function is made at the script and moves to the applicable position.

Preparing the Condition Query Script

For the query function, “filter” of Dataset is used. 
The script contents to prepare are as follows:

function ed_search_ontextchanged(obj:Edit, e:TextChangedEventInfo)
{
	if (div_top.ed_search.value)
	{
		var kkk = "person_name == '"+ div_top.ed_search.value +"'";
		dsPerson.filter(kkk);
	}
	else
	{
		dsPerson.filter("");
	}
}

When the execution test is done by using the Quick View menu, the Form is executed as follows: