ST2, Phonegap, MVC and a white/blank screen

**GlasgowKid** · 12 Feb 2012 8:31 AM

Hello everyone,

I know that it has been discussed a lot, but I really can't figure it out. I got a working ST2 PR3 App, which works perfectly in the web browser, also on the Android device. But I want to use PhoneGap and all I get is white/blank screen.

This is working:

Code:

Ext.setup({    viewport: {
        autoMaximize: false
    },
    onReady: function () {
        console.log("ready");
        var app = new Ext.Application({
            name: 'Test',
            autoCreateViewport: true,
            launch: function() {
                console.log("launched");
                Ext.create('Ext.Panel', {
                    html: "Hallo Welt!",
                    fullscreen: true
                })
            }
        });
    }
});

But as soon as I set autoCreateViewport to true it just fires ready and not launch. The problem is that I want to use my existing viewport or want to show the panel I create in the viewport (in MVC structure).

This works also:

Code:

Ext.application({    name: 'Test',
    launch: function() {
        // This will appear in the Xcode console. Used for debugging.
        console.log('launch');


        Ext.Viewport.add([
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'PhoneGap'
            },
            {
                html: 'Content'
            }
        ]);
    }
});

But as soon as I try to just include my viewport (renamed to mainview) it fails:

Code:

Ext.require([    'Test.view.Mainview'                                     
]);

Both versions work fine and don't show any js errors in the (mobile) browser, but just blank screens with phonegap. The views can be found in app/views/Mainview.js and app/views/Viewport.js I also used the override for Application, which was shown in the MVC example for PR3, but left it out for now, since I'm not using a controller in that simple test app. Last but not least my index.html:

Code:

<!DOCTYPE html><html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>TestApp</title>
    <link rel="stylesheet" href="sencha/resources/css/sencha-touch.css" type="text/css">
    <!-- <link rel="stylesheet" href="resources/css/styles.css" type="text/css"> -->
    <!-- <script type="text/javascript" src="sencha/sencha-touch.js"></script> -->
    <!-- <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script> -->
    <script type="text/javascript" src="sencha/sencha-touch-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <!-- <script src="http://pcdaniel02:8080/target/target-script-min.js#anonymous"></script> -->
 </head>
<body></body>
</html>

So I'm not using the debug version of Sencha Touch either.

Any ideas what I'm doing wrong?

Cheers,
Daniel

**mitchellsimoens** · 12 Feb 2012 9:17 AM

Is the deviceready event being fired?

I would also look into upgrading, there has been lots of fixes but you should note there have been lost of changes

**GlasgowKid** · 12 Feb 2012 2:10 PM

Is the deviceready event being fired?

Depends on which method I'm using.

Code:

Ext.application({    name: 'Test',
    controllers : ['App'],
    launch: function() {
        // This will appear in the Xcode console. Used for debugging.
        console.log('app launch');
        if(deviceready) console.log('deviceready');
        Ext.Viewport.add([
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'PhoneGap'
            },
            {
                xtype: 'panel',
                html: 'Content',
                id: 'mainpanel',
            }
        ]);
    }
});

Here only deviceready is fired, but not launch and the panel is not shown. If I comment out the controllers config, first deviceready than launch is fired, and the panel is shown.

Code:

Ext.setup({    viewport: {
        autoMaximize: false
    },
    onReady: function () {
        console.log("ready");
        var app = new Ext.Application({
            name: 'Test',
            autoCreateViewport: true,
            launch: function() {
                console.log("launched");
                Ext.create('Ext.Panel', {
                    html: "Hallo Welt!",
                    fullscreen: true
                })
            }
        });
    }
});

Only ready is fired and poanel is not shown. If I comment out the autoCreateViewport config first ready, than launched is fired and the panel is shown. deviceready isn't fired at all.

**rdougan** · 12 Feb 2012 6:31 PM

Here is a barebones example of using PhoneGap with Sencha Touch 2: https://github.com/rdougan/barebones-phonegap

**curmil** · 12 Feb 2012 7:11 PM

I had this same problem and the sticky didn't help that much. I played around with it for a while and I got it working eventually but I don't exactly remember what I did, but I do remember being pissed that no one showed their index.html and app.js, so here are mine in case it helps:

