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.

airkiosktest

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.