1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    15
    Answers
    2
    Vote Rating
    0
    GlasgowKid is on a distinguished road

      0  

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

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


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    15
    Answers
    2
    Vote Rating
    0
    GlasgowKid is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Here is a barebones example of using PhoneGap with Sencha Touch 2: https://github.com/rdougan/barebones-phonegap
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    10
    Answers
    1
    Vote Rating
    1
    curmil is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    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.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  7. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    15
    Answers
    2
    Vote Rating
    0
    GlasgowKid is on a distinguished road

      0  

    Default


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

  8. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    49
    Vote Rating
    2
    nish1013 is on a distinguished road

      0  

    Default


    Quote Originally Posted by rdougan View Post
    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??

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Posts
    29
    Vote Rating
    1
    nora.olsen77 is on a distinguished road

      0  

    Default


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

  10. #10
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    San Antonio, TX
    Posts
    93
    Answers
    4
    Vote Rating
    0
    jnotti is on a distinguished road

      0  

    Default


    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('--------------------------------------');
        }
    });