<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Nate Beck &#187; kiosk</title>
	<atom:link href="http://blog.natebeck.net/tag/kiosk/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.natebeck.net</link>
	<description>AIR, Flex / Flash, FMS, PushButton, Game... Developer</description>
	<lastBuildDate>Wed, 07 Sep 2011 21:24:43 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>Tip of the Day &#8211; Creating an AIR application for a kiosk</title>
		<link>http://blog.natebeck.net/2009/01/tip-of-the-day-creating-an-air-application-for-a-kiosk/</link>
		<comments>http://blog.natebeck.net/2009/01/tip-of-the-day-creating-an-air-application-for-a-kiosk/#comments</comments>
		<pubDate>Sat, 31 Jan 2009 07:58:38 +0000</pubDate>
		<dc:creator>Nate Beck</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[Tip of the day]]></category>
		<category><![CDATA[Adobe AIR]]></category>
		<category><![CDATA[kiosk]]></category>

		<guid isPermaLink="false">http://blog.natebeck.net/?p=563</guid>
		<description><![CDATA[Today I needed to prototype a chromeless AIR application for use in a kiosk. It&#8217;s actually a whole lot easier than I thought it would be. Here&#8217;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]]></description>
			<content:encoded><![CDATA[<p>Today I needed to prototype a chromeless AIR application for use in a kiosk.  It&#8217;s actually a whole lot easier than I thought it would be.</p>
<p>Here&#8217;s a quick example of what you can do with <a href="http://www.adobe.com/products/air/" target="_blank">Adobe AIR</a> and <a href="http://code.google.com/p/flexmdi/" target="_blank">FlexMDI</a>.</p>
<p><a href="http://blog.natebeck.net/wp-content/uploads/2009/01/airkiosktest.png" target="_blank"><img src="http://blog.natebeck.net/wp-content/uploads/2009/01/airkiosktest-300x187.png" alt="airkiosktest" title="airkiosktest" width="300" height="187" class="alignnone size-medium wp-image-566" /></a></p>
<p>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.</p>
<p>Here is the application source:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #66cc66;">&lt;</span>?<span style="color: #0066CC;">xml</span> <span style="color: #0066CC;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #66cc66;">&gt;</span>
<span style="color: #66cc66;">&lt;</span>mx:WindowedApplication
    xmlns:mx=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span> 
    xmlns:flexmdi=<span style="color: #ff0000;">&quot;flexlib.mdi.containers.*&quot;</span> 
    layout=<span style="color: #ff0000;">&quot;absolute&quot;</span> <span style="color: #0066CC;">backgroundColor</span>=<span style="color: #ff0000;">&quot;0x000000&quot;</span> showFlexChrome=<span style="color: #ff0000;">&quot;false&quot;</span>
    applicationComplete=<span style="color: #ff0000;">&quot;onReady()&quot;</span><span style="color: #66cc66;">&gt;</span>
&nbsp;
    <span style="color: #66cc66;">&lt;</span>mx:Script<span style="color: #66cc66;">&gt;</span>
        <span style="color: #66cc66;">&lt;!</span><span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span>
            <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">core</span>.<span style="color: #006600;">UIComponent</span>;
            <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">controls</span>.<span style="color: #0066CC;">Button</span>;
            <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">core</span>.<span style="color: #006600;">Application</span>;
            <span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">events</span>.<span style="color: #006600;">MenuEvent</span>;
            <span style="color: #0066CC;">import</span> flexlib.<span style="color: #006600;">mdi</span>.<span style="color: #006600;">containers</span>.<span style="color: #006600;">MDIWindow</span>;
            <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">StageDisplayState</span>;
            <span style="color: #0066CC;">import</span> net.<span style="color: #006600;">natebeck</span>.<span style="color: #006600;">BrowserWindow</span>;
&nbsp;
            <span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span> <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> ADOBE:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">&quot;Adobe&quot;</span>;
&nbsp;
            <span style="color: #808080; font-style: italic;">// FlexMDI Manager layout types</span>
            <span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span> <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> TILE:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">&quot;Tile&quot;</span>;
            <span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span> <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> TILE_FILL:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">&quot;Tile and Fill&quot;</span>;
            <span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span> <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> CASCADE:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">&quot;Cascade&quot;</span>;
&nbsp;
            <span style="color: #808080; font-style: italic;">// File Menu</span>
            <span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span> <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> EXIT:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">&quot;Exit&quot;</span>;
&nbsp;
            <span style="color: #66cc66;">&#91;</span>Bindable<span style="color: #66cc66;">&#93;</span> <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> buttons:<span style="color: #0066CC;">Array</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #66cc66;">&#93;</span>
&nbsp;
            <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> onReady<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
            <span style="color: #66cc66;">&#123;</span>
                <span style="color: #808080; font-style: italic;">// Enter Fullscreen Interactive State</span>
                <span style="color: #0066CC;">stage</span>.<span style="color: #006600;">displayState</span> = StageDisplayState.<span style="color: #006600;">FULL_SCREEN_INTERACTIVE</span>;
&nbsp;
            <span style="color: #66cc66;">&#125;</span>
&nbsp;
            <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> openWindow<span style="color: #66cc66;">&#40;</span>event:MenuEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
            <span style="color: #66cc66;">&#123;</span>
                <span style="color: #000000; font-weight: bold;">var</span> location:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">&quot;&quot;</span>;
&nbsp;
                <span style="color: #b1b100;">switch</span><span style="color: #66cc66;">&#40;</span>event.<span style="color: #006600;">label</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #b1b100;">case</span> ADOBE:
                        location = <span style="color: #ff0000;">&quot;http://www.adobe.com&quot;</span>;
                        <span style="color: #b1b100;">break</span>;
                    <span style="color: #b1b100;">case</span> CASCADE:
                        mdic.<span style="color: #006600;">windowManager</span>.<span style="color: #006600;">cascade</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
                        <span style="color: #b1b100;">break</span>;
                    <span style="color: #b1b100;">case</span> TILE:
                        mdic.<span style="color: #006600;">windowManager</span>.<span style="color: #006600;">tile</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #cc66cc;">10</span><span style="color: #66cc66;">&#41;</span>;
                        <span style="color: #b1b100;">break</span>;
                    <span style="color: #b1b100;">case</span> TILE_FILL:
                        mdic.<span style="color: #006600;">windowManager</span>.<span style="color: #006600;">tile</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">true</span>, <span style="color: #cc66cc;">10</span><span style="color: #66cc66;">&#41;</span>;
                        <span style="color: #b1b100;">break</span>;
                    <span style="color: #b1b100;">case</span> EXIT:
                        <span style="color: #000000; font-weight: bold;">var</span> exitingEvent:Event = <span style="color: #000000; font-weight: bold;">new</span> Event<span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">EXITING</span>, <span style="color: #000000; font-weight: bold;">false</span>, <span style="color: #000000; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>; 
                        <span style="color: #0066CC;">this</span>.<span style="color: #006600;">nativeApplication</span>.<span style="color: #006600;">dispatchEvent</span><span style="color: #66cc66;">&#40;</span>exitingEvent<span style="color: #66cc66;">&#41;</span>; 
                        <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">!</span>exitingEvent.<span style="color: #006600;">isDefaultPrevented</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> 
                            <span style="color: #0066CC;">this</span>.<span style="color: #006600;">nativeApplication</span>.<span style="color: #006600;">exit</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; 
                        <span style="color: #66cc66;">&#125;</span> 
                        <span style="color: #b1b100;">break</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
                <span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span>location.<span style="color: #0066CC;">length</span> <span style="color: #66cc66;">&gt;</span> <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #000000; font-weight: bold;">var</span> window:BrowserWindow = <span style="color: #000000; font-weight: bold;">new</span> BrowserWindow<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
                    mdic.<span style="color: #006600;">windowManager</span>.<span style="color: #0066CC;">add</span><span style="color: #66cc66;">&#40;</span>window<span style="color: #66cc66;">&#41;</span>;
                    window.<span style="color: #006600;">title</span> = event.<span style="color: #006600;">label</span>;
                    window.<span style="color: #006600;">location</span> = location;
                    window.<span style="color: #006600;">maximize</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
                <span style="color: #66cc66;">&#125;</span>
&nbsp;
            <span style="color: #66cc66;">&#125;</span>
        <span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&gt;</span>
    <span style="color: #66cc66;">&lt;/</span>mx:Script<span style="color: #66cc66;">&gt;</span>
&nbsp;
&nbsp;
    <span style="color: #66cc66;">&lt;</span>mx:ApplicationControlBar dock=<span style="color: #ff0000;">&quot;true&quot;</span><span style="color: #66cc66;">&gt;</span>
        <span style="color: #66cc66;">&lt;</span>mx:MenuBar id=<span style="color: #ff0000;">&quot;myMenuBar&quot;</span> labelField=<span style="color: #ff0000;">&quot;@label&quot;</span> <span style="color: #0066CC;">width</span>=<span style="color: #ff0000;">&quot;100%&quot;</span> <span style="color: #0066CC;">height</span>=<span style="color: #ff0000;">&quot;100%&quot;</span>
            itemClick=<span style="color: #ff0000;">&quot;openWindow(event);&quot;</span> <span style="color: #66cc66;">&gt;</span>
            <span style="color: #66cc66;">&lt;</span>mx:XMLList<span style="color: #66cc66;">&gt;</span>
                <span style="color: #66cc66;">&lt;</span>menuitem label=<span style="color: #ff0000;">&quot;File&quot;</span> <span style="color: #66cc66;">&gt;</span>
                    <span style="color: #66cc66;">&lt;</span>menuitem label=<span style="color: #ff0000;">&quot;Exit&quot;</span><span style="color: #66cc66;">/&gt;</span>
                <span style="color: #66cc66;">&lt;/</span>menuitem<span style="color: #66cc66;">&gt;</span>
                <span style="color: #66cc66;">&lt;</span>menuitem label=<span style="color: #ff0000;">&quot;Launch&quot;</span> <span style="color: #66cc66;">&gt;</span>
                    <span style="color: #66cc66;">&lt;</span>menuitem label=<span style="color: #ff0000;">&quot;Adobe&quot;</span><span style="color: #66cc66;">/&gt;</span>
                <span style="color: #66cc66;">&lt;/</span>menuitem<span style="color: #66cc66;">&gt;</span>
&nbsp;
                <span style="color: #66cc66;">&lt;</span>menuitem label=<span style="color: #ff0000;">&quot;Window&quot;</span> <span style="color: #66cc66;">&gt;</span>
                    <span style="color: #66cc66;">&lt;</span>menuitem label=<span style="color: #ff0000;">&quot;Tile&quot;</span><span style="color: #66cc66;">/&gt;</span>
                    <span style="color: #66cc66;">&lt;</span>menuitem label=<span style="color: #ff0000;">&quot;Tile and Fill&quot;</span><span style="color: #66cc66;">/&gt;</span>
                    <span style="color: #66cc66;">&lt;</span>menuitem label=<span style="color: #ff0000;">&quot;Cascade&quot;</span><span style="color: #66cc66;">/&gt;</span>
                <span style="color: #66cc66;">&lt;/</span>menuitem<span style="color: #66cc66;">&gt;</span>
&nbsp;
            <span style="color: #66cc66;">&lt;/</span>mx:XMLList<span style="color: #66cc66;">&gt;</span>
        <span style="color: #66cc66;">&lt;/</span>mx:MenuBar<span style="color: #66cc66;">&gt;</span>
    <span style="color: #66cc66;">&lt;/</span>mx:ApplicationControlBar<span style="color: #66cc66;">&gt;</span>
&nbsp;
    <span style="color: #66cc66;">&lt;</span>flexmdi:MDICanvas id=<span style="color: #ff0000;">&quot;mdic&quot;</span>  top=<span style="color: #ff0000;">&quot;10&quot;</span> bottom=<span style="color: #ff0000;">&quot;10&quot;</span> <span style="color: #0066CC;">left</span>=<span style="color: #ff0000;">&quot;10&quot;</span> <span style="color: #0066CC;">right</span>=<span style="color: #ff0000;">&quot;10&quot;</span><span style="color: #66cc66;">/&gt;</span>
&nbsp;
<span style="color: #66cc66;">&lt;/</span>mx:WindowedApplication<span style="color: #66cc66;">&gt;</span></pre></div></div>

<p>And here is Browser.mxml</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;flexmdi:MDIWindow</span> </span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:flexmdi</span>=<span style="color: #ff0000;">&quot;flexlib.mdi.containers.*&quot;</span></span>
<span style="color: #009900;">    <span style="color: #000066;">xmlns:mx</span>=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span> </span>
<span style="color: #009900;">    <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;400&quot;</span> <span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;300&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #339933;">&lt;![CDATA[</span>
<span style="color: #339933;">            [Bindable] public var location:String = &quot;&quot;;</span>
<span style="color: #339933;">        ]]&gt;</span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:HTML</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;100%&quot;</span> <span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;100%&quot;</span> <span style="color: #000066;">location</span>=<span style="color: #ff0000;">&quot;{location}&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/flexmdi:MDIWindow<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>The full application can be <a href="http://blog.natebeck.net/flash/experiments/KioskTest.zip" target="_blank">downloaded here</a>.</p>
<h3>:: Update ::</h3>
<p>There seems to a be a little bug in the applicaiton&#8230; when you&#8217;re rendering HTML with Flash Content within it.  It won&#8217;t display in StageDisplayState.FULL_SCREEN_INTERACTIVE mode.  However, if you hit the ESC key&#8230; the flash content will show up.  I&#8217;ll have to check and see if there is a bug filed on this.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.natebeck.net/2009/01/tip-of-the-day-creating-an-air-application-for-a-kiosk/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
	</channel>
</rss>

