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”.
Select form by expanding new icons at the tool bar.
[Figure 83] New Form
Options used for “Create New Form Wizard” are as follows:
Properties | Description |
---|---|
Name | entry |
Location | Base |
Width | 800 |
Height | 600 |
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:.
Button Area | |||
---|---|---|---|
Composition Type | ID | Text | Description |
Static | sttList | Customer Detailed Search | |
Div | divCommand | ||
Static | sttSearch | Customer Names | |
Edit | edtSearch | ||
Button | btnSearch | Search | |
Button | btnInsert | Add | |
Button | btnDelete | Delete | |
Button | btnSave | Save |
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".
Grid | ||
---|---|---|
Properties | Value | Description |
id | grdCustomers | |
binddataset | dsCustomers |
“Position” of Grid column specifies “displaytype” as the combo format by referring to "Creating Grid Combo".
Grid Contents Editor(grdCustomers) | |||
---|---|---|---|
Orders of Columns | Head Cells : text | Body Cells : text | Size of Column |
col0 | ID | bind:id | 60 |
col1 | Customer Names | bind:name | 120 |
col2 | bind:email | 150 | |
col3 | Phone Numbers | bind:phone | 120 |
col4 | Company Names | bind:company | 150 |
col5 | Position | bind:jobtitle | 120 |
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.
Division(Div) | ||
---|---|---|
Properties | Value | Description |
id | divDetail |
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:
Detailed Area | |||
---|---|---|---|
ID | Text | Composition Type | Description |
sttName | Customer Name | Static | Guide field |
divName | Div | Output field for customer name | |
sttEmail | Static | Guide field | |
divEmail | Div | Output field for email | |
sttBirthday | Date of Birth | Static | Guide field |
divBirthday | Div | Output field for date of birth | |
sttPhone | Phone Number | Static | Guide field |
divPhone | Div | Output field for phone number | |
sttHomeAddr | Address | Static | Guide field |
divHomeAddr | Div | Output field for address | |
sttCompany | Company Name | Static | Guide field |
divCompany | Div | Output field for company name | |
sttJobTitle | Position | Static | Guide field |
divJobTitle | Div | Output field for position | |
sttBusiPhone | Company Phone Number | Static | Guide field |
divBusiPhone | Div | Output field for company phone number | |
sttBusiAddr | Company Address | Static | Guide field |
divBusiAddr | Div | Output field for company Address |
Creating Edit - Edit : Edit
Add Edit as [Figure].
Revise properties of Edit..
Edit | ||
---|---|---|
id | Component ide from script | Placed Static |
edtName | divDetail.divName.edtName | Customer Name |
edtEmail | divDetail.divEmail.edtEmail | |
edtPhone | divDetail.divPhone.edtPhone | Phone Number |
edtHomeAddr | divDetail.divHomeAddr.edtHomeAddr | Address |
edtCompany | divDetail.divCompany.edtCompany | Company Name |
edtBusiPhone | divDetail.divBusiPhone.edtBusiPhone | Company Phone Number |
edtBusiAddr | divDetail.divBusiAddr.edtBusiAddr | Company Address |
Creating Calendar - Calendar : Calendar
Add Calendar as following figures:
Calendar | ||
---|---|---|
Properties | Value | Description |
id | calBirthday | |
dateformat | yyyy-MM-dd |
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:
Combo | ||
---|---|---|
Properties | Value | Description |
id | cmbJobTitle | |
innerdataset | dsJobTitle | Automatic setting by description at down below |
codecolumn | code | Automatic setting by description at down below |
datacolumn | value | Automatic setting by description at down below |
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: