Setting values on a view: webOS vs. Android vs. Windows Phone 7

Now that I’m working on porting FlightPredictor to a third platform (Windows Phone), I have a better idea of the differences between the platforms. This post is about one of the more common things to do: taking values in code and making them show up in a view.

For reference, here’s a screenshot of the flight info page of FlightPredictor for Android:

This view is one of the most important ones in the app, and there’s a ton of information on it. Let’s focus on just one part: how to make the flight times (the “4:35 PM – 5:50 PM” in the upper-right corner) show up on screen.

webOS:
For a blast to the past, let’s look at Mojo first. This is the old application framework that is only used for older phones today.

In Mojo, each view is an HTML page, so in our HTML page for the flightInfo view, we include the following:

#{-publishedDepartureTimeStr} - #{-publishedArrivalTimeStr}

(I’m deliberately omitting the layout stuff…maybe I’ll cover that in a future post!)
The #{} syntax means to use the property from the templateModel of the scene. (the - means don’t escape any HTML in the property). So, my Flight object has these properties, and when pushing the scene I call

this.controller.stageController.pushScene({name: 'flightInfo', templateModel: event.item}, event.item);

The event.item is the Flight object, and since I’m passing it as the templateModel, that’s it! All in all, this is pretty simple – as long as the property’s already defined in the Flight object, I only have to change one thing (the HTML source of the view) to get it to show up.

Now, let’s look at Enyo, the new application framework that is used on the TouchPad (and some newer phones). In Enyo, views are defined by JavaScript that generates HTML. (for a real introduction, see Enyo Basics – From the Bottom Up) Here, the FlightInfo kind includes this for the view:

{name: 'currentFlightTimes', allowHtml: true, content: ''}

and then in the create code for the scene, we have:

this.$.currentFlightTimes.setContent( flight.publishedDepartureTimeStr + ' - ' + flight.publishedArrivalTimeStr);

Here we have two things to do, but it’s still fairly straightforward to make new properties show up.

Android:

Things are considerably less happy here. First, we have to define the TextView in the layout’s .xml file:

<TextView android:id="@+id/flightInfoCurrentFlightTimes">

Then we have to create a variable for this TextView in the Activity class:

private TextView currentFlightTimesView;

Then, in the constructor for the Activity class, we have to get the view:

currentFlightTimesView = (TextView) findViewById(R.id.flightInfoCurrentFlightTimes);

And finally, when we set a flight, we have to set the text on that view:

currentFlightTimesView.setText( flight.getOriginalDepartureTime().getTimeStr() + " - " + flight.getOriginalArrivalTime().getTimeStr());

So that’s a total of 4 changes to make, in two different files. This is significantly more irritating than either webOS version, and it really shows up when you have ~20-30 of these to add to the view.

Windows Phone 7:
Back to a world of happiness: with data binding, we can go back to a Mojo-like model and just add this to the XAML:

<TextBlock Text="{Binding PublishedFlightTimes}">

Admittedly, in this case we’d have to add an extra property for this (or make two separate TextBlocks), but there are plenty of cases where I just want a property that already exists. In any event, it’s much simpler than Android. Hooray!

So, the final count:

OS Changes
webOS – Mojo 1
webOS – Enyo 2
Android 4
Windows Phone 1 (maybe 2)

I would be very curious to see what the corresponding number is for iOS – is there a way to do simple templating?

2 thoughts on “Setting values on a view: webOS vs. Android vs. Windows Phone 7”

  1. BTW, I enjoy these posts. I’m learning a lot about mobile ecosystems from the perspective of a developer, which is a lot different than the standard industry perspective. I almost wish you would develop for iOS so I could just get your opinion about it.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s