The Fx prefix has been removed from Gumbo

Since the beginning of this week, some members of our team have been diligently working to remove the Fx prefix from our new Gumbo components. This involved not only renaming classes, but, moving classes around to different packages and allowing for multiple namespace support in CSS.

As of yesterday, we, in QA, received our first build for this rename effort. We have begun testing the build while updating our tests (thousands and thousands of them…no exageration… there are a good number of sed scripts involved). There have been bugs, runtime errors etc from missed path names or overzealous rename scripts, but, so far, things have gone fairly smoothly and bugs have been fixed quickly thanks to the response of some of our dev and qa members.

If you would like to know what has changed in this huge rename and repackaging effort, you can check out the open source document here:

http://opensource.adobe.com/wiki/display/flexsdk/Dropping+the+Fx+Prefix

I will summarize a few key points:

1) There are four new namespaces that represent :

- The legacy mxml language namespace used in previous versions of Flex (http://www.adobe.com/2006/mxml)

- The new mxml language namespace introduced as part of Gumbo (http://ns.adobe.com/mxml/2009)

- The new namespace for building spark based applications (library://ns.adobe.com/flex/spark)

- Finally, the non-language-version-specific namespace for using halo components and classes in your application ( library://ns.adobe.com/flex/halo).

Therefore, if you have an Application that includes both Halo and Spark components, you will likely have a root tag that looks something like this:

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243; xmlns:s=”library://ns.adobe.com/flex/spark”   xmlns:mx=”library://ns.adobe.com/flex/halo”>

—————————————————-

Next, I wanted to comment on how to use the multiple namespace support in css. You will need to use this if you are styling both Halo and Spark components in CSS. The CSS needs to be able to distinguish which Button you want to style, for example. Did you want a style to apply to the Halo Button or Spark Button.   At the top of your CSS declaration, you would include the two namespaces:
@namespace s “library://ns.adobe.com/flex/spark”;
@namespace mx “library://ns.adobe.com/flex/halo”;

Then, for each type declaration, you will need to specify the namespace along with a “|”. For example, to style a Spark Gumbo Button, you will have:

s|Button {baseColor: #FF0000;}

For a Legacy Halo Button, you would have:

mx|Button {cornerRadius: 14;}

You can also mix two type selectors. In the following descendant selector, you are styling DateChooser components in a Spark Gumbo Panel:

s|Panel mx|DateChooser { color: #693300; }

If you use multiple types in a single selector, be sure to use the namespace for all the types. Here is an example using multiple type selectors:

s|ToggleButton,s|RadioButton {focusColor: #009900;}

mx|VBox mx|DataGrid {selectionColor: haloOrange;}

———————————————-

As for the renaming of classes, almost all of the classes changed were just removal of the prefix and what package they belong to. All of the Spark components that were in mx.components are now living in the spark.components package. The one exception in class names is the class FxComponent. This class was renamed to SkinnableComponent.

Again, for more info, please visit our spec regarding the rename. By next Monday, the build coming from the trunk should be fairly stable.

Cheers to our team who made the rename happen…

toast

About these ads

7 responses

  1. Enormous kudos to Adobe for listening to the community on this issue and implementing what looks like a great solution. I didn’t even know we were also getting multiple and descendant selectors in CSS so that rocks too. Thanks Adobe!

  2. I’m sure this is all for the best but the fact that i’ll have to dump all my Flex 3 books and actually re-learn the language all over again is a bit frustrating…
    In my opinion a programming language should not change with each edition… how are we/our clients supposed to keep up?
    Thanx for all your effort guys, I sincerely hope this is for the best…

    1. @Michael – Well, it will be a new ramp up for new Applications that you build, but, for your legacy applications, things should be pretty easy to compile in Flex 4. The only thing that you will likely have to do is add a default namespace to your css and compile with the old halo theme. We’ve tried to make the product as backwards compatibility friendly as possible.

      But, for new applications built within the new architecture, there is much to learn, but, you’ll catch on quickly and when you try to skin your application, you’ll be amazed at how easy and flexible it is (no pun intended)

  3. What happened to the TextBox class?

    1. @Fllo – The TextBox class was renamed to SimpleText. You’ll find it in the spark.primitives package. This is all in the document at: http://opensource.adobe.com/wiki/display/flexsdk/Dropping+the+Fx+Prefix

      There is a table at the bottom of the spec that shows the old classes and their new package and class name.

  4. Aye, there were so many updates friday on the wiki that I failed to notice this one! Thanks

  5. Joan, this is by all means the best news of the month for me.
    I lobbied a great deal for dropping the prefix and now it’s finally come to fruition.
    Keep up the awesome work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: