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.
