?

Log in

No account? Create an account
Setting values on a view: webOS vs. Android vs. Windows Phone 7 - Greg [entries|archive|friends|userinfo]
Greg

[ website | gregstoll.com ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

Links
[Links:| * Homepage * Mobile apps (Windows Phone, Win8, Android, webOS) * Pictures * LJBackup * Same-sex marriage map * iTunesAnalysis * Where's lunch? ]

Setting values on a view: webOS vs. Android vs. Windows Phone 7 [Dec. 11th, 2011|01:00 pm]
Greg
[Tags|, , , , ]
[Current Mood |curiouscurious]

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:
OSChanges
webOS - Mojo1
webOS - Enyo2
Android4
Windows Phone1 (maybe 2)

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

Comments:
From: spchampion
2011-12-12 04:26 pm (UTC)
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.
(Reply) (Thread)
[User Picture]From: gregstoll
2011-12-12 06:44 pm (UTC)
Thanks! Glad you're enjoying them.

Hehe. That's what friends on Google+ are for...
(Reply) (Parent) (Thread)