using GeoLocation GeoPosition in QooxDoo mobile

Question

I have a mobile app for which I want to use geolocation. My problem is that I don't understand how to assign the lat / lon to a property in Application.js so I can bind other pages to it.

When I bind the position to a latLon property in Application.js is get: 004930 Assertion error! position is not an data (qx.event.type.Data) event on qx.bom.GeoLocation[99-0].: Expected 'qx.event.type.Data' but found 'qx.event.type.GeoPosition'!

I have tried some variations, but I just can't bind to the property.

I got it working so far that I can debug the location:

  var loginPage = new sgmobile.page.Login();
  manager.addDetail(loginPage);

  loginPage.addListener("appear", function(evvt) {
    this.__getPosition();
  }, this);

  loginPage.show();

 ................

__getPosition : function() {
  var geoLocation = qx.bom.GeoLocation.getInstance();
  var pos = geoLocation.getCurrentPosition();
  geoLocation.addListener("position", this.__applyPosition);
},

__applyPosition : function(position) {
  this.latlon = {
    "lat" : position.getLatitude(),
    "lon" : position.getLongitude()
  }
  this.debug("latlon: " + qx.lang.Json.stringify(this.latlon));
},

I Also copied the mailinglist.

Best Regards, Alex

Answer 1

The data binding requires a data event to be bindable. As the GeoLocation event is not a data event, It is by default not bindable. If you want to have that bound, I would suggest to add the properties to your application you want to bind and connect these properties by hand with the geolocation events using event listeners.

Answer 2

before I saw Martin's answer I found my own solution which I like to share. It doesn't look very efficient but using an object as property I couldn't get the input to bind to the property of property. Reading Martin's answer, I went the right way.

Hope this helps some other qooxdoo mobile newby.

I changed the Application.js to :

lat: {
  check : "Number",
  nullable : true,
  init : null,
  event : "changeLat"
},
lon: {
  check : "Number",
  nullable : true,
  init : null,
  event : "changeLon"
},

__applyPosition : function(positionEvent) {
  this.debug("lat: " + positionEvent.getLatitude() + " lon: " + positionEvent.getLongitude());
  this.setLat( positionEvent.getLatitude() );
  this.setLon( positionEvent.getLongitude() );
},

and I bound the 'lat' and 'lon' properties to the corresponding ones in the reportPage like this:

  this.bind("lon", reportPage, "lon");
  this.bind("lat", reportPage, "lat");

For completeness; the releveant reportPage code:

    var lat = new  qx.ui.mobile.form.NumberField();
    lat.setEnabled(false);
    form.add(lat, "latitude");

    var lon = new  qx.ui.mobile.form.NumberField();
    lon.setEnabled(false);
    form.add(lon, "longtitude");

    this.bind('lat', lat, 'value');
    this.bind('lon', lon, 'value');

    ..............
properties: {
  lat: {
    check : "Number",
    nullable : true,
    init : null,
    event : "changeLat"
  },
  lon: {
    check : "Number",
    nullable : true,
    init : null,
    event : "changeLon"
  }
}