GroupBox 소개

GroupBox는 시각적으로 영역을 구분하는 데 사용하는 컴포넌트입니다. Div 컴포넌트처럼 그 하위에 UI 요소들을 갖는 것이 아니라 단지 GroupBox 영역에 있는 UI 요소들이 하나의 그룹인 것처럼 보이는 효과를 줍니다.

GroupBox는 테두리 영역에 타이틀을 출력할 수 있는데 그룹 지어진 UI 요소들의 목적을 타이틀로 표현함으로써 그 의미를 명확히 합니다.

사용 예

다음은 Trello라는 일정관리 애플리케이션의 화면입니다. Basics, Intermediate, Advanced라는 타이틀을 갖는 세 영역으로 나누고 관련된 UI 요소들을 배치하고 있습니다. 이런 경우 그룹박스를 사용하면 각 영역 간 구분을 손쉽게 구현할 수 있습니다.

sample_groupbox_01_01

GroupBox 만들기

sample_groupbox_01_01

GroupBox 컴포넌트 생성하기

툴바에서 GroupBox 를 선택한 후, Form 위에 적당한 크기로 드래그하여 생성합니다. 컴포넌트를 선택 한 상태에서 폼 위에 클릭하면 기본 크기로 생성됩니다.

Properties 창에서 text 속성을 "GroupBox"로 설정합니다.

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행합니다. GroupBox는 시각적인 효과를 주는데 목적이 있는 컴포넌트라 어떤 동작을 수행하지 않습니다.

UI 요소 그룹짓기

GroupBox는 화면의 여러 UI 요소들을 하나의 그룹처럼 보이도록 합니다. 실제로 UI 요소들과 연계되진 않고 시각적인 효과만을 줍니다.

예제

다음은 여러 UI 요소들을 하나의 그룹처럼 보이기 위해 GroupBox를 사용해 감싼 모습을 보여줍니다. GroupBox는 UI 요소들에 어떤 영향도 주지 않습니다.

sample_groupbox_02_01

sample_groupbox_02.xfdl

예제에서 사용한 핵심 기능

text: GroupBox의 타이틀을 설정하는 속성입니다.

예제 구현 방법

GroupBox 컴포넌트 생성하기

툴바에서 GroupBox 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 컴포넌트를 선택 한 상태에서 폼 위에 클릭하면 기본 크기로 생성됩니다.

타이틀 설정하기

속성	값
text	GroupBox

UI 요소(컴포넌트) 배치하기

예제와 같이 적절히 컴포넌트를 배치합니다.

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행합니다. 타이틀이 설정된 GroupBox와 각 컴포넌트가 정상적으로 보이는지 확인합니다.

GroupBox 스타일 적용하기

GroupBox 컴포넌트는 가상의 사각형 영역 내에 박스 형태의 groupboxcontents가 배치되어 있고 텍스트를 표시하는 groupboxtitle가 배치되어 있는 구조입니다. 때문에 눈에 보이는 스타일을 지정하기 위해서는 groupboxcontents 또는 groupboxtitle의 스타일을 지정해주어야 합니다.

예제

왼쪽에 배치된 GroupBox는 스타일을 적용한 상태이고 오른쪽은 기본 상태에서 font 속성만 수정한 GroupBox를 표시합니다.

sample_groupbox_02_01

sample_groupbox_03.xfdl

예제에서 사용한 핵심 기능

font: GroupBox 컴포넌트의 font 속성 설정 시에는 컴포넌트 하위의 groupboxtitle에도 적용됩니다. 때문에 컴포넌트에서 font 속성 변경 시 groupboxtitle의 텍스트에 반영됩니다.

예제 구현 방법

GroupBox 컴포넌트 생성하기

화면에 GroupBox 컴포넌트 2개를 배치합니다. 왼쪽에 배치하는 GroupBox 컴포넌트는 Div 컴포넌트를 먼저 배치하고 그 안에 GroupBox 컴포넌트를 배치합니다. GroupBox 컴포넌트는 박스 형태로 구성되어있지만 타이틀을 표시하는 텍스트가 박스 영역과 바깥 영역 중간에 위치하기 때문에 보통은 Form과 박스영역의 배경색을 같게 하고 텍스트 영역의 배경색은 투명으로 처리합니다.

스타일 속성 지정하기

왼쪽 GroupBox 컴포넌트의 cssclass 속성값을 "sample_groupbox_03"로 지정합니다. 오른쪽 GroupBox 컴포넌트는 Font 관련 속성값을 적절하게 수정합니다.

xcss 파일 편집하기

xcss 파일을 열어서 아래 코드를 추가합니다. Advanced 탭에서 선택자를 추가하거나 Text 탭에서 직접 코드값을 입력할 수 있습니다.

.GroupBox.sample_groupbox_03 .groupboxcontents
{
	background : greenyellow;
	-nexa-border : 3px solid violet;
}

.GroupBox.sample_groupbox_03 .groupboxtitle
{
	background : greenyellow;
	-nexa-icon : URL("theme://images/rdo_WF_Radio.png");
}

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행합니다. 지정된 스타일이 처리되었는지 확인합니다.