Design can be applied with 2 methods. The first method is to revise directly Style properties at composition, and the secone method is to apply by using Style files. The method using Style files does not need to modify composition directly and has adventages in easy later revise. The method to apply design using Style files will be introduced.

Adding Image Files

In order to design forms, many image files are required. For using image files in project, it is required to place image within project directory and to register service group. The reason to register service group is to make possible to use by files within the directory registered by service group in XPLATFORM HTML5 project being sent to HTML5 server.

Placing Image Files

Place image files at appropriate directory within project. Create “images” directory below project directory and then, copy images.

Registering Service Group

Show “Edit TypeDefinition” window up by double-clicking “TypeDefinition” of the project.

Enter the value after show “Add Service Group” window up by double-clicking “Add” button in “Edit TypeDefinition” window.

Options used in “Add Service Group” windows are as follows:

Registering Global Images

Select “Insert GlobalVariables Item” “Image” by right clicking GlobalVariables of the prorject.

Select images requiring Global image registration within the project.

Once completing image selection, images selected at GlobalVariables with the same name excepting the extension of file names. Within project, it is possible to refer with applicable names.

Creating Style Files

Adding Style Files

Select “Insert ADL Item” “Style” by clicking the right side of ADL mouse for project. If adding Style files to ADL, it applied to the entire project.

Enter the appropriate Syte File names.

Creating Style Files

There are 3 possible methods to specifiy composition sytles.

1. Specifying per composition type: Applicable to all equal composition type

2. Specifying per class: Applicable to all equal type of composition and to all composition with speicified eaqual class.

3. Specifying per id: Applicable to equal composition type and to composition with speicified equal id.

Pseudo representing the status of composition supports 5. According to each status, separate sytle can be specified.

The following is the example of Style. Refer to “Help” for style properties which can be set up in each composition.

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;
}

Specifying Component Class

Specifying Component Class

If creating style per component class, it is necessary to specifiy the value of class for applicable composition being applied by design.

Components which speicify its class properties are as follows:

Compiling and Execution

Display of execution of Compile File and QuickView menus in HTML5 menu.