Edit 소개

Edit는 한 줄로 된 문자열을 입력받거나 출력할 때 사용하는 컴포넌트입니다. 문자열의 길이를 제한하거나 숫자나 특정 문자만 입력하게 할 수 있으며 입력 언어를 설정하는 등의 다양한 부가 기능을 속성의 설정을 통해 사용할 수 있습니다.

Edit는 한 줄의 문자열만 표현할 수 있도록 디자인되었기 때문에 줄 넘김이 안됩니다. 여러 줄 혹은 단락을 입력해야 하는 경우에는 TextArea 컴포넌트를 사용하십시오.

아래 그림은 기본 형태의 Edit 컴포넌트를 보여줍니다. Edit에 포커스가 생기면 텍스트(Text)를 캐럿(Caret) 위치부터 입력할 수 있는 구조입니다.

사용 예

다음은 회원가입 메뉴의 예를 보여줍니다. Edit가 사용되는 전형적인 사례로 가입 정보를 입력받을 때 Edit 컴포넌트를 사용하고 있음을 알 수 있습니다.

상황에 따라 특정한 형식으로 입/출력을 하는 경우에는 Edit의 속성을 사용하여 처리할 수 있습니다. 예를 들어 비밀번호 같은 경우는 Edit의 password 속성을 설정하면 입력한 문자가 별표(*)로 표시되어 타인이 알아볼 수 없게 합니다. 또한, maxlength 속성을 설정하면 입력할 수 있는 문자의 길이를 제한할 수 있습니다.

메일주소나 전화번호와 같이 정해진 형식으로 입력해야 하는 경우에는 MaskEdit을 사용하는 것이 사용자의 입력 실수를 줄일 수 있어 좋습니다. MaskEdit 컴포넌트는 마스킹 기능을 사용할 수 있는 Edit 컴포넌트입니다.

Edit 만들기

툴바에서 Edit 를 선택한 후, Form 위에 적당한 크기로 드래그하여 생성합니다. 그냥 폼에 대고 클릭하면 기본 크기로 생성됩니다.

퀵뷰(Ctrl + F6)를 실행하여 결과를 확인합니다.

문자열 길이 구하기

문자열에 대한 가공 처리를 위해 문자열의 길이를 알아야 하거나 문자열 길이에 맞게 Edit 컴포넌트의 크기를 조절해서 보여줘야 하는 경우 Edit의 length 속성을 사용하면 손쉽게 문자열 길이를 구할 수 있습니다.

length 속성은 숫자, 공백, 영어, 한국어 등의 모든 문자를 한 문자당 1로 계산합니다.

예제

사용자로부터 입력받은 문자열의 길이를 실시간으로 보여주는 예제입니다. 사용자가 문자열을 입력하면 키 입력 이벤트가 발생할 때마다 길이를 계산하여 출력합니다.

length는 무조건 문자당 1씩으로 계산하므로 입력된 예제의 문자열 "넥사크로플랫폼17"의 길이는 9가 됩니다.

sample_edit_02.xfdl

예제에서 사용한 핵심 기능

length

문자열의 길이값을 갖는 속성입니다. 문자에 상관없이 문자 하나당 무조건 1씩 계산합니다.

onkeyup

Edit에 포커스가 있는 상태에서 눌렸던 키보드가 떼어질 때 발생하는 이벤트입니다.

예제 구현 방법

Edit , Static 컴포넌트를 생성하여 예제 화면과 같이 폼에 배치합니다. 생성한 Edit 컴포넌트의 ID를 다음과 같이 설정합니다.

폼에 있는 edit_input을 선택한 후 onkeyup 이벤트 함수를 추가합니다.

키보드가 눌렸다 떼어질 때마다 사용자가 입력한 문자의 수는 length 속성을 사용해 edit_length에 출력합니다.

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

퀵뷰(Ctrl + F6)로 실행한 후 문자열을 입력하여 실제 길이와 일치하는지 확인합니다.

