Radio 소개

Radio 컴포넌트는 선택할 수 있는 항목 중 하나만 선택할 수 있는 컴포넌트입니다. 자동차에 내장된 라디오는 특정 방송을 쉽게 선택할 수 있도록 버튼을 제공했는데 두 개 이상의 버튼이 눌러지지 않도록 버튼을 누르면 이미 눌린 버튼은 해제되도록 구성됐습니다. 이런 물리적인 형태를 사용자 인터페이스로 옮겨놓은 것이 Radio 컴포넌트입니다.

CheckBox 컴포넌트는 두 개 이상의 항목을 선택할 수 있지만, Radio 컴포넌트는 한 개만 선택할 수 있습니다.

사용 예

항목을 선택하는 경우에 선택할 수 있는 항목이 하나인지 아니면 두 개 이상인지에 따라 Radio 컴포넌트와 CheckBox 컴포넌트를 사용합니다.

Radio 만들기

툴바에서 Radio를 선택한 후, Form 위에 드래그 앤 드롭해 생성합니다. 드래그 앤 드롭으로 기본 모습이 만들어지는 다른 컴포넌트와 달리 Radio 컴포넌트는 데이터를 설정해주어야 모습을 보입니다.

화면에 배치된 Radio 컴포넌트를 선택하고 속성창에서 innerdataset 항목에 있는 버튼을 클릭합니다. innerdataset 편집창이 열리면 codecolumn 항목에는 항목 선택 시 처리할 코드값을 입력하고 datacolumn 항목에는 화면에 보일 텍스트를 입력합니다.

컴포넌트를 배치하고 innerdataset 속성값만 설정했다면 항목이 선택되지 않은 상태로 초기화됩니다.

QuickView(Ctrl + F6)로 실행합니다. 컴포넌트를 배치하고 innerdataset 속성값만 설정했다면 항목이 선택되지 않은 상태로 초기화됩니다.

기본값 설정하기

Radio 컴포넌트의 기능은 사용자가 원하는 항목을 선택하게 하는 것이지만 많은 사용자가 선택하는 항목이 있다면 기본값으로 미리 선택해놓기도 합니다.

예제

실행 시 두 개 항목 중 지정된 항목을 선택된 상태로 표시합니다. 기본값 설정 상태는 넥사크로 스튜디오에서도 확인할 수 있습니다.

sample_radio_01.xfdl

예제에서 사용한 핵심 기능

index

Radio 컴포넌트의 항목 중 선택된 아이템의 인덱스를 갖는 속성입니다. 첫 번째 데이터는 0부터 시작합니다. default 값은 -1입니다. 속성값이 -1인 경우는 선택된 아이템이 없는 상태를 의미합니다.

예제 구현 방법

Radio 컴포넌트를 예제 화면과 같이 배치합니다. innerdataset 속성값은 Radio 만들기 항목에서 작성한 값을 사용합니다.

index 속성값을 설정합니다. 첫 번째 값을 기본값으로 설정하고자 한다면 "0"을 입력하고 두 번째 값을 기본값으로 설정하고자 한다면 "1"을 입력합니다.

QuickView(Ctrl + F6)로 실행한 후 선택된 값을 확인합니다.

가로 방향으로 나열하기

Radio 컴포넌트의 default 설정은 세로 방향으로 아이템을 나열합니다. 하지만 화면을 구성하는 형식에 따라 Radio 컴포넌트의 아이템을 세로 또는 가로로 나열하는 요구사항이 있을 수 있습니다. 이번 예제에서는 Radio 컴포넌트의 아이템이 화면에 나열되는 여러 옵션을 살펴봅니다.

예제

Radio 컴포넌트에 10개의 데이터를 설정하고 방향과 화면에 표시되는 column과 row의 숫자를 변경할 수 있습니다.

sample_radio_02.xfdl

예제에서 사용한 핵심 기능

direction

