Button 소개

버튼은 사용자가 마우스로 버튼을 클릭하여 사전에 설정해 놓은 동작을 수행하기 위한 컴포넌트입니다. 사용자는 버튼을 클릭했을 때 어떤 동작이 발생할 것을 직관적으로 알 수 있습니다. 동작은 스크립트로 작성하며 버튼의 이벤트 함수를 통해 수행됩니다.

사용 예

다음은 대표적인 SNS(Social Network Service)중 하나인 트위터의 로그인 화면입니다. 사용자 계정 정보를 입력하는 편집창 밑으로 로그인 버튼과 가입하기 버튼이 있습니다.

로그인 버튼을 누르면 편집창에 입력한 계정으로 사용자 인증을 받게 되고, 가입하기 버튼을 클릭하면 사용자 정보를 입력할 수 있는 메뉴가 나타납니다.

sample_button_01_01_

Button 만들기

sample_button_01_01

Button 컴포넌트 생성하기

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

QuickView로 확인하기

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

버튼은 사용자의 마우스 움직임에 따라 상태가 변경됩니다. 그러나 이벤트 핸들러를 작성하지 않았기 때문에 어떤 동작도 수행하지 않습니다.

버튼에 아이콘 넣기

버튼을 꾸미기 위해 이미지를 아이콘 형태로 버튼에 삽입할 수 있습니다.

예제

다음은 이미지를 삽입한 버튼 예제입니다. 아이콘 이미지가 위치하고 그 옆에 버튼 text 영역이 존재합니다. 버튼을 누르면 버튼과 이벤트 정보를 팝업으로 출력합니다.

sample_button_02_01

sample_button_02.xfdl

예제에서 사용한 핵심 기능

icon: 버튼에서 텍스트와 함께 표시할 아이콘 이미지의 경로를 설정하는 속성입니다.

예제 구현 방법

Button 컴포넌트 생성하기

툴바에서 Button 컴포넌트를 선택한 후 예제 화면과 같이 Form에 배치합니다.

아이콘 설정하기

버튼을 선택한 후 Properties 창에서 icon 속성을 설정합니다.

sample_button_02_02

ImageResource를 추가하는 방법은 아래 링크를 참고하세요.

이미지 폴더에 있는 이미지 보여주기

OK 버튼 기능 구현하기

OK 버튼의 id를 btn_ok로 설정하고 onclick 이벤트 핸들러를 추가합니다.

OK 버튼의 onclick 이벤트 핸들러

이벤트 종류와 버튼 이름을 팝업으로 출력합니다.

this.btn_ok_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{	
	var strMsg = "[" +e.eventid + " event] " + this.btn_ok.text + " button clicked.";
	
	alert(strMsg);
};

QuickView로 확인하기

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다. OK 버튼에 아이콘 이미지가 출력되고 버튼을 누르면 이벤트와 버튼의 정보를 팝업으로 출력합니다.

이미지 버튼 만들기

Button 컴포넌트를 꾸미기 위해 배경색이나 경계선 등의 속성을 사용합니다. 이런 스타일 속성만으로 부족한 부분이 있는 경우에는 이미지 자체를 버튼처럼 사용합니다. 넥사크로에서는 ImageViewer에 원하는 이미지를 지정하고 클릭 이벤트와 필요한 속성을 지정해 이미지 버튼을 구현할 수도 있고 Button 컴포넌트의 배경이미지를 지정해 이미지 버튼을 구현할 수 있습니다. 이번 예제에서는 배경이미지를 지정해 이미지 버튼을 구현하는 방법을 살펴봅니다.

ImageViewer 컴포넌트를 사용해 이미지 버튼을 만들 수도 있지만 Button 컴포넌트에 공통으로 적용되는 테마나 스타일이 적용되지 못하는 단점이 있습니다. 다른 버튼과 같은 속성을 적용하려면 Button 컴포넌트를 사용하거나 cssclass 속성값을 적용할 수 있습니다.

