Project Editing | Theme, XCSS

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 Platform. 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;

}

3

Use Attrubute

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.

4

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.

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 Platform 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.