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.
.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.
{ background : aqua; } |
3
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.
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.