guide:component:radiogroup:radiogroup_basic [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 라디오그룹 기본 가이드 ======

이 화면은 라디오그룹 컴포넌트에 대한 샘플 화면이다.

라디오그룹 컴포넌트는 라디오버튼을 여러개 합쳐놓은 컴포넌트이다.

아이템은 수평방향 또는 수직방향으로 나열할 수 있다.

아이템의 너비(높이)는 라디오그룹의 너비(높이)를 아이템개수로 균등분할하여 표시된다.

관련 속성으로 item_dir, radio_horzalign, radio_vertalign, text_horzalign, text_vertalign, column_count, row_count, picklist_style, text_wordbreak, text_wordellipsis가 있다.

관련 API로 getitemdir, setitemdir, getradiohorzalign, setradiohorzalign, getradiovertalign, setradiovertalign, gettexthorzalign, settexthorzalign,

gettextvertalign, settextvertalign, getcolumncount, setcolumncount, getrowcount, setrowcount, getpickliststyle, setpickliststyle, getwordbreak,

setwordbreak, getwordellipsis, setwordellipsis가 있다.

===== 예시 =====

템플릿 위치: /HTML5/COMPONENT/RADIOGROUP/radiogroup_basic

템플릿 파일
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/RADIOGROUP/radiogroup_basic.xml|radiogroup_basic.xml]]
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/RADIOGROUP/radiogroup_basic.js|radiogroup_basic.js]]
  * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/RADIOGROUP/radiogroup_basic|새창으로 실행]]

<php>
echo '<html>';
echo '<iframe src="';
echo $conf['plugin']['xf5']['xf5projecthome'], 'template/template.html?';
echo 'xframe_screen_url=/HTML5/COMPONENT/RADIOGROUP/radiogroup_basic"';
echo ' class="_xf5_iframe"';
echo ' style="';
echo $conf['plugin']['xf5']['xf5iframestyle'];
echo '">';
echo '</iframe>';
echo '</html>';
</php>

==== 화면 스크립트 ====

<sxh javascript>
var arrRadioAlign = [];
var arrTextAlign = [];

function screen_on_load()
{
	radiogroup04.addstring("data01:comment01");
	radiogroup04.addstring("data02:comment02");
	radiogroup04.addstring("data03:comment03");


	arrRadioAlign = [tg_left_top,	tg_center_top,	tg_right_top,
					 tg_left_center, tg_center_center, tg_right_center,
					 tg_left_bottom, tg_center_bottom, tg_right_bottom];
	arrRadioAlign[3].setstate(true);
	arrTextAlign = [tg_left_top_text,	tg_center_top_text,	tg_right_top_text,
					 tg_left_center_text, tg_center_center_text, tg_right_center_text,
					 tg_left_bottom_text, tg_center_bottom_text, tg_right_bottom_text];
	arrTextAlign[3].setstate(true);
}

function tg_radio_align_on_click(objInst, bState)
{
	var nHAlign, nVAlign;
	for(var i=0; i<arrRadioAlign.length; i++)
	{
		if (arrRadioAlign[i] == objInst)
		{
			arrRadioAlign[i].setstate(true);
			nHAlign = parseInt(arrRadioAlign[i].gettext().substr(0,1), 10);
			nVAlign = parseInt(arrRadioAlign[i].gettext().substr(1,1), 10);

		}
		else
		{
			arrRadioAlign[i].setstate(false);
		}
	}

	radiogroup_align.setradiohorzalign(nHAlign);
	radiogroup_align.setradiovertalign(nVAlign);
}

function tg_text_align_on_click(objInst, bState)
{
	var nHAlign, nVAlign;
	for(var i=0; i<arrTextAlign.length; i++)
	{
		if (arrTextAlign[i] == objInst)
		{
			arrTextAlign[i].setstate(true);
			nHAlign = parseInt(arrTextAlign[i].gettext().substr(0,1), 10);
			nVAlign = parseInt(arrTextAlign[i].gettext().substr(1,1), 10);

		}
		else
		{
			arrTextAlign[i].setstate(false);
		}
	}

	radiogroup_align.settexthorzalign(nHAlign);
	radiogroup_align.settextvertalign(nVAlign);
}

function radiogroup01_on_itemchange(objInst, prev_value, curr_value, event_type)
{
	var strevent = "unknown";
	if (event_type == 1) { strevent = "user"; }
	else if (event_type == 2) { strevent = "api"; }
	else if (event_type == 3) { strevent = "xdataset"; }
	strevent += " (" + event_type + ")";

	console.log("on_itemchange [" + prev_value + "] => [" + curr_value + "] by " + strevent);
}

function radiogroup04_on_itemchange(objInst, prev_value, curr_value, event_type)
{
	var strevent = "unknown";
	if (event_type == 1) { strevent = "user"; }
	else if (event_type == 2) { strevent = "api"; }
	else if (event_type == 3) { strevent = "xdataset"; }
	strevent += " (" + event_type + ")";

	console.log("on_itemchange [" + prev_value + "] => [" + curr_value + "] by " + strevent);
}
</sxh>