자동 포커스 이동

복잡한 화면에서 사용자가 여러 내용을 입력하기 위해 컴포넌트 사이를 마우스나 탭키로 이동하며 입력하는 것은 여간 불편한 일이 아닙니다. 이럴 때 Edit 컴포넌트의 autoskip 속성을 사용하여 설정한 길이 이상 문자를 입력받으면 자동으로 다음 컴포넌트로 포커스가 이동하는 기능을 구현할 수 있습니다.

예제

다음은 사용자로부터 전화번호를 입력받는 예제입니다.

1edit_first는 3자리, 2edit_second와 3edit_third는 4자리를 입력하면 자동으로 다음 컴포넌트로 포커스가 이동합니다.

포커스의 이동 순서는 각 컴포넌트의 taborder 속성에 설정된 값에 따라 달라집니다. taborder 값은 '0'이상의 정수로 설정할 수 있는데 설정된 값이 작은 것이 우선순위가 높으며 값이 커질수록 우선순위가 낮아집니다. 아무 값도 설정하지 않으면 컴포넌트가 생성된 순서로 taborder가 자동 설정됩니다.

sample_edit_03.xfdl

예제에서 사용한 핵심 기능

autoskip

Edit에 입력 중인 문자열의 길이가 maxlength 값에 도달하면 자동으로 포커스를 이동시킬지 설정하는 속성입니다.

maxlength

Edit에 입력할 수 있는 문자열의 최대 길이를 설정하는 속성입니다. 0으로 설정 시 최대 길이를 제한하지 않습니다.

taborder

Tab 키 입력 혹은 autoskip으로 포커스가 이동할 때 포커스의 이동 순서를 설정하는 속성입니다. 0 이상의 정수로 설정하는데 값이 작을수록 우선순위가 높습니다.

예제 구현 방법

Edit , Button 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.

각 Edit 컴포넌트별로 autoskip, maxlength, taborder 속성을 아래 표와 같이 설정합니다.

퀵뷰(Ctrl + F6)로 실행한 후 앞에서부터 전화번호를 입력합니다. 자동으로 포커스가 다음 컴포넌트로 이동하는지 확인합니다.

입력 언어 변경하기

사용자는 필요에 따라 IME(Input Method Editor, 입력기) 설정을 변경하여 Edit 컴포넌트에 입력할 언어를 설정할 수 있습니다.

예제

다음은 Edit 컴포넌트에 언어별로 문자를 입력하는 예제입니다.

런타임이나 Internet Explorer에서 hangul과 english 항목에 입력을 할 때 한/영 변환을 하지 않아도 자동으로 IME가 전환되어 각각 한글과 영어로 입력됩니다.

japanese에 일본어를 입력하려면 사용자가 윈도우의 IME를 일본어로 변경해야 합니다. 윈도우에 일본어 IME가 설치되어 있더라도 넥사크로플랫폼 환경에서 한글 IME와 일본어 IME 간의 자동 전환은 불가합니다.

sample_edit_04.xfdl

예제에서 사용한 핵심 기능

imemode

Edit의 기본 입력 언어를 설정하는 속성입니다.

예제 구현 방법

Edit , Static 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.

각 Edit 컴포넌트의 imemode 속성을 차례로 한글은 'hangul'로, 영어는 'alpha'로, 일어는 'hiragana'로 설정합니다.

퀵뷰(Ctrl + F6)로 실행한 후 각 Edit에 언어에 맞게 입력 언어가 변경되는지 확인합니다. 일본어는 사용자가 윈도우 IME를 수동으로 변경해줘야 합니다.

정규표현식(Regular Expression)을 사용한 비밀번호 형식 체크

보안의 중요성이 커지면서 크래킹 공격에도 쉽게 뚫리지 않는 복잡한 비밀번호에 대한 요구가 많아지고 있습니다. 그에 따라 비밀번호의 복잡도가 증가하고 있고 그걸 체크하는 코드의 복잡도 역시 증가하고 있습니다. 이럴 때 정규표현식을 사용하면 단 몇 줄의 코드만으로 간단히 비밀번호의 형식을 체크할 수 있습니다.

