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.

       

       

      Dave

        • 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,
          Chris

           

          <?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"
                                        applicationComplete="init()">
               <fx:Declarations>
                    <!-- Place non-visual elements (e.g., services, value objects) here -->
               </fx:Declarations>
               
               <fx:Script>
                    <![CDATA[
                         
                         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);
                                   return;
                              }
          
                              htmlFolder.addEventListener(FileListEvent.DIRECTORY_LISTING, onDirectoryListing);
                              htmlFolder.getDirectoryListingAsync()
                         }
                         
                         private function onDirectoryListing(event:FileListEvent):void
                         {
                              for each (var file:File in event.files)
                              {
                                   file.canonicalize();
                                   
                                   if (!file.isDirectory)
                                   {
                                        if (file.extension!= null &&
                                             (file.extension.toLowerCase() == "htm" ||
                                              file.extension.toLowerCase() == "html"))
                                        {
                                             htmlFiles.push(file);
                                        }
                                   }
                              }
                              
                              if(htmlFiles.length == 0)
                                   Alert.show("No HTML files found", "Error", 4, this, exitApp);
                              else
                                   loadPages();
                         }
          
                         private function loadPages():void
                         {
                              // 5 second timer
                              timer = new Timer(5000);
                              timer.addEventListener(TimerEvent.TIMER, displayNewPage);
                              timer.start();
                              
                              // Go full screen
                              systemManager.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
                              
                              // display first page
                              displayNewPage();                    
                         }
                         
                         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;
                              currentFileIndex++;
                         }
          
                         private function exitApp(event:Event):void
                         {
                              nativeApplication.exit();     
                         }
                    ]]>
               </fx:Script>
               
               <mx:HTML id="html" width="100%" height="100%"/>
          
          </mx:WindowedApplication>