샘플 이미지에 사용한 아이콘은 아래 주소에서 참조했습니다.

https://webdesignceylon.blogspot.kr/2016/03/facebook-new-like-icon-set-2016-png-psd.html

예제

3개의 버튼을 배치합니다. 첫 번째, 세 번째 버튼은 일반 Button 컴포넌트이고 가운데 버튼은 background 속성을 적용했습니다. 첫 번째, 세 번째 버튼 클릭 시 가운데 이미지 버튼에 설정된 이미지가 변경됩니다.

sample_button_02_01

sample_button_03.xfdl

예제에서 사용한 핵심 기능

background: 배경색 또는 배경 이미지를 지정합니다. 배경색을 지정할때도 그러데이션을 적용할지 단일 색으로 지정할지에 따라 하위 속성이 달라집니다. 예제에서는 배경 이미지 파일을 지정하고 다른 속성은 기본값을 적용했습니다. 넥사크로 스튜디오에서는 원하는 파일을 탐색기에서 선택할 수 있는데 스크립트에서는 아래와 같이 속성값을 지정합니다.

this.btnImage.set_background('url("imagerc::like50.png")');

예제 구현 방법

화면 구성하기

Button 컴포넌트를 예제 화면과 같이 배치합니다. 아직은 background 속성값을 지정하기 전이라 모든 버튼이 같은 모습으로 보입니다. 버튼의 크기는 width, height 값을 50으로 지정합니다.

background 속성 지정하기

가운데 버튼을 선택하고 background 속성값을 지정합니다. 필요한 이미지 파일은 ImageResource로 추가합니다.

ImageResource를 추가하는 방법은 아래 링크를 참고하세요.

이미지 폴더에 있는 이미지 보여주기

background 속성은 하위 속성을 지정할 수 있습니다. background 속성명 앞에 있는 "+" 버튼을 클릭하면 하위 속성이 펼쳐집니다. 그중에서 imageurl 속성값을 지정합니다. 파일 탐색기를 열어 원하는 이미지 파일을 선택합니다.

border, text 속성 수정하기

default 테마를 사용한다면 Button 컴포넌트는 border 속성값이 지정되어 있습니다. 이미지 버튼으로 지정하는 경우에는 경계선이 보이지 않도록 해야 하므로 해당 속성값을 "0px none"으로 지정합니다. 그리고 text 속성값 역시 빈 값으로 지정합니다.

Button 컴포넌트 이벤트 함수 작성하기

Button 컴포넌트를 선택한 후 onclick 이벤트 함수를 작성합니다. 각 버튼에 지정된 이미지 파일을 background 속성값으로 지정합니다.

this.btnLike_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.btnImage.set_background('url("imagerc::like50.png")');
};

this.btnAngry_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.btnImage.set_background('url("imagerc::angry50.png")');
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 이미지를 바꾸어가면서 확인해봅니다.

버튼에 들어간 아이콘 위치 변경하기

Button 컴포넌트에 아이콘을 추가하는 것은 버튼의 용도를 좀 더 명확하게 해줍니다. 일반적으로 아이콘이 먼저 위치하고 그 다음에 텍스트가 보여지는데 필요에 따라 아이콘의 위치를 조정할 수 있습니다. 이런 경우 어떻게 아이콘 위치를 변경하는지 살펴봅니다.

예제

정사각형 형태의 버튼을 배치하고 iconposition, textpadding 속성값을 수정하면서 어떻게 적용되는지 살펴봅니다. 값을 수정한 후에 버튼을 클릭하면 아이콘 위치가 변경됩니다.

sample_button_02_01

sample_button_04.xfdl

예제에서 사용한 핵심 기능

iconPosition (-nexa-icon-position): 설정된 아이콘 이미지를 어느 방향에 배치할지를 지정합니다. 지정된 값이 없는 경우에는 default 속성값이 적용됩니다. 아이콘은 하나만 지정할 수 있기 때문에 양쪽에 아이콘을 배치하고자 하는 경우에는 background 속성을 사용해 이미지로 처리할 수 있습니다.

