Category: Flex

mx.managers.PopUpManager is a utility class in Flash MX 2004, Flash 8, Flex 1.5, and Flex 2 used to create popups. A popup is classified as a component that floats above the main application. Typically, Windows, Alerts, and ComboBox drop downs are used in this fashion. Developers utilize them for creating popup dialogues like preferences, login windows, etc.

The method createPopUp takes, usually, 3 parameters. The first is which window to pop over, the 2nd is the “thing” to create as a popup, and the 3rd is whether to make it modal or not. Modal being you have to close that popup before you can interact with any other component on the stage. Using alert() in JavaScript will generate a modal dialogue for example. Shutting down your computer on Windows XP shows a modal dialogue; you can only click one of the 4 buttons.

Typically, the first parameter in Flash is set to _root. While not the best choice, as long as your SWF is never loaded, it’s a satisfactory choice. You are better off using your top level component, typically the one that wraps your entire application. Your main application class can provide a reference to itself for this purpose, or you can only delegate the “power of creating popups” to it, thus it can pass “this” in as the first parameter. Using _root, however, when using the centerPopUp method, it’ll utilize the whole movie to find out where the center is, thus nicely positioning the window in the center.

_level0 isn’t so hot because if your SWF is loaded into another one, you cannot prevent the popups from “invading” your main movie via _lockroot. This is the common fix for the ComboBox component in Flash when it’s used in a SWF that is loaded. The dropdown no longer works because the PopUpManager digs his way up to find the “one true _root”.

Seriously, I’m not justifying the use of _root, but if you’re in a rush and aren’t loading movies, it’s an acceptable choice.

Using the component that launched the PopUpManager isn’t so hot either because centering can get really jacked up if your component you are using is itself off-centered when using centerPopUp. Granted, there are valid use cases.

Using _root in Flex, however, isn’t such a good idea. Using it in Flash is bad enough; it’s a hardcoded reference to something. While the practice of loading Flex applications into other ones is frowned upon (by me at least), using archaic Flash references in a more Object Orienated codebase will confuse other Flex developers, and there is another way.

Using MovieClip(mx.core.Application) instead of _root is a more “wow my code doesn’t look hardcoded even though it is” way. You and I know what _root is, but some other Flex developers might not. Additionally, the casting to MovieClip is just so the compiler will leave you alone. Perfect example of where OOP gets in the way.

…2nd time in this blog entry I’ve been tempted to suggest using _root…

Do not use mx.core.Application.application, that’ll crash Flex. All that is is a static getter/setter that returns _level0, but for some reason it crashes your SWF.

In Flex 2, they actually provide a nice new method for us, popUpWindow. A conveinance method much like the Flex 1.5’s alert, which allowed you to easily create alerts with less code.

Again, popups are not just dialogues and forms-in-your-face, they can be for component GUI controls, as well. Just the other day, I created the popup slider that you have in Photoshop and Fireworks for adjusting alpha values; the actual slider is a popup. On the other end of the spectrum, entire mini-applications can be used as popups as well. They are draggable when using containers like Panel & TitleWindow if you don’t make them modal.

Thanks to Patrick Mineault, Renaun Erickson, Dave Wolf, and Peter Farland.

To get AMFPHP to work with the Flex 2 Alpha, you need to:

1. Extend NetConnection just so 3 methods can be added to it
2. Have your gateway connection extend that new class
3. Have the new encoding set to AMF0
4. Make your calls using “YourClassAndPackage.method”

The extended NetConnection looks exactly like this:

package
{
        import flash.net.NetConnection;
        
        public class NetConnection2 extends NetConnection
        {
                public function AppendToGatewayUrl(append:String):Void
                {
                }
                
                public function AddHeader():Void
                {
                }
                
                public function ReplaceGatewayUrl():Void
                {
                }
        }
}

And some psuedo code for calling your server:

// import the internal classes
import flash.net.Responder;
import flash.net.NetConnection;
import flash.net.ObjectEncoding;

// import your custom class
import NetConnection2;

public var gateway_conn:NetConnection2;

// setup your jazz
var gatewayURL:String = "http://server.com/amfphpfolder/gateway.php";
gateway_conn = new NetConnection2();
gateway_conn.objectEncoding = ObjectEncoding.AMF0;
gateway_conn.connect(gatewayURL);

// call back functions
public function onPingResult(event:Object):Void
{
        // success!
}

public function onPingResult(fault:Object):Void
{
        // loop through fault object
}

// make a method call on
// a PHP class
var r:Responder = new Responder(onPingResult, onPingStatus);
gateway_conn.call("YourPHPClass.theMethod", r);

You can pass as many parameters you want starting from the 3rd parameter, on.

Bad news is, mx.remoting.RecordSet converted recordsets for you in Flash MX 2004 & Flash 8. Since that class doesn’t exist in Flex 2, you can either wait for Adobe to do it, do it yourself, or convert plain arrays to meaningful data.

Remoting with strong-typing… mmmmmm…

Flex was made for true software developers. I apparently am not the target market of said demographic, or have yet to see the benefit of casting off the usage of clicking graphical buttons.

Suffice it to say, there isn’t a symbol to right click on with an “Export SWC…” in the context menu like in Flash. Since Yahoo! Maps was created this way, however, it must still be good, right?

A program called “compc.exe” creats SWC’s in Flex. You point it at an MXML or AS file, tell it where your classes root folder is, and tell it what to name the the SWC file. There are a lot more parameters you can use the docs, but those main 3 are all you need to create SWC’s.

SWC’s are basically .zip files that contain your packaged component, and potentially other assets. They are what jar files are to Java. They can contain non-graphical, compiled assets for portable class libraries, or even images that your component needs to draw itself.

They are really nice in Flex because you deploy with your app, greatly simplifying the amount of files in your project. Additionally, you can deploy them on the server so all applications on your Flex server compile with the same SWC.

Since I was constantly testing a component recently, I had to keep remaking the SWC. Here’s a simple script you can paste into Notepad, and save as a .bat file on Windows. Then, all you have to do is double-click the file, and it’ll recompile the SWC for you.

cd c:\program files\macromedia\flex\bin
compc -o "C:\mypath\my.swc" "c:\mypath\mymain.as" -root "c:\mypath\"

Ensure there is a carriage return after the “bin” so the compc part appears on it’s own line.

You can obviously automate this in other build tools like ANT.

I haven’t figured out how to get this dyanamic yet, meaning, loading an image externally that isn’t compiled in. I know it can be done, but alpha bits are tough. Best excuse I have, sorry.

There some new styles that correspond to skins. I’m still reading and learning, and have seen a CSS example Dirk posted somewhere, but the setStyle way is nice since I’m familiar with the syntax, and if it’s a style, it can be set in CSS, and bound to, etc.

Here’s an example that uses a PNG, a GIF, and a JPG.

The key is the style names, as shown here. skin_pb is the name of the Button, img is the pointer to one of the embeded images, and the the rest are the skin style names.

skin_pb.setStyle("upSkin", img);
skin_pb.setStyle("selectedUpSkin", img);
skin_pb.setStyle("selectedOverSkin", img);
skin_pb.setStyle("selectedDownSkin", img);
skin_pb.setStyle("selectedDisabledSkin", img);
skin_pb.setStyle("overSkin", img);
skin_pb.setStyle("downSkin", img);
skin_pb.setStyle("disabledSkin", img);

Flex 2 Button Skin – Source ZIP