Introducing Edit

Edit is the component used to input or output a single line string. You can limit the length of the string, or allow only numbers or specific characters to be entered. Various additional functions, such as setting the input language, can be used by setting properties.

Since Edit is designed to express only a single line of strings, line breaks are not allowed. If you need to type multiple lines or paragraphs, then use the TextArea component.

The figure below shows the default Edit component. This is the structure that allows you to enter the text from the caret location when the focus is on Edit.

Example

The following is an example of the member registration menu. It is a typical example of using Edit, and you can see that the Edit component is being used when entering registration information.

Depending on the situation, input/output in a specific format can be processed using the properties of Edit. For example, in the case of password, if you set the password property of Edit, then the entered characters are marked with asterisks (*) so that others cannot recognize them. Also, you can limit the length of characters that can be entered by setting the maxlength property.

If you need to enter in a specific format, such as email address or phone number, it is good to use MaskEdit to reduce user input mistakes. The MaskEdit component is the Edit component that can use the masking function.

Creating Edit

Select Edit from the toolbar, and drag it to an appropriate size on Form to create it. If you just click on the form, then it will be created with the default size.

Run QuickView (Ctrl + F6) to check the result.

Getting String Length

If you need to know the length of the string to process the string, or if you need to adjust the size of the Edit component to fit the string length and display it, then you can easily get the string length by using the length property of Edit.

The length property counts all characters, such as numbers, blanks, English, and Korean, as 1 per character.

Example

This is an example that shows the length of the string received from the user in real-time. When the user enters the string, the length is calculated and output whenever the key input event occurs.

Since length is unconditionally calculated as 1 per character, the length of the string "Nexacro N" in the input example is 9.

sample_edit_02.xfdl

Core features used in the example

length

This is the property that has the length value of the string. 1 is unconditionally calculated for each character, regardless of characters.

onkeyup

This is the event that occurs when the keyboard that was pressed while the focus is on Edit is released.

How to implement an example

Create the Edit , Static components and place them on the form as shown in the example screen. Set the ID of the created Edit component as follows.

Select edit_input on the form and add the onkeyup event function.

Each time the keyboard is pressed and released, the number of characters entered by the user is output in edit_length using the length property.

this.edit_input_onkeyup = function(obj:nexacro.Edit,e:nexacro.KeyEventInfo)
{
	this.edit_length.set_value(this.edit_input.value.length);	
};

Run it with QuickView (Ctrl + F6) and enter the string to check if it matches the actual length.

Shifting Auto Focus

It is not inconvenient for the user to move between components with the mouse or tab key to input multiple contents on a complex screen. In this case, you can implement the function that automatically moves the focus to the next component when the character over the length set by using the autoskip property of the Edit component is input.

Example

The following is an example of receiving the phone number from the user.

If you enter 3 digits for 1edit_first and 4 digits for 2edit_second and 3edit_third, then the focus automatically shifts to the next component.

The order in which the focus moves depends on the value set in the taborder property of each component. The taborder value can be set to the integer greater than or equal to '0'. The smaller the value is, the higher the priority, and the higher the value, the lower the priority. If you do not set any value, then taborder is automatically set in the order in which the components were created.

sample_edit_03.xfdl

Core features used in the example

autoskip

This is the property that sets whether to automatically shift the focus when the length of the string being input in Edit reaches the maxlength value.

maxlength

This is the property that sets the maximum length of the string that can be entered in Edit. When set to 0, the maximum length is not limited.

taborder

This is the property that sets the order in which the focus is shifted when the focus is moved by pressing the Tab key or by autoskip. It is set to the integer greater than or equal to 0, but the smaller the value, the higher the priority.

How to implement an example

Place the Edit , Button components appropriately as shown in the example figure.

Set autoskip, maxlength, taborder properties for each Edit component as shown in the table below.

Run it with QuickView (Ctrl + F6) and enter the phone number from the front. Check if the focus automatically moves to the next component.

Changing Input Language

The user can change the IME (Input Method Editor) settings as needed to set the language to input into the Edit component.

Example

The following is an example of entering characters for each language in the Edit component.

When typing in the hangul and English items in runtime or Internet Explorer, IME is automatically switched and input in Korean and English respectively, even without Korean/English conversion.

To enter Japanese into Japanese, the user must change the Windows IME to Japanese. Even if Japanese IME is installed on Windows, automatic switching between Korean IME and Japanese IME is not available in the Nexacro environment.

