Using a Theme applied at compile-time
When styling an application using a theme, you have to create a theme swc-module and add your styles there.
The important parts seem to be:
- Configuring the "
includeStylesheets"section in the flexmojos configuration - Calling the stylesheet "
defaults.css" - Locate the css file in the modules resource directory, not the source directory
Esample pom of the theme module:
| Code Block |
|---|
<artifactId>css</artifactId>
<packaging>swc</packaging>
<name>css</name>
<build>
<sourceDirectory>src/main/flex</sourceDirectory>
<resources>
<resource>
<directory>src/main/resources</directory>
</resource>
</resources>
<plugins>
<plugin>
<groupId>net.flexmojos.oss</groupId>
<artifactId>flexmojos-maven-plugin</artifactId>
<extensions>true</extensions>
<configuration>
<includeStylesheets>
<stylesheet>
<name>defaults.css</name><!-- Optional, if omitted, the name will be the same as provided in the "path" element -->
<path>MyStyle.css</path><!-- This path is relative to the resource directory -->
</stylesheet>
</includeStylesheets>
</configuration>
</plugin>
</plugins>
|
Then in your swf-module you simply need to add a dependency to your theme module, but set an additional scope to "theme".
Here comes a sample swf-modules pom:
| Code Block |
|---|
<dependencies>
<dependency>
<groupId>....</groupId>
<artifactId>mxml</artifactId>
<type>swc</type>
<version>1.0-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>.....</groupId>
<artifactId>css</artifactId>
<version>1.0-SNAPSHOT</version>
<scope>theme</scope><!-- This is the important part -->
<type>swc</type>
</dependency>
</dependencies>
</project>
|
And it works.
What I didn't realise (having never created a theme before) was that the css file had to be called defaults.css (note the plural).
Using skin modules applied at runtime
While the approach of loading a theme includes the style in the application, loading a skin module at runtime has some differences:
- Ability to have multiple skin modules for an application allowing to target multiple target platforms (Desktop, Mobile, Tablet, iOS, Android or even different corporate identities)
- The skin has to be loaded after the application has been loaded, adding a short delay while initializing the application.
- Having the platform dependent skin implementations in a platform skin allows a dramatically reduced size of application as only those parts needed have to be loaded.
A skin module is nothing else than a simple swf module with a CSS file as source-file:
| Code Block |
|---|
<build>
<sourceDirectory>src/main/flex</sourceDirectory>
<plugins>
<plugin>
<groupId>net.flexmojos.oss</groupId>
<artifactId>flexmojos-maven-plugin</artifactId>
<extensions>true</extensions>
<configuration>
<sourceFile>SkinMain.css</sourceFile>
</configuration>
</plugin>
</plugins>
</build> |
The difference here is that the css is compiled, so it has to be placed in the modules source directory ("src/main/flex") directory instead of the "src/main/resources" if this was a theme module.
Assuming the skin module is compiled to a swf "my-cool-desktop-skin.swf", then you can load and apply that skin with the following line of code:
| Code Block |
|---|
protected function initSkin():void {
styleManager.loadStyleDeclarations("my-cool-desktop-skin.swf",
true, false, ApplicationDomain.currentDomain);
}
|