Fixing Menus in Full Screen Mode

There was a bug in Flash Player 9, where the text of a Flex Menu control would not show up when your application was in Full Screen mode. Actually, you would see the main menu, but, submenus would have no text visible. This problem was fixed in Flash Player 10. If you grab the Flash Player 10 alpha, you should see that the problem has been fixed.

However, naturally, you can’t depend on all of your users having Flash Player 10 immediately. You can make a minor change to a Flex Menu to work around the text problem. Just set the openDuration style for the Menu to 0. This will remove the Tween from the opening of your Menus, which may not be desireable, but, at least your text will show up. Here’s a small sample snippet:

var categoryMenu:Menu = Menu.createMenu(this, xmlFile, false);
categoryMenu.labelField=”@label”;
categoryMenu.setStyle(”openDuration”, 0);
categoryMenu.show(0,0);

For reference and more information, you can see the Flex Bug that was filed related to this problem. SDK-15007

Why don’t my deprecated styles work in Flex 3

For Flex, our documentation has the following definition of what “deprecated” means:

While deprecated elements still work, Adobe recommends that you do not continue using deprecated elements in your code. Support of deprecated elements in the future is not guaranteed.

As a developer, you might be too busy to migrate all of your code to use new API behaviors in Flex 3, so you decide to keep on using some deprecated styles.  I mean… they should work right?  Adobe’s documentation says that they will still work.

Well, Peter deHaan (a Flex QA guy on my team) who likes to keep our documentation honest pointed out that the description of “deprecated” is actually false. There are a good number of styles that we deprecated for Flex 3 that don’t work anymore. These are mostly due to the Style Proxy changes that I described in a different post: Upcoming Changes to Flex Styles. These styles include items like columnCount, horizontalGap and backgroundColor for a ColorPicker. So, if you compile something like this:

<mx:ColorPicker columnCount=”10″ />

You won’t get the expected 10 columns in your swatch panel. To get styles like this working again in a Flex 3 compiled application, you need to use the backwards compatibility flag: -compatibility-version=2.0.1. This will allow columnCount to work as it did for Flex 2 even though you are compiling in Flex 3. However, as a warning, when you use the -compatibility-version flag, you will get all of the Flex 2 behavior that supports the flag. To see what you get with this flag, you can check out this link:

http://learn.adobe.com/wiki/display/Flex/Backwards+Compatibility+Issues

Anyways, Peter filed a bug against our documentation, so, hopefully, this confusion over what deprecated means will be resolved.

Creating smooth rollOver and rollOut Effects

In the Flex framework, if you have a rollOver and rollOut effect set on a particular component, you might experience some very jerky movement when you roll over and out of the components quickly. Here is an example: Non-Smooth Effects. Try rolling over and out of the Buttons quickly. You will notice that the movement is not smooth. The reason for this is explained in bug SDK-430.

” Currently in rollOver if the user roll’s out before the rollOver effect finishes, the framework will call end on the rollOver effect, then play the roll out effect. The result is jarring.”

To get around this, you need to manage each effect instance that plays. If the instance has not completed, then, your rollOut effect should be to do a “reverse” on the effect. Jason Szeto posted a simple example of how to do this in the bug. Download the bug file “ZoomRollOver.mxml”. Here is the code:

<?xml version=”1.0″ encoding=”utf-8″?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Script> import mx.effects.*; import mx.effects.effectClasses.*; import mx.events.*; import mx.core.*; public var resizeInst:ResizeInstance; public function handleMouse(event:MouseEvent):void { if (resizeInst) resizeInst.reverse(); else r.play([event.currentTarget],event.type==MouseEvent.MOUSE_OUT); } </mx:Script> <mx:Resize id=”r” heightTo=”100″ heightFrom=”22″ effectStart=”resizeInst = ResizeInstance(event.effectInstance);” effectEnd=”resizeInst=null”/> <mx:Button width=”200″ mouseOver=”handleMouse(event)” mouseOut=”handleMouse(event)” /> </mx:Application>

I have modified this example to work for a group of Buttons. This involved managing all of the effectInstances that were playing in an Array (because multiple instances could be running at once). Hope this helps someone since I’ve seen this asked about on multiple forums.

Demo: ZoomRollOverGroup_withEffects.swf

Sample Code: ZoomRollOverGroup_withEffects.mxml

I’m not sure this is the cleanest solution, but it seems to work. Modify it as much as you’d like.

Changes from Flex Beta 3 to Flex 3 Release

Some customers have asked us what changes went into the Flex SDK from Beta 3 to our release. I tried to find this information via our public bugbase, however, there didn’t seem to be one. Instead, I went through all of the developer changelists between these two public releases and made a list. Hopefully, this list will help your resolve any issues that you have moving from Flex 3 beta 3 to the released version. All of the changes were bug fixes.

AIR Component Changes:

SDK-13902: Download source link fails in AIR view source. (changes made to WindowedApplication class)

SDK-14062 : DragProxy does not show up in DataGrid when running on AIR

