[NOTE: 7/5/2011 – changed enyo.hitch() in source code to enyo.bind(), which is documented. They’re the same function in Enyo 0.1]

Now that I actually have a device to run the app on, I’ve found a few things I’d needed to fix with version 1.0.0 of EveryMarathon:

1) The scrollers for individual states weren’t moving back into place when I refreshed their contents – you have to do that manually with the $.scroller.scrollIntoView() method

2) In Portrait mode, the app looked terrible – what I thought would fix that would be to set a minimum width on the details pane, but that doesn’t seem to work. I need to go back to this, but for now, I hard-coded the app to only work in “right” landscape orientation – what’s annoying about this is that if you are holding it upside down but in landscape, the app will launch upside down….this is on the must fix list.

3) The month displayed in the details view was off by one – totally my bug, nothing to do with WebOS – easy fix.

4) I got my map working, with clickable infoboxes! This was way more trouble than I thought it would be, because I was overthinking things. Microsoft supplies the Bing Maps V7 AJAX map control with a Pushpin object and an Infobox object, but the two aren’t connected. I took advantage of the fact that everything is a Javascript object, so I can just define new properties on my Pushpin objects and Infobox objects to maintain the state I need to. Obviously I’d prefer it if Microsoft provided the solution, or if HP had a nice wrapper for this for Enyo, but until then, I’ll use my custom Enyo MapView kind. Here’s the source code:

enyo.kind({
  name: "EveryMarathon.MapView",
  kind: "VFlexBox",
  events: {
      onBack: "",
      onPinOnclick: "",
      onInfoboxOnclick: "",
      onSelectItem: ""

  },
  published: {
      url: "",
      visibleInfobox: "",
      selectedItemIndex: ""
  },
  components: [
      {kind: "Map", name:"mapContainer", zoom: 6, flex:1, credentials: BING_API_CREDENTIALS},
	  {kind: "Toolbar", components: [
		{kind: enyo.GrabButton},
		{flex: 1},				  
			{caption: "Done with Map", onclick: "dismiss"},
			{flex: 1},				  

	  ]}	      
  ],
  showRacesOnMap: function(races) {
	
	this.$.mapContainer.clearAll();
	
  	var inOptions = null;
  	var locations = [];
  	for (var i = 0; i< races.length; i++)
  	{
  		var latitude = races[i].latitude;
  		var longitude = races[i].longitude;
		var location = new Microsoft.Maps.Location(latitude, longitude);
		locations.push(location)
		var pushpin = new Microsoft.Maps.Pushpin(location, inOptions);
		var infobox = new Microsoft.Maps.Infobox(location, {htmlContent: "
" + races[i].title + "
",visible:false, offset:new Microsoft.Maps.Point(0,35)}); infobox.raceIndex = i; pushpin.infobox = infobox; this.$.mapContainer.map.entities.push(infobox); this.$.mapContainer.map.entities.push(pushpin); Microsoft.Maps.Events.addHandler(pushpin, 'click', enyo.bind(this, "doPinOnclick")); Microsoft.Maps.Events.addHandler(infobox, 'click', enyo.bind(this, "doInfoboxOnclick")); } var bestview = Microsoft.Maps.LocationRect.fromLocations(locations); this.$.mapContainer.map.setView({bounds:bestview }); this.$.mapContainer.setZoom(6); }, dismiss: function() { this.doBack(); }, doPinOnclick: function(inSender) { var pin = inSender.target; if (pin) { var infobox = pin.infobox; if (infobox) { if (this.getVisibleInfobox() != "") { this.getVisibleInfobox().setOptions({visible:false}); } this.setVisibleInfobox(infobox); infobox.setOptions({visible:true}); } } }, doInfoboxOnclick: function(insSender) { this.setSelectedItemIndex(insSender.target.raceIndex); this.doSelectItem(this); } });

2 comments on “Updates to EveryMarathon for WebOS – TouchPad

  • Thanks for publishing this code.
    Are you doing geocoding using Bing Maps REST services? If so, would you mind sharing your enyo-ized JS code for it? I’m reading the Bing Maps documentation for generic javascript implimentation of REST location services. Some of it does not make sense to me.
    BTW, where did you find documentation on enyo.hitch()? You probably know that it’s not in the API documentation.
    Regards,
    Rick

    • Hi,

      Thanks for reading it – I’m using Drupal as the server-side of this solution, so all the geocoding has already happened by the time it gets to the TouchPad app – I haven’t dug into the Bing MAP REST services at all, but could you just call them using WebService, similar to how the FeedReader sample app calls the Yahoo! RSS to JSON service?

      With regard to enyo.hitch(), I found that in FancyMaps.js in the WebOS Maps app source code to create closures for Enyo methods. It had been bothering me that I didn’t know what it was doing, so I went ahead and did a little research with grep :)

      Looking at the Enyo source code enyo.hitch is actually the enyo.bind() function, so I changed enyo.hitch to enyo.bind in my MapView source code and it worked the same. Since enyo.bind is in the documentation, I’ll use that here.

      Thanks!

Comments are closed.