Search form is a type of forms searching data of customer management per condition. As executeing this project,

• It aims to learn a script which saves data as Dataset by calling the service.

• It aims to learn a method printting data by binding Dataset with Grid.

• It aims to create a desirable print shape by designing columns of Grid. (The design of samples can be possibly revised depending on the theme that would be used.)

Generating Project

The process to create Project, to add Forms and to design Compositions is required in order to create programs.

The orders are as follows:

Creating Project

Execute UX-Studio of XPLATFORM development tools.

1. Select the menu “Creating Project”. (File > New > Project)

2. Specify Names and Locations using “Project Wizard”.

3. Specify generating files of ADL and Type Definition using“Project Wizard”.

4. Options used in “Project Wizard”are as follows:

5. Once completing “Creating Project”, the projet created in UX-Studio is opened.

Creating Form

1. "Creating Form" menu is selected. (File > New > Item > Form)

2. Specify names of files and their saving location using“Create New Form Wizard” window.

3. Specify Inheritance using “Create New Form Wizard” window.

4. Specify Position using “Create New Form Wizard” window.

5. Options used in “Create New Form Wizard” are as follows:.

6. Once completing“Creating Form”, Form created in UX-Studio is opened.

7. Specify titletext property values of Form as “Customer List Search”.

Designing Dataset Column

Dataset compositions received data from the server and provide data to Grid.
Dataset not only stores data and informs the transformed status (add/modify/delete) of data. Modified data store original data prior to their modification.
Dataset have Column structure due to saving data in 2D table format and treat data with the unit of Row and Record.
In one from, more than one Dataset cannot be stored.
If data are common contents for the entire project, Dataset can be used in multiple forms at the same time by using Global Dataset.

Creating Dataset - : Dataset

From the composition tool bar, select .

Wherever clicking any parts, Dataset is created at “Invisible Objects”.

Due to Dataset is a type of compositions, properties and events are specified by using “Properties” windows.
Specify Dataset ID to “dsCustomers”.

Designing Dataset Column

Dataset stores data in 2D table format.
Data for testing can be employed to designing by entering directly.
Design of Dataset uses “Dataset Contents Editor” window.
“Dataset Contents Editor” window is shown up by double-clicking applicable Dataset.

“Const Columns” information at the top is treated as Const Value and creates “Const Column” if it has common value for all records(Record, Row).
“Columns” information in the middle is the place to design the shape of record.
“Rows” at the bottom is a part which sets up data for testing.
For details of usage, please refer to “UX-Studio Guide”.

The procss of adding column information and data for testing are as follows:

1. Open “Dataset Contents Editor” window and create a Column in the middle part of “Columns” part. Adding column is created by clicking the button located at the“Columns” tool bar.

2. Set up “ID”, “Type” and “Size” in added column information.

   Specify “ID” not to have duplicated value within the same Dataset.

   Korean Column ID is allowed. However, it could be hard to recongnize if encoding does not match well. So, Korean Column ID is not recommended if possible.

   There are “Types” of STRING, INT, FLOAT/DECIMAL, DATE/DATETIME/TIME, BIGDECIMAL, BLOB and etc.

   Since specifying “Size” is free but its limit is all different by type, it would be better to specify as the length that type allows. If data exceeding their limit are sent in, data in allowed area is permiited but rest of them are cut off or ignored.

The completed features are as follows:

3. Data for testing can check the print contents of the form without any connection to the server when designing them. In order to add data for testing, they can be directly registered after adding record by clicking button in Rows” parts.

Composing Form (1) : Title and Search Button Design

Here, the title and search button will be added to the basic search program.
Compositions use Static and Div Button.

Creating Title - Static : Static

Create “Static” by selecting at the composition tool bar.

Revise properties of “Static” as follows:

Creating Division - Division: Div

By selecting at the component tool bar, create Division(“Div”).

Revise properties of division(“Div”) as follows:

Creating Button - Button : Button

Create Button at the component tool bar by selecting .

Revise properties of Button as follows:

Composing Forms (2): Grid – Column Design

Grid components print data to the form by binding dataset. Since it is possible to print and to enter through Grid by binding Grid to Dataset, data of Dataset can be modified.
All the tasks are executeed centered Dataset which are binded and reflected as Dataset in real-time.
If, adding record to Dataset, record added to Grid is print.
If modifying data through Grid, binded data of Dataset is modified right away. When data is printed or entered, Grid can provide Format. For users easier understandability of data, it is possible to set up“-“words and etc. to be shown up when printing out. When entering the date, it is possible to choose the entering format of date type not to exceed the area of availability.

