TextField 소개

TextField 컴포넌트는 한 줄로 된 문자열을 입력받거나 출력할 때 사용하는 컴포넌트입니다. Edit 컴포넌트와 유사하지만 Material Design 요소를 반영했으며 inputtype이나 pattern 속성값을 설정해 입력 형식을 지정할 수 있고 입력값에 대한 유효성을 검사할 수 있습니다.

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

사용 예

Material Design의 Text fields 컴포넌트는 모바일 기기처럼 화면 크기가 제한된 환경에서 라벨 정보를 효율적으로 노출하고 사용자가 입력한 값에 대한 즉각적인 피드백을 제공합니다.

Material Design의 Text fields 컴포넌트에 대한 좀 더 자세한 내용은 아래 링크를 참고하세요.

https://m3.material.io/components/text-fields/overview

TextField 사용하기

TextField 컴포넌트를 사용하기 위해서는 TypeDefinition에서 TextField 컴포넌트를 추가해주어야 합니다.

24.0.0.200 이후 버전에서는 프로젝트 생성 시 TextField 컴포넌트가 추가된 상태로 표시됩니다.

24.0.0.100 또는 넥사크로 N V21에서 만든 프로젝트를 사용하는 경우 아래와 같은 방법으로 TextField 컴포넌트를 추가해주어야 합니다.

Project Explorer에서 [TypeDefinition > Objects] 항목을 더블 클릭합니다.

Modules 항목에서 MobileComp.json 항목을 펼칩니다.

nexacro.TextField 항목 옆에 [+] 아이콘을 클릭해 TextField 컴포넌트를 Objects 목록에 추가합니다.

입력값에 따라 유효성을 아이콘으로 표시하기

TextField 컴포넌트는 inputtype 속성으로 기본적인 입력값 유형을 지정할 수 있습니다. 입력값이 유효하지 않은 경우 입력창 하단에 메시지를 표시할 수도 있고 입력창 오른쪽 영역에 아이콘을 표시할 수도 있습니다.

예제

입력값이 이메일 형태인지 확인해 유효하지 않은 경우 하단에 메시지를 표시하고 입력창 오른쪽에 아이콘을 표시합니다.

sample_edit_01_01

sample_textfield_01.xfdl

예제에서 사용한 핵심 기능

invalidtext: 입력값의 유효성을 확인하고 유효하지 않은 경우 입력창 하단에 invalidtext 속성값으로 설정한 문자열을 표시합니다.

usetrailingbutton: 입력창 오른쪽에 아이콘을 표시할지 여부를 설정합니다. 아이콘 이미지는 스타일에서 설정할 수 있으며 valid, invalid 상태에 따라 다른 아이콘 이미지를 표시할 수 있습니다.

예제 구현 방법

화면에 TextField 컴포넌트를 배치합니다.

속성창에서 inputtype 속성값을 "email"로 변경합니다.

속성창에서 usetrailingbutton, usehelpertext 속성값을 true로 변경합니다.

속성창에서 invalidtext 속성값을 입력합니다.

xcss 파일을 열어서 아래와 같이 코드를 추가합니다.

아이콘 이미지가 ImageResource에 포함되어 있어야 합니다.

TextField 컴포넌트의 userstatus가 valid일 때는 like50.png이라는 이미지를 trailingbutton으로 사용하고 userstatus가 invalid일 때는 angry50.png이라는 이미지를 trailingbutton으로 사용합니다.

.TextField.sample_textfield_01 .box .trailingbutton[userstatus=valid]
{
	background : transparent url('imagerc::like50.png') no-repeat center center;
}	

.TextField.sample_textfield_01 .box .trailingbutton[userstatus=invalid]
{
	background : transparent URL('imagerc::angry50.png') no-repeat center center;			
}

TextField 컴포넌트의 cssclass 속성값을 "sample_textfield_01"로 설정합니다.

QuickView(Ctrl + F6)를 실행하여 TextField 컴포넌트에 입력한 값에 이메일 형식("@" 문자)을 포함하기 전과 후의 아이콘이 바뀌는지 확인합니다.

라벨 위치에 따라 컴포넌트 크기가 달라지나요?

TextField 컴포넌트는 컴포넌트 내에서 라벨을 설정하고 표시할 수 있습니다. 라벨을 표시하는 위치에 따라 컴포넌트 크기가 다른 것처럼 보이는데 컴포넌트 크기가 달라지는 것이 아니라 속성값 설정에 따라 컴포넌트 내 편집 영역의 크기와 배치가 변경되는 것입니다.

예제

화면 왼쪽부터 labelposition 속성값이 "overlap", "outside", "inside"로 설정했습니다. 첫 번째 줄은 labelfloatingfixed 속성값이 false로 설정되어 포커스가 없을 때는 라벨이 편집 영역 내에 표시되었다가 포커스를 옮기거나 값을 입력한 경우에는 labelposition 속성으로 지정한 위치로 이동합니다.

sample_edit_01_01

sample_textfield_02.xfdl

예제에서 사용한 핵심 기능

labelfloatingfixed: 컴포넌트 상태에 따라 라벨을 표시하는 방식을 설정하는 속성입니다. floating 상태에 따라 라벨의 폰트 크기 등을 설정할 수 있습니다.

labelposition: 라벨이 표시되는 위치를 설정하는 속성입니다. labelfloatingfixed 속성값이 false인 경우에는 편집 영역에 라벨이 표시되었다가 특정 상태가 되면 지정된 위치로 라벨이 이동합니다.

예제 구현 방법

화면에 TextField 컴포넌트 3개를 같은 크기로 배치합니다.

labeltext 속성값을 "TEST"로 설정하고 두 번째, 세 번째 컴포넌트의 labelposition 속성값을 "outside", "inside"로 설정합니다.

컴포넌트의 크기는 변하지 않았지만 편집 영역의 크기가 달라지는 것을 확인할 수 있습니다.

3개의 TextField 컴포넌트를 복사해서 아래쪽에 붙여 넣고 labelfloatingfixed 속성값을 true로 변경합니다.

labelposition에 따라 라벨이 차지하는 영역이 달라지면서 편집 영역의 크기가 변하는 것을 확인할 수 있습니다.

xcss 파일을 열어서 아래와 같이 코드를 추가합니다.

라벨이 floating(labelposition 속성으로 설정한 위치에 표시) 상태일 때 폰트 크기와 색상을 변경합니다.

.TextField.sample_textfield_02 .label[userstatus=floating]					
{
	font : 10px/normal "Arial";
	color : red;
}

위쪽 3개의 TextField 컴포넌트의 cssclass 속성값을 "sample_textfield_02"로 설정하고 usehelpertext 속성값을 true, helpertext 속성값을 원하는 문구로 설정합니다.

QuickView(Ctrl + F6)를 실행하여 위쪽 3개 컴포넌트가 포커스 상태일 때 라벨의 위치와 폰트가 어떻게 달라지는지 확인합니다.

라벨 위치와 상관없이 같은 크기로 컴포넌트 표시하기

컴포넌트 하나만 있는 경우에는 라벨 위치, 폰트 크기에 따라 자동으로 컴포넌트 크기가 조정되더라도 상관없지만 다른 컴포넌트와 같이 표시되는 경우에는 컴포넌트 간 정렬을 맞추는 것이 쉽지 않습니다. 그래서 컴포넌트의 크기를 고정으로 지정할 수 있는 contentheight, headerheight, footerheight 속성을 추가했습니다.

contentheight, headerheight, footerheight 속성은 24.0.0.200 버전부터 지원합니다.