sample_edit_04.xfdl

Core features used in the example

imemode

This is the property that sets the default input language of Edit.

How to implement an example

Place the Edit , Static components appropriately as shown in the example figure.

Set the imemode property of each Edit component in turn to 'hangul' for Korean, 'alpha' for English, and 'hiragana' for Japanese.

Run it with QuickView (Ctrl + F6) and check if the input language is changed according to the language in each Edit. Japanese requires the user to manually change the Windows IME.

Checking Password Format Using Regular Expression

As the importance of security increases, there is a growing demand for complex passwords that are not easily penetrated by cracking attacks. Accordingly, the complexity of the password is increasing, and the complexity of the code that checks it is also increasing. In this case, if you use the Regular Expression, you can simply check the password format with just a few lines of code.

This chapter explains how to check whether the entered password matches the format using Regular Expression. Detailed explanations and usage of Regular Expressions are beyond the scope of the manual and are not covered here.

Example

The following is an example of receiving the password from the user, checking it in Regular Expression, and informing the result in red text.

If you click the Confirm button after entering the password, then the result will be notified as to whether the format is correct. The password format accepts lowercase letters a through z and numbers 0 through 9, and the length of the string is only 8 through 10.

The Unmasking checkbox is the function that displays passwords marked with asterisks in plain text so that the user can verify if the password has been entered in the correct format.

sample_edit_05.xfdl

Core features used in the example

password

This is the property that sets whether to display the asterisks (*) so that the characters displayed in Edit are not recognized.

RegExp

This is the method that creates the Regular Expression object for the Regular Expression pattern search. After you create the Regular Expression object by entering the Regular Expression as the argument, you can use the exec method to perform the pattern search on the string.

var objRegExp = new RegExp("[a-z0-9]{8,10}", "i");	//regular expression pattern and searching flag
var objArr = objRegExp.exec("#strString*01234");	//string for pattern searching

exec

This is the method that searches for the character string using the Regular Expression pattern and returns the search result as an array.

var objRegExp  = new RegExp("a", "g"); 
var objArr =  objRegExp.exec("abcd");  // objArr = a

How to implement an example

Place the Static , Edit , Button , CheckBox components appropriately as shown in the example figure. Set the password property of Edit to 'true'.

Call the fn_checkPassword function that checks whether the password input from the user is in the correct format and returns the result, and inform the user by specifying the result as the text property value of the Static component.

The fn_checkPassword function returns 'Y' if the password is in the correct format, and 'N' otherwise.

this.Button00_onclick = function(obj:Button,e:ClickEventInfo)
{
    var sRtn = fn_checkPassword(this.edit_password.value);
    
	if(sRtn ==='Y')
		this.Static01.set_text("Password correct");
	else
		this.Static01.set_text("Password incorrect");

};

Enable the password property of Edit to be turned on/off so that you can check for yourself whether the password entered by the user is correct.

this.CheckBox00_onchanged = function(obj:nexacro.CheckBox,e:nexacro.CheckBoxChangedEventInfo)
{
	if(e.postvalue == 1) 
	{
		this.edit_password.set_password("false");
	}
	else
	{
		this.edit_password.set_password("true");
	}
	
};

The onchanged event is the event that occurs when the check status of the checkbox is changed. If the checkbox is checked in the postvalue property, then 1 is unchecked and 0 is saved. Therefore, after checking whether the value of the checkbox has been changed with e.postvalue, set the password property of Edit accordingly.

Write the fn_checkPassword function that checks the password format and returns the result.

function fn_checkPassword(sValue)
{
    var sRtn = "N";

	//Regular expression pattern
    var sRegExp = "[a-z0-9]{8,10}";

	//Create regular expression object
    var objRegExp = new RegExp(sRegExp, "i");

	//Validate password
    var objResult = objRegExp.exec(sValue);
	
    if (objResult == null)
	{
        sRtn = "N";
	}
    else
    {
        if ((objResult.index == 0) && (objResult == sValue))
            sRtn = "Y";
        else
            sRtn = "N";
    }

    return sRtn;
}

One thing to note in this function is the Regular Expression section in line5 to 9.

1. First, write the Regular Expression string as follows. This means that only lowercase letters a to z and numbers 0 to 9 are allowed, and the length of the string is only 8 to 10.

var sRegExp = "[a-z0-9]{8,10}";

