As said in a previous topic, we have a css file with several predefined items.


ServerModuleCustomCss.Css


Classes that are global like for example:


.x-window.....

.x-form...

.x-tip....


are automatically interpreted and do not necessarily need to be declared in some component.

(This is CSS standard)


RadCORE's additional classes were created so that you have something ready-made and that, through them, if you need to, you can customize other classes.


.rc-invalid .x-form-trigger-wrap-default...

.rc-bg-gradient-orange...


ATTRIBUTE "cls:"


UNIGUI already has properties for you to specify CSS classes in components, but, so that we can centralize everything in the "hint:" attribute "cls:" was created.


There are many peculiarities in UNIGUI itself and, as we don't have detailed documentation, it is sometimes difficult to detect and apply certain features.


There are specific classes for buttons, labels, grids, etc.


In the RadCORE examples, always observe the "hint:" of the components to identify if a specific class is used.


One way to search is to search within "dfms" using GEXPERT for example.


So if you search all the files for "card-info-box" for example, you will find where this class was applied and understand its context.


APPLYING CSS in DESIGN TIME


You'll notice in the RadCORE examples the use of the "cls:" attribute to associate one or more CSS classes with a given component.


     



APPLYING CSS in RUNTIME


UNIGUI natively allows APPLY and REMOVE CSS classes:


Ex:  

labCompanyName.JSInterface.JSCall('addCls', ['align-label-left-center']);

labCompanyName.JSInterface.JSCall('removeCls', ['align-label-left-center']);


In RadCORE, just to reduce the code we have the functions: 


rc_AddCssClass( labCompanyName, 'align-label-left-center' );

rc_RemoveCssClass( labCompanyName, 'align-label-left-center' );



Whenever you want to apply a new CSS it is recommended to REMOVE the existing class to avoid conflicts.


Starting with version 6.0, RadCORE will control the applied classes so that, if you try to add a class that already exists in that component or if you try to remove a class that doesn't exist, it will ignore it.


Observing the same example above, in the CLICK event of the "btnCopy" button:



The "rc_ChangeCls" function helps to EXCHANGE one CSS class for another.

Created with the Personal Edition of HelpNDoc: Create iPhone web-based documentation