Mac style popups – with the source
A few weeks back I posted an example of a mac style popup done in flex. I was soon told that the effect was called Cocoa Sheets. I is learned now
Since then I have had numerous people gently reminding me that I was going to publish the source (you know who you are), so here it is.
First off I want to describe the way I tweened the placement of the component as a lot of people didn't seem to know about it. I used the built in AnimateProperty class built into flex. This allows you to animate pretty much any property of a component.
<mx:AnimateProperty easingFunction="{Sine.easeOut}" id="dropIn" property="y" duration="500" fromValue="{this.y}" toValue="{(isApplication)? 0 : 103}" target="{this}"/>
You then just have to call dropIn.play();
Easy peasy! and you can use this in actionscript aswell like I did in the CocoaPopUpManager class. Its very handy.
Now onto the manager. I started by building my own PopUpManagerImpl class to replace the system singleton, but as expected hit a lot of road blocks once I stepped into the mx_internal namespace. So I just made the Cocoa version a sort of proxy to the PopUpManager. Works for now but you may find limitations. Please feel free to contact me with any improvements you might make.
The new example with view source enabled is HERE and SOURCE IS HERE
If you use it and make it look cool please leave a comment here so I can see your works of art



[blush] yes I was one of them bugging you.
Hey just a quick point about a small bug in Flex that affects your code. Click on a button that creates a modal popup (like the top left button). Once it appears, press the spacebar. Even though you have disabled the screen, pressing the spacebar will click on the modal button again. The “workaround” I’ve used is that once I show my dialog, I set focus to it using a doLater. Once it has focus, you can’t click on anything else or use the spacebar.
Thanks for sharing with us!!!
-Pat
I think you should put this in one of the libraries. It could really benefit from exposure in flexlib. You should Doug take a look at it and see if it would be a candidate.
Great work on this one! Really improves the look and feel of my flex application.
Cheers Tony, I will ping Doug now hes back from MAX
Cheers for the tip Pat
Will update and add to the example
I can’t download it.
The link is valid.Thanks!
No worries mate. Sorry my blog got H4×0r’d and I have to rebuild it, and missed a couple of folders
Hi Campbell
For some reason the component breaks when the parent object has a layout other than absolute.
Eg., Changing your demo app to <application layout=”vertical”…
breaks it.
Likewise, keeping layout = “absolute”, but placing the parent inside a vbox / hbox also breaks it.
I’ve taken a look through the source, but can’t work out what’s causing the problem. Any hints?
Cheers
Marty
I can read the source code
I want have the code,I think it’s cool ,can you gave me one to my Mail