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.
