Nexacro Style Sheet (XCSS) is CSS for Nexacro used to design screen elements in the Nexacro application. The basic usage and style properties are similar to CSS (Cascading Style Sheets) that define the style of web documents, so developers or designers who have worked with CSS can use it without much difficulty. XCSS is useful for applying styles independent of the theme, and you can also give style effects only on specific components by using the class selector and the cssclass property of the component. The theme is also internally configured with XCSS and images.
This chapter describes how to create and use XCSS with Nexacro Studio.
Creating Nexacro Style Sheet (XCSS)
You can use XCSS to design screen elements for the Nexacro application. XCSS is created with the following process.
1
Select [File > New > Nexacro Style Sheet(.xcss)] from Menu of Nexacro Studio.
new_xcss
For reference, you can obtain the same result by selecting the Application name and right-clicking to select [Add > Style] from the context menu as follows in Project Explorer.
new_xcss_2
2
Set the XCSS name, path, and application target on the New Style Sheet screen.
xcss_만들기_02_New Style Sheet 팝업
Item | Description |
|---|---|
Name | Enter the name for the new style sheet file. |
Location | Select the path where the style sheet file will be located. |
Insert Target | Select the target to apply the style sheet. It can be applied per-application basis. |
If you click the Finish button, then you can check the newly created XCSS file in Project Explorer as follows. The created file is automatically opened in Xcss Editor.
xcss_만들기_02_03_새로생긴style항목
3
Add the new selector in Xcss Editor.
The created XCSS is an empty file with no content. To set the style effect, you need to add the selector corresponding to the component. Click the Add Selector (Insert) button in the upper left of Xcss Editor to add the new selector.
xcss_만들기_03_01_add selector
4
Select the component and state to which the style effect is to be applied in the Add Selector window.
Click the Use Attribute checkbox to see what style properties are in the selected component. If you check the Use Attribute option, all style properties that can be used in the selected component are created. However, since it is an empty property with no value set, the user must manually enter the property value in the next step, edit mode.
xcss_만들기_05_01_add selector
5
Select the selector to design the style from the Nexacro Style Sheet list, and then create the style to apply in Xcss Editor.
If you use the menu at the top of Xcss Editor, the style code is automatically created, and you can check the effect immediately in the Preview window. It is also possible to enter the code directly in Xcss Editor.
xcss_만들기_05_02_xcss editor
After writing the style code for the .Button selector as above, save the HelloWorld.xcss file.
6
Place the Button component on the form design screen and check if the style effect of XCSS is reflected. The XCSS style property takes effect as soon as it is created and saved.
Reusing XCSS File
1
Select the Application name in Project Explorer as follows, click the right mouse button, and select [Insert > Style] from the context menu.
2
When the Choose a Nexacro Style Sheet Files window opens, select the previously created XCSS file and click the Open button.
3
Check if the import of the XCSS file was successful.
If the import is successful, you can check the imported XCSS file in Project Explorer. XCSS is added under Styles of the project application as follows.
4
Place the component on the form design screen and check if the XCSS style effect is reflected.
For the imported XCSS style to be applied to the form design screen, the selector corresponding to the component must be defined in XCSS.
Changing Button Component Background Color with cssclass Property
Style effects can be applied only to desired components by using XCSS and the cssclass property of the component. If you set the class selector defined in XCSS in the cssclass property, then the style defined by the corresponding class selector name in XCSS is applied immediately.
To use the cssclass property, you first need to create the XCSS file to apply to the Button component and define the class selector. The process of creating XCSS is omitted here and declaring the class selector is described.
1
Create the XCSS file. (Please refer to Creating Nexacro Style Sheet (XCSS))
2
Click the Add Selector button in Xcss Editor to add the new selector.
The created XCSS is an empty file with no content. To set the style effect, you need to add the selector corresponding to the component. Click the Add Selector (Insert) button in the upper left of Xcss Editor to add the new selector.
3
Select the component to define the style and set the Class Selector name in the Add Selector window.
If you are not sure what style properties are in the component, then select the Use Attribute checkbox to create all style properties that can be used in the selected component. However, an empty property with no value set is created.
sample_style_01_01
4
Set the style property of the component in Xcss Editor.
Use Xcss Editor to set the background property to #c3d69b and the -nexa-text-align property to center as follows, and save the XCSS file.
.Button.bg_green
{
background : #c3d69b;
-nexa-text-align : center;
}5
Create the Button component on the form design screen and set the cssclass property to bg_green.
Check that the style defined with the bg_green selector is applied to the Button component.