1
2
3

var _popup:MyPopup = new Popup();
PopUpManager.addPopUp( _popup, this );
PopUpManager.centerPopUp( this );

You may even switch out the “this” reference and replace with “parent” or “parent.parentApplication” to center the popup on the entire application.

This can be especially true if you’re opening a popup from a small component in your application and don’t necessary want the popup to get centered on that one single component.

Unfortunately, if the dimensions of your parent Application are larger than the dimensions of the viewable browser window, you will have to center the popup manually rather than use the built-in centerPopUp() function.

Here’s how I center popups manually in Flex:

First, in your HTML template, I create a JavaScript function to return the browser width and height. I found this handy function on the web somewhere and it seems to do the trick:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function getBrowserHeight()
{
	var winW = 630, winH = 460;
 
	if (parseInt(navigator.appVersion)>3) {
	 if (navigator.appName=="Netscape") {
	  winW = window.innerWidth;
	  winH = window.innerHeight;
	 }
	 if (navigator.appName.indexOf("Microsoft")!=-1) {
	  winW = document.body.offsetWidth;
	  winH = document.body.offsetHeight;
	 }
	}
 
	return winH;
}

In this case, it’s only returning height (which I’m mostly interested in), however you can modify it to return both attributes if you’d like.

In Flex, I make a call to JavaScript using ExternalInterface during application startup and store that value somewhere (say on the Model) where I can access it later:

1

model.browserHeight = ExternalInterface.call( "getBrowserHeight" );

Now, whenever I open a popup, I use the browserHeight I’ve stored on the Model and manually compute a centered position on the screen:

1
2
3
4
5
6
7
8
9
10

/**
 * Opens this popup
 */
public static function open( parent:UIComponent, model:MyModel) : void
{
	var _popup:MyPopup= new MyPopup();				
	PopUpManager.addPopUp( _popup, parent.parentApplication as DisplayObject, true );
	_popup.y = ( model.browserHeight / 2 ) - ( _popup.height / 2 );
	_popup.x = ( ((parent.parentApplication.width) / 2) - (_popup.width / 2) ); 
}

In this example, I place a static function within the popup class itself, which nicely encapsulates that logic. I also pass in some UIComponent. This is used mostly to get access to the parentApplication object, which I can use to figure out the application’s total width.

As you can see, by dividing the application width and height, then subtracting the popup’s width and height, you can manually center the popup in the visible area of the browser regardless of the application’s full height (which could be thousands of pixels high in some scrollable instances).

Opening the popup from a view is as simple as calling the static function:

1

SubmitAdPopup.open( this, model );

I’ve run into this situation quite often in various Flex applications so I hope this may help others who finds themselves in the same boat.

Opinions? I’m curious in seeing how others solved this riddle.

I added an overlay to the map of my Xuland flex-based social networking tool which resembled a radar (concentric circles, tinted slightly green):

Before adding the radar overlay, I could drag the map as normal, however after adding the overlay atop the visible map area, the map no longer responded to mouse drag events.

Before writing a lot of code to catch and re-dispatch mouse events from the overlay to the map, I admit I felt a little silly after discovering a simple property that just needed to get added to my overlay:

1
2
3
4

<map:RadarOverlay
	id="radar"
	buttonMode="true" useHandCursor="true"
	mouseEnabled="false"/>

As the API mentions: “Specifies whether this object receives mouse messages. The default value is true, which means that by default any InteractiveObject instance that is on the display list receives mouse events. If mouseEnabled is set to false, the instance does not receive any mouse events. Any children of this instance on the display list are not affected. ”

And it worked perfectly!

ColdFusion has been a perfect fit for Flex since I had used the software quite extensively for much of my programming career. However, as I prepare Xuland for go-live (August 13th – which also coincides with the Adobe MAX Awards deadline for entry date), I realized that without a license for the software I would be restricted to shared hosting services – a solution that would not work in the long-run, especially if Xuland were to suddenly gain popularity.

As I considered dedicated or “cloud” hosting, I would have to either buy an $8,000 ColdFusion license (umm, no) or switch to an alternative. BlueDragon piqued my interest, but it unfortunately does not yet support AMF. Without the ability to remote, my application would launch already dead in the water.

