customize loading screen in Touch application

[scheid]

OK, this seems like this would be a common thing when creating an application, but I haven't figured out any formal/recommended way to do this in Touch/Cmd/Architect, and haven't come up with anything in my Googling.

Basically, in Sencha Touch, I want to create a different load screen than the default blue screen with the blinking white dots. I have read here in the Sencha forums that directly editing the generated index.html file is not a recommended approach, and I have tried hacking the index.html file to achieve what I want, but it seems that I'm going against the grain of what the microloader (?) is trying to do, and it ends up looking klugy.

I have also tried to use the startupImage property of Application with no success. But I'd rather not go that route anyway.

I'd rather define all of the start up directly in index.html somehow so my app is not trying to load remote images (which it seems is the whole point of the microloader).

So, is there any modular way to define my own startup screen??

I'm not trying to do anything particularly fancy, mainly just a custom color to the background and an inline SVG block/image instead of the white dots.

Thanks for any help. . .

[jvalentino]

Note that on iOS the order is

• load scraeen (Sencha icon on the white background)
• blue blinking dots
• app's first screen

On Android the order is

• blue blinking dots
• app's first screen

This is what I do, which makes the load screen last until after the app is launched. This hides the blue blinking dots with the load screen image.

Step 1: Download the Cordova splashscreen plugin and put it in your project

• The name of the plugin is org.apache.cordova.splashscreen
• The current download location is https://github.com/apache/cordova-plugin-splashscreen

Step 2: You must set the AutoHideSplashScreen property in config.xml for iOS to false
Example config.xml content

...
 <preference name="KeyboardDisplayRequiresUserAction" value="true" />
    <preference name="SuppressesIncrementalRendering" value="false" />
    <preference name="UIWebViewBounce" value="true" />
    <preference name="TopActivityIndicator" value="gray" />
    <preference name="EnableLocation" value="false" />
    <preference name="EnableViewportScale" value="false" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="ShowSplashScreenSpinner" value="true" />
    <preference name="MediaPlaybackRequiresUserAction" value="false" />
    <preference name="AllowInlineMediaPlayback" value="false" />
    <preference name="OpenAllWhitelistURLsInWebView" value="false" />
    <preference name="BackupWebStorage" value="cloud" />
    <preference name="fullscreen" value="true" />
    <preference name="webviewbounce" value="true" />
...

Step 3: Add JavaScript code in WebContent/index.html that listens for when the device is ready, waits a second arbitrarily, and then turns off the splash screen manually

<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>


<!-- PUT THIS CODE UNDER THE MICROLOADER -->
<script type="text/javascript" charset="utf-8">


        document.addEventListener('deviceready', function() {


            setTimeout(function() {
              navigator.splashscreen.hide();
           }, 1000);
        });
</script>

To change the image used in for the load screen look for the locations listed in app.js:

 startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

Reference: http://www.appfoundation.com/2014/07...cation-launch/

[scheid]

Hey, thanks for the great reply. However, I am actually doing a pure web implementation of this, so no wrapping up in Cordova, etc.I do like your idea of the script block under the microloader js to intercept/override the default bahavior. I will explore that route, although I won't have navigator.splashscreen available to me. There are probably other objects available for me to accomplish the same thing though.Thanks.