Category Archives: Runtime CSS

Understanding Flex 3 Migration Issues (Part III)

Here are a few more things that tips for migrating your Flex 2 application to Flex 3:

1. If you are using runtime CSS, be sure to recompile not just your Flex Application, but, also your .css files with Flex 3. You will most likely get an unexpected error if your Application is compiled in Flex 3 and your css swf was compiled in Flex 2.

2. Recompile all of your swcs and modules in Flex 3, as well. If these swcs or modules use Binding, they cause errors in Flex 3 applications if they were compiled in 2. Note, Flex 2 resource bundle SWCs should be usable in a Flex 3 application.

3. When using HTTPService to send/receive XML data, be sure that your contentType=application/xml. The default is contentType=application/x-www-form-urlencoded. The default used to work in Flex 2 even if  you were sending XML. In Flex 3, it doesn’t work out as pointed out by one of our customers in bug SDK-14811. For more details, please check out that bug.

4. To find out more about backwards compatibility issues that are actually bugs, you should search the public Jira bugbase for “regressions”. Regressions are bugs that exist in Flex 3 that worked correctly in Flex 2. To search for regressions, do the following:

– Go to http://bugs.adobe.com/flex and login. Register, if you have not registered yet.

–  From the menu bar at the top, select “Find Issues”.

– Specify your search requirements on the left. Be sure to look under “Custom Fields” and find the “Regression” field. Select “yes”.  Under “Issue Attributes”, look for the “Resolutions” field and select the last option “Deferred”.

– Click the “View” button at the top or bottom of the search criteria.

* This search will give you all of the regressions that were not fixed and therefore “deferred”.

Loading css when your application starts up

In Flex 2.0.1, Flex introduced a feature enabling runtime css. This meant that your application could load a different stylesheet at runtime using the method StyleManager.loadStyleDeclaration(url). This allows your Application’s swf to be much smaller if you had multiple stylesheets for one Application that may or may not be used. Unfortunately, you cannot load the css directly. Instead, you would need to compile the css using the Flex compiler. The compilation of a css file will create a swf file that can be specified as an argument to loadStyleDeclarations method. Here is the description of this method from the Flex livedocs:

public static function loadStyleDeclarations(url:String, update:Boolean = true, trustContent:Boolean = false, applicationDomain:ApplicationDomain = null, securityDomain:SecurityDomain = null):IEventDispatcher Loads a style SWF.

Parameters


url:String — Location of the style SWF.


update:Boolean (default = true) — Set to true to force an immediate update of the styles. Set to false to avoid an immediate update of the styles in the application. This parameter is optional and defaults to true For more information about this parameter, see the description in the setStyleDeclaration() method.


trustContent:Boolean (default = false) — Obsolete, no longer used. This parameter is optional and defaults to false.


applicationDomain:ApplicationDomain (default = null) — The ApplicationDomain passed to the load() method of the IModuleInfo that loads the style SWF. This parameter is optional and defaults to null.


securityDomain:SecurityDomain(default = null) — The SecurityDomain passed to the load() method of the IModuleInfo that loads the style SWF. This parameter is optional and defaults to null.

Returns


IEventDispatcher — An IEventDispatcher implementation that supports StyleEvent.PROGRESS, StyleEvent.COMPLETE, and StyleEvent.ERROR.

So, how can you load css at runtime and not create any of the components in your application until the styles were loaded? You want to be sure that your components don’t show up on screen with default styles for a brief amount of time while the css is being loaded. There are probably a few ways to do this, but, here is one that I found that works.

1. Call StyleManager.loadStyleDeclarations(url) in the preinitialize handler for your <mx:Application>

2. Make sure that your <mx:Application> has a creationPolicy=”none”.

3. When, the StyleEvent.COMPLETE event is triggered after the call to loadStyleDeclarations, then, you can call createComponentsFromDescriptors(). This method will create all of the children of the container that it is called on.

Here is the code in the Application:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; width=”100%” height=”100%”
preinitialize=”changeTheme()” creationPolicy=”none”>
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
import mx.events.StyleEvent;private function changeTheme(): void
{
var myevent:IEventDispatcher = StyleManager.loadStyleDeclarations(“Ice2.swf”);
myevent.addEventListener(StyleEvent.COMPLETE, createComponents);
}

private function createComponents(event:StyleEvent): void
{
createComponentsFromDescriptors();
}
]]>

</mx:Script>

<mx:Panel id=”main” width=”100%” height=”100%”>
<mx:HBox>
<mx:VBox>
<mx:Label text=”comments:” />
<mx:TextArea width=”200″ height=”150″ />
<mx:Button label=”submit” />
</mx:VBox>
<mx:DateChooser />
</mx:HBox>

</mx:Panel>
</mx:Application>

Demo: Icetheme.swf, Ice2.swf

Source: Icetheme.mxml, Ice2.css

Follow

Get every new post delivered to your Inbox.