이번 장에서는 입력받은 비밀번호가 형식에 맞는지 정규표현식을 사용해 체크하는 방법을 설명합니다. 정규표현식에 대한 자세한 설명이나 사용법은 매뉴얼의 범주를 넘어가므로 여기서는 다루지 않습니다.

예제

다음은 사용자로부터 비밀번호를 입력받아 정규표현식으로 체크하고 그 결과를 빨간색 텍스트로 알려주는 예제입니다.

비밀번호를 입력한 후 Confirm 버튼을 클릭하면 형식에 맞는지 결과를 알려줍니다. 비밀번호 형식은 알파벳 소문자 a부터 z 사이, 숫자 0부터 9 사이의 문자를 허용하고 문자열의 길이는 8부터 10까지만 허용합니다.

Unmasking 체크박스는 사용자 스스로 비밀번호를 형식에 맞게 입력했는지 확인할 수 있도록 별표로 표시되는 비밀번호를 일반 텍스트로 표시해주는 기능입니다.

sample_edit_05.xfdl

예제에서 사용한 핵심 기능

password

Edit에 표시되는 문자를 알아볼 수 없게 별표(*)로 표시할지 설정하는 속성입니다.

RegExp

정규표현식 패턴 검색을 위한 정규표현식 객체를 생성하는 메소드입니다. 정규표현식을 인수로 입력하여 정규표현식 객체를 생성한 후 exec 메소드를 사용하여 문자열에 대한 패턴 검색을 수행할 수 있습니다.

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

정규표현식 패턴을 이용해 문자열을 검색하고 검색 결과를 배열로 반환하는 메소드입니다.

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

예제 구현 방법

Static , Edit , Button , CheckBox 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. Edit의 password 속성을 'true'로 설정합니다.

사용자로부터 입력받은 비밀번호의 형식이 올바른지 체크하여 결과를 반환해주는 fn_checkPassword 함수를 호출하고 그 결과를 Static 컴포넌트의 text 속성값으로 지정해 사용자에게 알려줍니다.

fn_checkPassword 함수는 비밀번호가 올바른 형식일 경우 'Y'를 반환하고 아닐 경우에는 'N'을 반환합니다.

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");

};

사용자가 입력한 비밀번호가 올바른지 스스로 확인할 수 있게 Edit의 password 속성을 설정/해제할 수 있게 합니다.

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");
	}
	
};

onchanged 이벤트는 체크박스의 체크 상태가 변경되면 발생하는 이벤트로 postvalue 속성에는 체크박스가 체크되면 1이 체크 해제되면 0이 저장됩니다. 따라서 e.postvalue로 체크박스의 값이 변경되었는지 확인 후 그것에 맞게 Edit의 password 속성을 설정합니다.

비밀번호 형식을 체크해서 그 결과를 반환하는 fn_checkPassword 함수를 작성합니다.

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;
}

이 함수에서 눈여겨 봐야 할 것은 5~9줄에 있는 정규표현식 부분입니다.

1. 우선 정규표현식 문자열을 아래와 같이 작성합니다. 알파벳 소문자 a부터 z 사이, 숫자 0부터 9 사이의 문자만을 허용하고, 문자열의 길이는 8부터 10까지만 허용한다는 의미입니다.

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

2. 정규표현식 패턴 검색을 위해 RegExp 객체를 생성합니다. flag "i"는 대, 소문자를 구별하지 않고 처리하는 옵션입니다. 따라서 "i" flag를 설정하면 알파벳 대, 소문자 입력을 모두 허용한다는 의미가 됩니다.

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

3. exec 메소드를 호출하여 사용자로부터 입력받은 문자열이 정규표현식에 맞는지 검사합니다. exec 메소드는 정규표현식에 맞지 않으면 null을 반환합니다.

