Monthly Archives: March, 2009

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

How to add a scrollbar to a Gumbo Application

Because much of the new Flex 4 (Gumbo) framework is a “pay as you go” strategy, for performance, there is a lot of functionality that doesn’t come out of the box anymore. However, many of these things can be easily customized in the skins. For example, for every container and for your main Application, you won’t get scrollbars, by default. Scrolling was deemed too expensive and a lot of our customers’ applications don’t use them. Therefore, to get a scrollbar in your main Application (or any container), you will need a custom skin. Don’t be alarmed, the change in the skin is VERY simple.

To add a scrollbar, you can just copy the code from the default skin and  add a “Scroller” to surround the Group with the id “contentGroup”.  So, your skin will have something like:

<s:Scroller  id=”scroller” width=”100%” height=”100%” hasFocusableChildren=”true”>
<s:Group id=”contentGroup” left=”0″ right=”0″ top=”0″ bottom=”0″ />
</s:Scroller>

Finally, in your Spark Application, you want to define this custom skin as your skinClass:

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

To see the code: TestApp.mxml, FxApplicationSkin.mxml

To see the swf run: TestApp.swf

 

Note: This post was updated on April 27, 2009 after we renamed and repackaged many of the Gumbo classes to remove the Fx prefix.

New files were updated on December 3, 2009 after we changed the structure of the Application skin.

————————————————–

I have updated the samples for this post again after the release of Flex 4 and 4.1.

updated Samples as of November 2, 2010:

To see some sample code: MainScrollableApp.mxml, CustomAppSkin.mxml

To see the swf run: MainScrollableApp.swf

Flex 3.3 (a new update) is officially available

SDK 3.3 is now available!

SDK and DMV downloads from Adobe.com:

http://www.adobe.com/products/flex/flexdownloads/

Release Notes for SDK 3.3 (including instructions for updating with DMV 3.3):

http://www.adobe.com/support/documentation/en/flex/3/releasenotes_flex3_sdk.html

Flex 4 SDK downloads now include Spark skins for all the components

If you happen to download our latest Flex 4 (Gumbo) nightly build (build 5101 or later) and compile an application, you will probably notice that the look of your application may have completely changed. Recently, new spark skins were implemented for all of our Halo Flex 3 components. This includes a new “Spark” skin for components like DataGrid, DateChooser, DateField, TabNavigator etc, which do not have equivalent components in the new Gumbo architecture.  This way, when you are building a brand new application in Flex 4, you will be able to mix the new Gumbo components with Flex 3 halo components, and they will all look the same. Here is a sample of what the new default skin looks like :

sparkskins

Here are a couple of things to note about these new skins:

1. The default size of text is now Arial 12.

2. The default size of many components has changed.  For example, if you have a Button in a Flex 3 application with no width or height set, it will be much wider when compiled in Flex 4.

3. Many of the styles that are supported in the halo (flex 3) theme is not supported in this Spark theme such as cornerRadius, fillColors, themeColor, etc. The only styles supported are those supported by our Spark components. (see #4)

4. The styles supported by the skins are baseColor, symbolColor, focusColor, contentBackgroundColor, color, rollOverColor and selectionColor.

5. There are still a lot of bugs with the spark theme on our Flex 3 components. Just Friday, I filed about 10 bugs on the components! If you care to see the bugs, search for “spark_skins” in the subject line of a bug in JIRA.

6. You can compile your application with this Gumbo build and use the old halo theme instead of the Spark theme which is now the default. To do this, add the argument “-theme=../frameworks/themes/Halo/halo.swc” to your compiler arguments.

To get an idea of what these skins look like, check them out here: SparkSkins.swf

The source for this application is here: SparkSkins.mxml

To download a new nightly build with the Spark skin defaults, go to opensource.adobe.com.