Categories
Touchpad

Updates to EveryMarathon for WebOS – TouchPad

[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); } });
Categories
Touchpad

EveryMarathon for TouchPad out today!

I got a WebOS version of my EveryMarathon iPhone app out the door for the HP Touchpad launch today – I’m releasing it as a free app for the Touchpad because I don’t have a tablet yet to test it on, so if it’s got a few quirks, I don’t want any disappointed customers 🙂

One of the things I wasn’t sure about with EveryMarathon would be what the UI patterns would be for the TouchPad – for instance, how are most people going to integrate web views into their app? This isn’t necessarily a technical problem – HP does have a nice Design Guidelines document as part of the WebOS 3.0 SDK, but just like iOS, I’d expect certain patterns to emerge as standards.

One of the fun things about the new HP Touchpad tablet is that it’s got the best web development framework I’ve ever worked with – Enyo!

I’d love to build all my web apps with Enyo on the front-end and a thin back-end like Sinatra for Ruby after working with Enyo for just a little while.

If you’ve been doing any kind of Javascript development for the web, remember when you first saw jQuery, Prototype, Dojo, or any similar framework and saw how easy that made some things with JavaScript? Enyo makes building the whole front-end that easy – no more HTML or CSS box model. Instead you get to use layout managers to write your app – similar to Android or Swing, but not exactly the same. There may be other Javascript frameworks that let you program in a similar way, but I haven’t used them – let me know if there are any!

I found that WebOS 3 is missing a lot of community support compared to iOS development – with iOS, usually if I have the problem, other people have had the problem too, so it’s easy to start tracking down a solution through GitHub, StackOverflow, or just plain Google. With WebOS, the number of developers is a lot smaller, and the only place to discuss programming for the Touchpad has been a private forum on the Palm Developer web site.

On the positive side for WebOS development – getting JSON from a web service is unbelievably easy, the UI library seems to be well thought-out, and there are no weird code-signing/certificate issues like iOS – that was a breath of fresh air! Testing an app on the emulator is as easy as running palm-package on the directory with your app in it, and then running palm-install <name-of-app>, and boom, app is running.