var objResult = objRegExp.exec(sValue);

퀵뷰(Ctrl + F6)로 확인합니다.

비밀번호를 입력하고 Confirm 버튼을 클릭합니다. 형식에 맞으면 "password correct", 맞지 않으면 "password incorrect" 메시지를 표시합니다. 비밀번호의 형식을 바꿔가며 입력하여 정상적으로 체크되고 있는지 확인합니다.

Edit에 Dataset 바인딩하기

Edit 컴포넌트에 Dataset을 바인딩할 때는 Edit의 속성마다 하나의 Dataset 컬럼만을 바인딩시킬 수 있습니다. Edit 단독으로 Dataset을 바인딩해서 사용하는 경우는 많지 않고 본 장의 예제와 같이 다른 컴포넌트와 같이 복합적으로 사용하는 경우가 많습니다.

Edit에 Dataset을 바인딩하는 방법은 다음과 같습니다.

• Dataset 아이콘을 컴포넌트에 드래그 앤 드롭: 바인딩 작업을 직관적으로 할 수 있습니다. 생성된 컴포넌트에 Dataset을 바인딩 할 때 사용합니다.

• [Create Component & Bind Dataset] 메뉴: 폼 디자인 화면에서 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴에서 선택할 수 있습니다. 컴포넌트 생성과 바인딩을 한 번에 할 때 사용합니다.

• [Bind Dataset] 메뉴: 폼 디자인 화면에서 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴에서 선택할 수 있습니다. 생성된 컴포넌트에 Dataset을 바인딩 할 때 사용합니다.

어떤 방법을 사용하던 다음 그림과 같이 Bind Item 창이 뜨며 각 컴포넌트의 속성에 Dataset의 컬럼을 바인딩시키는 작업을 할 수 있습니다. 다음 그림은 각 Edit 컴포넌트에 Dataset의 컬럼을 바인딩한 예를 보여줍니다.

예제

다음은 Edit와 Grid 컴포넌트에 Dataset을 바인딩하여 데이터를 화면에 보여주는 예제입니다. Grid의 레코드를 선택하면 Edit에도 같은 정보가 표시됩니다.

sample_edit_06.xfdl

Grid와 Edit는 같은 Dataset을 바인딩하고 있으므로 데이터를 조작 혹은 수정하면 그 결과가 Grid와 Edit에 모두 반영되어 보입니다. 예를 들어, Grid에서 레코드 선택을 변경하면 Edit에서는 자동으로 변경된 레코드의 데이터를 표시하게 됩니다. 그리고 Edit에서 값을 변경하면 Grid에도 반영됩니다.

예제에서 사용한 핵심 기능

없음.

예제 구현 방법

툴바에서 Grid , Static , Edit 를 각각 폼에 생성하고 예제와 같이 적당한 위치에 배치합니다.

생성한 Edit 컴포넌트의 id를 각각 다음과 같이 설정합니다.

Edit와 Grid에 바인딩할 Dataset을 생성합니다.

툴바에서 Dataset 을 선택한 후, 폼 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

그다음 생성한 Dataset에 데이터 아이템 목록을 입력합니다. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하면 Dataset 편집기가 뜨는데 컬럼과 로우를 아래 그림과 같이 입력합니다.

Edit 컴포넌트에 Dataset을 바인딩합니다. Invisible Objects 영역에 있는 Dataset00을 폼에 생성한 각각의 Edit 컴포넌트로 드래그 앤 드롭하면 아래와 같이 Bind Item 창이 뜹니다. Edit는 하나의 속성에 하나의 컬럼만 바인딩할 수 있습니다. Bind Item 창에서 각 Edit 컴포넌트의 value 속성에 대응하는 Dataset00의 컬럼 ID를 선택한 후 [OK] 버튼을 클릭하면 바인딩이 완료됩니다.

