[XPLATFORM] Chap04_Design

Chap04_01_01_Design-Image의 등록과 사용

 

Theme

- 등록 : ADL>Theme의 images 폴더 

- 사용 : URL('theme://images/imageID.png')

- Themes>default.xtheme 더블 클릭>image 우클릭>insert image file>이미지 파일 선택 등록

- style - background - color - image

 

GlobalVariables

- 등록 : ProjectExplorer>GlobalVariables

- 사용 : URL('imageID')

- GlobalVariables>우클릭>insert GlobalVariables items>images

- style - background - color - image

 

 

서버 폴더

- 등록 : 웹서버의 image 폴더

- 사용 : URL('..\..\images\imageID.png')

- style - background - color - image

 

 

image 폴더를 Project 폴더 안에 복사하기

 

Chap04_02_01_Design-CSS

CSS : 문서(화면)의 전반적인 style 속성을 미리 저장해둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 개발자의 스타일 관련 코딩을 줄여준다.

 

Type Selector : 컴포넌트 별로 지정하는 Selector

 - 생성 : Static

Pseudo Selector : 컴포넌트의 상태, 컴포넌트 마다 다르다.

 - 생성 : Static:mouseover

Class Selector : 필수로 입력하는 Selector

 - 생성 : Static.val_chk 

 - class 이름 지정 : Attribute>information>class : val.chk

ID Selector : 컴포넌트의 ID 값을 지정하는 Selector

 - 생성 : #st_title

 - class 이름 지정 : Attribute>information>id : st_title

Child Selector :컴포넌트가 자식 개체를 사용할 때 제어하는 Selector

 - 생성 : Div>Static (그룹 짓기할 때)

Attribute Selector : 컴포넌트의 속성값을 가지고 제어

 - 생성 : MaskEdit[type="number"]

Universal Selector : 모든 컴포넌트의 스타일시트를 제어

 - 생성 : *>#contextmenu

Grouping : Selector를 여러 개의 컴포넌트에 한번에 지정하는 방법

 - 생성 : Button, Combo, Calendar

 

※ 개발자가 style 시트를 설정하는 건 되도록 하지 않는다.

스타일 시트 생성 : File>New>file>Style Sheet 클릭

스타일 시트를 화면에 적용하거나 해제할 때는 해당하는 화면 파일이 닫혀있어야함. 화면이름 우클릭>insert style 클릭 

색깔 ecececff의 ff는 투명도.

 

//Type Selector
Static
{
	background	: darkgray ;
}

//Pseudo Selector
Static:mouseover
{
	color : red;
}

//Child Selector
Div>Static 
{
	background : #ecececff;
}

//Class Selector
Static.val_chk
{
	color : red;
}

//ID Selector
#st_title
{
	font : 굴림,20,blod;
}

//Attribute Selector
MaskEdit[type="number"]
{
	align : right middle;
}

 

Chap04_03_01_Design-Theme

 

Theme : 이미지와 CSS로 이루어진 파일. 우선권이 제일 낮은 스타일 내용.

XPLATFORM이 가장 마지막에 확인하는 Style 개체이며 Theme안에 모든 컴포넌트에 대한 CSS 정의가 내려있지 않으면 해당 컴포넌트가 Form 표현되지 않으므로 반드시 모든 컴포넌트의 정의가 되어야 한다.

 - 생성 : ADL>Theme

 

Theme의 참조위치 및 우선순위

 

Theme 생성

ADL>Themes 우클릭> ‘New Theme’를 선택

File>New>File>XTheme를 선택

 

Theme 변경

변경할 theme 우클릭>Set as Active Theme 선택 : 변경된 테마 이름이 볼드체로 변경됨