2. Create the RegExp object for the Regular Expression pattern search. flag "i" is the case insensitive option. Therefore, setting "i" flag means that both upper and lowercase letters are allowed.

var objRegExp = new RegExp(sRegExp, "i");

3. Check whether the string input from the user fits the Regular Expression by calling the exec method. The exec method returns null if it does not fit the Regular Expression.

var objResult = objRegExp.exec(sValue);

Check it with QuickView (Ctrl + F6).

Enter the password and click the Confirm button. If the format is correct, then it displays the message "password correct", otherwise it displays the message "password incorrect". Enter the password by changing the format to check if it is properly checked.

Binding Dataset to Edit

When binding Dataset to Edit component, only one Dataset column can be bound per Edit property. Edit is not often used by binding Dataset alone, and it is often used in combination with other components as in the example in this chapter.

How to bind Dataset to Edit is as follows.

• Drag and drop the Dataset icon onto the component: You can intuitively perform binding operations. It is used when binding Dataset to the created component.

• [Create Component & Bind Dataset] menu: It can be selected from the context menu by right-clicking on the form design screen. It is used when creating and binding components at once.

• [Bind Dataset] menu: It can be selected from the context menu by right-clicking on the form design screen. It is used when binding Dataset to the created component.

Whatever method you use, the Bind Item window appears as shown in the following figure, and you can bind the columns of Dataset to the properties of each component. The following figure shows an example of binding Dataset columns to each Edit component.

Example

The following is an example of displaying data on the screen by binding Dataset to Edit and Grid components. If you select the record in Grid, then the same information is displayed in Edit.

sample_edit_06.xfdl

Grid and Edit bind the same Dataset, so if you manipulate or modify data, then the result is reflected in both Grid and Edit. For example, if you change the record selection in Grid, then Edit will automatically display the data of the changed record. Also, if you change the value in Edit, then it is reflected in the Grid.

Core features used in the example

N/A.

How to implement an example

Create Grid , Static , Edit from the toolbar on the form respectively, and place them in an appropriate location as shown in the example.

Set the id of each created Edit component as follows.

Create Dataset to bind to Edit and Grid.

Select Dataset from the toolbar, click on an appropriate location on the form to create Dataset.

Then, enter the data item list in the created Dataset. If you double-click Dataset00 in the Invisible Objects area, then the Dataset editor appears. Enter columns and rows as shown in the figure below.

Bind Dataset to the Edit component. If you drag and drop Dataset00 in the Invisible Objects area to each Edit component created on the form, then the Bind Item window appears as shown below. Edit can only bind one column to one property. Select the column ID of Dataset00 corresponding to the value property of each Edit component in the Bind Item window and click the [OK] button to complete the binding.

The following is the XFDL code after binding is complete. If you look at <BindItem>, then you can see that each column of Dataset00 is bound to the value property of each Edit.

<?xml version="1.0" encoding="utf-8"?>
<FDL version="2.0">
  <Form id="sample_edit_00_nexacro16" left="0" top="0" width="1024" height="768" titletext="New Form">
				.
				.
    <Bind>
      <BindItem id="item0" compid="edit_name" propid="value" datasetid="Dataset00" columnid="Name"/>
      <BindItem id="item1" compid="edit_addr" propid="value" datasetid="Dataset00" columnid="Address"/>
      <BindItem id="item2" compid="edit_company" propid="value" datasetid="Dataset00" columnid="Company"/>
      <BindItem id="item3" compid="edit_dept" propid="value" datasetid="Dataset00" columnid="Department"/>
      <BindItem id="item4" compid="edit_mail" propid="value" datasetid="Dataset00" columnid="EMail"/>
    </Bind>
  </Form>
</FDL>

Check with QuickView (Ctrl + F6) whether the Dataset column is successfully bound to each Edit component. Select a specific record in Grid and check that the record information is displayed correctly in Edit.

Presenting Keyword with Autocomplete Function

The autocomplete function is the function that presents the list of items that can be selected at the same time as the user input.

Based on the user input, candidate values are searched and presented from the data stored in the database. It automatically completes the entry by allowing the user to easily select the search word from the candidate list without having to enter everything.

This describes how to implement the autocomplete function that displays the list of items containing characters, such as search words using the filter method of Dataset.

Example

The autocomplete input form in the example is configured with Edit, Button, and ListBox components, and it has a similar appearance to the Combo component.

When the user enters the search word, the list of related items is displayed in ListBox. Selecting the item from the list displays the selected item in Edit.

