Style (CSS: Cascading Style Sheets) and Theme mean the functions to design the screen element which composes the XLATFORM screen.
The screen elements which can apply Style and Theme are Components, screen Form, Frame, Widget Form, Alert, Confirm, TitleBar, StatusBar, ScrollBar, etc.
Overview of Style / Theme
Style and Theme at XPLATFORM mean to define the design of UI elements shown on the screen. For example of the button, the effect such as its transparency, font, color, shadows, smearing and tilt means to be given to the Component of the button.
Definition of Style and Its Application
Style is defined per Component. Each Component has a property that is applicable for the Style and by setting the Style value for the applicable Property’s Style, Style is defined.
For the definition of Style, Selector is used. Here, it is described with the assumption that there is the prior information about CSS.
The following is the Selector supported by XPLATFORM:
Type Selector : designates the name of the components like “Button”.
Syntax | Name (Element) |
|---|---|
example | Button { color : green; } |
meaning | The color of all the Buttons is defined to green. |
Class Selector : designates the specific Style per Component.
Syntax | .(Period) |
|---|---|
example | Button.BlueButton { color : blue; } |
meaning | By designating class to the specific Button, the color of the applicable Button is defined to blue. |
ID Selector : designates ID for the component like “Button00”.
Syntax | # |
|---|---|
example | Button#Button00 { color : yellow; } |
meaning | Among all of the buttons, the color of the Button whose ID is Button00 is defined to yellow. |
Universal Selector : designates all the Components.
Syntax | *(Asterisk) |
|---|---|
example | *>#contextmenu { background : gray; } |
meaning | The background of PopupMenu for the Component (Edit, MaskEdit, TextArea, etc) which is possible for is defined to gray. |
Descendant Selector : designates the sub-property of the specific Component.
Syntax | Name SubName |
|---|---|
example | Combo background { color : red; } |
meaning | The color of the background of all Combos is defined to red. |
Child Selector : designates the sub-set of all Components.
Syntax | > |
|---|---|
example | Div>Button { color : blue; } |
meaning | The button color in all the Divs is defined to blue. |
A part of Attribute Selector: designates with the comparison of the attribute value for all the Components. In addition, the comparison with the applicable attribute value supports the application of the form“[property=value]”.
Ex. Combo[text] { color : black; }
Combo[text=”CmbSearch”] { color : red; }
Syntax | [] |
|---|---|
example | Button[text=”Search”] { color : red; } |
meaning | When the text value for the specified is “Searh”, the color of the applicable Button is defined to red. |
A part of Pseudo-classes: designates the Selection handling of the information (focused, disabled, mouseover, pushed, etc)which can’t be expressed by using Selector.
Syntax | : |
|---|---|
example | Button:focused { color : black; } |
meaning | When all the Buttons are focused, the color of the applicable is defined to black. |
UI element states pseudo-classes: enabled(default), disabled, focused, mouseover, pushed, selected
Structural pseudo-classes: root, nth-child(), nth-last-child(), first-child, last-child, only-child, empty
Grouping : designates several Selectors which have the same value (declarations) with the name of Component.
Ex. Button, Combo, Calendar { font : Arial,9; }
Syntax | ,(Comma) |
|---|---|
example | Button, Combo, Calendar { font : Arial,9; } |
meaning | The font of Button, Combo, Calendar at all the Buttons is defined to “Arial 9”. |
Definition of Theme
Theme is the form which combines Style and Image.
The application can use only one Theme.
XPLATFORM provides four Theme files like default, black, gray and blue. The applicable Theme can correct the required parts through the Theme of UX-Studio and the Style Editor window. Since Theme has the basic information that is essential at XPLATFORM, the user must select the necessary parts, add, and correct.
When the basic information is deleted or changed, the screen output may have a problem by that. For example, in case that there is not any set for PopupMenu which occurs at the Component (Edit, MaskEdit, TextArea, etc) with the form of Edit like“#contextmenu”, the case that PopupMenu doesn’t come up occurs.
Accordingly, if possible, correct Theme provided basically rather than generate new one and save or copy with the other name for its use.
Registration of Style/Theme and Its Application
The order of design application to UI element
Description | |
|---|---|
1 | Style in Theme which belongs to ADL |
2 | Style which belongs to ADL |
3 | Style which belongs to FDL |
4 | Style of Component in FDL |
The order that Style is applied to Component is ①>②>③>④. Therefore, in case that the duplicated style value is defined, the last style, ④ Style is applied and shown on the screen.
Applicable Target for Style and Theme
Style can be used with the declaration to one Form or in order to be use globally, it can be used by registering at Project (ADL) or by including in Theme.
The applicable target for Style is not only the simple component but also to the various screen elements. The following is the table which represents its applicable target.
The following is the target which is applicable to Style:
kind | The applicable target |
|---|---|
Component (Visible Object) | Button, Calendar, CheckBox, Combo, Div, Edit, GraphicPath, Grid GroupBox, ImageViewer, ListBox, MaskEdit, Menu, Progressbar Radio, Shape, Spin, Splitter, Static, Tab, TextArea |
The screen Frame | Form, WidgetForm, ChildFrame, FrameSet, HFrameSet TabFrame, TileFrameSet, VFrameSet |
others | Alert, ApplicationMenu, Confirm , ScrollBar, StatusBarForm TitleBarForm, ToolTip |
Application of Style
Previously, the overview of Style was mentioned in brief. From now on, the methods for its preparation, application and taking advantages are described.
Generation of Style
In case that Theme doesn’t take advantage at ADL or Style is wanted to give to Form, generate the new one or register the Style file which was prepared previously.
The 1st Stage: Make the new Form. Make a form with New Form and name it as StyleForm.
The 2nd Stage: Generate the new Style file at the made Form. At the made StyleForm, generate one Style as Insert Style and add it with the name of Style as FormStyle.css. When Form is open, Style can’t be generated..
It is the way to generate through MainMenu.
The 3rd Stage: Generate the Style file at ADL. As an ADL Item, generate one Style at ADL and add it with the Style name of ADLStyle.css.
Edition of Style
The way to edit Style is the same as in the Style in Theme, the Style of ADL and the Style of Form.
The Style edition can be done through the Style editor.
Since the Style editor provides Selector List with the form of Tree, add/delete is possible and also the contents edition at the SourceCode window is possible
Since the Style editor provides the Properties windows, input/correction is convenient.
The contents input at the Properties window at that time are reflected immediately to the SourceCode window and possible to check.
The 1st Stage: Register Selector through the Style Editor. Register the generated ADLStyle.css through the edition window to the Button Selectors (Type Selector, Pseudo Selector, Class Selector).
First, register Type Selector
Register Pseudo Selector (mouseover, focused).
Register Class Selector.
The 2nd Stage: Prepare the contents of Selector registered through Style Editor. Prepare the information about the generated Button Selectors (Type Selector, Pseudo Selector, Class Selector).
Button
{
background : @gradation;
border : 1px solid red;
color : yellow;
font : Arial,9,bold ;
gradation : linear 50%,0% #900000 50%,100% #006000;
}
…
Button.BlueButton
{
background : @gradation;
border : 1px solid blue;
color : blue;
font : Arial,10,bold;
gradation : linear 50%,0% #000040 50%,100% #ffff90;
}Application of Style
By generating Button at Form and according to the Style at ADL and the Style at Form, try to reflect them to the Design.
The 1st Stage: Make the new Form. Make Form with New Form and name its name to StyleForm. (Use the Form made at the stage of “Generation of Style”.)
The 2nd Stage: By generating Button, check the application of Style. According to the Style prepared at ADL with the preparation of Button at StyleForm, check if Style is applied or not.
The 3rd Stage: Execute Form and check if Pseudo Selector of Button is applied or not. Execute Form of Pseudo Selector (mouseover, focused) which is set at ADLStyle with QuickView and check if that is applied or not.
The 4th Stage: Edit FormStyle which was generated previously at Form and check it s application. Among Pseudo Selectors prepared at FormStyle, set the focused information with difference to ADLStyle, execute them with QuickView and check.
Application of Style Class
Express differently by using Class Selector registered to apply each of different Style to the same component at the same Form.
The 1st Stage: Edit Class Selector which generates at ADLStyle and check its application. Edit Class Selector(BlueButton) at ADLStyle.
Button.BlueButton
{
background : @gradation;
border : 1px solid blue;
color : blue;
font : Arial,10,bold;
gradation : linear 50%,0% #000040 50%,100% #ffff90;
}The 2nd Stage: Check the application of Style by using class Property at the button of Form. Set BlueButton which is Class Selector prepared at ADLStyle in class Property of Form and check the application of Style.
Application of Theme
The overview of Theme was mentioned previously in brief. From now on, the methods about preparation, application and use of Theme are described.
Generation of Theme
The way to generate Theme is to select Theme previously prepared through Insert Theme (Insert ADL Item) and to register it.
The Theme editor can add or delete Image and Style files and in case of Style, management is possible through the Style editor.
In case that Style is changed, Theme must be saved as well.
The 1st Stage: Make a new Theme. Generate Theme additionally to ADL by adding Item (but it is not recommended.).
The 2nd Stage: Edit Theme basically and save with the new name. Open the black.xtheme file and save to example.xtheme through the Theme editor.
Edition of Theme
The Theme file should be edited because their Image and Style is divided each other. For the generation of Folder and of Style or adding/deleting of Image and Style, the lower button at Theme Treeview of the Theme editor is used.
The 1st Stage: Check the contents of Theme Treeviewand edit the Style file. Open example.xtheme which is the Theme file and check Image List and the Style (theme.css) file through Theme Treeview. Then edit the Style file through the Style editor.
The 2nd Stage: Through the Theme editor, work for the generation/addition/deletion of Image, Folder and Style. Through the lowest button of Theme Treeview, edit the contents of Theme.
menu | function |
|---|---|
New Folder | Generates the new folder in Theme. |
New CSS | Generates the new Style file in Theme. |
Insert | Add the Image or Style file. |
Delete | Delete the selected file at Treeview. |
Application of Theme
It can be checked that the look of Image and Style of the default Theme provided basically are reflected and they are changed to Set Active and then reflected to Component.
The preparation will be done based on Combo Component.
The 1st Stage: Check Combo Style of default Theme. Open StyleForm, generate Combo before change and check Style.
The 2nd Stage: Correct the information about Style of default Theme. Correct default.xtheme which is Active through Theme Editor. Open theme.css and correct the information about Combo Component.
The 3rd Stage: Check the correction of the Style information about default Theme at Form. Check the change of Style of Combo Component at StyleForm.
The 4th Stage: Change Active Theme to example Theme and check the change. Make example Theme newly generated active with Set Active Theme and check the change of Style of StyleForm.
Deploy Theme
Existing theme has a disadvantage of big size, as image and style are combined in the theme. Deploy Theme is a function to reduce theme size by separating image from an existing xtheme. Image can be selected and then separated. This separated xtheme file is called “Deploy Theme” and the image “Extern File”. This function is supported in XPLATFORM Runtime, HTML5, Hybrid as well.
Selecting Image to be separated as Extern File
Image to be separated as Extern File can be selected through CheckBox.
Images in UnCheck status in CheckBox only is separated as extern file and images in check status are included in theme as the existing method. Also, each image in UnCheck status is called Extern Item.
On themes basically provided such as Default.xthememe, Checkbox is not appeared. In other words, basically provided themes cannot separate image from them.
CheckBox can be selected by Space Bar as well. Multi Select is also available and changed fiducially to the first selected item status.
CheckBox can be selected by Popup Menu which can be used by a right click of a mouse. Muti Selection is also available. Set Extern Menu is UnCheck status while Unset Extern Menu is Check status.
Save
Deploy theme is saved by clicking Save button as the existing save method. When saving, Deploy Theme and Extern File’s saving contents and path are following;
Classification | Contents | Path |
|---|---|---|
Deploy Theme | Themes except Extern Files | Same as the existing path and file name of theme Ex) When the existing theme is C:\a.xtheme it is saved in C:\a.xtheme |
Extern File | Separated Images | Existing theme path/images/separated images (File names are same) Ex) When existing theme is separated in C:\theme\a.xtheme and the image to be separated is b.png It is saved as C:\a\images\b.png. |
Deploy Theme Display
When it is saved with extern item Project Explorer appears Deploy Theme mark while when saved without extern item, the mark disappears.