Adobe AIR HTML Splash Screen

Question

I have an Adobe AIR application built in HTML/JavaScript.

The XML is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/4.0">
    <id>examples.html.HelloWorld</id>
    <versionNumber>0.1</versionNumber>
    <filename>HelloWorld</filename>
    <initialWindow>
        <title>Hello World</title>
        <content>HelloWorld.html</content>
        <visible>false</visible>
        <minimizable>true</minimizable>
        <maximizable>false</maximizable>
        <resizable>false</resizable>
        <width>800</width>
        <height>600</height>
        <systemChrome>none</systemChrome>
        <transparent>true</transparent>
    </initialWindow>
</application>

What I want is to show a splash screen first and then show the main application window once all the files have loaded in etc.

One idea was to make the intialWindow in the XML file the actual web app but then hide it by default using visible false then add:

$(document).ready(function(){

    // Create a new window that will become the splash screen
    var options = new air.NativeWindowInitOptions(); 
    options.systemChrome = air.NativeWindowSystemChrome.STANDARD; 
    options.transparent = false; 
    var newWindow = new air.NativeWindow(options);

// Add content to new window
var htmlView:HTMLLoader = new HTMLLoader(); 
htmlView.width = 300; 
htmlView.height = 500;  
newWindow.stage.align = "TL"; 
newWindow.stage.scaleMode = "noScale"; 
newWindow.stage.addChild( htmlView );
htmlView.load( new URLRequest('splash.html') );

    // Check for loading of app
    $(window).load(function(){

        // Hide splash
        window.nativeWindow.close();

        // Activate the initial Window
        window.nativeWindow.activate(); 

    }); 

});

The questions I have with this approach are:

1. How do I provide the content for the splash screen (I've added some code to create a window and load in a splash.html page, but it currently breaks as I believe the code is ActionScript rather than JavaScript)
2. Close the new splash screen (how do I choose which window to close)
3. Show the correct initial screen on load (how do I choose the correct window)

I've started with:

$(window).load(function () {

    loaded = true;

});

function appLoaded()
{
    if(loaded)
    {
        // Hide splash
        window.nativeWindow.close();


        // Activate the initial Window
        window.nativeWindow.activate();
    }
    else
    {
        appLoaded(); // keep checking until the loaded becomes true
    }
}

One issue with the above code, is that the appLoaded function could run hundreds of times. Any suggestions for fixing this? As I want to make sure that the splash ONLY hides once the app has loaded and the splash has appeared.

Answer 1

I did something similar but with another approach:

• I didn't opened a second window for a splash screen but rather put the content of the splash screen in a div inside the index.html and put it before the actual content.
• I set the initial width and height to splash screen measures.
• After the application has completely loaded I removed the splash screen div from the DOM and set width and height to application measures.

UPDATE:

How do I provide the content for the splash screen (I've added some code to create a window and load in a splash.html page, but it currently breaks as I believe the code is ActionScript rather than JavaScript)?

First: There is no ActionScript. It's JavaScript but you have to use it in the right way. You missed air. which represents the library object for Air.

// Create a new window that will become the splash screen
var options = new air.NativeWindowInitOptions(); 
options.systemChrome = air.NativeWindowSystemChrome.STANDARD; 
options.transparent = false; 

// Add content to new window
var htmlLoader = air.HTMLLoader.createRootWindow(false, options, false);    
htmlLoader.window.nativeWindow.width = 300;
htmlLoader.window.nativeWindow.height = 500;
htmlLoader.window.nativeWindow.visible = true;
htmlLoader.load(new air.URLRequest('splash.html'));

Close the new splash screen (how do I choose which window to close)?

// That is your splash screen
htmlLoader.window.nativeWindow.close();

Show the correct initial screen on load (how do I choose the correct window)?

// This is your main window
window.nativeWindow.visible = true;