Registering forms are to add, modify or delete customer management systems.
(Sample designs can be different following used themes.)

• Practice Purpose

  It aims to compose forms printing detailed contents by using diverse components provided by XPLATFORM. It also aims to understand the basic characteristics of components and to learn the methods binding with Dataset.

  Refer to "Sample Project (Creating Search Form-list.xfdl)" for Dataset and grid generation.

• Implementing Features

  Following the next procedures, it composes the form and binds with Dataset by generating components.

  • Composing Forms : Dataset Binding - Edit, Combo, Calendar

  • Creating Script : Button – creates Add/Modifiy/Save.

Composing Forms: Binding Dataset– Edit, Combo, Calendar

Here, Dataset binding per component will be introduced.

Creating Forms

Create forms by referring to“6.1 Generating Project”.

1. Select form by expanding new icons at the tool bar.

[Figure 83] New Form

2. Options used for “Create New Form Wizard” are as follows:

Specify the titletext properties of Form as “Customer Detailed Search”.

Creating Search, Add, Delete Buttons - Button:Button

As the figure show, generate Static, Div, btton and place them on the form.
If placing similar components in a row, through using buttons of copy/paste function and arrow buttons, placement would be much easier.

Components placed on the button area are as follows:.

Copying Dataset

Not only components but also Dataset can be copied between forms.
It can be completed by copying Dataset from the search form(list.xfdl) and pasting on the registering form.

Designing Columns

Add Grid and design Grid column added by referring "Composing Forms (2): Grid – Column Design".

“Position” of Grid column specifies “displaytype” as the combo format by referring to "Creating Grid Combo".

Creating Division - Division: Div

Division (Div) is a component used for composing multiple parts forms in one form. Component which can include multiple components in inner parts is so called container.
Such containers are GroupBox, Tabpage, PopupDiv apart from Div.
Besides, by binding other forms using “url” properties of Division (Div), they can be printed.
Binding features are required to be confirmed above division (Div).
By selecting  from the component tool bar, create dvision(Div) on the form.

Creating Titles and Input Area

Create Static above Division(Div) by selecting  from the component tool bar, and create Division(Div) next to the added Static by selecting .
Place Static at coordinates(0, 0) and set upt the border property values as “1px solid #808080ff”. Besides, place division(Div) next to it.

By selecting Static and Division(Div) at the same time, repeat copy and pased.

Setting up both property value of ID and text for Static, Division(Div) at Detailed area. Components which are placed on detailed area are as follows:

Creating Edit - Edit : Edit

Add Edit as [Figure].

Revise properties of Edit..

Creating Calendar - Calendar : Calendar

Add Calendar as following figures:

Creating Combo - Combo: Combo

Use Combo for selection list format showing multiple numbers of sample values. Create Combo by selecting  at the component tool bar.
Properties of Combo would be revised as follows:

In order to bind innerdataset of Combo with Dataset, dataset is placed above combo by dragging it.

Binding Dataset per Component

Compnent drawn above Division(Div) is identified by having the name of division(Div). By dragging Dataset and enter it into compnent to be bound, “Bind Item” window is opened.

Specify properties of component to be bound, Dataset and column ID to be bound also.

“Bind Item” window can be confirmed at pop-up menu which is appeared by clicking the right button of mouse after finding the name of forms to work in “Project Explore” window.

Creating Script – Creating Add/Modify/Save

After searching dada, it create features to add, revise or delete required data.

Creating Search, Add, Save button script

Clicking search button creates script to generate new data at Dataset. First, click search button and select “onclick” among the event list in “Properties” window. Register functions to bind.

Contents of script to be implemented are as follows:
The contents of “divCommand_btnSearch_onclick”function to be registered at “onclick”of <Search button>

function divCommand_btnSearch_onclick(obj:Button, e:ClickEventInfo)
{
var id = "search";
var url = "http://127.0.0.1:8080/xplatform9-ajax/search.jsp?keyword="+divCommand.edtSearch.text;
var reqDs = "";
var respDs = "dsCustomers=customers";
var args = "";
var callback = "received";

transaction(id, url, reqDs, respDs, args, callback);
}

function received(id, code, message)
{
if (code == 0) {
alert(dsCustomers.rowcount + "numbers of data have been found.");
}else{
alert("Error["+code+"]:"+message);
}
}

The contents of “divCommand_btnInsert_onclick” function to be registered at “onclick” of <Add button>.

function divCommand_btnInsert_onclick(obj:Button, e:ClickEventInfo)
{
	var row = dsCustomers.addRow();
	divDetail.divCommand.edtSearch.setFocus();
}

The contents of “divCommand_btnDelete_onclick” function to be registered at “onclick” of <Delete button>

function divCommand_btnDelete_onclick(obj:Button, e:ClickEventInfo)
{
var row = dsCustomers.rowposition;

if (row >= 0) {
var id = dsCustomers.getColumn(row, "id");

if (id == undefined) {
id = "";
}

if (confirm("Would you like to delete data of customer’s ID " + id + " ?")) {
dsCustomers.deleteRow(row);
}
}
}

The contents of “divCommand_btnSave_onclick” function to be registered at “onclick” of <Save button>.

function divCommand_btnSave_onclick(obj:Button, e:ClickEventInfo)
{
var id = "save";
var url = "http://localhost:8080/xplatform9-ajax/save.jsp";
var reqDs = "customers=dsCustomers:A";
var respDs = "";
var args = "";
var callback = "received";

transaction(id, url, reqDs, respDs, args, callback);
}

function received(id, code, message)
{
if (id == "search") {
if (code == 0) {
alert(dsCustomers.rowcount + "numbers of data have been found.");
} else{
alert("Error["+code+"]:"+message);
}
} else if (id == "save") {
if (code == 0) {
alert("Data is saved properly.");
} else{
alert("Error["+code+"]:"+message);
}
}
}

Compiling and Execution

Test by clicking Compile File and QuickView menus in HTML5 menu.

If searching data, data appeared at Grid is displayed at details. If row is moved by using Grid, data for details are displayed as revised to the applicable data for current RowPosition.

By clicking add button, add new data. Row is added at Grid, and data can be entered in details.

If selecting data to delete from Grid, detailed data are shown up. By double-clicking “Delete” button, clean data from the form.

By clicking save button to call service, both contents of task for data which is additionally added and for data which is deleted are applied to the server.
However, since save.jsp is not created now, transaction error would occur.
By clicking save button, call the service and confirm the error message as follows: