23.Edit/MaskEdit

23.1Edit

23.1.1Edit Basic

Edit 는 사용자로부터 문자를 입력할 때 사용됩니다.
Edit 는 사용자에게 문자열을 출력하기 위한 용도로 사용이 가능합니다. 
Edit 는 사용자로부터 암호 문자열이나 길이의 제한된 문자열 출력이 가능합니다. 
Edit 는 Dataset과 연동할 수 있습니다.

그림 23-1EditBox_Basic_01

Edit를 Grid 에 Bind 하는 방법

Edit 는 Grid에 데이타셋의 bind property 를 이용해 bind 할 수 있습니다. 
Edit 는 dataset column 를 edit box 에 bind 할 수 있습니다.  
Grid의 선택된 row 가 변경되면 input box 의 value 도 변경 됩니다.

Edit 컴포넌트를 dataset에 바인드 하는 순서입니다

♦ 작업순서
1) 바인딩 하고자 하는 Edit 를 선택(클릭)한다. 
2) 마우스 오른쪽을 눌러 Bind Dataset ...를 선택하여 Bind할 Dataset을 선택한다.
3) Dataset을 선택하면 Bind Item창이 오픈되고, Edit컴폰너트의 Property와 Column ID를 매치 시킨다.

위와 같은 작업이 끝나면 Dataset과 바인딩 된 결과를 볼 수 있습니다.

autoselect

autoselect  property 는 Edit에 포커스가 들어갈 때 자동적으로 전체선택을 할지 여부를 설정하는 
속성입니다. 포커스가 들어가게 되면 highlight blue color 가 보이게 됩니다.

highlight color은 테마파일에서 변경이 가능합니다.

autoskip

autoskip는 입력되는 문자열의 길이가 maxlength속성에 지정된
길이만큼 입력 되었을 때 자동으로 다음 컴포넌트로 이동할지를 설정하는 속성입니다.
(컴포넌트 이동은 tab order순서에 의해 이동됩니다.)

password

Edit 컴포넌트는 입력/출력되는 문자를 '*' 숨길지 여부를 설정하는 속성입니다. 
디폴트로 password property 는 false value 를 가지며
만약 password type property 이 true 라면 output 은 password format으로 표현됩니다. 
모든 characters 은  문자열 "****' 형식처럼 보여집니다.

Edit에 보여지는 값을 숨길 수 있는가?

maxlength

Edit 컴포넌트에 입력할 수 있는 문자열의 최대 길이를 설정할 수 있는 속성입니다.

lengthunit

이 속성은 maxlength의 문자열 길이를 검사하는 단위를 설정하는 속성입니다. 
예) 
utf16 : 한문자당 1의 값을 합산
utf8 : 한문자당 영문1, 다국어 2-5의 값을 합산
ascii : 한문자당 영문1, 한글 2의 값을 합산

padding(Left Margin)

이 속성은 Edit component 의 position arguments 셋팅 할 때 사용합니다.
설정은 4가지 position arguments top, right, bottom 그리고 left 가 있습니다. 
디폴트 비어있는 포지션 셋팅 값은 0입니다.
소스 위치

Sample\Edit\np_Edit_Basic.xfdl

23.1.2편집중인 값을 Dataset에 바로 적용하기

그림 23-2Edit_Edit_Update_0

주요 소스 내용

this.Comp_Edit_Edit_Update_onkeyup = function(obj:Form, e:nexacro.KeyEventInfo)
{
 if (e.shiftKey == true && e.keycode == 83)
 {    
  var objFocus = this.getFocus();
  if (objFocus.name == 'edt_input')
  {
   this.edt_input.updateToDataset();
  } 
 } 
}
Edit컴포넌트에서 값을 입력 중 shiftKey + s 를 통해 DataSet에 바로 반영시킬 수 있습니다.

참고사항

updateToDataset

Dataset에 bind되어 있을 경우 즉시 value를 Dataset에 적용시키는 Method이며, 대 부분의 컴포넌트에서
사용이 가능합니다.

데이터를 입력하는 경우 포커스가 변경되는 경우 데이터가 반영되는 방법 이외에

특정 조건에 따라 값을 반영할 수 있나요?

updateToDataset

소스 위치

Sample\Edit\np_Edit_Edit_Update.xfdl

23.1.3PoupuDiv를 이용한 데이터 선택방법

그림 23-3Edit_PopupChose_0

EditBox에 코드성 데이터를 입력 받는 방법으로 직접 코드 값을 입력받는 방법이 아닌 
팝업형태의 리스트 데이터를 선택하여 사용하는 방법에 대해 기술합니다.

주요 소스 코드

this.popup_div = function(obj)
{
 var nX = system.screenToClientX(this, system.clientToScreenX(obj,16)) - this.PopupDiv01.width/2;
 var nY = system.screenToClientY(this, system.clientToScreenY(obj, 30));  
  this.PopupDiv01.trackPopup(nX, nY, null, null, "popup_call_back");
}

팝업화면의 위치는 고객사 개발환경에 따라 조절해 사용하시기 바랍니다.

EditBox의 데이터 입력방법을 팝업화면을 통해 구현하고 싶습니다.

소스 위치

Sample\Edit\np_Edit_PopupChose.xfdl

23.2MaskEdit

23.2.1MaskEdit Basic

MaskEdit는 정해진 규격에 따라 입력/출력이 필요한 경우 사용되는 컴포넌트입니다.
MaskEdit를 사용하여 주민등록번호, 전화번호 등 일정한 포맷을 지정하여 표현이 가능합니다.

그림 23-4MaskEdit_Basic_0

Mask edit field 를 Grid 에 bind 하는 방법

MaskEdit를 Grid 에 Bind된 Dataset를 이용하여 bind 할 수 있다.

MaskEdit를 data set 에 bind 순서

♦ 작업순서
1) 바인딩하고자 하는 MaskEdit  선택(클릭)한다. 
2) 마우스 오른쪽을 눌러 Bind Dataset ...를 선택하여 Bind할 Dataset을 선택한다.
3) Dataset을 선택하면 Bind Item창이 오픈 되고, Edit컴폰너트의 Property와 Column ID를 매치 시킨다.

위와 같은 작업이 끝나면 Dataset과 바인딩 된 결과를 볼 수 있습니다.

Mask edit property 적용

입력 받고자 하는 문자열의 형식을 지정할 수 있습니다. 
MaskEdit선택 후 property창에서 Masking 을 제공하기 위한 형식을 설정합니다.

Mask Expression

Mask property 에 다양한 형식 표현이 가능합니다. 
expression 를 위한 예)
“AA-###” 표현은 첫번째 두개 digits 는 문자열 다음 하이픈 그리고 나머지는 숫자로서 보여줄 때 사용된다.
소스 위치

Sample\MaskEdit\np_MaskEdit_Basic.xfdl

23.2.2MaskEdit에 -(음수) 입력 안되게 처리하기

MaskEdit를 이용하여 음수(-)는 입력 안되게 처리하는 기능을 구현합니다.

그림 23-5MaskEdit_NoNegative_0

mask 설정

그림 23-6MaskEdit_NoNegative_1

관련 속성

mask

MaskEdit에서 입력 받을 문자의 형식을 지정하는 속성입니다.
type 속성에 따라 지정하는 방법이 다르며, number type의 경우‘+’, ‘-‘ 기호를 앞에 붙일 수 있습니다.
+ : 양수 기호만 입력 가능
- : 음수 기호만 입력 가능

mask, 음수, 마이너스

소스 위치

Sample\MaskEdit\np_MaskEdit_NoNegative.xfdl

23.2.3MaskEdit를 이용하여 주민번호 패스워드 처리하기

MaskEdit를 이용하여 주민번호 입력 시 뒤 7자리를 패스워드 처리 할 수 있습니다.

그림 23-7MaskEdit_Password_0

mask

그림 23-8MaskEdit_Password_1

그림 23-9MaskEdit_Password_1

mask속성의 '{}'의 의미

입력된 문자 일부를 패스워드로 처리하여 '*'의 형태로 출력하고자 할 때에는 출력하고자 하는 
영역을 '{ }'로 지정한다. '{ }'영역 안의 마스크 문자는 출력 및 입력 시 '*' 문자로 대체되어 
출력된다.

MaskEdit, 마스크

소스 위치

Sample\MaskEdit\np_MaskEdit_Password.xfdl