아래는 바인딩이 완료된 후의 XFDL 코드입니다. <BindItem>을 보면 각 Edit의 value 속성에 Dataset00의 각 컬럼이 바인딩된 것을 확인할 수 있습니다.

<?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>

성공적으로 각 Edit 컴포넌트에 Dataset의 컬럼이 바인딩됐는지 퀵뷰(Ctrl + F6)로 확인합니다. Grid에서 특정 레코드를 선택해 Edit에 해당 레코드 정보가 올바르게 표시되는지도 확인합니다.

자동완성 기능으로 키워드 제시하기

자동완성 기능은 사용자의 입력과 동시에 선택할 수 있는 아이템 목록을 제시하는 기능입니다.

사용자가 입력하는 내용을 기반으로 데이터베이스에 저장된 데이터로부터 후보값을 검색하여 제시합니다. 그리고 사용자가 모든 내용을 입력하지 않고도 검색어를 후보 목록에서 손쉽게 선택할 수 있게 하여 자동으로 입력 내용을 완성하여 줍니다.

Dataset의 filter 메소드를 사용하여 검색어와 같은 글자가 들어가는 아이템 목록을 보여주는 자동완성 기능을 구현하는 방법을 설명합니다.

예제

예제의 자동완성 입력 폼은 Edit, Button, ListBox 컴포넌트로 구성하여 Combo 컴포넌트와 유사한 모습을 갖습니다.

사용자가 검색어를 입력하면 ListBox에 관련 아이템 목록이 보입니다. 목록에서 아이템을 선택하면 Edit에 선택된 아이템이 표시됩니다.

검색어를 입력하지 않은 상태에서 버튼을 클릭하면 모든 아이템 목록을 확인할 수 있습니다.

sample_edit_07.xfdl

예제에서 사용한 핵심 기능

filter

Dataset에 로딩된 데이터 중에 조건에 만족하는 데이터만 보이도록 필터링하는 메소드입니다. 문자열 형태로 조건식을 입력하면 조건에 맞게 필터링합니다. 조건식을 빈 문자열("")로 설정 후 호출하면 현재의 필터링이 해제되며 필터링 적용 전의 원본 데이터를 출력합니다. 아무 값도 설정하지 않고 호출하면 이전에 필터링했던 조건식으로 필터링합니다.

oninput

키보드로 값을 입력할 때 발생하는 이벤트입니다.

예제 구현 방법

Edit , Button , ListBox 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.

생성한 컴포넌트의 id를 각각 다음과 같이 설정합니다.

ListBox에 출력할 아이템 목록을 가진 Dataset을 생성합니다.

툴바에서 Dataset 을 선택한 후, 폼 위 적당한 공간에 클릭합니다. Invisible Object 영역에 있는 Dataset00을 선택한 후 Properties 창에서 id를 'ds_data'로 설정합니다.

그다음 생성한 Dataset에 데이터 아이템 목록을 입력합니다. Invisible Objects 영역에 있는 ds_data를 더블 클릭하여 Dataset 편집기에 다음과 같이 입력합니다.

Dataset을 ListBox에 바인딩합니다. 하단의 Invisible Objects 영역에 있는 ds_data를 폼에 위치한 ListBox 컴포넌트로 드래그 앤 드롭하고 [bind innerDataset 'ds_data']를 선택하면 Bind InnerDataset 창이 뜹니다.

codecolumn에 'CODE'를 datacolumn에 'DATA'를 입력하고 [OK]를 클릭하면 바인딩이 완료됩니다.

사용자 입력 및 각 컴포넌트를 동작시키기 위해 컴포넌트별 이벤트 함수를 작성합니다.

• Edit 컴포넌트의 oninput 이벤트 함수

사용자가 키보드로 입력할 때마다 문자 혹은 문자열을 포함한 아이템을 필터링하여 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);		
	}
	
};

• Edit 컴포넌트의 onkeydown 이벤트 함수

