Flex and runtime CSS

Runtime CSS is quite easy in Flex.

Essentially you need to right click the CSS file in Flex Builder and select the option Compile CSS to SWF.

Then you use mx.styles.StyleManager.loadStyleDeclarations(URL:String,update:Boolean = true) to import the SWF at runtime.

The reason you might want to set the “update” parameter to false is if you’re loading multiple SWFs at a time and would rather apply them as a group (avoiding unneccessary processing).

NOTE:

1. If you want to override styles set on a tag itself – such as the Application, make sure the tag(s) in question don’t have the same styles set in the MXML, because like HTML & CSS, styles on a tag itself will override any imported CSS file.

Flex : IE issues

I have been spending various intermittent hours browser testing my latest Flex app recently, expecting there to be few, if any, differences between runing a Flex app on IE and on FireFox. I have also been doing Safari and Opera testing, though Flash player doesn’t 100% support them (chiefly, the Back button functionality doesn’t work, which is a bit of a pain in the ass).

One bug I found during IE testing was using relative URLs for uploading and downloading files was broken. I was using “../[folder]” to access a root folder (my flex app is inside a folder off the root) and whilst this worked on FireFox, when I went to IE 6 & 7 for testing, found it didn’t. Huh.

Flex : Mac compatibility issues

I’ve been working on a Flex application for the past few months, developing on Windows (as you can imagine with all my Flex.NET talk).

I recently began testing on a Mac, assuming as the version of Flash Player (9.0.115) was the same, that it would handle the same. Oops.

OK, so there aren’t too many issues to deal with, but you will need to ensure you have the Flash Debugger Player on your Mac (see this article on switching your player – you’ll need an Adobe uninstaller for it).

The sort of things that get caught out on a Mac for me were:

• Using the “type” property of a FileReference. (The Flex help discusses this). I’ve just switched to manually taking out the file extension.
• An unused state SetProperty that was trying to set the “x” property of the main container without any corresponding value
• Intermittent issues with using HTTPService to open XML files

Actually, testing on the Mac helped me clean up a few things that would otherwise have gone amiss, so I’m not actually complaining as such 🙂

Flex and search engine optimisation

I was just viewing an eSeminar by Adobe on Flash and search engine optimisation.

To summarise:

• In Flash (not Flex), use Metadata tags (via Document Properties) to add metadata to the binary SWF
• Also use the Javascript file: SWFObject to load your SWF, on top of alternate text for a crawler to parse.

The speaker also mentioned that Adobe has an SDK that they provide to the big search engine teams to decompile SWFs to basic HTML for crawlers to successfully parse the SWF. This isn’t available to the general public, however it is interesting to note that it exists.

I also found this interesting article which basically shows XML to the crawler, but the user will see a Flex page (loaded via XSLT) that formats and displays the data appropriately.

If you were going to combine these approaches for Flex, I’m thinking that in the DIV that is used for SWFObject, you could have the text content (in XML form) that you send over to your SWF for display….

Other ideas?

Flex states in an inherited component : MXML inheriting base properties

Problem: I have some component that I’ve created and I want to extend it. However, in the subclass, I’d like to use states with MXML.

Version: Flex 3

Issue: Flex tells you that <mx:states> must belong to the base of the component. The nifty little “lowercase property” feature (I’ve dubbed it thusly) that allows you to define some property of a component in MXML terms doesn’t seem to pickup inherited properties.

For example:

say BasePanel.mxml is my generic panel across my Application

<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” width=”400” height=”300“>

</mx:Panel>

Then in PanelResults.mxml I will extend this panel, but I want to declare states using MXML

<jjm:BasePanel xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:jjm=”com.justinjmoses.examples.mxmlproperties.*“>

<mx:states>

</mx:states>

</jjm:BasePanel>

This will not compile.

The states property that is inherited from Panel will not be detected using the MXML namespace. This is the same for all properties you want to inherit and define using MXML (like transitions, transform, etc).

SolN: Use the same xml namespace as your base component to load up the property, even though it is inherited.
PanelResults.mxml

<jjm:BasePanel xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:jjm=”com.justinjmoses.examples.mxmlproperties.*“>

<jjm:states>

</jjm:states>

</jjm:BasePanel>