On last Wednesday, me and my friend, Zoltán Árvai (@zoltanarvai, also a Microsoft MVP) were invited to Budapest New tech Meetup. Along with other two-person teams of seasoned Android, iOS and Mobile Web developers, we were participating in a Live Coding event (representing Windows Phone 7). The goal was to see how the development of the different mobile platforms compare.
We have not had any previous knowledge of the task, which was to create an app that allows users to rate presentations at a meetup (a meetup typically consists of about 4-5 5 minute presentations + 5 minute QA). Obviously, we had to display the names of the presenters, the title of the presentations, some summary and of course, find a way to actually do the rating. There is also an online API, but we were warned that it does not contain all the information required, and is quite messy.
All four teams had a little bit less than 1.5 hours to work on the app. We could use pretty much any help we could get online, but all teams decided to start from scratch. After the time was up, each team had a few minutes to show off their work.
The web team wasted a lot of time trying to get the existing API to work. In the end, they were barely able to list the presentations and via clicking, go to a “details page”. Their solution looked and behaved much like an iPhone app.
The Android team had problems showing off their app, because Compiz (a Linux window manager) kept crashing. According to them, they had the basics covered. Here is a very bad quality screenshot from a very bad quality projector:
The iPhone team had managed to create a rating page, and show it off on the emulator. The app had a lot of (in my opinion) phone usability issues, such as scrollbars within scrollbars and way too small touch targets for the rating stars. However, they also had a half-finished video player working, but no back functionality from the video player. Again, a bad quality screenshot is all I could get for this post:
As for the Windows Phone 7 app, we decided to go waaay beyond what was required. We wanted to get a complete Meetup app working in the mere 1.5 hours we had. The goal was to have Panorama navigation, with the pages showing past meetups, the upcoming meetup and also some “about” information. Diving within a meetup we wanted to show the presentations for the meetup along with rating functionality, meetup details (such as time and place), and photo gallery for past meetups so that users can browser the photos created at the meetip.
We spent 5 minutes in advance deciding about the above direction. We also decided not to write any code – we were going to use Expression Blend’s Sample Data feature to simulate a real data model, and then it was just a matter of applying drag-and-drop databinding.
Here is the object model we created:
The data model is obviously filled with Blend-generated random content. Names, Lorem Ipsums, etc. We managed to use all of the model, except for the commenting on Presentations.
As for the UI, I snapped a picture with my WP7 camera as the event went on, and we used that as the background for the main Pivot. Here is what the app looks like in the emulator:
This is the past meetups screen, and is obviously scrollable. Note how the date fields look like actual dates – thanks to the wonders of Blend’s sample data:
.
The next Pivot screen is showing the next meetup:
And we also added an about screen, because the guidelines say that a Pivot control should have at least three pivot screens:
Here you can see that some of the text is not visible in front of the bright lamp. We didn’t have the time to darken the image, but as you know it shouldn’t have taken more than 2 minutes.
When you tap on a meetup on the Past meetup screen, you get into the “Meetup Details” section of the app. This section is – again – a Pivot control. Here is what it looks like:
As you can see, the sample data is at work again – we have real sounding names for the presenters, and cool Lorem Ipsum text for the presentation title and description. The most interesting thing here is probably the rating. The rating is actually bound to the backing object model (Blend’s sample data actually uses a real object model, so when a real app is being made, all we have to do is replace that with another one that can be filled from the server side, and has similar signature).
For the rating, we first experimented with the Slider control. Then it turned out that the slider does not behave well on a Panorama, so we had to think of something else. The Silverlight Toolkit for Windows Phone’s new ListPicker control seemed like a good idea. The problem was that the rating is stored in our model as a 1 digit number, we couldn’t limit it to a number between 1 and 5. This was the only place we had to write some code: we created a simple converter that converted the model’s 1-10 values to 1-5. Then we hardcoded the following into the ListPicker:
As you can see, we bound the SelectedIndex property to the Rate property of the model, using the IndexToRateConverter discussed above. The end result is that we can see the rates, and also change our rating y tapping on the stars, which opens a dropdown (pushing down the next presentation with a nice animation), and allows finger-friendly selection of the value we want:
Now, if we had more time, this area could have been refined by re-templating the ListPicker to have a black background and white foreground, and also another font / font siz where the stars look better. The rating also misses distinction between your vote and the general average from the others.
The next screen is the meetup photo screen. We first used the default chair images from Blend’s sample data, but we had so much time on our hand that we downloaded some previous images and used those:
The Photos page (we made a mistake by having the first letter capitalized against metro rules) essentially contains images from the marked part of the sample data in a WrapPanel:
Tapping on such a photo takes you to the Photo viewer page, where the photo can be seen in a bigger size. We couldn’t implement pinch zooming on this page, but that should have not taken more than another 10 minutes using sample code from the Silverlight Toolkit for Windows Phone.
The last page for a meeting is a details page with random text:
So, there you go. In the end, we created a mostly working application with most features implemented – the only thing needed to become useful was connecting to a real online data store. The other teams only created one screen of the same app. We have been working with WP7 development for only a few months, while the others have much more experience (although admittedly both of us are experienced Silverlight developers). Don’t take me wrong - it’s not (just 
) because we are so awesome. We managed to beat the other platforms because the WP7 development tools and the platform is extremely productive, and we made the right decision to take full advantage of the tools, especially Expression Blend.
Posted
Dec 06 2010, 08:08 PM
by
vbandi