Monthly Archives: October, 2007

Workaround for error when loading PopUps from Modules

There have been some reports of runtime errors when Applications are loading multiple sub-applications (such as Modules and/or PopUps) from a single Application. One of the bugs with an example that I uploaded can be found here: SDK-13152. In the sample bugfile included with this bug, you can create a popup from a loaded module with no problem. However, once you unload the module and re-load it, you will get an error when attempting to create a popup from that module. The runtime error that you will get is:

TypeError: Error #1034: Type Coercion failed: cannot convert mx.managers::PopUpManagerImpl@13068c1 to mx.managers.IPopUpManager.
at mx.managers::PopUpManager$/get impl()
at mx.managers::PopUpManager$/createPopUp()
at main/addMyPopUp()
at main/___main_Button1_click()

To get around this error, you need to include the IPopUpManager class in your main Application:

import mx.managers.IPopUpManager;
private var iPopUpManager:IPopUpManager;

According to our developers, because of the design of the SingletonManager that supports a bootstrap topology, any time you get into a similar topology (where multiple sub-applications are loaded in a main Application), you need to move shared interfaces into the bootstrap. In this case it is the IPopUpManager, which we can be moved into the main application (effectively the bootstrap) via this two-line workaround.

A similar bug is reported with multiple sub-applications using the DragManager. Details can be found in SDK-995. In this scenario, the Application loaded different swfs using the SWFLoader into various views of a TabNavigator. These swfs both included a DataGrid using the DragManager. To get around the error, the Application needed to include:

import mx.managers.IDragManager;
private var iDragManager:IDragManager;

How to add any AS object to a Flex Container (like a Sprite)

I just discovered that we could include <mx:UIComponent> in any mxml page. I had no idea :p, but, this could certainly be useful. Internally, someone asked how they could add something like a Sprite or a Video object to a Flex container (rather than using the VideoDisplay provided by Flex). Here were some basic guidelines from Alex Harui that I thought might come in handy for some of you:

1. Navigator children must be Containers.

2. Container children must be IUIComponents.

3. UIComponent children can be anything.

So, to add something like a Sprite to your Container, you would wrap the Sprite in a UIComponent. Here is an example:

<mx:UIComponent id=”spriteWrapper” initialize=”spriteWrapper.addChild(new Sprite(…))” />

Cancelling a drag action in List components

Again, I’ve seen the question asked on several occasions regarding how to cancel a drag of an item between List components. The List components all have the drag events: dragEnter, dragExit, dragOver, dragComplete, and dragDrop. Each of these can be overridden with a custom event handler. If you call event.preventDefault() in your custom event handler, you will cancel the default behavior of this event in the List classes. For example, in the sample below, I call event.preventDefault() within the custom dragDrop handler of the destination List. This causes the item to not get added to the destination List and the item is not removed from the initiating List. When you are deciding which events to customize to achieve the drag and drop action you want, you can use this as a general summary of what each event does:

dragStart: This event is triggered on the initiating List. A dragSource is created and the drag begins by calling doDrag on the DragManager.dragEnter: This event is triggered on the target destination List. In the event handler, a drag is accepted or rejected. Drop feedback is shown depending on if this is a copy or move.dragExit: This event is triggered on the target destination List if the item leaves the List without dropping an item. The event handler hides the feedback icon.

dragDrop: This event is triggered on the target destination List when an item is dropped over the List. This event adds the item to the list and hides the feedback icon.

dragComplete: This event is triggered on the initiating List. The event handler removes the item from the list if the drag was a move.

In the sample that I’m providing, I have two Lists. The first List includes the name of a guest and a number of people attending in their group. You should be able to drag items from the first List to the second List until the total number of people “attending” in the second list is greater than 5. In the code, I am increasing the value of a global variable “totalGuests” whenever an item is added to the second list. In the custom dragDrop handler for this second List, the value of totalGuests is checked. If this value is greater than 5, then, the drag is cancelled.

Demo: dragExample.swf

Sample code: dragExample.mxml

Thermo announced at MAX 2007 using new Graphic tags

As many have already blogged about, Adobe announced the project “Thermo” last Tuesday at the general session at MAX 2007 in Chicago. Thermo will be a new tool to help designers create Flex applications using a lot of their familiar workflows. You can find out all about it on Adobe Labs. Aral Balkan filmed some nice footage of the keynote and demo. You can find it here. Unfortunately, all of us employees were forced into a separate room during these general sessions, so we couldn’t do our fair share of oohhh… ahhss.. and cheering.

People at the conference seemed really excited about the prospects of this product and wanted to know when we were coming out with it. But, there is no news in that department. There are no promises as to when this tool will make it to market. Right now, everything is a prototype.

For me, the most exciting this to see was that something that I tested a long time ago has finally been used in the public. In the demo, they showed a photoshop file getting imported into Thermo to create a Flex Application. A brief look at the code will show a new “<mx:Graphic>” tag to represent this image. Inside this <mx:Graphic> tag were other tags like <mx:BitmapGraphic> and <mx:TextGraphic>. I tested these new Graphic tags for the Flex framework at the beginning of this year even though they were not going into Flex 3 (Moxie), so, it was exciting to finally see them used in a Flex Application. A slew of new graphics objects were added to Flex, with corresponding MXML tags. This includes tags for rectangles, lines, ellipses, paths, text, bitmaps, strokes and fills, filters, transformations, and groups. All of these objects can be accessed and manipulated at runtime. So, you will be able to do something like this to draw a simple red line that is 200 pixels long:

  <mx:Graphic>
        <mx:Line yTo="200">
            <mx:stroke>
                <mx:Stroke color="0xff0000" weight="3" caps="round" />
            </mx:stroke>
        </mx:Line>
   </mx:Graphic>

You would be able to treat this Graphic like any other Flex component and change its properties or styles at runtime, play effects on it, etc. Of course, all of this is just in the “prototype” phase, so any of these Graphic tags could change. However, I think its a great step forward for flex to have a set of tags to represent any graphic.