화면에서 아이템(데이터)이 표시되는 방향을 지정합니다. default 값은 "horizontal"입니다. direction 속성에 대한 오해 중 하나가 innerdataset을 설정하고 화면에 표시했을 때 세로 방향으로 데이터가 보이는데 왜 default 값은 "horizontal"이냐는 것입니다. 해당 속성의 정의가 Radio 컴포넌트의 방향이 아니라 아이템이 표시되는 방향을 지정하기 때문입니다. 아래 예제를 보면 좀 더 이해가 빠를 겁니다. columncount 속성값은 3이고 direction 속성값만 변경했습니다.

columncount, rowcount

columncount는 한 행에 표시되는 아이템의 개수고 rowcount는 한 열에 표시되는 아이템의 개수입니다.

예제 구현 방법

Edit. Static, Button, Radio 컴포넌트를 예제 화면과 같이 배치합니다. Radio 컴포넌트의 innerdataset 속성값은 각각 아래와 같습니다.

과일 목록을 출력하는 Radio 컴포넌트(fruit list)의 innerdataset 속성값은 각각 아래와 같습니다.

direction을 설정하는 Radio 컴포넌트(direction)의 innerdataset 속성값은 각각 아래와 같습니다.

Button 컴포넌트를 선택한 후 onclick 이벤트 함수를 작성합니다. Button 컴포넌트 클릭 시 Edit 컴포넌트에 입력한 속성값과 Radio 컴포넌트에서 선택된 값을 Radio 컴포넌트에 적용합니다.

this.btnChange_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(this.radioDirection.value != null)
	{
		this.radioValue.set_direction(this.radioDirection.value);
	}
	if(this.editRowCount.value != null)
	{
		this.radioValue.set_rowcount(this.editRowCount.value);
	}
	if(this.editColumnCount.value != null)
	{
		this.radioValue.set_columncount(this.editColumnCount.value);
	}
};

QuickView(Ctrl + F6)로 실행한 후 선택된 값을 확인합니다. 입력값에 따라 Radio 컴포넌트의 아이템이 다르게 표시됩니다.

innerdataset 항목 추가하기

innerdataset 속성값으로 지정된 데이터를 추가하는 방법을 살펴봅니다.

예제

최초 실행 시 3개의 데이터가 지정되어 있습니다. Edit 컴포넌트에 값을 입력하고 버튼 클릭 시 innerdataset 항목으로 반영됩니다.

sample_radio_03.xfdl

예제에서 사용한 핵심 기능

getInnerDataset

innerdataset 속성에 설정된 Dataset 오브젝트를 반환합니다. Dataset 오브젝트의 속성이나 메소드는 그대로 사용합니다.

예제 구현 방법

Radio 컴포넌트를 예제 화면과 같이 배치합니다. innerdataset 속성값은 아래와 같이 지정합니다.

innerdataset 데이터가 추가되면 radio 컴포넌트의 크기가 같이 커져야 합니다. 그렇지 않으면 추가된 데이터가 보이지 않을 수 있습니다. radio 컴포넌트를 선택하고 fittocontents 속성값을 "height"로 변경합니다.

Edit 컴포넌트와 Button 컴포넌트를 배치합니다. 입력된 문자열을 innerdataset 데이터로 추가합니다. 데이터를 추가할 인덱스 파라미터는 현재 innerdataset의 rowcount를 지정합니다. 데이터가 추가되면 fittocontents 속성으로 지정된 radio 컴포넌트의 크기 변경을 처리하기 위해 resetScroll 메소드를 실행합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var rtn = this.Radio00.getInnerDataset();
	var nindex = rtn.rowcount;
	rtn.insertRow(nindex);
	rtn.setColumn(nindex, "codecolumn", this.Edit00.value);
	rtn.setColumn(nindex, "datacolumn", this.Edit00.value);
	this.resetScroll();
};

QuickView(Ctrl + F6)로 실행한 후 값을 입력해 innerdataset을 추가합니다.