What your application UI looks like is dependent on the styles and themes you incorporate into the various Nexacro Platform screen elements.

Overview of Style / Theme

Styles and themes on Nexacro Platform define the design of UI elements shown on your screen. For example, you can take a simple button graphic and modify its transparency, font, color, shadows, smearing and tilt. This is all done using the style and theme properties.

Definition and Application of Style

Each component has properties associated with styles. You can modify the corresponding values.

Button
{
     color : "red";
}
Static
{
     color : "blue";
}

Selectors

Selectors are used to define styles. Given that should already have background information about CSS, this section describes the selectors.

The following selectors are supported on Nexacro Platform:

Basic Selector

Type Selector, Class Selector, ID Selector, Child Selector

Others

Grouping, Pseudo-Classes

Type Selector

The Type selector designates a component name such as “Button”.

Class Selector

This selector applies styles to items designated as certain classes.

<Button id="Button00" text="Button00" left="50" top="20" width="100" height="40"   cssclass="BlueButton"/>

ID Selector

This selector designates the ID for a component such as “Button00”.

<Button id="Button01" text="Button00" left="50" top="20" width="100" height="40"/>

Child Selector

The Child selector designates the subset of all components.

Pseudo-Classes

This type of selector designates state information that cannot be designated with the other selectors:

• UI element states pseudo-classes

  enabled(default), disabled, focused, mouseover, pushed, selected, readonly

• Structural pseudo-classes

  root, nth-child(), nth-last-child(), first-child, last-child, only-child, empty

Grouping

This type of selector designates several selectors which have the same value (declarations) with the name of the component.

Definition of Theme

Themes are the combination of styles and images.

Nexacro Platform provides four theme files: default, black, gray and blue.

The provided themes can be modified using the theme/style editor on Nexacro Studio. A theme can also be saved as another name.

Since the themes have the basic information essential on Nexacro Platform, you should modify or add only necessary parts.

Deleting or modifying the basic information may cause a problem when you try to print the screen. For example, if it is not set to display the list such as "#combolist", a combo component will not work properly when you unfold the component.

The best practice is to modify a theme and save it under another name, or copy the theme instead and make modifications to the copy.

Registration and Application of Style/Theme

The styles are applied to a component in 1 > 2 > 3 > 4 order. In case the style values are duplicated, the last style is applied and displayed on the screen.

Target for Style and Theme

Styles can be adapted to a form. To use the styles globally, the styles should be registered in Project (ADL) or Theme.

Styles are applied to not only simple components but also to the various screen elements. The following table shows the targets.

Constraints on Style

Depth of CSS selector must be within 4 levels

The depth of CSS selectors must be 4 levels or less.

Form>#id>#id>#id>#id ------ (O)
Form>#id>#id>#id>#id>#id -- (X)

Type selector is allowed only for the first level of selector depth

Type selectors are allowed only for the first level of selector depth. From the second level, other types of selector must be used.

Form>Div>Button -------- (X)
Form>#div00>#button00 -- (O)
Div>#button00 ---------- (O)
EditControl ------------ (O)

Only one class selector is allowed.

Just one class can be designated at a time.

Button.set_cssclass("TestClass"); ------------- (O)
Button.set_cssclass("TestClass,TestClass2"); -- (X)

Style Application

This section describes how to create, apply and use styles.

Creating Styles

When you do not use themes in ADL, or when you want to designate styles directly to forms, you can create new styles or register already created style files.

The 1st Stage: Create a new form.

Create a form on the New Form menu, and name it as "StyleForm".

The 2nd Stage: Create a new style file in the created form.

On the context menu of the created StyleForm, select Insert Style and add the new style file as the name of FormStyle.css. If the form is open, the style cannot be created.

If you want to create a new CSS and add it to a form using the main menu (File > New > File > Style Sheet), check Insert to Form checkbox and select the form from the dropdown menu.

The 3rd Stage: Create a Style file in ADL.

You can create a style in ADL by using Insert ADL Item from the context menu. Name the style as ADLStyle.css.

Editing Styles

Styles in themes, ADL and forms can be edited in the same way.

You need a special style edit window to edit styles. The Style editor provides the selector list in tree hierarchy form. You can also add/edit/delete styles in the source code window, as well add/modify values in the Properties window.

The values you input in the Properties window are immediately reflected to the Source Code window so that you can check them immediately.

The 1st Stage: Register selectors using the style editor.

Register the button selectors (type selector, pseudo selector, class selector) in the created ADLStyle.css file. First, register the type selector and the pseudo selector (mouseover, focused) .

Register the class selector.

The created source code is as follows:

Button
{
...
}

Button:focused
{
...
}

Button:mouseover
{
...
}

.Blue
{
	
}

The 2nd Stage: Specifiy the contents of selectors registered by using the style editor.