If you click the button without entering the search word, then you can see the list of all items.

sample_edit_07.xfdl

Core features used in the example

filter

This is the method that filters to show only the data that satisfies the condition among the data loaded in Dataset. If you enter the conditional expression in the form of the string, then it filters according to the condition. If the conditional expression is set to the empty string ("") and then called, then the current filtering is canceled and the original data before the filtering is applied is output. When called without setting any value, it filters with the conditional expression that was filtered before.

oninput

This is the event that occurs when entering the value with the keyboard.

How to implement an example

Place the Edit , Button , ListBox components appropriately as shown in the example figure.

Set the id of each created component as follows.

Create Dataset with the list of items to be displayed in ListBox.

Select Dataset from the toolbar and click on an appropriate location on the form. Select Dataset00 in the Invisible Object area and set the id to 'ds_data' in the Properties window.

Then, enter the data item list in the created Dataset. Double-click ds_data in the Invisible Objects area to enter the following into the Dataset editor.

Bind Dataset to ListBox. Drag and drop ds_data in the Invisible Objects area at the bottom to the ListBox component located on the form, and select [bind innerDataset'ds_data'] to open the Bind InnerDataset window.

Enter 'CODE' in codecolumn and 'DATA' in datacolumn, and click [OK] to complete the binding.

Write event functions for each component to operate user input and each component.

• oninput Event Function of Edit Component

Whenever the user types with the keyboard, items including characters or strings are filtered and displayed in ListBox.

this.edit_input_oninput = function(obj:nexacro.Edit,e:nexacro.InputEventInfo)
{
	var strLength = this.edit_input.getLength();

	this.list_output.set_visible(true);
		
	if(strLength > 0)
	{
		this.ds_data.filter("DATA.toString().search('"+this.edit_input.value+"') >= 0");
			
		if(this.ds_data.rowcount == 0)
		{
			this.list_output.set_visible(false);
		}
		
	}
	else
	{
		this.list_output.set_visible(false);		
	}
	
};

• onkeydown Event Function of Edit Component

To select the item displayed in ListBox, it detects the keyboard arrow keys and the ENTER key and performs the selection operation.

this.edit_input_onkeydown = function(obj:nexacro.Edit,e:nexacro.KeyEventInfo)
{
	this.list_output.set_visible(true);    
	
	switch(e.keycode)
	{
		case 13:	//ENTER
			if (this.list_output.index != -1)
			{			
				this.edit_input.set_value(this.list_output.text)
			}
			
			this.list_output.set_visible(false);
			
			break;
			
		case 27:	//ESC
			this.list_output.set_visible(false);
			
			break;
			
		case 38:	//UP
			if (this.list_output.index > 0)
			{
				this.list_output.set_index(this.list_output.index - 1);
			}
			
			break;
			
		case 40:	//DOWN
			this.list_output.set_index(this.list_output.index + 1);
			
			break;
			
		default:
			trace("keycode = " + e.keycode);
	}
	
};

• onclick Event Function of Button Component

It displays ListBox on the screen to show the candidate values in the current state. If ListBox is disabled and there is no user input, then it initializes the filter of ds_data and enables ListBox. When you initialize the filter, you can see all the items in ds_data in the list.

this.btn_list_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(this.list_output.visible == false)
	{
		if(!this.edit_input.getLength())
		{
			this.ds_data.filter("");
		}		

		this.list_output.set_visible(true);	
	}
	else
	{
		this.list_output.set_visible(false);
	}
	
};

• onitemclick Event Function of ListBox Component

When the user selects the item in the ListBox, the selected value is displayed in Edit.

this.list_output_onitemclick = function(obj:nexacro.ListBox,e:nexacro.ClickEventInfo)
{	
	this.edit_input.set_value(obj.text);
	this.list_output.set_visible(false);
};

Run it with QuickView (Ctrl + F6) and enter the search word in Edit. Check if only items including the search word are filtered out as ListBox pops up.

Entering Selected Value from List into Multiple Edit Components

The Edit component is used to directly input items. However, in some cases, you may select the item from the list made in advance and enter it into multiple Edit components. When searching for a postal code, if you select the corresponding address, then the postal code item and the address item are displayed together, and when selected, they are entered in each Edit component. If you know the postal code, then you can manually enter each item, but if you do not know it, then you can select it from the list and enter it.

Example

There are 2 Edit components, which are CODE and DATA, and when you try to enter the CODE item, the pop-up list is displayed. If you select the item, then the values are entered in 2 Edit components.

