In this series, I will be taking sample applications from the iPhone SDK and implementing them on Windows Phone 7 Series. My goal is
to do as much of an apples-to-apples comparison as I can. This series will be written
to not only compare and contrast
how easy or difficult it is
to complete tasks on either platform,
how many lines of code, etc., but Id also like it
to be a way for iPhone developers
to either get started on Windows Phone 7 Series development, or for developers in general
to learn the platform. Heres my methodology: Run the iPhone SDK app in the iPhone Simulator
to get a feel for what it does and
how it works, without looking at the implementation Implement the equivalent functionality on Windows Phone 7 Series using Silverlight. Compare the two implementations based on complexity, functionality, lines of code, number of files, etc. Add some functionality
to the Windows Phone 7 Series app that shows off a way
to make the scenario more interesting or leverages an aspect of the platform, or uses a better design pattern
to implement the functionality. You can download Microsoft Visual Studio 2010 Express for Windows Phone CTP here, and the Expression Blend 4 Beta here. Hello World! Of course no first post would be allowed if it didnt focus on the hello world scenario. The iPhone SDK follows that tradition with the Your First iPhone Application walkthrough. I will say that the developer documentation for iPhone is pretty good. There are plenty of walkthoughs and they break things down into nicely sized steps and do a good job of bringing the user along. As expected, this application is quite simple. It comprises of a text box, a label, and a button. When you push the button, the label changes
to Hello plus the word you typed into the text box. Makes perfect sense for a starter application. Theres not much
to this but it covers a few basic elements: Laying out basic UI Handling user input Hooking up events Formatting text So, lets get started building a similar app for Windows Phone 7 Series! Implementing the UI: UI in Silverlight (and therefore Windows Phone 7) is defined in XAML, which is a declarative XML language also used by WPF on the desktop. For anyone thats familiar with similar types of markup, its relatively straightforward
to learn, but has a lot of power in it once you get it figured out. Well talk more about that. This UI is very simple. When I look at this, I note a couple of things: Elements are arranged vertically They are all centered So, lets
create our Application and then start with the UI. Once you have the the VS 2010 Express for Windows Phone tool running,
create a new Windows Phone Project, and call it Hello World: Once created, youll see the designer on one side and your XAML on the other: Now, we can
create our UI in one of three ways: Use the designer in Visual Studio
to drag and drop the components Use the designer in Expression Blend 4
to drag and drop the components Enter the XAML by hand in either of the above Well start with (1), then kind of move
to (3) just for instructional value.
To develop this UI in the designer: First, delete all of the markup between inside of the Grid element (LayoutRoot). You should be left with just this XAML for your MainPage.xaml (i shortened all the xmlns declarations below for brevity): 1: <phoneNavigation:PhoneApplicationPage
2: x:Class="HelloWorld.MainPage"
3: xmlns="...[snip]"
4: FontFamily="{StaticResource PhoneFontFamilyNormal}"
5: FontSize="{StaticResource PhoneFontSizeNormal}"
6: Foreground="{StaticResource PhoneForegroundBrush}">
7:
8: <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
9:
10: </Grid>
11:
12: </phoneNavigation:PhoneApplicationPage>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Well be adding XAML at line 9, so thats the important part.
Now,
Click on the center area of the phone surface
Open the Toolbox and double click StackPanel
Double click TextBox
Double click TextBlock
Double click Button
That will
create the necessary UI elements but they wont be arranged quite right. Well fix it in a second.
Heres the XAML that we end up with:
1: <StackPanel Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="200">
2: <TextBox Height="32" Name="textBox1" Text="TextBox" Width="100" />
3: <TextBlock Height="23" Name="textBlock1" Text="TextBlock" />
4: <Button Content="Button" Height="70" Name="button1" Width="160" />
5: </StackPanel>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
The designer does its best at guessing what we want, but in this case we want things
to be a bit simpler.
So well just clean it up a bit. We want the items
to be centered and we want them
to have a little bit of a margin on either side, so heres what we end up with. Ive also made it match the values and style from the iPhone app:
1: <StackPanel Margin="10">
2: <TextBox Name="textBox1" HorizontalAlignment="Stretch" Text="You" TextAlignment="Center"/>
3: <TextBlock Name="textBlock1" HorizontalAlignment="Center" Margin="0,100,0,0" Text="Hello You!" />
4: <Button Name="button1" HorizontalAlignment="Center" Margin="0,150,0,0" Content="Hello"/>
5: </StackPanel>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Now lets take a look at what weve done there.
Line 1: We removed all of the formatting from the StackPanel, except for Margin, as thats all we need. Since our parent element is a Grid, by default the StackPanel will be sized
to fit in that space. The Margin says that we want
to reserve 10 pixels on each side of the StackPanel.
Line 2: Weve set the HorizontalAlignment of the TextBox
to Stretch, which says that it should fill its parents size horizontally. We want
to do this so the TextBox is always full-width. We also set TextAlignment
to Center,
to center the text.
Line 3: In contrast
to the TextBox above, we dont care
how wide the TextBlock is, just so long as it is big enough for its text. Thatll happen automatically, so we just set its Horizontal alignment
to Center. We also set a Margin above the TextBlock of 100 pixels
to bump it down a bit, per the iPhone UI.
Line 4: We do the same things here as in Line 3.
Heres
how the UI looks in the designer:
Believe it or not, were almost done!
Implementing the App Logic
Now, we want the TextBlock
to change its text when the Button is clicked.
In the designer, double click the Button
to be taken
to the Event Handler for the Buttons Click event. In that event handler, we take the Text property from the TextBox, and format it into a string, then set it into the TextBlock. Thats it!
1: private void button1_Click(object sender, RoutedEventArgs e)
2: {
3: string name = textBox1.Text;
4:
5: // if there isn't a name set, just use "World"
6: if (String.IsNullOrEmpty(name))
7: {
8: name = "World";
9: }
10:
11: // set the value into the TextBlock
12: textBlock1.Text = String.Format("Hello {0}!", name);
13:
14: }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
We use the String.Format() method
to handle the formatting for us.
Now all thats left is
to test the app in the Windows Phone Emulator and verify it does what we think it does!
And it does!
Comparing against the iPhone
Looking at the iPhone example, there are basically three things that you have
to touch as the developer:
1) The UI in the Nib file
2) The app delegate
3) The view controller
Counting lines is a bit tricky here, but
to try
to keep this even, Im going
to only count lines of code that I could not have (or would not have) generated with the tooling. Meaning, Im not counting XAML and Im not counting operations that happen in the Nib file with the XCode designer tool. So in the case of the above, even though I modified the XAML, I could have done all of those operations using the visual designer tool. And normally I would have, but the XAML is more instructive (and less steps!). Im interested in things that I, as the developer have
to figure out in code. Im also not counting lines that just have a curly brace on them, or lines that are generated for me (e.g. method names that are generated for me when I make a connection, etc.)
So, by that count, heres what I get from the code listing for the iPhone app found here:
HelloWorldAppDelegate.h: 6
HelloWorldAppDelegate.m: 12
MyViewController.h: 8
MyViewController.m: 18
Which gives me a grand total of about 44 lines of code on iPhone. I really do recommend looking at the iPhone code for a comparison
to the above.
Now, for the Windows Phone 7 Series application, the only code I typed was in the event handler above
Main.Xaml.cs: 4
So a total of 4 lines of code on Windows Phone 7. And more importantly, the process is just A LOT simpler. For example, I was surprised that the User Interface Designer in XCode doesnt automatically
create instance variables for me and wire them up
to the corresponding elements. I assumed I wouldnt have
to write this code myself (and risk getting it wrong!). I dont need
to worry about view controllers or anything. I just write my code. This blog post up
to this point has covered almost every aspect of this apps development in a few pages. The iPhone tutorial has 5 top level steps with 2-3 sub sections of each.
Now, its worth pointing out that the iPhone development model uses the Model View Controller (MVC) pattern, which is a very flexible and powerful pattern that enforces proper separation of concerns. But its fairly complex and difficult
to understand when you first walk up
to it. Here at Microsoft weve dabbled in MVC a bit, with frameworks like MFC on Visual C++ and with the ASP.NET MVC framework now. Both are very powerful frameworks. But one of the reasons weve stayed away from MVC with client UI frameworks is that its difficult
to tool. We havent seen the type of value that beats double click, write code! for the broad set of scenarios.
Another thing
to think about is
how many of those lines of code were focused on my apps functionality?. Or, the converse of
How many lines of code were boilerplate plumbing? In both examples, the actual number of functional code lines is similar. I count most of them in MyViewController.m, in the changeGreeting method. Its about 7 lines of code that do the work of taking the value from the TextBox and putting it into the label. Versus 4 on the Windows Phone 7 side. But, unfortunately, on iPhone I still have
to write that other 37 lines of code, just
to get there.
10% of the code, 1 file instead of 4, its just much simpler.
Making Some Tweaks
It turns out, I can actually do this application with ZERO lines of code, if Im willing
to change the spec a bit. The data binding functionality in Silverlight is incredibly powerful. And what I can do is databind the TextBoxs value directly
to the TextBlock. Take some time looking at this XAML below. Youll see that I have added another nested StackPanel and two more TextBlocks. Why? Because thats
how I build that string, and the nested StackPanel will lay things out Horizontally for me, as specified by the Orientation property.
1: <StackPanel Margin="10">
2: <TextBox Name="textBox1" HorizontalAlignment="Stretch" Text="You" TextAlignment="Center"/>
3: <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,100,0,0" >
4: <TextBlock Text="Hello " />
5: <TextBlock Name="textBlock1" Text="{Binding ElementName=textBox1, Path=Text}" />
6: <TextBlock Text="!" />
7: </StackPanel>
8: <Button Name="button1" HorizontalAlignment="Center" Margin="0,150,0,0" Content="Hello" Click="button1_Click" />
9: </StackPanel>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Now, the real action is there in the bolded TextBlock.Text property:
Text="{Binding ElementName=textBox1, Path=Text}"
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
That does all the heavy lifting. It sets up a databinding between the TextBox.Text property on textBox1 and the TextBlock.Text property on textBlock1. As I change the text of the TextBox, the label updates automatically.
In fact, I dont even need the button any more, so I could get rid of that altogether. And no button means no event handler. No event handler means no C# code at all. Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.