SDK-14300, SDK-14399: minWidth, minHeight, maxWidth and maxHeight changes to fix various bugs.

SDK-14544: Popups in an mx:Window were showing up behind the <mx:Window>. This bug affected Menus, Alerts, PopUps and Tooltips in AIR.

List Based Component Changes:

SDK-13908: Runtime error on dragDrop for DataGrid

SDK-13902: TileList did not recycle rows.

SDK-13807: Items disappear as you move items around and scroll in a Tree.

SDK-13977: Horizontal TileList and List with offscreenExtraRowsOrColumns dragDrop cursor position is incorrect on a scroll

SDK-13980: List component gets into a bad state with empty rows if you drag and drop and have offscreenExtraRowsOrColumns set.

SDK-13540: Runtime error when navigating List or Tree using pending simulator

Tooltip Changes:

SDK-13465: Unexpected toolTip shows up

Cross-versioning Bug Fixes:

SDK-13930, SDK-13931, SDK-13945, SDK-13862

Other:

SDK-14044: SWFLoader and SystemManager references to SystemManager were changed to ISystemManager.

Note: This was a manual process of me going through internal check-in emails for the period between Beta 3 and our release. Therefore, I might have missed a couple of bug fixes.

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”.

Understanding Flex 3 Migration Issues (Part II)

Panel Changes:

Issue during migration: Panel Skin no longer displays correctly

Cause of compatibility issue: To make skinning a Panel easier, the skin specific logic was moved into a new PanelSkin. The Panel specific code in HaloBorder was also moved into PanelSkin. The borderThicknessLeft/Right/Top/Bottom styles are now only implemented by PanelSkin. These styles used to be implemented by Panel. Panel now relies on its border skin to provide the borderMetrics, which is consistent with the rest of the controls and containers.

Fix: For your PanelSkin, if you were extending HaloBorder, Border or RectangularBorder, extend PanelSkin instead. I’ve written another post on this subject:

http://butterfliesandbugs.wordpress.com/2008/01/30/migrating-custom-panel-skins-from-flex-2-to-flex-3-moxie/

Issue during migration: With the public Flex 3 beta, my Panel skin worked, but, it doesn’t work in the released version.

Cause of compatibility issue: In the beta, we supported setting the Panel’s borderMetrics of a skin to the scale9Grid, if it was present. We removed this functionality before the release because of some problems that some users were facing.

Fix: You can’t rely on the scale9Grid of the skin to be used to layout your content.

DataGrid Changes:

Issue during migration: Your skinned DataGrid header no longer looks correct.

Cause of compatibility issue: Again, to make customizing a DataGrid header easier to skin, the logic from drawHeaderBackground is now implemented in a DataGridHeaderBackgroundSkin. In Flex 3, the headerBackgroundSkin style was added.

Fix: Extend DataGridHeaderBackgroundSkin to create a custom DataGrid skin. Then, assign this skin to the DataGrid with headerBackgroundSkin.

General Changes:

Issue during migration: A compile error like - Error: Implicit coercion of a
value of type mx.core:IUITextField to an unrelated type flash.display:DisplayObject.

Cause of the compatibility issue: In Flex 3, the protected variables that were UITextField are now of type IUITextField. These changes were done to enable versioning in Flex 3.

Fix: you need to cast the textfield to a DisplayObject.
(e.g. addChildAt(embedTextField,getChildIndex(DisplayObject(textField))); )

Understanding Flex 3 Migration Issues (Part I)

After several public and private betas, Flex 3 was released along with AIR 1.0 last Monday. Yipee! We’ve so far heard several customers who are looking for an official migration guide for getting their Flex 2 applications to work in Flex 3. I’m sorry to say that there isn’t an official migration guide. The reason is because from Flex 2 to 3, there were very few (if any) API changes. It was a MUCH bigger transition for applications going from Flex 1.5 to 2.0 when our product went through a huge API scrub and move to Actionscript 3.0.

Still, some of you may be finding that your application doesn’t quite behave the same or look the same in Flex 3.0. For these problems, your best two resources would be two backwards compatibility docs provided by Adobe’s doc team

http://learn.adobe.com/wiki/display/Flex/Backwards+Compatibility+Issues#BackwardsCompatibilityIssues-BackwardsCompatibilityCompilerOption

This document provides a list of changes in the Flex Framework that are supported by the a backwards compatibility flag in the compiler (-compatibility-version=2.0.1). For example, padding in Button never worked correctly before Flex 3. So, we fixed it. However, some people who may rely on the old measurement logic of the Button may not want to change their code to work with Flex 3’s padding changes. In your application, you can bring back the old behavior in Flex 2.0.1 by compiling their applications with the additional compiler argument -compatibility-version=2.0.1. However, beware, using the backwards compatibility flag is a “all or nothing” situation. If you compile your application with this flag, you will bring back all of the 2.0.1 behavior in the above document. You cannot pick and choose which compatibility changes to revert back.