Define the information of the created button selectors (Type Selector, Pseudo Selector, Class Selector).

You can edit the script source by selecting a selector to be edited or by revising the selector in the Properties window. The source code is revised as follows:

Button
{
     background: lightskyblue;
     border: 1px solid red;
     color: yellow;
     font: Dotum,9,bold ;
}

Button:focused
{
     background: lightskyblue;
     border: 1px solid yellow;
     color: black;
     font: Dotum,9,underline;
}

Button:mouseover
{
     background: lightskyblue;
     border: 1px solid black;
     color: red;
     font: Dotum,9;
}

.Blue
{
     background: lime;
     border: 1px solid blue;
     color: blue;
     font:Dotum,10,bold;
}

Applying Styles

To illustrate applying styles, this section creates a button in a form, and then applies two styles to the button: one from ADL and one from the form.

The 1st Stage: Create a new form.

Create a new form using New Form, and name it as "StyleForm". (You can use the form you created in “Creating Styles”.)

The 2nd Stage: Check if the style is applied by creating a button

Check if the style is applied according to the style specified in ADL by creating a button in StyleForm.

The 3rd Stage: Check if the pseudo selector of the button is applied by executing the form.

Check that the pseudo selector (mouseover, focused) set in the ADL style is applied to the form by running QuickView.

The 4th Stage: Edit the created form style and check if it is applied.

Among pseudo selectors specified in the form style, set the focused information differently from the ADL style. Check if the styles are different by running QuickView.

Button:focused
{
     background: lightskyblue;
     border: 4px solid green;
     color: black;
     font: Dotum,9,underline;
}

Applying cssclass

You can apply different styles to the same component in the same form by using the registered class selector.

The 1st Stage: Edit the class selector generated in ADLStyle, and check if it is applied.

Edit the class selector (Blue) in ADLStyle.

.Blue
{
     background: lime;
     border: 1px solid blue;
     color: blue;
     font:Dotum,10,bold;
}

The 2nd Stage: Check if the style is applied by applying the cssclass property to the button of the form.

Specify the cssclass property of the form as "Blue" which is the class selector specified in ADLStyle, and check if the style is applied.

Applying Themes

This section describes how to create, apply and use themes.

Creating Themes

You can create theme by registering already created themes through Insert Theme (Insert ADL Item).

In the theme editor window, you can add/delete images or style files. You can manage the style files in the style editor window.

In case a style is changed, a relevant theme should be saved as well.

Stage 1: Create a new theme.

Create a new theme with a name of “example” using (File > New > File > XTheme) menu. The newly created theme is copied based on the default theme.

Stage 2: Designate the already created theme.

Add the theme by selecting Insert ADL Item from the context menu in ADL and selecting Theme.

Editing Themes

A theme file includes separate image and style files. For this reason, they need to be edited separately.

To create folders and styles or to add/delete images and style files, use the button on the bottom of the theme editor window.

The 1st Stage: Check the contents of Theme Treeview and edit the style file.

Open the theme file example.xtheme, and check the image list and the style file (theme.css) using the Theme Treeview. Edit the style file in the style editor window.

The 2nd Stage: Create/add/delete images, folders and styles in the theme editor window.

To edit the theme, use the button on the bottom of the theme tree view.

Applying Themes

You can check a component with a changed theme when the active theme changes from the default theme with the design reflecting default images and styles.

In this section, you will see how a changed theme is applied to a combo component and compare it to the default theme.

The 1st Stage: Check the Combo component's Style in the default theme.

Open the StyleForm and check the default style by creating a combo.

The 2nd Stage: Change the active theme as an example theme, and check the change.

Activate the relevant theme by selecting Set Active Theme on the context menu of the example theme. Check the style change of StyleForm.

Deploy Theme

Since a theme is composed of images and styles, its file size can be large. The function Deploy Theme separates images from the xtheme file so that the size can be reduced. Images can be separated selectively. The xtheme file whose images are separated is called Deploy Theme, and the separated images are called Extern File.

Follow this procedure.

1. Selecting Images to be Separated as an Extern File

   You can use the check box to select images to be separated as an extern file

• An image not checked is separated as an extern item, and images checked are included in the theme

• A default theme such as Default.xthememe cannott have check boxes. That is, you cannot separate images from default themes

• You can use the space bar to check the boxes. Multi-selection is available. It is changed based on the first selected item

• You can use the context menu after right-clicking check boxes. Selecting Set Extern clears all the check boxes and Unset Extern checks all the boxes

2. Save the Deploy Theme

   Click the Save button to save the deploy theme. The deploy theme and the extern file are saved in the following paths.

3. Displaying Deploy Theme

   When the deploy theme is saved along with the extern item, the Project Explorer shows the Deploy Theme mark. Otherwise, the mark disappears.