With XPLATFORM, you can apply Theme or CSS and easily change the same project to another with completely different UI style.
Theme and CSS
Theme and CSS are the same in changing style of XPLATFORM, but they are different in that CSS files and the image files used in CSS are included in Theme.
Creating CSS Files
You can create CSS files by clicking on the Standard Toolbar Icon as shown in the [Figure], or select Menu[File – New – File – Style Sheet].
Properties | Description | |
|---|---|---|
1 | File name | File name of Style Sheet to create |
2 | Location | Location of Style Sheet to create |
3 | Insert to ADL | Whether to insert ADL and select ADL to add |
4 | Insert to Form | Whether to insert Form and select Form to add |
CSS File Editor
CSS Editor which edits CSS is composed of Selector, Preview Source Code, and Properties.
‘Selector’ shows all selectors of current CSS document in a Tree form, and assists add/delete function of each selector.
Menu | Icon | Function | |
|---|---|---|---|
1 | Go to Source | Moves to location of source code of selected selector. The same function can be done by double clicking selector. | |
2 | New Selector | Inputs new selector | |
3 | Add Selector | Adds child selector in selected selector. Displays the types of selector that can be added in Popup menu. | |
4 | Delete | Deletes selected selector | |
5 | Rename | Changes the name of selected selector | |
6 | Compress All | Deletes all properties that are not being used | |
7 | Uncompress | Display properties provided by selected selector in CSS | |
8 | Expand | Spread lower Tree Item of selected selector | |
9 | Collapse | Hide lower Tree Item of selected selector |
Below is the New Selector Input Window.
New Selector Input Window is consisted of Selector List, Selector Syntax, and Pseudo List. Selector Syntax operates as below depending on the input value.
Syntax | Description | |
|---|---|---|
1 | Class Selector | Style is applied when class property value of Div tag is same as input value |
2 | ID Selector | Style is applied to only components with same ID with input value |
3 | Attribute Selector | Style is applied to relevant components after reviewing input property name, comparative symbol, and property value Ex1) Text Style is applied only when the component has ‘Text’ property Ex2) Text = Warning Style is applied only when the property value of ‘Text’ is Warning Ex3) Text ~= Warning Style is applied only when the property value or ‘Text’ is separated by spaces and one of them is Warning Ex4) Text |= Wa Style is applied only when the property value of ‘Text’ is separated with hyphens and one of them starts with Wa from the left |
‘With ‘Preview’, you can see the results of applied style beforehand, and through mouse operation, you can check the status such as Pushed, Mouse Over, Focused, and Disabled.
The ‘Source Code’ Window shows the CSS file currently being edited, and developer can edit style and apply it to the file.
Basically, CSS Syntax is composed of Selector and Declaration. Selector decides where to apply declared properties, and declaration defines properties. Properties are divided into property name and property value, and the property name decides which style to apply, and property value defines style details.
Properties Window displays values which developer can input and edit styles, and the contents that are input in the Properties window are automatically updated to Source Code so they can be checked in Preview right away.
Creating Theme
You can create CSS files by clicking on the Standard Toolbar icon, or by selecting Menu [File – New – File – XTheme].
You can enter file name and file location and create Theme file.
Properies | Description | |
|---|---|---|
1 | File name | File name of Theme to create |
2 | Location | File location of Theme to create |
Theme Editor
The composition of Theme Editor, which can make new themes and edit existing themes, is as below.
Properties | Description | |
|---|---|---|
1 | Folder Tree | List of image files and CSS files to include in Theme |
2 | Image Preview | Preview of image file |
3 | New Folder | Add new folder to selected location |
4 | New CSS | Create new CSS |
5 | Insert | Insert new file in the list of selected location |
6 | Delete | Delete selected file from list |
Style Properties Editor
By Style Property Editor which can intuitively enter and modify styles, CSS style of individual components used in Form can be edited. Contents modified in Style Property Editor are applied to Properties Window directly and can be confirmed.
※ When CSS file is modified, Style Property Editor is not supported. The modification should be directly made on source code or in Properties Window.
Text
You can edit component properties that are related to Text.
Properties | Description | |
|---|---|---|
1 | Font | Edits Text font of component. (font property of Properties Window) |
2 | Color | Edits Text Color Style of component. (color property of Properties Window) |
3 | Alignment | Edits Text Align Style of component. (align property of Properties Window) |
Border
You can edit component properties related to Border.
Properties | Description | |
|---|---|---|
1 | Border | Edits Border Style of component. (border property of Properties Window) |
2 | Border Type | Edits Border Type of component. (border type property of Properties Window) |
3 | Focus Border | Edits Focus Border Style of Component. (focus border property of Properties Window) |
Background
You can edit component properties related Background.
Properties | Description | |
|---|---|---|
1 | Color | Edits background color of component. (Background property of Properties Window) |
2 | Image | Edits background image of component. (Background property of Properties Window) |
3 | Gradation | Edits background gradation of component. (Gradation property of Properties Window) |
Style in Gradation is a template which creates gradation by using the defined values of start, end, and position, and it changes the background property of component to ‘@gradation’. If you cancel gradation from style, it restores the background to the previous value.
Appearance
You can edit component properties related to Appearance.
Properties | Description | |
|---|---|---|
1 | Opacity | Edits Opacity Style of component. (Opacity property of Properties Window) |
Effect
You can edit component properties related to Effect.
Properties | Description | |
|---|---|---|
1 | Blur | Edits blur style of component. (Blur property of Properties Window) |
2 | Outerglow | Edits glow style of component. (Glow property of Properties Window) |
3 | Shadow | Edits shadow style of component. (Shadow property of Properties Window) |
Transformation
Properties | Description | |
|---|---|---|
1 | Origin | Component standard coordinate (Transformation[Origin] property of Properties Window) |
2 | Transformation | Rotate: Rotates component clockwise (Transformation[Rotate] property of Properties Window) Flip: Changes top and bottom, left and right of component (Transformation[Flip] property of Properties Window) Skew: Tilts component to one side (Transformation[Skew] property of Properties Window) Scale: Changes component size in proportion to original size (Transformation[Scale] property of Properties Window) Translate: Moves component (Transformation[Translate] property of Properties Window) |