index.html

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>My Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta charset="utf-8">


    <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
    <link rel="stylesheet" href="resources/css/my.css" type="text/css">
    <link rel="stylesheet" href="resources/css/sencha-touch.css" type="text/css">
    <link rel="stylesheet" href="resources/css/application.css" type="text/css">
    <link rel="stylesheet" href="resources/css/apple.css" type="text/css">


    <!-- iPad/iPhone specific css below, add after your main css >
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />        
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />        
    -->


    <script type="text/javascript" src="sencha-touch-all.js"></script>
    <script type="text/javascript" src="app.js"></script>


    <script type="text/javascript">
    function onBodyLoad()
    {        
        onDeviceReady();
    }
    
    /* When this function is called, PhoneGap has been initialized and is ready to roll */
    /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
    see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
    for more details -jm */
    function onDeviceReady()
    {
        runApp();
    }
    
    </script>
  </head>
  <body onload="onBodyLoad()">
    <!-- hack so window opening works on all devices: http://www.sencha.com/forum/showthread.php?130358-window.open()-from-toolbar-button-opens-window-from-list-item-a-new-tab&p=639938#post639938 -->
      <a href="" target="_blank" id="linker" style="display:none;"></a>
  </body>
</html>

app.js

Code:

function runApp() {
    Ext.Loader.setConfig({ 
        enabled: true ,
    });
    
    Ext.onReady(function() {
            Ext.application({
                name: 'MyAppName',
                appName: 'MyAppName',
                controllers: ['MyControllers', 'AnotherOne'],
                models     : ['Model','Fodel','Bodel','Lodel'],
                views: ['Main'],
                autoCreateViewport: false,
                viewport: {
                    autoMaximize: false
                },
                init: function() {
                    console.log(this.name + '.application#init', [this, arguments]);
                },
                launch: function() {
                    Ext.create('MyAppName.view.Main');
                },
            });
    });
}

Some of this is probably not needed or is hackery but I'm happy it's working right now.

**rdougan** · 12 Feb 2012 8:16 PM

Yeah, all of those hacks are not needed with ST2. You do not need to listen to deviceready or add any other custom logic.

All you need to do is:

- include phonegap.js
- include sencha touch
- include your app file

Just like any other ST application.

**GlasgowKid** · 12 Feb 2012 9:13 PM

Okay, I got it. Ext.Loader isn't working correctly oin Android. If I add my models, stores, views and controllers (in that order) in the index.html and just leave the loader disabled, everything works fine.

Thanks for all the help. =)

**nish1013** · 10 Apr 2012 1:49 AM

Originally Posted by rdougan

Yeah, all of those hacks are not needed with ST2. You do not need to listen to deviceready or add any other custom logic.

All you need to do is:

- include phonegap.js
- include sencha touch
- include your app file

Just like any other ST application.

Are you serious? You meant , if I just add the script reference for PG in index.html all good??

**nora.olsen77** · 18 Apr 2012 7:44 PM

Do you have an example for the index.html and app.js?

**jnotti** · 19 Apr 2012 12:28 PM

Just got this working with ST2 and Cordova 1.6.1:

index.html:

