Theme

A theme file is composed of images plus XCSS files. While default themes are compressed when provided, you must decompress them if you want to apply them to a project.

To open the Theme Editor, you should double-click a theme, which is located under Theme in the Resource Explorer. Otherwise, open the context menu from the theme and select the menu [Edit].

The themes presented under NexacroTheme in the Resource Explorer are default themes provided upon the installation of Nexacro Studio. Those themes cannot be edited or deleted as long as they are located under NexacroTheme. Therefore, you should copy them to the Theme field if you want to edit them. Drag and drop is a way of such copying.

When you try to edit a default theme, you will see the below dialog box asking whether to copy the theme to the relevant project. If you click [Yes], Nexacro Studio will copy the theme to the Theme field and open the editor.

Image

The images used in a theme are provided in a tree. You can add or delete images while you can see the visual of an image through the preview pane.

Those images can be applied by writing the images' URLs in the source code of the related CSS file.

XCSS

You can edit a XCSS file that defines the style of a theme.

XCSS

The XCSS here means a feature to design the elements of a screen in Nexacro. The selectors to which a XCSS style can applies include components, Forms, frames, title bars, status bars, and scrollbars.

You can open the XCSS editor by double-clicking an XCSS file after selecting the file in the Project Explorer or Resource Explorer. Otherwise, open a context menu from the XCSS file and then select [Edit].

The XCSS editor presents a selector list in a tree form.

Call-out		Description
1	Sort by Group	Classifies selectors according to component groups
	Sort by Alphabet	Classifies selectors according to the alphabetical order
	Add Selector	Adds a selector
	Add Child Selector	Adds a child to the selected selector
	Delete Selector (Delete)	Removes the selected selector
	Delete All Selector (Ctrl+Shift+Del)	Removes all selectors
	Options	Selects the web browsers to which native CSS will apply after generating it
2	Selector Tree	Shows selectors in the form of a tree
3	Component Preview	Previews a selected item
4	Style Quick Editor	Allows you to quickly edit typical style elements
5	xcss Editor	Nexacro Style Sheet editor
6	Generated Code Preview	Previews a CSS script to which the relevant XCSS file is converted for each NRE/web browser
7	Navigatorbar	Shows a list of selectors or allows you to add a select

When you choose a selector in a tree, Nexacro Studio will display the codes of the relevant XCSS file, native CSS file and preview image. Moreover, you can edit the attributes of the selector through the Properties pane.

You can open a context menu by right-clicking a select in the tree, and this context menu provides a function to remove unused attributes.

Name	Description
View	Determines the presentation of the panes that can be displayed within the XCSS Editor
Add Selector	Adds a selector
Add Child Selector	Adds a child to the selected selector
Delete Selector	Deletes the selected selector
Delete All Selector	Deletes all selectors
Compress	Deletes unused attributes from the selected selector
UnCompress	Restores deleted attributes to the selected selector
Compress All	Deletes unused attributes from all selectors
UnCompress All	Restores deleted attributes to all selectors
Collapse All	Collapses all branches of the tree
Expand All	Expands all branches of the tree

If there are errors in XCSS scripts, the editor will count the number of errors and mark the erroneous selectors.

Adding Selector

You can add type selectors by clicking Add Selector in the toolbar of the CSS editor. To this end, check the desired selectors from the "Components" list.

Call-out		Description
1	Multi Selector	You can define one single style for multiple selectors. If you select more than one component or one status, the checkbox for this option will be activated. If you select the checkbox, the involved selectors will be defined by one style. For example, the below CSS code will be written if you select a Button and Calendar components and then check this option. `.Button,` .Calendar { }
2	Class Selector	Specifies a certain class and applies the style of the current selector to the class. For example, you can define another style by declaring the "TEST" class using a Button component. In this case, you can apply the TEST class by specifying "TEST" as a value of the cssclass property. `.Button.TEST` { background : aqua; }

Call-out

Description

Multi Selector

You can define one single style for multiple selectors.

If you select more than one component or one status, the checkbox for this option will be activated. If you select the checkbox, the involved selectors will be defined by one style.

For example, the below CSS code will be written if you select a Button and Calendar components and then check this option.

.Button,

.Calendar

{

}

Class Selector

Specifies a certain class and applies the style of the current selector to the class.

For example, you can define another style by declaring the "TEST" class using a Button component. In this case, you can apply the TEST class by specifying "TEST" as a value of the cssclass property.

.Button.TEST

{

background : aqua;

}

Use Attribute

Determines whether to add the attributes of the relevant selector to the editor.

If checked, the editor will present the list of attributes applicable to the relevant selector.

Status Combination

You can define one single style for a combination of a Status element and a UserStatus element.

For example, the below CSS code will be written if you select the mouseover Status and selected UserStatus and then check this option.

.Button[status=mouseover][userstatus=selected]