ListBox에 표시된 아이템을 선택하기 위해 키보드 방향키와 ENTER키를 감지하여 선택 동작을 수행합니다.

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);
	}
	
};

• Button 컴포넌트의 onclick 이벤트 함수

현재 상태의 후보값을 보여주기 위해 ListBox를 화면에 표시합니다. ListBox가 비활성화되어 있고 사용자가 입력한 내용이 없으면 ds_data의 filter를 초기화하고 ListBox를 활성화합니다. 필터를 초기화하면 ds_data의 모든 아이템을 목록에서 확인할 수 있습니다.

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);
	}
	
};

• ListBox 컴포넌트의 onitemclick 이벤트 함수

사용자가 ListBox의 아이템을 선택했을 때 선택한 값을 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);
};

퀵뷰(Ctrl + F6)로 실행한 후 Edit에 검색어를 입력합니다. ListBox가 뜨며 검색어를 포함한 항목만 필터링되어 나오는지 확인합니다.

목록에서 선택한 값을 여러 개 Edit 컴포넌트에 입력하기

Edit 컴포넌트는 항목을 직접 입력하는 용도로 사용합니다. 하지만 경우에 따라서 사전에 만들어놓은 목록에서 항목을 선택하고 여러 개 Edit 컴포넌트에 입력하는 경우도 있습니다. 우편번호를 조회하는 경우 해당하는 주소를 선택하면 우편번호항목과 주소항목이 같이 보여지고 선택 시 각각의 Edit 컴포넌트에 입력됩니다. 우편번호를 알고 있는 경우에는 각 항목을 직접 입력할 수 있지만 모르는 경우 목록에서 선택해서 입력하는 방식입니다.

예제

CODE, DATA 2개의 Edit 컴포넌트가 있고 CODE 항목을 입력하려 할때 팝업 형태로 보기 목록을 보여주고 항목을 선택하면 2개의 Edit 컴포넌트에 값을 입력합니다.

sample_edit_08.xfdl

예제에서 사용한 핵심 기능

trackPopupByComponent

컴포넌트를 기준으로 PopupDiv 컴포넌트의 위치를 지정합니다. 예제에서는 첫 번째 Edit 컴포넌트를 기준으로 위치를 지정합니다. X좌표값은 같은 위치로 지정하기 위해 0으로 지정하고 Y좌표값은 Edit 컴포넌트 바로 아래 위치로 지정하기 위해 Edit 컴포넌트의 높이값으로 지정합니다.

oncellclick

Grid 컴포넌트의 셀을 클릭했을때 클릭한 위치의 ROW 정보를 비롯한 관련 정보를 전달합니다. 해당 ROW 정보를 받아서 getColumn 메소드에서 선택한 값을 찾을 수 있습니다.

getColumn

ROW 정보를 받아서 원하는 컬럼에 해당하는 값을 찾을 수 있습니다.

예제 구현 방법

Static 컴포넌트, Edit 컴포넌트, PopupDiv 컴포넌트를 예제와 같이 배치합니다. PopupDiv 컴포넌트의 위치는 호출할때 지정하기 때문에 어디든 상관없지만 Edit 컴포넌트의 크기가 맞추기 편하게 Edit 컴포넌트 하단에 배치합니다.

PopupDiv 컴포넌트 내 Grid 컴포넌트를 배치합니다. PopupDiv 컴포넌트 같은 컨테이너 컴포넌트 내에 다른 컴포넌트를 배치할 때는 넥사크로 스튜디오에서 배치할 컴포넌트를 선택한 후에 PopupDiv 컴포넌트 위에서 클릭해주면 됩니다. PopupDiv 컴포넌트 영역 밖에서 클릭하면 Form 오브젝트 아래 배치됩니다.

정상적으로 배치된 경우에는 속성창 상단 오브젝트 목록에서 Grid 컴포넌트가 PopupDiv 컴포넌트에 포함된 것을 확인할 수 있습니다.

