Customization

SweetDEV RIA version 2.2 Customization

We are pleased to announce you a new method of customization, really improved and facilitated. We designed it to propose the easiest and best way for developpers to create their own style as fast as possible.
Have a look to the new structure and notice us defaults that could still remain !

Customization Structure

The styles rules are now split in 2 files - as they were before - but a full pass has been performed to reorganize these files and define them as follow :
  • sweetdev-ria-core.css (core file): Contains all the style rules that you should not have to modify (positioning rules mainly).
  • sweetdev-ria-default-skin.css (skin file): Contains all the appearance rules that will make your SweetDEV RIA components deeply different from any other ones. This file is fully documented to help you find quickly the class to modify for a specific element.

Create your skin !

As described in the previous section, the best way to write your own skin is to start from the skin file.The visual aspect of the component may result in some unspecified result if you decide to modify the core file.
The main part of the style classes is structured in 3 parts :
  • ideo : The SweetDEV RIA prefix to avoid conflicts and easy distinguish the SweetDEV RIA classes.
  • ${compName} : The name of the component the style class refers to, written as a bigram or trigram. The list is given in the last section of this documentation.
  • ${className} : The name of the class, which name has been chosen as intuitive as possible.
To easily create a skin for the calendar , you just have to go to the calendar section (ideo-cal-* ) and follow the comments to create every part of your style !

Apply you skin to your components

To apply your skin to the page, two ways are provided depending of your needs :
  • For a single page customization, just target your file to the ria:resourcesImport tag in the attribute customCSS :

    <ria:resourcesImport customCss="/${pathToCSSFile.css}"/>
    Your skin will be automatically applied to all your components presents in the page.
  • For a complete application customization, uncomment the sweetdev-ria.css.defaultSkin property in the ria-config.xml file and set the value as follow : <property key="sweetdev-ria.css.defaultSkin" value="%path to CSS%"/> This skin will be automatically applied to all your ria:resourcesImport tag.
  • Notice: You can mix the two previous method to override an application style.

Components Bi-Trigrams

Here is the list of the components abbreviations used in the css files :
  • -acc- : Accordion
  • -alt- : Alert
  • -cal- : Calendar
  • -clp- : Collapse
  • -cto- : Click to Open
  • -dd- : Drag and Drop
  • -edi- : Editable Text
  • -exp- : Export Excel
  • -fu- : File Upload
  • -hsp- : Horizontal Splitter
  • -lst- : List
  • -mnb- : Menu Bar
  • -mnu- : Menu
  • -mp- : Modal Panel
  • -msg- : Messenger
  • -ndg- : Grid
  • -pgb- : Pagination Bar
  • -sug- : Suggest
  • -tab- : Tab Panel
  • -tre- : Tree
  • -vsp- : Vertical Splitter
  • -win- : Window

Migration from v < 2.2 to v 2.2 Customization

All the CSS customization has been refractored, splitting the positioning rules of the styling ones, making it really easier to develop your own theme.
This imply a HIGH incompatibility with the two previous CSS files (sweetdev-ria.css and sweetdev-ria-custom.css). To adapt the old ones to the new ones, you can run the ant script css-migration.xml located in the ant folder. Follow the instruction contained inside to perform the migration properly.

After the migration has been successfully run, some modifications still remain :
  • Be sure that your files will be used in place of the default ones (use the ResourcesProvider servlet to target them, or add them to JSO)
  • Add these lines to one of your CSS file. : 
    .ideo-cto-closeIcon{
	background-image: url("../images/close.gif");	
}

.ideo-cto-closeIconHover{
	background-image: url("../images/close_hover.gif");	
}

.ideo-cto-closeIconDown{
	background-image: url("../images/close.gif");	
}
A lot of non critical modifications have been performed, like simplifying the CSSs, adding comments, overriding classes names... Listing theses modifications would lead to start over from the new CSS files, this is why we wont detail them in this FAQ section.