Technology

Windows Phone 7 And IPhone - Sharing Code

Anthony Marshall
Anthony Marshall
13 Sept 2010
blog post featured image
<h3>A Match Made In C#</h3> <p>&#160;</p> <p>I got very exited when i began learning Objective-c, the prospect of being able to write native IPhone apps was very attractive to me. I don’t know why i got exited but like a large proportion of developers (based on the 200k + apps in the store) i did and i set out to conquer the beast. </p> <p>I am now two commercial apps in using Objective-c and XCode and i am starting to feel like there must be a better way of going around this, With Windows Phone 7 on the horizon and a large user base of the Android platform out in the wild i want to get as close to write once and reuse everywhere as is physically possible. But how is this possible when each platform has its own Language, Framework and IDE?</p> <p>Enter <a href="http://mono-project.com/Main_Page" target="_blank">Mono</a>, this excellent project which allows you to write, build and deploy .net code to non Windows platforms which is spearheaded by <a href="http://tirania.org/blog/" target="_blank">Miguel de Icaza</a> means you can now write a large proportion of your code once and it can be reused on the 3 mobile platforms.</p> <p>To give you an example here is a walkthrough of how you may go about doing this:</p> <p><em>note: To follow the below guide you will need a Windows machine with Visual Studio 2010 and the Windows Phone 7 Beta tools installed, also a Mac with the IPhone SDK, MonoDevelop and MonoTouch installed.</em></p> <h3>&#160;</h3> <p>Open Visual Studio 2010 and create a new Windows Phone 7 project, I have called the project “CodeSharing.WP7” and the solution “CodeSharing”.<em>&#160; I have created this solution in my drop box folder to share with the Mac i am going to be using but when creating a real application this would be done using a version control system.</em></p> <p><a href="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/newwp7project.jpg"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="New WP7 Project" border="0" alt="New WP7 Project" src="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/newwp7project-thumb.jpg" width="510" height="351" /></a> </p> <p>Add a Button called “btnSayHello” and a TextBlock called “txtHello” to the MainPage.xaml.</p> <p><a href="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/wp7ui.jpg"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="WP7UI" border="0" alt="WP7UI" src="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/wp7ui-thumb.jpg" width="243" height="442" /></a> </p> <p>Right click on the solution and add a new project, select Silverlight Class Library and make sure you have .Net 3.5 selected. When given the Option choose Silverlight 3. I have called this project “CodeSharing.Shared”.</p> <p><a href="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/addsharedproject.jpg"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="AddSharedProject" border="0" alt="AddSharedProject" src="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/addsharedproject-thumb.jpg" width="494" height="343" /></a> </p> <p>Add a class to the new project called “HelloMobiles” and add the code to the class which is below:</p> <p><a href="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/shaedcode.jpg"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="ShaedCode" border="0" alt="ShaedCode" src="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/shaedcode-thumb.jpg" width="485" height="256" /></a> </p> <p>Now in your Windows Phone 7 project add a reference to the new Class Library then add a click handler to the btnSayHello by double clicking it in the designer. You can then add the code below:</p> <p><a href="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/wp7clickhandler.jpg"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="WP7ClickHandler" border="0" alt="WP7ClickHandler" src="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/wp7clickhandler-thumb.jpg" width="490" height="251" /></a> </p> <p>If you now hit F5 and click the button you will see that it has pulled the text through to the TextBlock:</p> <p><a href="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/wp7endresult.jpg"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="WP7EndResult" border="0" alt="WP7EndResult" src="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/wp7endresult-thumb.jpg" width="253" height="461" /></a> </p> <p>So nothing special so far, we have created a very basic Windows Phone 7 Hello World application, so onto the good bit.</p> <p>If we now open up the solution in MonoDevelop on the Mac you will see the following:</p> <p><a href="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/screenshot20100913at103720.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="Screen shot 2010-09-13 at 10.37.20" border="0" alt="Screen shot 2010-09-13 at 10.37.20" src="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/screenshot20100913at103720-thumb.png" width="349" height="155" /></a> </p> <p>The solution has opened fine but the Windows Phone 7 project has not loaded, This is not a problem as we are going to be adding an IPhone project. Right click on the solution and add a new project. Under the C# menu select IPhone Window-based project.</p> <p><a href="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/screenshot20100913at104433.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="Screen shot 2010-09-13 at 10.44.33" border="0" alt="Screen shot 2010-09-13 at 10.44.33" src="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/screenshot20100913at104433-thumb.png" width="478" height="365" /></a> </p> <p>Once the IPhone project is created add a new IPhone View with Controller called “MainViewController” and then double click on the MainViewController.xib to edit the view in Interface Builder. <em>I am not going to go into here how you create the UI but there is a great tutorial <a href="http://monotouch.net/Tutorials/MonoDevelop_HelloWorld" target="_blank">here</a>. You will end up with a view looking like below and outlets for the UIButton and the UITextField specified on your view controller.</em></p> <p>Add a reference to the compiled dll of the CodeSharing.Shared project (<em>you cannot add a reference to the project itself as MonoDevelop says that the project is incompatible) </em>and add the following code to the ViewDidLoad method of the MainViewController code behind.</p> <p>&#160;</p> <p><a href="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/screenshot20100913at111757.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="Screen shot 2010-09-13 at 11.17.57" border="0" alt="Screen shot 2010-09-13 at 11.17.57" src="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/screenshot20100913at111757-thumb.png" width="475" height="165" /></a> </p> <p>And make the FinshedLaunching method in the Main class look like the following:</p> <p><a href="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/screenshot20100913at111835.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="Screen shot 2010-09-13 at 11.18.35" border="0" alt="Screen shot 2010-09-13 at 11.18.35" src="http://techstudio-website-alt.azurewebsites.net/Content/blog/uploads/2010/09/screenshot20100913at111835-thumb.png" width="479" height="119" /></a> </p> <p>Set the IPhone project as the start up project and you are good to go.</p> <p>&#160;</p> <p>This method is definitely not the best way going about this but it does give you an idea on how we can reuse code between many different mobile platforms using C# and Visual Studio 2010. I am particularly looking forward to getting my hands on <a href="http://www.go-mono.com/monodroid/Default.aspx" target="_blank">MonoDroid</a> so i can start writing Android apps too.</p> <p>&#160;</p> <p>Download the sample code <a href="http://www.thetechnologystudio.co.uk/samples/CodeSharing.zip" target="_blank">here</a>.</p>
Close chatbot
Open chatbot
Open chatbot