Designing Column

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

When trying to bind Dataset to created Grid, select applicable Grid, set up the ID as “grdCustomers” in “Properties” window which can specify properties of component and click selection items by finding “binddataset”. When the list of Dataset and common Dataset are opened, select Dataset to bind.

When designing Grid, the initial features only show the area displays as above. Drag Dataset to connect and move it to the top of Grid.

By double-clicking Grid, it is possible to confirm that all columns of Dataset are designed on Grid.

Select columns which need to be changed and modify them by using property windows shown on the right.
Select columns needed to be deleted, and work on them by pop-up menu shown when clicking the right button of a mouse. For changing the order of columns, employ “Cut” and “Paste” menu. Since data in XPLATFORM program are stored in Dataset, and gird are used by binding Dataset, it is required to design only columns which meant to be exposed.
Now, columns of grid and of Dataset are about to bind together.
This task is only possible under the situation that binddataset value of grid has been set.
Select columns of grid which are bound. Then, a window of properties for columns which are selected on right of “Grid Contents Editor” is shown up.

Select columns of Dataset to bind in the “text” items of “Binding”groups.
Grid used in the sample would design columns as follows:

1. Delete columns from col5 to col9.

2. In order to make headers in 2 lines, rows are added.

3. In order to make data in 2 lines, rows are added.

4. Please confirm that both rows of head and body are extended.

5. Both ID and name data combine 2 lines of headers as one.

6. Entering header text.

7. Both ID and name data combine 2 lines of rows as one.

8. Bind data to each cell.

9. Specify the size of column.

Complete by clicking “OK” button after finishing all the tasks.

Creating Script: Button - Dataset load

It is a method to call service (search.jsp) implemented in the server when activating program. It is progressed under assumption that the service has been already completed. Create button for calling service in the form and create script for receiving data in Dataset by calling server service while clicking.

Create Button Script

In order to create script, select “Search” button, enter the function name (divCommand_btnSearch_onclick) to bind with input by finding “Onclick” event from the event list in “Properties”window and finally press <Enter> key. Or it automatically enters the name of function and moves to the script tab of Work Area by double-clicking the mouse during empty status. At this time, function to be registered autometically is created as “[Event Name]_[Component Name]”, and if there are the same name of functions existed already, an input cursor moves to the location of applicable function of Script tab. If there is not any same name of functions, it moves to applicable location after creating function at script.

Creating Data Adding Script

Without calling server service first, data is added directly to the script. The contents of script to create are as follow:

function divCommand_btnSearch_onclick(obj:Button, e:ClickEventInfo)
{
	var row = dsCustomers.addRow();
	dsCustomers.setColumn(row, "id", "0");
	dsCustomers.setColumn(row, "name", "James Carman");
	dsCustomers.setColumn(row, "email", "carman@live.com");
	dsCustomers.setColumn(row, "birthday", "19650925");
	dsCustomers.setColumn(row, "phone", "619-987-6543");
	dsCustomers.setColumn(row, "home_addr", "1234 Bonnie Ct. San Diego");
	dsCustomers.setColumn(row, "company", "Oracle Corporation");
	dsCustomers.setColumn(row, "jobtitle", "Consultant");
	dsCustomers.setColumn(row, "busi_phone", "+1.650.506.7000");
	dsCustomers.setColumn(row, "busi_addr", "500 Oracle Parkway Redwood Shores");
}

To excute running test using Execute Form of HTML5, the form is executed as follows:

Creating Service Calling Script

It is a script giving and taking serer by interlocking OGI of server.

Features calling the service used transaction methods.

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

Delete pre-created script but recreate service calling scripts.
Script contents to be created are as follows:

function divCommand_btnSearch_onclick(obj:Button, e:ClickEventInfo)
{
	var id = "search";
	var url = "http://127.0.0.1:8080/xplatform9-ajax/search.jsp”;
	var reqDs = "";
	var respDs = "dsCustomers=customers";
	var args = "";
	var callback = "received";
	transaction(id, url, reqDs, respDs, args, callback);
}

• When creating source code, it is required to be aware that the value of url is “http://127.0.0.1:8080/xplatform9-ajax/search.jsp”. Calling IP of Transaction must be agreed with requesting IP which was entered when setting up HTML5 of UX-Studio.

  Data interlocking of current HTML5 allows only the source of the same servers.

Creating Callback Functions of Transaction

If calling server services by transaction methods, execute callback functions specified in all situations of normal or abnormal calling. In order to implement scripts, it is required to create scripts with proper function names and to deliver callback functions by arguments while calling transaction methods.

