The registration form is the one that adds, corrects and deletes the data of the card management system.

Compose the form that outputs the detailed contents by using several components provided by XPLATFORM. Search the method to understand the basic characteristics and to connect to Dataset. Learn about the script which saves the data contained in Dataset to the server.

Making the Form

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

2. By using the “Create New Form Wizard” window, designate the file name (Name) and saving location(Location).

3. By using the “Create New Form Wizard” window, designate Inheritance.

4. By using the “Create New Form Wizard” window, designate the size (Position).

5. By using the “Create New Form Wizard” window, designate the function of MLM or not.

6. By using the “Create New Form Wizard” window, designate the function of Widget or not.

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

Designing the Dataset Column

The dataset component receives data from the server and supplies them to Grid.
Dataset does not only keep but also advise their status that the data is changed (added/corrected/deleted). The corrected data keeps the original data before change. 
Since Dataset keeps the data with a form of two dimensional table, it has the column structure and deals the data 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.

Whichever part is clicked, Dataset occurs at the “Invisible Objects” tab.

Since Dataset is a kind of the component, adjust the properties and event by using the “Properties” window.

Designing the 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 “Dataset Contents Editor”

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 above, “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 the made 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.

By double clicking Grid, it is checked that all the column of the Dataset is designed at the 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 be added is as follows:

When all the work is done, by clicking the “OK” button, be finished.

Connecting the specific Dataset to the 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 these connections, the department name, not the code, is executed at the department column.

In case that the real data exists, Grid is appeared on the Form as follows:

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

Add the basic query program to the functions of the condition query, addition and saving.
Component uses Div, Button, Edit and Static.

Making Division(Div)

Select ate the component tool bar and make Division(“Div”).

Change the property of Division(“Div”) as follows:

Making Static

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

Change the “Static”properties as follows:

Making Edit

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

Change the “Edit”properties as follows:

Making Button

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

Change the property of each Button as follows:

Making the Input Area (Div, Edit, Combo, Static)

Select each component at the component tool bar and display at the Form. 
Change the property of each Button as follows:

Making Combo

Bind ds_dept to innderdataset and then, bind codecolumn to codecolumn and bind datacolumn to datacolumn.
With these connections, the department name, not the code comes up on execution.

Connecting Dataset per Component of the Input Area

The componnet drawn on Division (Div) is distinguished by the Division name put in front of ID. Drag Dataset and put into the component to connect and then the “Bind Item” window is open.

Select the column value for “Property” and “Column ID”

The “Bind Item” window can be checked at the popup menu which comes up when the right button of the mouse is clicked after the form name which will be worked on is searched at the “Project Explorer” window.

Preparing the Script

Make the function to add, change or delete by querying the required data after checking data.

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

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

function btn_search_onclick(obj:Button, e:ClickEventInfo)
{
	dsPerson.url = "datasvc::search.jsp"
	dsPerson.load();
}

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 implementation of the script 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 searched : count ("+dsPerson.rowcount+")");
	}
}

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

Making the Additional Event

In order to prepare the script, select the “Insert”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 Additional Script

For the additional function, the “addRow” of Data is used.
The script contents to prepare are as follows:

function div_top_btn_insert_onclick(obj:Button, e:ClickEventInfo)
{
	dsPerson.addRow();
	grd_PersonList.setCellPos(0);
	div_input.ed_name.setFocus();
}

Making the Delete Event

In order to prepare the script, select the “Delete”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 Delete Script

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

function div_top_btn_delete_onclick(obj:Button, e:ClickEventInfo)
{
	if (confirm("do you want to delete data ?")) {
		dsPerson.deleteRow(dsPerson.rowposition);
	}
}

Making the Save Event

In order to prepare the script, select the “Save”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 Save Script

For the save function, the “transaction” of Application is used. 
The script contents to prepare are as follows:

function div_top_btn_save_onclick(obj:Button, e:ClickEventInfo)
{
	var svcURL = "datasvc::save_list.jsp";
	var inDS = "dsPerson=dsPerson";

	transaction("save", svcURL, inDS, " ", "", "fn_callBack");
}

save_list.jsp will be described at “Chapter 8.4”.
The “transaction” of Application uses the callback function together for handling about the result.
The script contents to prepare are as follows:
At this time, the function name (fn_callBack) must be the same as the argument of callback which is one of the transaction arguments.

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

Making the Condition Query Event

In order to prepare the script, select the “ontextchanged”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 Condition Query Script

For the query function, the “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:

Registration Execution Test

Test by clicking the Quick View menu.
When the data is inquired, the data shown at Grid is displayed at the details and when it moves to Row by using Grid, the data at the details is changed to the applicable data at the present RowPosition. Add the new data by clicking the “Insert” button. Then Row is added to Grid and the data can be input to the details.

When the data to delete is selected at Grid, it is displayed at the details. Delete it from the Form by clicking the “Delete” button.

Only when the data added with “Insert” and the one deleted with “Delete” are called by clicking the “Save” button, their work contents are reflected to the server.
Call the service by clicking the “Save” button and check the error message if the service is executed normally.