With Nexacro Platform, you can apply a theme or CSS and easily change the UI style of the project.
Themes and CSS
CSS files and the image files used by the CSS files are included in the theme definition.
Creating CSS Files
Create a CSS file by clicking on the Standard Toolbar Icon, or by selecting [File – New – File – Style Sheet].
Style Sheet Toolbar
Fill in the information for the new CSS on the pop-up.
Create a new Cascading Style Sheet
CSS Properties | Description |
|---|---|
File name | File name of style sheet |
Location | Location of style sheet |
Insert to ADL | Whether to insert a reference to the CSS into the ADL. If yes, ADL it should be added to |
Insert to Form | Whether to insert a reference to the CSS into a Form If yes, Form it should be added to |
CSS File Editor
The CSS Editor is composed of the Selector, Preview Source Code, and Properties windows.
The Selector window shows all selectors of the current CSS document in a tree form. The context menu includes options for managing each selector.
Selector[Popup Menu]
Menu Function | Description |
|---|---|
Go to Source | Moves to the location of the source code for the selected selector. The same function can be performed by double-clicking the selector. |
New Selector | Creates a new selector |
Add Selector | Adds a child selector to the selected selector. |
Delete | Deletes the selected selector |
Rename | Changes the name of the selected selector |
Compress All | Deletes all properties that are not being used |
Uncompress | Display properties provided by selected selector in CSS |
Expand | Displays selected selector detail |
Collapse | Hides selected selector detail |
The following figure shows an input window for a new selector. You can designate styles for selected elements or set styles for an item with a specific ID value.
New Selector
In the preview window, you can see the results of applying a style. Using the mouse, you test functionality such as Pushed, Mouse Over, Focused, and Disabled.
CSS Editor[Preview]
Using the Source Code window, the developer can edit the style and apply it to the file.
Basically, CSS syntax is composed of the selector and declaration. The 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.
CSS Editor[Syntax]
You can modify the style values on the Properties window. Your changes are automatically updated in the source code and can be tested in the Preview window.
CSS Editor[Properties]
Creating a Theme
Create a theme by clicking on the Standard Toolbar icon, or by selecting [File – New – File – XTheme].
Theme Toolbar
Enter the file name and file location in the pop-up window.
Create a new XTheme file
Properies | Description |
|---|---|
File name | File name of the theme |
Location | Location of the theme file |
Theme Editor
The Theme Editor, which can create new themes and edit existing themes, is shown below:
Theme Editor
Properties | Description | |
|---|---|---|
1 | Folder Tree | List of image files and CSS files to include in the theme |
2 | Image Preview | Preview of image file |
3 | New Folder | Adds a new folder to the selected location |
4 | Insert | Inserts a new file in the selected location |
5 | Delete | Deletes the selected file from list |
Style Property Editor
The Style Property Editor allows you to control the style of individual components. Changes are applied directly to the Properties window.
When a CSS file is modified, the Style Property Editor is not supported. Modifications should be made directly to the source code or in Properties Window.
Text
The following figure and table identify the component text properties can be modified.
Style Property Editor[Text]
Properties | Description |
|---|---|
Font | Font used for text. (font property of Properties window) |
Color | The color of the text. (color property of Properties window) |
Alignment | Controls the text alignment style vertical (top, middle, or bottom) and horizontal (left, center, or right). (align property of Properties window) |
Border
The following figure and table identifies the border properties that can be modified:
Style Property Editor[Border]
Properties | Properties |
|---|---|
Border | Border style for a component. (border property of Properties window) |
Border Type | Border type for a component. (border type property of Properties window) |
Focus Border | Focus border style for a component. (focus border property of Properties window) |
Background
The following figure and table identifies the background properties that can be edited.
Style Property Editor[Background]
Properties | Description |
|---|---|
Color | Background color of the component. (Background property of Properties window) |
Image | Background image of the component. (Background property of Properties window) |
Gradation | Background gradation of the 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. It changes the background property of the component to "@gradation". If you cancel gradation from style, the background will be restored to its previous setting.
Appearance
You can edit the transparency / opacity property of a component.
Style Property Editor[Appearance]
Properties | Description |
|---|---|
Opacity | Edits Opacity style of component. (Opacity property of Properties window) |
The following figure and table identifies the Transformation properties you can edit.