I phone versus windows phone 7 coding

iPhone versus Windows Phone 7 CodingBy Don Burnett

Mobile App BuildingFrom design to product..In this slide show I will do a direct comparison of coding and tools of the Apple iPhone to the Windows Phone 7 environment from Microsoft. To be fair to the Apple folks and accurately represent a good example, I chose a simple “hello world” master-detail example from a very popular iPhone coding blog called the iCode Blog.. If you want to do iPhone coding and development it’s one of the best sources of information out there and I wholeheartedly recommend it.. I then ported the same example to Windows Phone 7 to show some of the differences. Different isn’t always better and these are just my opinions but you can judge for yourself. I am not anti-iDevice or anti-Apple. I own a bunch of Apple products and do development/design on that platform as well. But I hope you take a look at the differences and advantages to each for yourself. You choose!All Apple source code in this presentation quoted from:Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

Let’s Compare iPhone Versus Windows Phone 7Who has the better designer developer content workflow story?Which one could you make an app and bring it to market with first?How do their developer support programs compare?

“Hello World App” comparisonTools comparisonDesigner Developer StoryBe everywhere and make your apps shine

iPhone versus Windows Phone 7Go get some coffee so we can get started, we’ll be done in 30 slides or so with the iPhone example…The following iPhone sample source application is sample code I am “quoting” directly from the iCode Blog. If you are doing iPhone app building this is one of the best places on the net to find out how to code for the iPhone.http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppOpen up X-Code and Select File->New Project… Select Navigation-Based Application and click Choose…Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppNext: Name the project Fruit.Click on File -> New File… The object we are creating will inherit from NSObject, so select NSObject Subclass and click Next.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppThe next screen will ask you to name it. Go ahead and name it “Fruit” and make sure that “Also create Fruit.h” is checked. It should look like the screen below. Then, click Finish.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

Objective- C Your Father’s Programming Language

iPhone AppEasy so far right?? It gets a bit more painful..Now, we are going to define the properties of a “Fruit” object. For this application a fruit will have a name and a description. Open Fruit.h and add the following code:Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppWe have created the properties needed to represent our fruit. There is one line that you may be unfamiliar with. The line -(id)initWithName:(NSString*)n description:(NSString *)desc; is a definition for a function. This function will be called to initialize a Fruit object. All NSObjects have an init method, but we want to create our own so that we can pass in a name and description when the object is created.Open up Fruit.m and add the following code:Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppHere we implement the initWithName method. The code here seems pretty straight forward. We are basically setting our local copies of name and description to the arguments passed to this method. The important thing to notice here is the return self line. This is crucial for using this method as a constructor. It allows this function to return the newly created instance of a fruit object.Next, we are going to set the title of our main view. This is necessary to create a back button when transitioning between views. Open up RootViewController.m…In theviewDidLoad method, add the following code:Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppWe are setting the title property of the RootViewController object to the string “Fruits”. Also, be sure to add the #import “Fruit.h” line at the top to include the fruit object in our project as well as @synthesize fruitView to add the “getter” and “setter” methods.Next, we are going to create an array of fruit objects. Open up FruitAppDelegate.h and add the following code:Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppAll we are really adding here is an NSMutableArray property. I used NSMutableArray instead of NSArray because it has a few more methods making it more flexible.Now, open up FruitAppDelegate.m and add @synthesize fruits to the top. This is so other objects will have access to the fruits array. Also, be sure to include the import statement for Fruit.h.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppNow add the following code to the applicationDidFinishLaunching method.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone Appthe first three lines is creating new instances of a fruit object. Notice that instead of calling init, we are calling the initWithName method that we created. This is allowing us to pass in a name and a description to each of the fruits.The next line [self.fruits = [[NSMutableArrayalloc] initWithObjects:apple,orange,watermelon,nil]; builds a new array from the objects we just created. It is important to pass in nil as the last argument in an NSMutableArray. It will not work unless you remember this.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

Change ? Improvement ? Better Design Story ?Images courtesy of: Jurassic Park - The Ride: Universal Studios Hollywood; Universal's Islands of Adventure