Dataset 오브젝트를 추가하고 Column, Row 정보는 아래와 같이 입력합니다. 그리고 Dataset 오브젝트를 선택한 후 드래그앤드롭으로 Grid 컴포넌트와 바인딩해줍니다.

Dataset 바인딩 후 화면에 깔끔하게 표시되도록 autofittype 속성값을 "col"로 수정합니다. 그리고 width, height 속성값을 "100%"로 지정하고 left, top 속성값을 0으로 지정하면 PopupDiv 컴포넌트 크기에 딱 맞게 표시됩니다.

Edit 컴포넌트를 선택한 후 oneditclick 이벤트 함수를 작성합니다. Edit 컴포넌트를 클릭했을때 이벤트가 처리되면서 PopupDiv 컴포넌트에 배치한 Grid 컴포넌트가 나타납니다.

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

Grid 컴포넌트를 선택한 후에 oncellclick 이벤트 함수를 작성합니다. Grid 컴포넌트에 표시된 목록에서 항목 선택 시(Cell 클릭 시) Edit 컴포넌트에 선택된 문자열을 표시해줍니다. 항목을 선택하면 더 이상 PopupDiv 컴포넌트를 사용하지 않습니다. closePopup 메소드로 팝업으로 열린 창을 닫습니다.

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"));
};

QuickView(Ctrl + F6)로 실행한 후 Edit 컴포넌트를 클릭해 팝업창에서 원하는 항목을 선택해봅니다.

바인딩된 값을 키 입력 시 바로 업데이트하기

Edit 컴포넌트에 바인딩된 값은 값을 입력하고 Enter 키를 입력하거나 포커스를 이동했을때 Dataset 오브젝트에 반영됩니다. 하지만 updateToDataset 메소드를 사용하면 원하는 시점에 데이터를 변경할 수 있습니다.

예제

Grid 컴포넌트의 데이터를 선택하면 바인딩된 값이 Edit 컴포넌트에 표시됩니다. Edit 컴포넌트의 문자열을 수정하면 키 입력 시 바로 Grid 컴포넌트에 반영됩니다.

sample_edit_09.xfdl

예제에서 사용한 핵심 기능

updateToDataset

컴포넌트의 value 속성값에 바인딩된 Dataset 오브젝트의 데이터를 업데이트합니다. 예제에서는 onkeyup 이벤트 함수 내에서 메소드를 실행해 키 입력 시마다 데이터가 반영되도록 했습니다.

예제 구현 방법

Grid 컴포넌트를 배치하고 Dataset 오브젝트를 생성합니다. Dataset 오브젝트는 하나의 컬럼만 생성하고 데이터를 입력합니다.

Edit 컴포넌트를 배치하고 Dataset 오브젝트를 끌어다가 바인딩합니다.

onkeyup 이벤트 함수를 아래와 같이 작성합니다. 키 입력 시 바인딩된 Dataset 오브젝트를 업데이트합니다.

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

QuickView(Ctrl + F6)로 실행한 후 Edit 컴포넌트에 입력된 항목이 키 입력 시 Grid 컴포넌트에 반영되는지 확인합니다.

한글만 입력할 수 있도록 하기

입력할 수 있는 문자열을 스크립트에서 제한하는 방식입니다.

예제

Edit 컴포넌트에 한글이 아닌 다른 문자를 입력하면 입력된 문자를 삭제하고 한글만 남깁니다.

sample_edit_10.xfdl

예제에서 사용한 핵심 기능

oninput

Edit 컴포넌트의 편집상태(포커스가 있는)에서 입력 시도 시 발생하는 이벤트입니다.

예제 구현 방법

Edit 컴포넌트를 배치하고 oninput 이벤트 함수를 추가합니다. 입력된 문자열이 한글이 아닌 경우에는 ""로 치환합니다.

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

QuickView(Ctrl + F6)로 실행한 후 Edit 컴포넌트에 한글 아닌 문자열이 입력되는지 확인합니다.