What is the most up-to-date approach to add my own Splash Screen in Sencha Touch

Question

I need my own splash screen when starting up my app.

I use SenCha Touch + Cordova.

Searched and found several ways to do splash screens, however I do not think they are up-to-date.

I saw some code which tried to add a few lines of code into launch function, but the latest Sencha Touch does not do it in the app.js any more instead, it add the Main view to its viewport.

Also, I checked Sencha Touch doc and found

Class currently only works with Cordova and does not have a simulated HTML counter part. Please see notes on Cordova Docs for proper Native project code changes that will need to be made to use this plugin.

But it provides some methods after that statement :

newExt.device.Splashscreen( ) : Ext.device.Splashscreen

So I feel confused and don't know which one should I follow.

What is the latest approach to do the splash screen in Sencha Touch?

Answer 1

I currently have the exact same problem as you. Here is information I got from Sencha:

All splashscreen functionality is provided by the Cordova/Phonegap plugin. Our class methods are just convenience methods to the cordova native API and will provide a 'stub' for you if Cordova is not available so that your application does not bomb upon startup (no splashscreen shows, it's just that your app will not crash when trying to access an API that is not there).

In theory, if your application is built with Cordova/Phonegap and your splashscreen images are provided with the application build as specified by Cordova/Phonegap you would initiate a call to Ext.device.Splashscreen.show() after the device is ready (as demonstrated in the example found in http://docs.phonegap.com/en/2.6.0/cordova_splashscreen_splashscreen.md.html#Splashscreen)

The splashscreen feature is a native API, not one that is provided by Touch. You can, should you wish, provide your own coding in your index.html file of your native application which will manually display an image (much the same way we do the initial CSS flashing load indicator), but ultimately that would be up to you to implement manually.

I would suggest that you follow the Cordova guidelines, place your images in the res/drawable directory of your android project and let Cordova do all the hard work for you by just making a single call to Ext.device.Splashscreen.show() when the device is ready and then calling Ext.device.Splashscreen.hide() in the launch area of your application to hide it when your app has rendered its view.

To include Cordova in your application, we now provide you with sencha cmd switches to enable Cordova. You can find more information here

http://docs.sencha.com/touch/2.3.1/#!/guide/cordova

Please note that you will have to download all required components of Cordova, modify the Cordova configuration files as outlined in the Cordova docs, and build the application using either the Cordova command line interface (CLI) or your favourite Android build IDE (Eclipse, IntelliJ, etc).

Answer 2

Use this plugin https://build.phonegap.com/plugins/620

When you use this plugin and build locallym you have to place the icons and splashscreen in the res/ folder manually.