Blog Topic: Studio 8

Are You Eligible for a Free Studio Upgrade?
By Stephanie Sullivan
from www.communitymx.com/blog/
I'm sure most everyone wants the new Studio 8. It rocks! But maybe you just recently broke down and purchased Studio MX 2004 (or any of the products contained therein) and you're just not ready to fork over more cash just yet. Well -- maybe you don't have to. If you purchased on or after July 8th, make sure to read Macromedia's page with the upgrade rules (www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_15313). You might be pleasantly surprised!

Also, don't forget that if you own Dreamweaver, Fireworks or Flash, you can upgrade and get the whole Studio 8 package for the normal studio upgrade price ($399USD). That's quite a generous deal. Not sure you want to upgrade? Take the 30-day test drive -- you may become addicted like I did and not be able to return to your previous versions. (BTW, I make no money whether you upgrade or not. I just love the stuff. ;))

Blog Topic: Flex
Switching Stylesheets on the Fly
By Manish Jethani
from www.livejournal.com/users/mannu/
One of the features I envy HTML for is the ability to switch CSS stylesheets at runtime. Doesn't matter how often it's used or if it even works reliably in most web browsers - it's just very cool from a developer's perspective.

I've often wondered why we don't have support for runtime loading of stylesheets in Flex. It should be safe to assume that it didn't make it into the 20% of features for 80% of our customers.

So, we don't parse the CSS file on the client; instead, we parse it on the server and convert it to our own internal ActionScript representation, which is then loaded in the client at runtime. It's obviously much faster to parse CSS on the server than on the client (but wait for the next version of the Player and I might be wrong).

The reason I stressed on "runtime" in the previous paragraph is that I have a solution that I stumbled upon in a eureka moment while taking a walk and thinking about the compile-time vs. runtime issue. No, it does not involve writing a CSS parser in ActionScript (though I'd love to do that some day). You might be surprised at how simple it is to implement runtime switching of stylesheets once you know the internals of Flex's CSS implementation.

Without further ado, here's the trick: Load the multiple CSS files into multiple Flex applications, then load the applications into a Loader component within the main application, and then just point the global styles object of the main application to that of the sub-application (containing the new CSS rules).

Umm... that was English. In ActionScript it means you write a faceless component like the following (or just use mine):

import mx.controls.Loader;
import mx.core.MXMLObject;
import mx.utils.Delegate;
class RuntimeStyle implements MXMLObject
{
  private var _document:Object;
  private var loader:Loader;

  public function initialized(document:Object, id:String):Void
  {
    _document = document;
  }

  private var _source:String;

  public function get source():String
  {
    return _source;
  }

  public function set source(value:String):Void
  {
    if (_source != value)
    {
      _source = value;

      if (loader == undefined)
      {
        loader = Loader(_document.createClassObject(Loader,
              "runtimeStyleLoader", 21983));
        loader.width = loader.height = 0;
        loader.addEventListener("complete",
            Delegate.create(this, loader_complete));
      }

      loader.source = _source + ".swf";
    }
  }

  private function loader_complete(event:Object):Void
  {
    _global.styles = Loader(event.target).content._global.styles;
    _document.styleName = _document.styleName == "!" ? "@" : "!";
  }
}

What's happening here? Let's use it in the Flex Store sample (yes) and then I'll explain. Once you've saved the above code into a RuntimeStyle.as file, insert the following code snippet into your flexstore.mxml.

<local:RuntimeStyle xmlns:local="*"
  source="{stylesWrappers.selectedItem.source}" />
<mx:Model id="alternateStyles"
  source="alternateStyles.xml" />
<mx:ComboBox id="stylesWrappers"
  dataProvider="{alternateStyles.stylesheet}"
  labelField="name" selectedIndex="-1" />

Here's what the alertnateStyles.xml file looks like:

<?xml version="1.0"?>
<styles>
  <stylesheet>
    <name>Autumn</name>
    <source>/samples/flexstore/css/autumn.mxml</source>
  </stylesheet>
  <stylesheet>
    <name>Club Orange</name>
    <source>/samples/flexstore/css/cluborange.mxml</source>
  </stylesheet>
  <stylesheet>
    <name>HTML Classic</name>
    ...
</styles>

It contains links to the 5 themes: Autumn, Club Orange, HTML Classic, Industrial, and Institutional. But really these files don't exist in the css directory, so they have to be created. Here's the autumn.mxml file - others should be similar:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
  <mx:Style source="autumn.css" />
</mx:Application>

`When you run Flex Store and select "Autumn" from the dropdown... it works!

Then try adding some products to your shopping cart and then switching the stylesheet to, say, "Club Orange." It works!

And how it works? Figuring that out by looking at the code should be a fun 2-minute exercise. If you have any questions, just leave a comment and I'll be happy to respond.

Forward compatibility note: This hack is almost guaranteed not to work in Flex 2.0. I'll try to ensure there's some equivalent, but no promises!