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:

<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:

<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:

    <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:

protected function initSkin():void {
        styleManager.loadStyleDeclarations("my-cool-desktop-skin.swf",
                true, false, ApplicationDomain.currentDomain);
    }
  • No labels