Welcome to..The state of mobile app programming 2010..Images courtesy of: Jurassic Park - The Ride: Universal Studios Hollywood; Universal's Islands of Adventure

iPhone AppNow we are going to create the view that will be displayed when the user selects a fruit. Double click on any one of your .xib files to open up Interface Builder.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppClick File -> New and select view and click choose.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppYou should now see the new view (it will be blank) and the objects associated with it. We need some sort of text field to display the description of the fruit. For this tutorial I have chosen a UITextViewas opposed to a UITextField. This is because a UITextView is multi-line and is great for displaying more than one line of text. So, go ahead and drag it on to your view. Your view window should now look like this:Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppNow click File -> Save. One important thing to keep in mind is to make sure you are saving it in the current project’s directory. It seems that every time I add a view to a project, the default directory is not my project’s directory. Name this file FruitViewController and click Save.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppAnother window should show up after you click save. It is asking you if you want to add this view to your project. Just check the box net to Fruit ,click Add, and close Interface Builder.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppClose Interface Builder and go back to X-Code.Next.. create a ViewController to handle our View.Click File -> New File… Select UIViewController subclass and click Next.Name this file FruitViewController.m and check the box that says “Also create “FruitViewController.h” . Click Finish.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppSource: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppNow we will declare an Interface Builder Outlet for the UITextView that we added to the view. Open up FruitViewController.h and add the following code.This line allows us to associate the fruitDescription property with the UITextView we created. Open up FruitViewController.m and add this code underneath @implementation keyword. This creates default “getter” and “setter” methods for the fruitDescription property.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppDouble click on FruitViewController.xibto open it in interface builder. We need to connect the view to the FruitViewController class we just created. Click on the File’s Owner object.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppClick Tools -> Identity Inspector. Select FruitViewController from the dropdown next to class. Notice that under the Class Outlets section you will see the UITextView property we created.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppThe last step in interface builder is to connect the UITextView. Click Tools -> Connection Inspector. You should see an Outlet that says fruitDescription. Click in the corresponding circle and drag it over the UITextView on your view and release it.Now, click the circle next the word View under outlets and drag it to the View object inside of the window that says FruitViewController in the title. When you are done the screen should look like this:close Interface BuilderSource: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppThe first thing we are going to do here is create a property for our new view so that it can be transitioned to when a fruit gets clicked on. Open RootViewController.h and add the following code:We are just creating a property for the fruitViewController that we added to the project. Also note that I added the #import “FruitViewController.h” line. this will allow us to create new instances of the FruitViewController object.Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppNow open the RootViewController.m and find the numberOfRowsInSection method. This method tells the UITableView how many rows it will be displaying. In our case it will be the size of the array of fruits. Add the following code (click the image to enlarge):The first line allows us to gain access to the appDelegate of our application. This is where we defined the fruit array. Once we have access to the delegate the count property of the fruit gets returned.Now find the cellForRowAtIndexPathmethod and add the following code:Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppIn the first line we added is the “FruitAppDelegate *appDelegate…” line. Again, this is giving us access to the appDelegate object where we declared the fruit array. The next line calls the objectAtIndexmethod on the Array of fruits. The index we will be using can be accessed via indexPath.row. This is an integer value representing each row of the UITableView. Finally, we call the setTextmethod of the cell, to display the name of the fruit in each cell at the given index.This is the last step. We are going to detect which row in the UITableView the user selected. Find the method called didSelectRow and add the following codeSource: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppThis method gets called every time a user taps on a cell in the UITableView. The parameter indexPathhas a property called row that is the integer value of the cell the user clicked on. To access this, we call indexPath.row.The first line again gives us access to the appDelegate. The next line indexes into the fruits array and makes a copy of the selected fruit object.The next section starting with “if(self.fruitView == nil)”, initializes the viewController if it hasn’t already been initialized (see my previous tutorial if you need more of an explanation on this). One thing to take note of: Make sure that the parameter you pass to initWithNibName matches the name of the .xibfile you used for your view. So in our case, its FruitViewController.Following this line is the line that pushes the viewController on to the navigationController stack. This causes the view to transition to the new view.The last 2 lines pass the fruit information to the new view. We set the title of the view to the name of the fruit and then set the description text to the description of the fruit.Now click Build and Go and your app should launchSource: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppMaster ViewDetail ViewSource: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