Another alternative, completely unknown to me before today, is Railo (pronounced “Rhylo” after a fictitious alien dog in Star Trek).

“Railo is a free, open-source alternative for ColdFusion application development.” It currently supports the AMF3 format (whereas in the last version it only supported AMF0) and comes shipped with its own application server and servlet engine (Caucho Resin). In fact, the Express versions can be downloaded, configured for Flex and launched within minutes. The best part is it’s completely FREE.

I’ve since switched from ColdFusion to Railo and with hardly any tweaking, Xuland was running against Railo executing the same CFC’s I had already written for ColdFusion 9. After starting the Railo service locally the first time, it automatically created the necessary Flex remoting-config and services-config XML files needed in the WEB-INF directory. Remoting worked perfectly, and I dare say it seems a bit faster (I have not run any benchmarks quite yet, however).

If you’re looking for a solution similar to this, definitely consider Railo as it works as well as ColdFusion without the sheer cost.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

public static function generateRandomPassword( length:int = 7 ) : String
{
	//characters to use in password
	var _salt : String = "abchefghjkmnpqrstuvwxyz0123456789ABCHEFGHJKMNPQRSTUVWXYZ";
 
	//initialize vars
	var _password : String = '';			
	var _i:Number = 0;
 
	//loop 
	while ( _i <= length )
	{
		var _num : Number = Math.random() * _salt.length;
		_password += _salt.charAt( _num );
		_i++;
	}
 
	return _password;
}

Enjoy!

I thought this would be pretty simple to do but realized after digging through the Flex 4 SDK that there was no public property I could set to change this. I tried hacking commitProperties and a couple of other methods but came up short in those areas as well until I found the exact spot in the Flex libraries where this character was defined:

RichEditableText.as (line 679)

1
2
3
4

    /**
     *  @private
     */
    mx_internal var passwordChar:String = "*";

A-ha! I see here that it’s prefixed with the “mx_internal” namespace and I remembered from other examples around the web that you can easily tap into that namespace and modify properties not normally meant to be modified.

Luckily, I had already extended the TextInput class for various other reasons and decided to add an event listener for the CREATION_COMPLETE lifecycle event of the component. This was added in the constructor:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import mx.core.mx_internal;
 
/**
 * Constructor
 */
public function myTextInput()
{
	super();
 
	this.addEventListener( FlexEvent.CREATION_COMPLETE, onCreationComplete );
}
 
private function onCreationComplete( event : FlexEvent ) : void
{
	//change internal passwordChar to a bullet versus an asterisk
	this.textDisplay.mx_internal::passwordChar = "●";
}

…and voila! By tapping into the mx_internal namespace, I found I could modify the normally private variable “passwordChar” and set it to something I preferred better (in this case, the bullet point used in some sites like Twitter).

Hope this helps someone!

In addition to the ad campaign, a new web page was added to Adobe’s website: http://www.adobe.com/choice/?sdid=GXRUX, which discusses the Open Screen Project, and includes a Flash fact sheet (no doubt, from Adobe product manager Mike Chambers), and a message from Adobe’s founders John Warnock and Chuck Geschke.

This is undoubtedly in response to Steve Job’s memo published on Apple’s website, http://www.apple.com/hotnews/thoughts-on-flash/ back on April 29th. The letter, which publicly blasts Flash as being a closed, proprietary technology that is no longer relevant or in “touch” with today’s mobile devices has received a massive response from the Adobe community and today from Adobe, itself.

Read other posts about this subject:

Mashable: http://mashable.com/2010/05/13/adobe-responds-flash/

NY Times: http://bits.blogs.nytimes.com/2010/05/13/next-round-in-the-adobe-apple-fight/

The article discusses the history between the two companies, outlines a compromise and allows readers to vote on the proposal.

http://www.infoworld.com/print/122878

Give it a try:
The Future of Web Content – HTML5, Flash & Mobile Apps

Getting your hands on the PDF here:
http://download.ffdmag.com/en/ffdmag_03_2010.pdf