hidden 속성 가이드

컴포넌트 hidden 기능에 대한 예시 화면이다.

컴포넌트는 표시/숨김 상태를 가진다.

컨테이너성 컴포넌트(패널, 탭 등등)인 경우에는, 내부 컴포넌트에도 표시/숨김이 반영되지만, 내부 컴포넌트의 표시/숨김 속성 정보는 유지된다.

화면 영영이 아닌, 화면 숨김 영역에 생성된 컴포넌트는 hidden 속성을 true로 지정하지 않아도 화면 로드시 숨김 처리된다.

관련 속성으로 hidden, designtime_only(텍스트 컴포넌트), always_hidden(그리드 컴포넌트)이 있다.

관련 API로 getvisible, setvisible, gethiddenareavisible, sethiddenareavisible이 있다.

템플릿 위치: /HTML5/COMPONENT/COMMON/hidden_basic

템플릿 파일

• hidden_basic.xml
• hidden_basic.js
• 새창으로 실행

// 화면 로드 이벤트
function screen_on_load()
{
	var i, tab_count;

	// 탭 아이템 정보를 콤보에 로드
	tab_item_count = tab_visible.gettabitemcount();
	for (i = 0; i < tab_item_count; i++) {
		cbo_tabitem.addstring(i + ":" + tab_visible.gettabitemtext(i));
	}

	cbo_tabitem.setselectedindex(1);
}

// 버튼 이벤트
function btn_event_common_on_click(objInst)
{
	screen.alert("버튼 텍스트 = " + objInst.gettext());
}

// 버튼 "setvisible" 버튼 이벤트
function btn_setvisible_on_click(objInst)
{
	// 버튼 숨김 토글 처리
	btn_event.setvisible(!btn_event.getvisible());
}

// 패널 "setvisible" 버튼 이벤트
function btn_setvisible_panel_on_click(objInst)
{
	// 패널 숨김 토글 처리
	pnl_visible.setvisible(!pnl_visible.getvisible());
}

// 탭 "setvisible" 버튼 이벤트
function btn_setvisible_tab_on_click(objInst)
{
	// 탭 숨김 토글 처리
	tab_visible.setvisible(!tab_visible.getvisible());
}

// 그리드 "setvisible" 버튼 이벤트
function btn_setvisible_grid_on_click(objInst)
{
	// 그리드 숨김 토글 처리
	grd_always_hidden.setvisible(!grd_always_hidden.getvisible());
}

// "settabitemenable" 버튼 이벤트
function btn_setvisible_tabitem_on_click(objInst)
{
	var tab_index;

	// 대상 탭 아이템 인덱스를 구함
	tab_index = cbo_tabitem.getselectedcode();

	// 탭 아이템 숨김 토글 처리
	tab_visible.settabitemvisible(tab_index, !tab_visible.gettabitemvisible(tab_index));
}

// 패널 내 버튼 "setenable" 버튼 이벤트
function btn_setenable_button_in_panel_on_click(objInst)
{
	// 패널 enable 상태 토글 처리
	btn_in_panel.setvisible(!btn_in_panel.getvisible());
}

// "sethiddenareavisible" 버튼 이벤트
function btn_sethiddenareavisible_on_click(objInst)
{
	// 화면 숨김 영역에 표시된 컴폰넌트 표시 토글 처리
	screen.sethiddenareavisible(!screen.gethiddenareavisible());
}