디자인는 2가지 방법으로 적용이 가능합니다. 컴퍼넌트에 직접 Style 속성을 변경하는 방법과 Style 파일을 이용하여 적용하는 방법이 있습니다. Style 파일을 이용하는 방법은 컴퍼넌트를 직접 수정할 필요가 없고, 차후 변경이 용이한 점에 있어서 장점을 가지고 있습니다. Style 파일을 이용하여 디자인을 적용하는 방법을 배웁니다.

이미지 파일 추가하기

화면을 디자인하기 위해서는 많은 이미지 파일이 필요합니다. 프로젝트에서 이미지 파일을 사용하기 위해서는 프로젝트 디렉토리 내에 이미지를 위치시키고, 서비스 그룹 등록이 필요합니다. 서비스 그룹 등록이 필요한 이유는 XPLATFORM HTML5 프로젝트에서는 서비스 그룹이 등록된 디렉토리 내의 파일만이 HTML5 서버로 전송되어 사용이 가능해집니다.

이미지 파일 위치시키기

이미지 파일들을 프로젝트 내의 적당한 디렉토리에 위치시킵니다. 프로젝트 디렉토리 밑에 “images” 디렉토리를 만들고 이미지들을 복사합니다.

서비스 그룹 등록하기

프로젝트의 “TypeDefinition”을 더블클릭하여 “Edit TypeDefinition” 창을 띄웁니다.

“Edit TypeDefinition” 창의 “Add” 버튼을 클릭하여 “Add Service Group” 창을 띄운 후 값을 입력합니다.

“Add Service Group” 창에서 사용한 옵션을 다음과 같습니다.

Global 이미지 등록하기

프로젝트의 GlobalVariables를 마우스 우측 클릭하여 “Insert GlobalVariables Item” “Image”를 선택합니다.

프로젝트 내의 Global 이미지 등록이 필요한 이미지들을 선택합니다.

이미지 선택이 완료되면 GlobalVariables에 선택한 이미지가 파일명의 확장자를 제외한 동일한 이름으로 추가됩니다. 프로젝트 내에서 해당 이름으로 참조가 가능합니다.

Style 파일 작성하기

Style 파일 추가하기

프로젝트의 ADL을 마우스 우측 클릭하여 “Insert ADL Item” “Style”를 선택합니다. ADL에 Style 파일을 추가하는 경우에는 프로젝트 전체에 영향이 미친다.

적당한 Style 파일명을 입력합니다.

Style 파일 작성하기

컴퍼넌트의 Style 지정은 3가지 방법으로 가능합니다.

1. 컴퍼넌트 Type별 지정 : 컴퍼넌트 Type이 동일한 컴퍼넌트는 모두 적용

2. class별 지정 : 동일한 컴퍼넌트 Type과 동일한 class가 지정된 컴퍼넌트 적용

3. id별 지정 : 동일한 컴퍼넌트 Type과 동일한 id가 지정된 컴퍼넌트 적용

또한 컴퍼넌트의 상태를 의미하는 Pseudo는 5가지를 지원합니다. 각각의 상태에 따라 별도의 Style을 지정할 수 있습니다.

다음은 예제 Style입니다. 각 컴퍼넌트에서 설정할 수 있는 Style 속성들에 대해서는 “도움말(Help)”를 참조하십시오.

Static
{
	font: Malgun Gothic,9,antialias;
}

Button
{
	font: Malgun Gothic,9,antialias;
}

Edit
{
	font: Malgun Gothic,9,antialias;
	border: 1px solid #cecbce;
}

TextArea
{
	font: Malgun Gothic,9,antialias;
}

Combo
{
	font: Malgun Gothic,9,antialias;
	itembackground: #ffffff;
}

Combo:mouseover
{
	border: 1px solid #00deff;
	itemcolor: #ffffff;
	itembackground: #1d77c3;
}

Combo>#dropbutton
{
	background: transparent URL('ComboBtn') center middle no-repeat ;
	border: 0px none #808080;
	focusborder: 0px none #ffffff;
}

Grid
{
	font: Malgun Gothic,9,antialias;
	border: 1px solid #c0c9f1;
}

Grid>#head
{
	cellcolor: #5b6392;
	cellbackground: #e9edff;
	cellfont: Malgun Gothic,9,antialias;
	cellline: 1px solid #c0c9f1;
}

Grid>#body
{
	cellcolor: #666666;
	cellcolor2: #666666;
	cellbackground: #ffffff;
	cellbackground2: #f9f9f9;
	cellfont: Malgun Gothic,9,antialias;
	cellfont2: Malgun Gothic,9,antialias;
	cellline: 1px solid #c0c9f1;
	selectcolor: #5259a3;
	selectbackground: #f2efe0;
	selectfont: Malgun Gothic,9,bold antialias;
}

Menu
{
	color: #ffffff;
	background : URL('MenuBg') repeat;
	font: Malgun Gothic,9,bold antialias;
	border: 1px solid #1d77c2;
	itemfont: Malgun Gothic,9,bold antialias;
	popupcolor : #3c0db2;
	popupbackground : #ffffff;
	popupborder: 1px solid #1d77c2;
	popupfont: Malgun Gothic,9,bold antialias;
}

Static.title
{
	color: #001863;
	font: Malgun Gothic,13,bold;
}

Button.command
{
	background : URL('CommandBtn_Nor');
	border: 0px none #808080;
	padding: 0px 0px 0px 0px;
}

Button.command:mouseover
{
	background : URL('CommandBtn_Ove');
	border: 0px none #808080;
}

Button.command:pushed
{
	background : URL('CommandBtn_Pus');
	border: 0px none #808080;
}

Div.command
{
	border: 2px solid #cabef0;
}

Static.detail
{
	color: #5b6392;
	background: #eaedff;
	font: Malgun Gothic,9,bold;
	border: 1px solid #c0c9f1;
}

Div.detail
{
	border: 1px solid #c0c9f1;
}

Static.menu
{
	color: #ffffff;
	background: #958ed8;
	font: Malgun Gothic,10,bold;
	cursor: pointer;
}

Static.menu:mouseover
{
	background: #4c44a1;
}

Div.menu
{
	border: 4px solid #958ed8;
}

Div.main
{
	border: 1px solid #cabef0;
}

컴퍼넌트의 class 지정하기

컴퍼넌트의 class 지정하기

컴퍼넌트의 class 별로 Style을 작성한 경우에는 해당 컴퍼넌트가 디자인이 적용될 수 있도록 class 속성의 값을 지정해야 합니다.

컴퍼넌트의 class 속성을 지정할 컴퍼넌트는 다음과 같습니다.

컴파일 및 실행

HTML5메뉴 중 Compile File 및 QucickView메뉴를 이용한 실행화면입니다.