{

}

You can style various statuses of a selector through Status. The "enabled" status is a default value so you do not need to designate it separately.

Adding Class Selector

Check Class Selector in the Add Selector window and then enter a class name. Check a component if you want to combine a class selector with a component.

The Class Selector cannot be added when selecting the Control item from the Components list.

Adding Child Selector

You can add a child selector by going to the tree, choosing a selector that has its children and then clicking the Add Child Selector button on the toolbar.

The child selector used in Nexacro is different from the one used in original CSS. It is similar to a descendant selector in original CSS .

NavigatorBar

This feature allows you to go directly to a certain component or its sub-element. Clicking the [♦] button will open a list of the elements that you can access. If you click one of them, you will move to the code of the relevant element.

Clicking the drop-down button of a selector or child selector will open the list of the sub-elements. If you select one of them, you will move to the code of the selected sub-element.

If a selected element does not exist, the [+] button will appear, which you can click to add the relevant element.

Editing XCSS Code

If you type few letters in the editor, Nexacro Studio will automatically present a list of the properties that begin with the input text. After you select one of them by pressing the Enter key, the editor will display the related syntax.

If the syntax involves multiple patterns, you can navigate them with the Up/Down arrow keys. After you select a certain pattern by pressing the Enter key, the editor will display a related sample code.

You can collapse or expand the Style Quick Editor field to provide more room to the Text Edit field.

If you click the Text tap at the bottom of the XCSS Editor, you can edit the entire code of a certain XCSS file.

Declaring a variable and using it as a property value (Predefine)

When editing XCSS, you can declare a value that is repeatedly used as a variable in advance and designate it as the variable (id) instead of directly specifying the property value. When you need to modify the property value, you can quickly reflect the property value by modifying the value of the desired item among the Predefine items without directly finding and changing the property value.

The Predefine function is a function that can only be used on the Nexacro Platform.

It can be set only when editing XCSS, and item values cannot be accessed or modified in the script.

This is a different feature than CSS custom properties (variables).

When editing XCSS, CSS custom properties (variables) are not supported.

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Declare a variable

Select the Predefine tab in the XCSS editor window. Add a Group item and an Item item to be used as a variable.

	Name	Description
1	Add Group	Add a Group item. Group items are used only for classifying Item items by type. When setting Predefine, more than one Group item is required.
2	Add Item	It is a variable composed of id and value. Among the Item items, the id value is used when setting property values in XCSS. Duplicate ids within the same XCSS file are not allowed.
3	Delete	Delete the selected Group or Item. When deleting a group, the items included in the group are also deleted. You can delete after selecting 2 or more items. When deleting an individual group or item, you can delete it with the '-' button in front of each item.
4	Group selection filter	Only items included in the Group selected from the list are displayed. When 'All' is selected, all Groups and Items are displayed.
5	id search filter	Displays only items with id values that contain the string entered in the search bar.

Items can be moved to another Group.

The order of Items declared within a Group has no effect on behavior and cannot be reordered.

Variables (Item) declared in the Predefine tab can be used when editing XCSS property values.

Using declared variables as property values (XCSS Editor)

When editing XCSS, you can use the IntelliSense function to check and select items declared in the Predefine tab.

When an item is selected, it is automatically converted into the format shown below and set as a property value.

Using a declared variable as a property value (property window)

To select an item declared in the Predefine tab in the property window, click the 'Predefine' button in each item of the property window to switch the state, then click the 'Predefine List' button to open the window and select the item.

Using the Predefine function in the property window can only be set per property unit.

For example, you can use the Predefine function when setting the background property value, but the 'Predefine' button is not displayed and cannot be used for the background-color item under it.

Check the generate result

The value using the Predefine function is converted to the corresponding value during the generate process and reflected. When editing XCSS, you can check the converted value in the Component Preview window or the Computed Style tab of the property window.

Sharing Predefine Settings

Predefine settings are applied only within the XCSS or XCSS files within the theme. If you want to share the values you set, you can open the XCSS file in an external text editor and copy the entries inside the Predefines tags.

<?xml version="1.0" encoding="utf-8"?>
<XCSS version="1.1">
  <Predefines>
    <Group id="Color">
      <Define id="main_color" value="blue"/>
      <Define id="font_color" value="yellow"/>
      <Define id="sub_color" value="red"/>
    </Group>
  </Predefines>
  <CSSData><![CDATA[.Button
{
	background : -nexa-define(--main_color);
}
]]></CSSData>
</XCSS>

Usage example: Changing the gray theme color

In the gray theme, the color for the selected item is defined in the Predefine item as shown below.

maincolor: #BBAAFF
subcolor: #EEEBFF

If you change the Predefine item value to the desired value (blue series) and save it, you can see that the changed value is reflected.

maincolor: #3E86FF
subcolor: #DEF1FE