Results 1 to 3 of 3

Thread: customize loading screen in Touch application

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    72

    Default customize loading screen in Touch application

    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. . .

  2. #2
    Sencha User
    Join Date
    Mar 2012
    Location
    Dallas/Fort Worth
    Posts
    60

    Default Here is how

    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

    Step 2: You must set the AutoHideSplashScreen property in config.xml for iOS to false
    Example config.xml content
    Code:
    ...
     <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

    Code:
    <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:

    Code:
     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/
    Last edited by jvalentino; 16 Jul 2014 at 7:09 PM. Reason: Added the reference link

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    72

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •