Semantic Component Themes
From TechWiki
Contents |
Introduction
This section describes how we can use completely different skins for the same Semantic Component application. We can create new themes, what structure they should have, how they can be compiled in accessible resources and how they get dynamically loaded at runtime.
Themes Packages Structure
New styles can be used to style the Semantic Component library, or any applications using it. The package structure of the themes for any project using the Semantic Component should be as follow:
/src/ (project source) /src/themes/ (themes sources) /src/themes/Brownie/ (a specific theme) /src/brownieTheme.css (the main theme CSS file)
Note: All themes assets should be put under /src/themes/*, and the main CSS file should be in the project source folder (see bellow why).
Programmatic Skins
Sometimes themes developers have to use programmatic skins to create the themes the way they want. They are doing this by linking a CSS property to an ActionScript or MXML resource with the ClassReference CSS function.
Because of a known bug in Flex (3) and Flash (4) Builder, it is not possible to put the *theme.css file in its theme folder because the compiler won't be able to resolve the resources referenced by the ClassReference function. It is the reason why we have to put these theme CSS files into the project source folder.
Compiling a Theme
All themes are dynamically loaded at runtime by the application. The Semantic Components, or any application using them, are dynamically loading compiled version of themes (SWF) at runtime by using the StyleManager.loadStyleDeclarations() style manager method.
Since the components load SWF versions of themes, this mean that the user has to compile her theme into a SWF resource. There are two possible ways to compile a CSS file into a SWF resource:
- In Flex/Flash Builder, right click on the main CSS file, and select the "Compile CSS to SWF" option and then compile the application, or
- By compiling the main CSS file with the mxmlc compiler application.
For more information, read the Loading style sheets at run time section of the Adobe Livedocs website.
If you are not referring to ActionScript nor MXML resources using ClassReference, you can compile the theme anywhere, and you will be able to use it with any Semantic Component application without any issues.
However, if you are referring to ActionScript or MXML resources using ClassReference, then you have to compile them within the Semantic Component application with the structure as described above. Otherwise the application will not be able to find the needed resources when it attempt to load the theme at runtime.
General Configuration File
Once the theme is compiled, the user has to configure the Semantic Component, or its related application, to use it.
In the general configuration file of the Semantic Component application located in the /settings/General.xml, the user can specify where a compiled CSS file in SWF can be accessible as a theme for the Semantic Component application.
A theme location can be defined in the general configuration file by using the <theme></theme> element. What he has to specify is the external location of the SWF file, such as:
<theme>theme.swf</theme>
This will load the Brownie theme file at runtime.
Note: if the <theme /> element is not defined in the General.xml file, the default Flex theme will be used to skin the Semantic Component application.
Resources
Here is a list of external resources to help you creating your Flex Themes.
Introduction to Flex CSS styling
- Styling Flex Custom Components
- 5 tips to help designers style your Flex components
- Flex Styles Explorer
Flex Themes Repositories
Multiple Flex theme repositories exists on the Web. Here is a good one:
Tested and Working Themes
Some themes have already been used/converted to work according to these theming policies:
CSS in Themes
Height and Width
Height and width of components can not be set up using CSS. Since these properties are part of the classes of the components, CSS has no impact on them.