The contents to be created are as follows:

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

After creating scripts, implementing buttons from the HTML5 tool bars are .
It can be implemented in orders.
By execute the program and clicking the search button with Execute Form Menu of HTML5, it operates as follows:

Creating Grid Combo

They can show Grid Cell in diverse components and can edit.
One of them is Combo. For the forms of selection list showing multiples of smaple values, use Combo. To find out all possible components, please refer to “Help”.

1. Add Dataset included in Combo of Grid.

2. By selecting and double-clicking Grid from the form, show up the window of “Grid Contents Editor”.

3. By using the window of“Grid Contents Editor”, properties of “Position” columns would be modified.

   First, if selecting displaytype as “combo” and combodataset as “dsJobTitle”, columns to bind at combocodecol and cobodatacol is appeared.

Bu using Execute Form menus of HTML5 and executeing running test, it is implemented as follows:

Creating Searching Condition: Staic and Edit

Here now, the features of searching conditions will be added to the basic searching programs. On the form, conditional parts will be added as well. For this, Static and Edit of components are used.

Creating Titles - Static : Static

By selecting  from the component tool bars, “Static” is created.
Properties of “Static” are to be revised as follows:

Creating Edit - Edit : Edit

Create “Edit” on the form by selecting  from the component tool bar.
Revise properties of “Edit”as follows:

Creating Service Calling Script

Add scripts for conditional searching. Only prior scripts and modified parts are “url”, and rest of them is the same. Contents of Script to create are as follows:

function divCommand_btnSearch_onclick(obj:Button, e:ClickEventInfo)
{
	var id = "search";
	var url = "http://localhost: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);
}

Compiling and Execution

From the patch version of February 2012, Server Compile method is changed to Local Compile method for compile speed enhancement. That means, while compile has been conducted in Server it is now conducted in Client (PC) from the version. The existing Server Compile method transfers compile objects such as *.xadl and *.xfdl to Server, and then Server Compile module compiles the transferred files and create *.js files in Server. However, the Local Compile method calls a local compile module, XHTML5Complier.exe, in UX-Studioand this module compiles objects such as *.xadl and *.xfdl and create *.js files in client. Local compiled file names are identical to those of the existing server compile methods.

Entire Project Compile

As information related to a project is not yet compiled, the entire project should be compiled before running the developed display.
Clicking UxStudio> HTML5 Menu > Compile Application Menu, the entire project shall be compiled.

Folder where compiled file shall be located is set in UX-Studio> Tools > Options > HTML5 > Compiled Path.
Compiled Path is set as “<Tomcat Home>/webapps/xplatform9-ajax/projects”. In this example, as the project title is “demo”, the actual folder for saving the project is “<Tomcat Home>/webapps/xplatform9-ajax/projects/demo/…”.

Files to be compiled and compiled files are summarized as table below.

QuickView Execution

1. It is about how to run one developed list.xfdl display.

   Compile list.xfdl display. Click UX-Studio> HTML5 menu > Compile File menu. As the project title is “demo” and service group name is “Base” in this example, the actual save location for the compiled display is “<Tomcat Home>/webapps/xplatform9-ajax/projects/demo/Base/list.xfdl.js”.

2. Run UX-Studio> HTML5 Menu > QuickView Menu. For execution in the debug mode, run QuickView Debug Menu.

Set “http://127.0.0.1:8080/xplatform9-ajax/projects/demo/QuickView.jsp”, the execution path, in QuickView dialogue and click OK. The same applies to execution of QuickView Debug Menu.

3. WebBrowser is run, and “http://127.0.0.1:8080/xplatform9-ajax/projects/demo/QuickView.jsp?formname=Base::list.xfdl” shall be executed. If QuickView Debug Menu is run, and http://127.0.0.1:8080/xplatform9-ajax/projects/demo/QuickView.jsp?formname=Base::list.xfdl&debugmode=true shall be executed.

# Execute Application

For execution of one display only QuickView is used, but for that of the entire project Execute Application menu is used. Followings are how to execute the entire project.

1. Compile the entire project. Details are skipped as identical to 1) above.

2. Run UX-Studio > HTML5 Menu > Execute Application menu.

Set the LaunchProject.jsp execution path, “http://127.0.0.1:8080/xplatform9-ajax/projects/demo/LaunchProject.jsp”, in LaunchProject dialogue and then Click OK.

3. WebBrowser is run and “http://127.0.0.1:8080/xplatform9-ajax/projects/demo/LaunchProject.jsp” shall be executed.