There is also one document of backwards compatibility changes that are not supported by the -compatibility-version compiler argument. These changes come with Flex 3 and you need to live with it.

http://learn.adobe.com/wiki/display/Flex/Backwards+Compatibility+Issues#BackwardsCompatibilityIssues-ChangesNotSupportedByTheBackwardsCompatibilityFlag

For this week, I thought I would post about some changes in the framework that will likely cause some differences in Flex 2 applications.

Button Changes

Issue during migration: Button labels are now truncated. For example, this code produces a truncated label in Flex 3, but, not Flex 2.

<mx:Button label=”blue moon party” width=”105″ />

Cause of compatibility issue: In Flex 3, all Buttons have paddingLeft, paddingRight, paddingTop and paddingBottom of 10, by default. Padding styles didn’t work in Flex 2.0.1. The space to the left and right of the Button label in Flex 2.0.1 varied.

Fix: Adjust the paddingStyles. For example -

<mx:Button label=”blue moon party” width=”105″ paddingRight=”1″ paddingLeft=”1″/>

Issue during migration: The Event.CHANGE event no longer triggers on a Button or CheckBox unless there is user interaction. If the selected property changes programatically, the event doesn’t trigger.

Cause of compatibility issue: There needed to be a distinction of changing the selected property from user interaction vs programmatically.

Fix: If your code changed the selected property, it should know what to do when this happens.

DataGrid Changes:

Issue during migration: DataGrid code that relied on rowCount does not behave the same.

Cause of compatibility issue: rowCount and lockedRowCount no longer include the header. Also, the itemClick event’s rowIndex property returns 0 for the first row of data.

Fix: Adjust your code to look for different rowCount values. Most likely, you’ll need to subtract 1 from any rowCount value used in Flex 2.0.1.

Issue during migration: You get a runtime error or wrong behavior in a custom component that subclassed DataGrid. In this subclassed component, you used MyDataGrid.getChildAt(…) to access various children of the DataGrid, like the vertical scrollbar.

Cause of compatibility issue: The order of children in the DataGrid was changed. For example, in Flex 2, MyDataGrid.getChildAt(3) used to yield the vertical scrollbar. In Flex 3, it doesn’t. MyDataGrid.getChild(4) yields the scrollbar. In general, you shouldn’t expect the order of children to stay the same. We don’t guarantee this.

Fix: If possible, don’t use getChildAt to access internal components of the DataGrid. Otherwise, adjust which child you are accessing.

more ahead…

Baseline alignment with constraints in Flex 3

One of the minor improvements in Flex 3 regarding layout is baseline alignment. Setting the baseline constraint means that the user is specifying an offset from the top edge of a constraint region or parent border and the control’s baseline. By offering a baseline constraint style, we can now allow multiple components to be constrained along a single shared baseline. Here is an example of two panels. One has no baseline set on the components. The other uses a baseline and a ConstraintRow.

The Panel using a baseline constraints looks like this:

<mx:Panel title=”baseline in a ConstraintRow” layout=”absolute” > <mx:constraintRows> <mx:ConstraintRow height=”200″ id=”row1″/> <mx:ConstraintRow height=”100″ id=”row2″/> </mx:constraintRows> <mx:Text text=”San Francisco” baseline=”row1:20″ /> <mx:Button label=”Newton” x=”70″ baseline=”row1:20″ /> <mx:DateChooser x=”140″ baseline=”row1:20″ /> <mx:Label text=”Romania” x=”310″ baseline=”row1:20″ /> </mx:Panel>

Demo: simpleBaseline.swf

Source: simpleBaseline.mxml

At this time, you cannot set the verticalAlign style to a baseline. This is still an open bug: SDK-11725

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” 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

Using a border skin for a TitleWindow in Flex 3

Happy Valentines Day, everyone! In celebration of the day, I thought I’d put together a very cheesy, border skin with a lot of hearts to use for a TitleWindow. It’s pretty simple to use a border skin with a TitleWindow, but, in my opinion, it’s not obvious what you have to do to make your content layout correctly.

In the following example, I am using a png asset that I’ve created as the skin. When embedding it, I am defining a scale-9 grid:

border-skin: Embed(”hearts_skin.png”,
scaleGridLeft=”44″,
scaleGridRight=”360″,
scaleGridTop=”54″,
scaleGridBottom=”219″);

This ensures that the area of my skin that I want to have as a border for the TitleWindow stretches or shrinks correctly regardless of the content in my container. Next, I define where my content will live inside the TitleWindow by using the padding styles:

paddingTop: 55;
paddingLeft: 45;
paddingRight: 45;
paddingBottom: 40;

If you do not specify padding styles in the TitleWindow, your content will overlap with the title and/or close button.

Have fun with this example!

Demo: skinnedTitleWindow.swf

Source: skinnedTitleWindow.mxml, hearts_skin.png

In the example, you can click the button “add child to TitleWindow” to see the TitleWindow grow, but, it should keep the correct proportions of the borders.