iPhone AppAll that code just to get this master detail view ??Source: http://icodeblog.com/2008/08/08/iphone-programming-tutorial-populating-uitableview-with-an-nsarray

Enter Windows Phone 7Better Designer/Developer Content Workflow StoryLess CodeFaster to market applicationsEasier to get where your goingC# instead of Objective C (Not your father’s C programming language)Prototype your UI and your application all inside the same tool Expression Blend 4 for Windows Phone 7 let’s you design, prototype, and even build..If you need a more substantive coding environment, Visual Studio 2010 (integrated with Expression Blend) lets you unit test, program and build..

Windows Phone 7 Project ExampleTool ImprovementsVisual Studio 2010 for Windows PhoneExpression Blend 4 for Windows Phone

Windows Phone 7 ExampleStart in Expression Blend for Windows Phone 7..Select “New Project..”

Windows Phone 7 ExampleNext select Windows Phone Project Type and “Windows Phone Data-drive Application (MVVM)” Name your project..Click the “OK” button

Windows Phone 7 ExampleNow we open up a template which we can edit with a sample data source already provided with a master detail view already created for us.. Next we can edit this to match our earlier fruity example right on the design surface (no code)..

Windows Phone 7 ExampleLet’s run and look at what we’ve got in the Windows Phone 7 emulator..Select from the project menu “Project.. Run Project”The Windows Phone app should start building.. Next it will ask us to choose a real Windows 7 phone device or the Window 7 Phone Emulator running the real Windows 7 Phone OS.. We will select “Windows Phone 7 Emulator”

Windows Phone 7 ExampleWe have the Windows Phone 7 app running with the master view showing..

Windows Phone 7 ExampleClicking on the “watermelon” selection brings us our “detail” view

iPhone versus Windows Phone 7iPhone sample master/detail view with no real data binding (creating two views)Time: 12 MinutesWindows Phone 7 Time: less than 5 Minutes If you don’t like my timings try it yourself..Differences: True Drag and Drop Databinding (with sample XML data) Editing on a true Design Surface.. C# coding not your father’s C coding environment..

iPhone versus Windows Phone 7Expression Blend Advantages:Drag and Drop Databinding with Sample data or XML Data Source right onto application design surface. In application access to Windows Phone 7 resident data store..

iPhone versus Windows Phone 7Expression Blend Advantages:Data Sources can be from an OBJECT or Class..

iPhone versus Windows Phone 7Expression Blend Advantages:Data Sources are easily created from Class complete with sample data, so your app can be designed and you get out what you see when you connect it to your live data on the cloud, or anywhere else on the net or locally including a folder of images...

iPhone versus Windows Phone 7Expression Blend Advantages:Once you have your source you just drag and drop an individual image or the entire “collection” right on the design surface.. Blend will even put the collection in a list box and let you edit the size of the items right there..

iPhone versus Windows Phone 7Expression Blend Advantages:Design Import as it was meant to be:Import Layers right from Photoshop and Illustrator or Expression Design and make them into custom user controls right there..

iPhone versus Windows Phone 7Expression Blend Advantages:Drag and Drop Video and other Media Files such as animations right on the design surface to create your own integrated media application experience. No more separate video player app and restrictive UI for video playback.. Drag, Drop, Set Properties, and Go!

iPhone versus Windows Phone 7Other Advantages:C#Easier to read, port and maintain.. No pointers, and older C standards that were developed in the late 80s and early 90s..Visual Studio 2010 IntegrationXNA for X-Box Live 3D Games and ConnectivityXNA Game Studio 4.0 for Windows Phone 3D applications

I phone versus windows phone 7 coding

More Related Content

What's hot (19)

Similar to I phone versus windows phone 7 coding (20)

More from Our Community Exchange LLC (10)

Recently uploaded (20)

I phone versus windows phone 7 coding