Code:

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>App</title>
    
    <!-- Alert errors - For debugging only -->
    <script>
        
        window.onerror = function(error) {
            alert(error);
        };
        
    </script>

    <!-- Cordova Debug -->
    <script src="http://debug.phonegap.com/target/target-script-min.js#anonymous"></script>
    
    <!-- Cordova Script -->
    <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>
    
    <!-- Sencha Touch microloader -->
    <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script> 

    <!-- Cordova Initialization -->
    <script type="text/javascript">        
        
        function onBodyLoad(){        
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        
        //When this is called Cordova is ready
        //Sencha Touch listens for this event by default
        function onDeviceReady(){
            console.log("onDeviceReady");
        }
        
    </script>
</head>
<body onLoad="onBodyLoad();">
    <div>
        <!-- Hack to open links -->
        <a href="" target="_blank" id="hidden_link" style="display:none;"></a>
    </div>
</body>
</html>

app.js:

Code:

Ext.Loader.setPath({
    'Ext': 'sdk/src'
});

Ext.Loader.setConfig({
    disableCaching: false //for debugging
});

Ext.application({

    name: 'MyApp',

    phoneStartupScreen: 'resources/loading/Default.png',
    tabletStartupScreen: 'resources/loading/Default-Portrait-iPad.png',
    icon: {
        57: 'resources/icons/Icon.png',
        72: 'resources/icons/Icon-ipad.png',
        114: 'resources/icons/Icon@2x.png',
    },

    requires: [
        'Ext.MessageBox',
        'Ext.Panel',
        'Ext.Container',
        'Ext.TitleBar',
        'Ext.TabPanel',
        'Ext.navigation.View',
        'Ext.data.proxy.JsonP',
        'Ext.DataView',
        'Ext.Video',
        'Ext.Carousel',
        'Ext.Button',
        'Ext.data.reader.Xml',
        'Ext.Img',
        'MyApp.util.Config'
    ],

    profiles: ['Phone', 'Tablet'],

    models: [
        'LocalContent',
        'RemoteContent',
        'LocalVideo',
        'RemoteVideo',
        'LocalImage',
        'RemoteImage',
        'LocalDocument',
        'RemoteDocument',
        'LocalConfig',
        'RemoteConfig',
        'LocalNews',
        'RemoteNews'
    ],

    controllers: [
        'Main',
        'Products',
        'Updates',
        'ContactUs',
        'Index',
        'More',
        'Conditions',
        'Related'
    ],

    stores: [
        'LocalContent',
        'RemoteContent',
        'LocalVideo',
        'RemoteVideo',
        'LocalImage',
        'RemoteImage',
        'LocalDocument',
        'RemoteDocument',
        'LocalConfig',
        'RemoteConfig',
        'LocalNews',
        'RemoteNews'
    ],

    views: [
        'Main',
        'ui.TitleBar',
        'ui.TabPanel',
        'ui.ProductLanding',
        'ui.NavigationViewContainer',
        'ui.NavigationView',
        'ui.NavigationDataView',
        'ui.NavigationGroupDataView',
        'ui.DetailPanel',
        'ui.DocumentButton',
        'ui.LinkButton',
        'ui.RelatedButton',
        'ui.DetailTemplate',
        'ui.Carousel',
        'ui.CarouselItem',
        'ui.ContactUsLanding',
        'ui.ModalOverlay',
        'ui.ConditionsLanding',
        'ui.IndexLanding',
        'ui.MoreLanding',
        'ui.NavigationGroupedDataView',
        'ui.MenuOverlay',
        'ui.ProductHotSpotDetail',
        'ui.Logo'
    ],

    launch: function() {
        if(MyApp.util.Config.getAbout() == true){
            //echo environment to console
            this.environmentDetection();
        }

        // Initialize the main view
        Ext.Viewport.add(Ext.create('MyApp.view.Main'));
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function() {
                window.location.reload();
            }
        );
    },

    environmentDetection: function(){
        console.log('OS: ' + Ext.os.name + ', Version: ' + Ext.os.version);
        console.log('Browser: ' + Ext.browser.name + ', Engine: ' + Ext.browser.engineName + ', Engine Version: ' + Ext.browser.engineVersion);
        console.log('User Agent: ' + Ext.browser.userAgent);
        console.log('--------------------------------------');
        console.log('Feature Detection:');

        //feature detection
        if(Ext.feature.has.Audio)console.log('Audio');
        if(Ext.feature.has.Canvas)console.log('Canvas');
        if(Ext.feature.has.ClassList)console.log('ClassList');
        if(Ext.feature.has.CreateContextualFragment)console.log('CreateContextualFragment');
        if(Ext.feature.has.Css3dTransforms)console.log('Css3dTransforms');
        if(Ext.feature.has.CssAnimations)console.log('CssAnimations');
        if(Ext.feature.has.CssTransforms)console.log('CssTransforms');
        if(Ext.feature.has.CssTransitions)console.log('CssTransitions');
        if(Ext.feature.has.DeviceMotion)console.log('DeviceMotion');
        if(Ext.feature.has.Geolocation)console.log('Geolocation');
        if(Ext.feature.has.History)console.log('History');
        if(Ext.feature.has.Orientation)console.log('Orientation');
        if(Ext.feature.has.OrientationChange)console.log('OrientationChange');
        if(Ext.feature.has.Range)console.log('Range');
        if(Ext.feature.has.SqlDatabase)console.log('SqlDatabase');
        if(Ext.feature.has.Svg)console.log('Svg');
        if(Ext.feature.has.Touch)console.log('Touch');
        if(Ext.feature.has.Video)console.log('Video');
        if(Ext.feature.has.Vml)console.log('Vml');
        if(Ext.feature.has.WebSockets)console.log('WebSockets');
        console.log('--------------------------------------');
    }
});

ST2, Phonegap, MVC and a white/blank screen

Thread Tools

Search Thread

Display

Unanswered: ST2, Phonegap, MVC and a white/blank screen

Unanswered: ST2, Phonegap, MVC and a white/blank screen

Tags for this Thread