RIA Developer, Flex / Flash, Widgets
Flex
Tip of the Day – Creating an AIR application for a kiosk
Jan 30th
Today I needed to prototype a chromeless AIR application for use in a kiosk. It’s actually a whole lot easier than I thought it would be.
Here’s a quick example of what you can do with Adobe AIR and FlexMDI.
The cool thing about Adobe AIR is that it can run on Linux. So if I needed to deploy thousands of kiosks I could install Linux on them and save on windows licensing.
Here is the application source:
<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flexmdi="flexlib.mdi.containers.*" layout="absolute" backgroundColor="0x000000" showFlexChrome="false" applicationComplete="onReady()"> <mx:Script> <![CDATA[ import mx.core.UIComponent; import mx.controls.Button; import mx.core.Application; import mx.events.MenuEvent; import flexlib.mdi.containers.MDIWindow; import flash.display.StageDisplayState; import net.natebeck.BrowserWindow; [Bindable] public var ADOBE:String = "Adobe"; // FlexMDI Manager layout types [Bindable] public var TILE:String = "Tile"; [Bindable] public var TILE_FILL:String = "Tile and Fill"; [Bindable] public var CASCADE:String = "Cascade"; // File Menu [Bindable] public var EXIT:String = "Exit"; [Bindable] public var buttons:Array = [] private function onReady():void { // Enter Fullscreen Interactive State stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE; } public function openWindow(event:MenuEvent):void { var location:String = ""; switch(event.label) { case ADOBE: location = "http://www.adobe.com"; break; case CASCADE: mdic.windowManager.cascade(); break; case TILE: mdic.windowManager.tile(false, 10); break; case TILE_FILL: mdic.windowManager.tile(true, 10); break; case EXIT: var exitingEvent:Event = new Event(Event.EXITING, false, true); this.nativeApplication.dispatchEvent(exitingEvent); if (!exitingEvent.isDefaultPrevented()) { this.nativeApplication.exit(); } break; } if(location.length > 0) { var window:BrowserWindow = new BrowserWindow(); mdic.windowManager.add(window); window.title = event.label; window.location = location; window.maximize(); } } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:MenuBar id="myMenuBar" labelField="@label" width="100%" height="100%" itemClick="openWindow(event);" > <mx:XMLList> <menuitem label="File" > <menuitem label="Exit"/> </menuitem> <menuitem label="Launch" > <menuitem label="Adobe"/> </menuitem> <menuitem label="Window" > <menuitem label="Tile"/> <menuitem label="Tile and Fill"/> <menuitem label="Cascade"/> </menuitem> </mx:XMLList> </mx:MenuBar> </mx:ApplicationControlBar> <flexmdi:MDICanvas id="mdic" top="10" bottom="10" left="10" right="10"/> </mx:WindowedApplication>
And here is Browser.mxml
<?xml version="1.0" encoding="utf-8"?> <flexmdi:MDIWindow xmlns:flexmdi="flexlib.mdi.containers.*" xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"> <mx:Script> <![CDATA[ [Bindable] public var location:String = ""; ]]> </mx:Script> <mx:HTML width="100%" height="100%" location="{location}" /> </flexmdi:MDIWindow>
The full application can be downloaded here.
:: Update ::
There seems to a be a little bug in the applicaiton… when you’re rendering HTML with Flash Content within it. It won’t display in StageDisplayState.FULL_SCREEN_INTERACTIVE mode. However, if you hit the ESC key… the flash content will show up. I’ll have to check and see if there is a bug filed on this.
Tip of the Day – Get notified when someone checks in to the Flex SDK
Jan 29th
Something that I have wanted to do for a while is to be notified whenever anyone checks into the Flex SDK. That way I can keep up with all the changes as they happen. I finally figured out how to set it up today.
-
Visit the commits forum. Click the subscribe button.
-
Select Email or Email Digest.
-
I use gmail, Select Settings > Filters > Create a new filter. Setup the panel as shown.
UPDATE (3/30/2009):
The subject on the Flex SDK commit emails has changed slightly. The filter in the email no longer works. I am now using this filter instead: “svn:fx” of “[svn]”
-
Click Next Step, I use these setting so the emails don’t crowd my inbox.
-
Woot, now I can see all of the changes to the Flex SDK as they happen.
My thoughts on today’s Flex Community Forum
Jan 28th
Joan announced yesterday about, A Public Forum For the Flex Community Tomorrow.
There has been some good and bad feedback regarding the open source aspects of the Flex SDK and the team has decided to go out into the community to hear your thoughts. You can call in to air your concerns or share ideas.
Lately there has been a big upheaval throughout the Flex community dealing with the Fx prefixes in Flex 4. I’m not going to get into it here, but long story short… many people in the community aren’t happy about it.
Even though the Flex SDK is “open source”, it is still tightly controlled by Adobe. All of the planning, new features, all the decisions reside within Adobe. There is the Flex Bug System and it accepts feature requests from the community, which they take into account… but let’s face it, it’s a weak solution.
Today, I had the opportunity to attend the forum. It was absolutely a step in the right direction. Sure, they might have ticked some people off… Nobody likes being told, “This is how we are going to do it, and you have no choice”. That’s not what open source software is about. Sure, it might be too late to take the Fx prefix out of Gumbo… but at least Adobe came to their senses and realized that the community is as vested in this technology as they are.
From my own personal experience… there is a certain disappointment that comes when you’ve invested your own time to contribute to the Flex SDK just to have it deferred or ignored. We’re not being paid to build these things. Don’t take this blog post as a complaint about Adobe or the Flex SDK team, it’s not meant to be that at all. I just think that if Adobe trusts more in the community we can build something amazing.
I think it would be a great thing for Adobe to promote select community members… invite them into planning and discussions, assign features and bugs to them, involve them in decision making. I can rattle off a list of people who would love to be involved on that level with the Flex SDK, me being one of them.
I said it during the meeting, and I’ll say it again. The Flex SDK team should realize that even though it’s their full-time job to make this platform the best it can be.. for a lot of us, it’s our full-time job dealing with the decisions that are made.
:: Update ::
The recording is now available.
Additional Links
Jesse Warden’s thoughts on the issue
Tom Chiverton’s thoughts on the talk
Tip of the Day – Tricks of the microphone settings panel
Jan 28th
I have an extensive background using the Microphone class within Flash Player. Anytime you try to connect to a user’s microphone, Flash Player displays a privacy dialog box that alerts the user to choose whether to allow or deny access to the microphone.
I’m sure you’ve seen it, this is what it looks like:

You widget (or app) MUST be a minimum of 216 x 138 (some people will argue you can do 215 wide, but in my testing sometimes 215 pixels wide can cause issues). When the player window is too small, the settings panel will either:
- Not show up at all, or
- Show up clipped and in some browsers mouse events will not register in Flash
You cannot disable the settings panel.
Here are a few helpful tips that I have figured out:
- The widget needs to be 216 x 138 ONLY when you’re asking for permission to the microphone. If you have control of Javascript on the page, you can change the size of the flash object on the page temporarily while you show the settings panel.
- You can use “Security.showSettings(SecurityPanel.PRIVACY);” to control when you want the settings panel to show up. Using the Security.showSettings method is helpful because there is a Remember button on that panel. If the user chooses “Remember”, then you never have to show the Settings panel again.
- The Microphone status events get dispatched when a user changes a Microphone setting within the settings panel. ( _mic.addEventListener(StatusEvent.STATUS, onMicStatus); )
- On your Microphone class, the “muted” property will tell you if you have access to the microphone or not.

These tips can be adapted for the camera settings panel as well.
Tip of the Day – AS3 Language Reference for your iPhone
Jan 27th
Today was my first real day as Senior Adobe Developer for T-Mobile… and to be completely honest with you guys… I’m completely exhausted and uninspired at the moment
So… with an honest intent to keep up my 30 day tips streak… I’m going to tell you to check out Mike Chambers’ new iPhone application. It may seem silly, but I find having the AS3 Language Reference on my phone incredibly useful at times. For example, when I’m flying, when I have no internet connectivity, or when I’m out at lunch and am trying to brainstorm a solution.
Learn more about AS3 API Reference iPhone application.
*Nate passes out*
Submit your Tip & Win a copy of Balsamiq Mockups
Jan 25th
After yesterdays tip, I’ve been emailing a bit with Peldi, founder of Balsamiq. He’s a really cool guy, and he has granted me 1 license of Balsamiq Mockups to give away.
So now is your chance to get a free copy of Balsamiq Mockups (a $79 value). All you have to do is submit a tip. It can be about anything… Flash, Flex, ActionScript, ColdFusion, PHP, Ruby on Rails, .NET, Papervision3d, graphic design… you name it. Best submission will win a free copy of Balsamiq Mockups.
You may submit as many tips as you’d like (to better your chances). Submissions will be closed and a winner selected on Sunday, February 1st 2009.
Good Luck!
