1 Reply Latest reply on May 13, 2010 4:13 PM by chris.campbell

    Air Kiosk Project - HTML Viewer

    Sharpe D User Group Manager

      I am looking to build a kiosk for display, no controls, no touch - basically a slideshow of html pages. I would like the AIR app to look in a folder with multiple html pages, take each html and display in a container, which would rotate through each page like a slideshow.


      I am new to AIR, so looking for any direction. I have Flash Builder and Catalyst. I have found some pieces online using viewStack and html container. I am looking for best method to load html pages into containers and method of rotating through them.




        • 1. Re: Air Kiosk Project - HTML Viewer
          chris.campbell Adobe Employee

          Hi Dave,
          Here's a simple example that I wrote in Flash Builder 4.  It's very rudimentary but might help you get a start.  It will search a directory named "html" located in the application directory for .htm and .html files.  It then loads them into an HTML control, cycling through each every 5 seconds.  The application runs in full screen (hit esc to exit).


          Hope this helps,


          <?xml version="1.0" encoding="utf-8"?>
          <mx:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                        xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute"
                    <!-- Place non-visual elements (e.g., services, value objects) here -->
                         import mx.controls.Alert;
                         private var timer:Timer = null;
                         private var htmlFiles:Array = null;
                         private var currentFileIndex:Number = 0;
                         private function init():void
                              htmlFiles = new Array();
                              var htmlFolder:File = new File(File.applicationDirectory.nativePath + "/html/");
                              if (!htmlFolder.exists && !htmlFolder.isDirectory)
                                   Alert.show("Please create a folder named 'html' in your application directory", "Error", 4, this, exitApp);
                              htmlFolder.addEventListener(FileListEvent.DIRECTORY_LISTING, onDirectoryListing);
                         private function onDirectoryListing(event:FileListEvent):void
                              for each (var file:File in event.files)
                                   if (!file.isDirectory)
                                        if (file.extension!= null &&
                                             (file.extension.toLowerCase() == "htm" ||
                                              file.extension.toLowerCase() == "html"))
                              if(htmlFiles.length == 0)
                                   Alert.show("No HTML files found", "Error", 4, this, exitApp);
                         private function loadPages():void
                              // 5 second timer
                              timer = new Timer(5000);
                              timer.addEventListener(TimerEvent.TIMER, displayNewPage);
                              // Go full screen
                              systemManager.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
                              // display first page
                         private function displayNewPage(event:TimerEvent = null):void
                              // Loop through the url array
                              if (currentFileIndex > htmlFiles.length - 1)
                                   currentFileIndex = 0;
                              // Load the file into the HTML control
                              var file:File = htmlFiles[currentFileIndex];
                              html.location = file.nativePath;
                         private function exitApp(event:Event):void
               <mx:HTML id="html" width="100%" height="100%"/>