1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Jacksonville, FL
    Posts
    38
    Vote Rating
    2
    Answers
    2
    rwbaker is on a distinguished road

      0  

    Default Answered: PhoneGap + Touch Geolocation prompts using app path rather than app name

    Answered: PhoneGap + Touch Geolocation prompts using app path rather than app name


    I have a ST2.0.1 app running in PhoneGap 1.6.1. When my app is running in PhoneGap the Geolcoation prompt doesn't use the application name, but rather the path to the index.html file in the PhoneGap build--something like. It does get the correct location though. I've tried using Sencha's Ext.device.Geolocation and Ext.util.Geolocation and PhoneGap's goelocation API as well--all seem to result in the same prompt.

    According to the Sencha Docs, the Ext.device.Geolocation should work for Web, Native packaging, or PhoneGap.

    When my app is running in PhoneGap the Geolcoation prompt doesn't use the application name, but rather the path to the index.html file in the PhoneGap build. It does get the correct location though. I've tried using Sencha's Ext.device.Geolocation and Ext.util.Geolocation and PhoneGap's goelocation API as well--all seem to result in the same prompt.

    Using @rdougan's Barebones Example on Github, the geolocation does prompt with the application name.

    It seems to be some sort of issue with the way my app is running inside / talking to PhoneGap. I think my app is requesting the location before PhoneGap is loaded and ready. Another symptom is that my console.log statements do not show up in the Debug Area. Oddly enough, if I leave the app running in the simulator for more than an hour or so, my console.log statements start to show in the Debug Area.

    Project Specifics / Workflow:
    • Application started via the SDK generate tool
    • To move the application into the PhoneGap project, I run 'sencha app build package' and the output folder is set to the PhoneGap www project
    • ST 2.0.1 GA
    • PhoneGap/Cordova 1.6.1
    I am not directly referencing the Cordova JS file in the index.html—instead I put it in the 'js' section of the app.json as the last JS file. This way the Sencha Package process handles the minification and loading. Changing it so the Cordova-1.6.1.js is referenced directly in the index.html has no effect; nor it's position in the index.html page.

    Any suggestions? Here are some of my key files involved:

    app.js, loads Main.js:

    Code:
    //<debug>
    Ext.Loader.setPath({
        'Ext': 'sdk/src'
    });
    //</debug>
    
    Ext.application({
    
        name: 'EOC',
        
        controllers : [...],
        
        models: [...],
    
        requires: [
            'Ext.MessageBox',
            'Ext.data.proxy.JsonP',
            'Ext.TabPanel',
            'Ext.Panel',
            'Ext.TitleBar',
            'Ext.DataView',
            'Ext.dataview.List',
            'Ext.Img',
            'Ext.device.Geolocation'
        ],
    
        views: [...],
        
        stores: [...],
    
        icon: {
            57: 'resources/icons/Icon.png',
            114: 'resources/icons/Icon@2x.png',
        },
        
        phoneStartupScreen: 'resources/loading/Homescreen@2x.jpg',
    
        launch: function() {
            // Destroy the #appLoadingIndicator element
            Ext.fly('appLoadingIndicator').destroy();
    
            // Initialize the main view
            Ext.Viewport.add(Ext.create('EOC.view.Main'));
        },
    
        onUpdated: function() {
            Ext.Msg.confirm(
                "Application Update",
                "This application has just successfully been updated to the latest version. Reload now?",
                function() {
                    window.location.reload();
                }
            );
        }
    });
    Main.js; loads the Home view, which loads GisStatus that performs the geolocation:

    Code:
    Ext.define("EOC.view.Main", {
        extend: 'Ext.tab.Panel',
    
        xtype : 'main',
    
        requires: [
            'EOC.view.Home',
            'EOC.view.EOC',
            'EOC.view.Weather',
            'EOC.view.Fire',
            'EOC.view.Help'
        ],
        
        config: {
            id              : 'main',
            cls             : 'tab-container',
            tabBarPosition  : 'bottom',
            items: [
                {xtype: 'hometab'}, //uses GisStatus; does GeoLocation
                {xtype: 'eoctab'},
                {xtype: 'weathertab'},
                {xtype: 'firetab'},
                {xtype: 'helptab'}
            ],
    
            listeners : {
                initialize : function(component, options) {
                },
    
                painted : function() {
                    // Refresh the current tab (for resuming paused applications)
                    refreshStores(this.getActiveItem().id);
                },
    
                activeitemchange : function(container, value, oldvalue, opts) {
                    // Refresh the destination tab...
                    refreshStores(this.getActiveItem().id);
                }
            }
        }
    });
    Finally, my GisStatus view, which is doing the geolocation:

    Code:
    Ext.define('EOC.view.Home.GisStatus', {
        extend  : 'Ext.DataView',
    
        xtype   : 'gisStatus',
        id      : 'gisStatus',
        
        config  : {
            store                       : 'Home',
            scrollable                  : false,
            allowDeselect               : false,
            deselectOnContainerClick    : false,
            emptyText                   : [...],
            itemTpl                     : [...],
    
            listeners   : {
                'initialize' : function() {
                    Ext.Viewport.element.on('tap', function(e) {
                        if (e.getTarget('#gisStatus-empty')) {
                             Ext.getCmp('gisStatus').updateLocation();
                        }
                    });
                }
            }
        },
    
        updateLocation : function() {
            //Use Sencha's Lib (ext.device) to acces GPS Location
            Ext.device.Geolocation.getCurrentPosition({
                scope: this,
                success: function(position) {
                    console.log('Sencha: Latitude: ' + position.coords.latitude + ' & Longitude: ' + position.coords.longitude);
    
                    //Pass the location to the proxy and update the store
                    Ext.getCmp('gisStatus').setLocation(position.coords.latitude, position.coords.longitude);
    
                    //Cupertino, CA:
                    //this.setLocation(37.332375,-122.029556);
                },
                failure: function() {
                    this.setMasked(false);
                    console.log('Sencha: Cannot get location');
                    //Hard code values for geolocation in Safari -> Cupertino, CA
                    //this.setLocation(37.332375,-122.029556);
                }
            });
        },
    
        setLocation : function(geoLat, geoLong) {
    
            if ( geoLat !== null && geoLong !== null ) {
    
                //Get our store so we can poke at it
                var myStore = Ext.getStore('Home');
    
                //Here we create the new Proxy.
                var newProxy = {
                    url : 'http://10.10.90.41:8888/service1/'+geoLat+'/'+geoLong
                };
    
                //Apply the proxy...
                myStore.setProxy(newProxy);
                
                //...and reload the store
                myStore.load();
            }
        }
    });

  2. Finally all fixed. Here is what the end (simple) solution was:
    • Put the Cordova JS file as the first script object in the HTML page, before Sencha
    • Comment out line numbers 44 and 54 of sdk/src/device/Geolocation.js if not already (lines that reference the Sencha PhoneGap API)
    • Use PhoneGap goelocation, wrap in a test to make sure the geolocation has loaded
    • In PhoneGap, do not set 'EnableLocation' to YES
    Code:
        updateLocation : function() {
            var geoReady = navigator.geolocation || undefined;
            if (geoReady) {
                var onSuccess = function(position) {
                    ...
                    //Pass the location to the proxy and update the store
                    Ext.getCmp('gisStatus').setLocation(position.coords.latitude, position.coords.longitude);
                };
                function onError(error) {
                    ...
                }
                navigator.geolocation.getCurrentPosition(onSuccess, onError);
            }
        },

  3. #2
    Sencha User
    Join Date
    Jan 2012
    Location
    Jacksonville, FL
    Posts
    38
    Vote Rating
    2
    Answers
    2
    rwbaker is on a distinguished road

      1  

    Default Update...

    Update...


    Device Example
    I put the Device example in a PhoneGap (v1.6.1) app and I get similar results. When I launch the app I get the correct "<App Name> would like to use your current location" message. But when I go to the Geolocation view, I get an alert with the path to the index.html page requested my current location.

    Sample App
    I created a sample app and put the geolocation example code in the painted event.

    When I load the Cordova JS after Touch JS I get the same result—a geolocation alert with index.html path instead of the application name.

    When I load the Cordova JS before Touch JS, as suggested by rdougan, I get:
    [WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.device.geolocation.PhoneGap'; consider adding 'Ext.device.geolocation.PhoneGap' explicitly as a require of the corresponding class

    Uncaught Error: [Ext.Loader] Failed loading synchronously via XHR: 'http://localhost:8888/sdk/src/device/geolocation/PhoneGap.js'; please verify that the file exists. XHR status code: 404

    It's starting to look like there is a bug in the way ST2 interacts with PhoneGap.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Location
    Jacksonville, FL
    Posts
    38
    Vote Rating
    2
    Answers
    2
    rwbaker is on a distinguished road

      1  

    Default Fixed

    Fixed


    Finally all fixed. Here is what the end (simple) solution was:
    • Put the Cordova JS file as the first script object in the HTML page, before Sencha
    • Comment out line numbers 44 and 54 of sdk/src/device/Geolocation.js if not already (lines that reference the Sencha PhoneGap API)
    • Use PhoneGap goelocation, wrap in a test to make sure the geolocation has loaded
    • In PhoneGap, do not set 'EnableLocation' to YES
    Code:
        updateLocation : function() {
            var geoReady = navigator.geolocation || undefined;
            if (geoReady) {
                var onSuccess = function(position) {
                    ...
                    //Pass the location to the proxy and update the store
                    Ext.getCmp('gisStatus').setLocation(position.coords.latitude, position.coords.longitude);
                };
                function onError(error) {
                    ...
                }
                navigator.geolocation.getCurrentPosition(onSuccess, onError);
            }
        },