sample_edit_08.xfdl

Core features used in the example

trackPopupByComponent

Specifies the location of the PopupDiv component relative to the component. In the example, the location is specified relative to the first Edit component. The X coordinate value is specified as 0 to specify the same location, and the Y coordinate value is specified as the height value of the Edit component to specify the location immediately below the Edit component.

oncellclick

Transmits the related information including the ROW information of the clicked location when the cell of the Grid component is clicked. You can get the corresponding ROW information and find the selected value in the getColumn method.

getColumn

Able to receive the ROW information and find the value corresponding to the desired column.

How to implement an example

Place the Static component, Edit component, and PopupDiv component as shown in the example. Since the location of the PopupDiv component is specified when calling it, it does not matter wherever it is. However, place it at the bottom of the Edit component so that the size of the Edit component fits easily.

Place the Grid component within the PopupDiv component. When placing other components within the container component such as the PopupDiv component, select the component to be placed in Nexacro Studio and click on the PopupDiv component. If you click outside the PopupDiv component area, then it will be placed under the Form object.

If placed normally, then you can see that the Grid component is included in the PopupDiv component in the object list at the top of the property window.

Add the Dataset object and enter the Column, Row information as follows. Then, select the Dataset object and bind it with the Grid component by dragging and dropping.

After binding Dataset, modify the autofittype property value to "col" so that it is displayed neatly on the screen. Then, set the width, height property values to "100%" and the left, top property values to 0 for the PopupDiv component to be displayed perfectly fit to the size.

Select the Edit component and write the oneditclick event function. When the Edit component is clicked, the event is processed and the Grid component placed in the PopupDiv component is displayed.

this.editCode_oneditclick = function(obj:nexacro.Edit,e:nexacro.EditClickEventInfo)
{
	this.popupdivList.trackPopupByComponent(this.editCode, 0, parseInt(this.editCode.height));
};

Select the Grid component and write the oncellclick event function. When selecting the item from the list displayed on the Grid component (when clicking on Cell), the selected string is displayed in the Edit component. Selecting the item no longer uses the PopupDiv component. Close the window opened as the pop-up with the closePopup method.

this.popupdivList_gridList_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	this.popupdivList.closePopup();
	this.editCode.set_value(this.dsList.getColumn(e.row, "CODE"));
	this.editData.set_value(this.dsList.getColumn(e.row, "DATA"));
};

Run it with QuickView (Ctrl + F6) and click the Edit component to select the desired item in the pop-up window.

Updating Bound Value Immediately upon Key Input

The value bound to the Edit component is reflected in the Dataset object when the value is entered and the Enter key is pressed or the focus is moved. However, with the updateToDataset method, you can change the data at any point you want.

Example

When the data of the Grid component is selected, the bound value is displayed in the Edit component. If the string of the Edit component is modified, then it is immediately reflected in the Grid component when the key is input.

sample_edit_09.xfdl

Core features used in the example

updateToDataset

Updates the data of the Dataset object bound to the value property value of the component. In the example, the data is reflected every time the key is input by executing the method within the onkeyup event function.

How to implement an example

Place the Grid component and create the Dataset object. The Dataset object creates only one column and inputs data.

Place the Edit component and drag and bind the Dataset object.

Write the onkeyup event function as follows. Update the bound Dataset object on the key input.

this.Edit00_onkeyup = function(obj:nexacro.Edit,e:nexacro.KeyEventInfo)
{
	this.Edit00.updateToDataset();
};

Run it with QuickView (Ctrl + F6) and check whether the item entered in the Edit component is reflected in the Grid component when the key is input.

Allowing Only Korean Input

This is how the script restricts the strings that can be entered.

Example

If a character other than Korean is entered in the Edit component, then the entered character is deleted and only Korean characters are left.

sample_edit_10.xfdl

Core features used in the example

oninput

This is the event that occurs when the input is attempted in the editing state (with focus) of the Edit component.

How to implement an example

Place the Edit component and add the oninput event function. If the input string is not Korean, then it is replaced with "".

this.Edit00_oninput = function(obj:nexacro.Edit,e:nexacro.InputEventInfo)
{
	obj.set_value(obj.value.replace(/[^\ㄱ-ㅎㅏ-ㅣ가-힣]/g, ""));
};

Run it with QuickView (Ctrl + F6) and check if the character string that is not Korean can be entered in the Edit component.