textPadding (-nexa-text-padding): Button 컴포넌트 내 text 요소를 둘러싼 여백을 지정합니다. 아래 그림에서 top, right, bottom 방향의 textpadding 속성값을 지정했을때 초록색으로 표시된 부분이 지정된 여백 영역입니다. 해당 영역이 변경되면서 text 요소의 위치가 변경됩니다.

예제 구현 방법

화면 구성하기

Button 컴포넌트와 Edit, Static 컴포넌트를 예제 화면과 같이 배치합니다. Button 컴포넌트의 아이콘의 위치를 조정하고 이를 확인하기 위해 Button 컴포넌트는 정사각형 형태로 width, height 값을 수정합니다.

icon 속성 지정하기

icon 속성값은 적절한 이미지 파일을 지정해줍니다. 이번 예제에서는 버튼에 아이콘 넣기 예제에서 사용한 이미지를 재사용합니다.

textpadding 입력창 속성 지정하기

textpadding 속성값을 입력하는 Edit 컴포넌트는 숫자만 입력할 수 있어야 합니다. 이런 경우에는 Spin 컴포넌트를 사용해도 되지만 이번 예제에서는 Edit 컴포넌트를 사용합니다. 먼저 Edit 컴포넌트의 value 속성값을 0으로 지정하고 inputtype 속성값을 "number"로 지정합니다. 넥사크로 스튜디오에서 inputtype 속성값은 목록에서 원하는 항목을 1개 이상 선택할 수 있습니다.

inputtype 속성값을 지정하면 숫자 외 다른 값을 입력할 수 없도록 제한할 수 있습니다. 하지만 값을 지우는 것은 막을 수 없습니다. 사용자가 값을 지우는 경우에는 다른 값을 대입하도록 onchanged 이벤트를 추가합니다. 이벤트 함수 내에서 이벤트를 처리하는 컴포넌트를 직접 지정하지 않고 이벤트 함수 파라미터로 전달되는 obj 라는 변수를 받아서 처리합니다. 예를 들어 textpadding top 속성값을 지정하는 Edit 컴포넌트에서 onchaged 이벤트가 발생했다면 obj 변수는 해당 Edit 컴포넌트를 가리킵니다.

이벤트 함수 내에서는 Edit 컴포넌트의 value 속성값이 숫자인지 확인하고 숫자가 아니라면 0이라는 값을 지정합니다.

this.editTextPadding_onchanged = function(obj:nexacro.Edit,e:nexacro.ChangeEventInfo)
{
	if(!nexacro.isNumeric(obj.value))
	{
		obj.set_value(0);
	}
};

Button 컴포넌트 이벤트 함수 작성하기

이번 예제에서는 따로 명령을 실행하는 버튼을 만들지 않고 아이콘 위치를 변경할 버튼을 실행 버튼으로 사용합니다. 버튼 클릭 시 아래 함수가 실행되며 입력된 값을 적용합니다.

this.btnIcon_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	obj.set_iconPosition(this.editIconPosition.value);
	obj.set_textPadding(this.editTextPaddingTop.value+"px " 
		+this.editTextPaddingRight.value+"px "
		+this.editTextPaddingBottom.value+"px " 
		+this.editTextPaddingLeft.value+"px");
};

textpadding 속성값을 지정할때 "px"라는 단위를 같이 지정하지 않으면 속성값이 적용되지 않습니다. 예제에서는 사용자가 입력한 값에 "px"라는 문자열을 추가해 속성값으로 지정합니다.

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 값을 입력하고 버튼을 클릭해 아이콘과 텍스트의 위치를 확인합니다.

컴포넌트의 속성, 메소드, 이벤트 확인하기

Button 컴포넌트 뿐 아니라 다른 컴포넌트나 오브젝트에 속한 속성, 메소드, 이벤트 정보를 확인하고자 한다면 for in 반복문을 활용할 수 있습니다.

예제

