Flex & Central: Single State Based App, 2 Different Designs

One technique I showed last night at my presentation on Flex for Flash Developers I didn’t explain the significance. When installing applications into Macromedia Central, if you add additional applications tags, it’ll install multiple applications, all from 1 product.xml file.

However, 1 of my applications merely operated in a different state. If you are a presenter, the components have additional controls to allow a presenter to do things that a viewer cannot. Each component follows the loose interface of “I’m a Presenter or not”. It’s merely a boolean. However, I was having a hard time making them look different. Since the functionality is significantly different depending on the user’s role, it has different branding.

Another problem is that Flex compiles the CSS file you use to style your app at compile time; there is no dynamic way to change CSS styles at runtime… but you can use setStyle to change the style properties after the fact.

And that’s just what I did. Observe the 2 following screenshots (click on them for larger view):

DM Version

Player Version

Each app is the same code base, just configured differently by the product.xml. The DM version is a presenter based tool, whilst the player one is not. The DM has a red background with a different logo and program icon; the player version has a blue background with a different logo and program icon.

The way I got this to work is to utilize the initialData tag in my product.xml file. When your application starts in Central, the onActivate method gets the data you put in your product.xml file as XML passed into it as a native ActionScript object. In my case, for the DM version, I made a “runmode” variable equal to a string value of “dm”. For the player application, it equals “player”.

The DM application XML:

<initialData runmode="dm" />

The Player Application XML:

<initialData runmode="player" />

When my application starts, the onActivate handler determines what mode the application is running in and styles accordingly. In this case, it sets the background color and the logo image. The Central installation process via the product.xml has already assigned the correct icon.swf files for use in Central itself.

The onActivate handler:

public function onActivate(shell:Shell,
                           appID:Number,
                           shellID:Number,
                           baseTabIndex:Number,
                           initialData:Object):Void
{
        this.shell = shell;
        
        onResize();
        
        if(initialData.runmode == "dm")
        {
                isPresenter = true;
                logo_img.contentPath = dm_logo_img;
                this.setStyle("backgroundColor", 0x530002);
                gameWizard_mxml = GameCreationWizard(PopUpManager.createPopUp(this,
                                                                                            GameCreationWizard,
                                                                                            true));
                gameWizard_mxml.addEventListener("gameCreated", Delegate.create(this, onGameCreated));
                gameWizard_mxml.centerPopUp();
        }
        else
        {
                isPresenter = false;
                logo_img.contentPath = player_logo_img;
                this.setStyle("backgroundColor", 0x002953);
                loginWizard_mxml = LoginWizard(PopUpManager.createPopUp(this,
                                                                                      LoginWizard,
                                                                                      true));
                loginWizard_mxml.addEventListener("gameSelected", Delegate.create(this, onGameSelected));
                loginWizard_mxml.centerPopUp();
        }
}

Obviously, not only is having the ability to install 3 seperate applications via 1 XML file cool, but having 1 of those applications operate as 2 seperate, independant applications in a different state merely from an installation configuration variable. Nice.

Notice I had previously set the backgroundColor of the application tag to black; as per Flex Chronicles #8, if you don’t set an initial value to the backgroundColor, you cannot later set it.