버튼을 클릭하면 TextArea 컴포넌트에 Button 컴포넌트와 ClickEventInfo 오브젝트와 관련된 정보를 표시합니다.

sample_button_02_01

sample_button_05.xfdl

예제에서 사용한 핵심 기능

for in: 특정 오브젝트가 가지고 있는 모든 속성을 반복문으로 확인할 수 있습니다. for 문을 그대로 사용하는 것보다 속도는 느릴 수 있기 때문에 특정한 용도에만 사용하는 것을 권장합니다.

예제 구현 방법

화면 구성하기

Button 컴포넌트와 TextArea 컴포넌트를 예제 화면과 같이 배치합니다.

onclick 이벤트 함수 작성하기

Button 클릭 시 전달되는 Button 컴포넌트(obj)와 ClickEventInfo 오브젝트(e)에 속한 모든 속성을 확인하고 TextArea 컴포넌트의 value 속성값으로 표시합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.TextArea00.set_value(this.checkList(obj));
	this.TextArea01.set_value(this.checkList(e));
};

checkList 함수는 오브젝트를 받아서 for in 반복문을 처리합니다. for in 반복문에서는 보여지지 않는 모든 속성을 다 표시하기 때문에 "_"으로 시작하는 속성은 제외합니다. 그리고 "function"이 포함된 속성값은 해당 function의 코드 모두를 노출하기 때문에 속성값 대신 "function()"이라는 문자열을 대신 표기합니다.

this.checkList = function(obj)
{
	var strReturn = "";
	for(var x in obj)
	{
		if(x.substring(0,1)!="_")
		{
			if(obj[x]!=null && obj[x].toString().indexOf("function")>-1)	{
				strReturn += x+": "+"function()"+"\n";
			}	else	{
				strReturn += x+": "+obj[x]+"\n";
			}
		}
	}
	return strReturn;
}

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 값을 입력하고 버튼을 클릭해 아이콘과 텍스트의 위치를 확인합니다.

키보드 입력 시 발생하는 onclick 이벤트 구분하기

Button 컴포넌트에 포커스가 있는 경우 ENTER 키 또는 SPACE 키 입력 시 onclick 이벤트가 발생합니다. 마우스 클릭 시에만 이벤트를 처리하고 싶다면 ClickEventInfo 오브젝트의 button 속성값으로 확인할 수 있습니다.

예제

ENTER, SPACE 키 입력 시에는 "SPACE OR ENTER KEY"라고 표시하고 마우스 버튼 클릭 시에는 "CLICK"라고 표시합니다.

sample_button_02_01

sample_button_06.xfdl

예제에서 사용한 핵심 기능

button: 마우스 버튼 또는 터치 동작이 아닌 경우에는 "none" 값을 반환합니다.

예제 구현 방법

Button 컴포넌트와 Static 컴포넌트를 예제 화면과 같이 배치합니다.

아래와 같이 Button 컴포넌트의 onclick 이벤트 함수를 작성합니다.

마우스 버튼 클릭이 아닌 경우에는 ClickEventInfo 오브젝트의 button 속성값이 "none" 값을 반환합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Static00.set_text('SPACE OR ENTER KEY');
	if(e.button!='none')
	{
		this.Static00.set_text('CLICK');
	}
};

QuickView(Ctrl + F6)로 실행한 후 SPACE 키나 ENTER 키 입력 시 onclick 이벤트가 어떻게 처리되는지 확인합니다.

특정 키 입력 시 onclick 이벤트 처리하기

구글 웹사이트에서는 검색창에 키워드를 입력 후 Button으로 포커스를 옮기지 않고 바로 ENTER 키를 입력하면 조회가 처리됩니다. 이와 같이 특정 키 입력 시 버튼을 클릭한 것처럼 처리하는 방법을 살펴봅니다.

예제

Edit 컴포넌트에 포커스가 있는 상태에서 ENTER, ESC, CTRL+H 키 입력 시 onclick 이벤트를 처리합니다.

sample_button_02_01

sample_button_07.xfdl

예제에서 사용한 핵심 기능

defaultbutton: true로 설정하면 ENTER 키 입력 시 onclick 이벤트를 발생합니다. TextArea 컴포넌트처럼 줄바꿈을 사용하는 컴포넌트를 사용하는 경우에는 ENTER 키 입력 시 줄바꿈 동작보다 Button 컴포넌트의 onclick 이벤트가 먼저 발생합니다.

escapebutton: true로 설정하면 ESC 키 입력 시 onclick 이벤트를 발생합니다.

hotkey: 원하는 키 조합을 선택해 해당 키 입력 시 onclick 이벤트를 발생합니다. CTRL, ALT, SHIFT 와 다른 키를 조합해서 사용할 수 있습니다.

예제 구현 방법

Edit 컴포넌트와 Button 컴포넌트를 예제 화면과 같이 배치합니다.

아래와 같이 Button 컴포넌트의 onclick 이벤트 함수를 작성합니다.

onclick 이벤트가 발생하면 Edit 컴포넌트에 문자열을 채워줍니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Edit00.set_value('KEY PRESS CHECK');
};

Button 컴포넌트의 defaultbutton, escapebutton 속성값을 true로 설정합니다.

속성창에서 Button 컴포넌트의 hotkey 속성값을 아래와같이 설정합니다.

QuickView(Ctrl + F6)로 실행한 후 Button 컴포넌트에 포커스가 가지 않은 상태에서 ENTER 키나 ESC 키, CTRL+H 입력 시 onclick 이벤트가 어떻게 처리되는지 확인합니다.

간단한 토글 버튼 만들기

물리적인 스위치처럼 버튼 클릭 시 눌러진 상태를 표시할 수 있습니다.

예제

Button 컴포넌트 클릭 시 상태값을 변경해서 다른 스타일이 적용됩니다.

sample_button_02_01

sample_button_08.xfdl

예제에서 사용한 핵심 기능

getSelectStatus, setSelectStatus: getSelectStatus 메소드는 Button 컴포넌트의 Status가 Seleted인지 확인할 수 있고, setSelectStatus 메소드를 사용하면 Button 컴포넌트의 Seleted Status를 설정할 수 있습니다.

toggleSelectStatus: Button 컴포넌트의 Status가 Seleted인 경우에는 상태를 해제하고 Selected가 아닌 경우에는 Selected Status로 설정합니다.

예제 구현 방법

Button 컴포넌트를 예제 화면과 같이 배치합니다.

아래와 같이 첫 번째 Button 컴포넌트의 onclick 이벤트 함수를 작성합니다.

getSelectStatus 메소드로 상태를 확인하고 반환받은 값에 NOT 연산 처리한 값을 setSelectStatus 메소드에 전달합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	obj.setSelectStatus(!obj.getSelectStatus());
};

아래와 같이 두 번째 Button 컴포넌트의 onclick 이벤트 함수를 작성합니다.

toggleSelectStatus 메소드는 첫 번째 Button 컴포넌트의 onclick 이벤트 함수에 작성한 내용을 알아서 처리하는 메소드입니다. 비교를 위해 두 가지 스크립트를 작성했습니다.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	obj.toggleSelectStatus();
};

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

기본 테마에서도 버튼 배경색을 살짝 다르게 표현하고 있는데, 거기에 추가해서 Seleted Status와 아닌 경우 아이콘 이미지를 다르게 표시합니다.

.Button.sample_button_08
{
	-nexa-icon : url('theme://images/chk_WF_Box_O.png');
	-nexa-text-padding : 3px;	
}


.Button.sample_button_08[userstatus=selected]
{
	-nexa-icon : url('theme://images/chk_WF_Box_F.png');	
	-nexa-text-padding : 3px;
}

QuickView(Ctrl + F6)로 실행한 후 Button 컴포넌트 클릭 시 버튼의 상태가 어떻게 바뀌는지 확인합니다.