Lesson 10: Exercise: Tip Calculator as a Universal App

Transcription

1 Lesson 10: Exercise: Tip Calculator as a Universal App In this lesson we're going to take the work that we did in the previous lesson and translate it into a Universal App, which will allow us to distribute our Tip Calculator to both the phone and to the Windows 8.1 App Store for inclusion there. To begin, (1) In the New Project template, select Templates > Visual C# > Store Apps > Universal Apps. (2) Select the Blank App (Universal Apps) project template. Name the project TipCalculatorUniversal and click the OK button to close the New Project dialog and create the new app. Once the new app is created, the Solution Explorer reveals three projects all prefixed with the solution name, then a dot, then: (1) Windows (2) WindowsPhone (3) Shared Windows Phone 8.1 Development for Absolute Beginners Page 103

2 Basically, the Windows and the Windows phone projects should only be different in so much that they have similar but different XAML to lay out based on screen size, for their specific differences. Then, anything that we can share should be added to this Shared project. So for our Tip Calculator app, this architecture is very straight forward. We'll put our Tip.cs class in the shared project and then reference it from both our WindowsPhone project and the Windows project. To begin, let's start with our shared project. I'm going to right-click the shared project and select Add > New Item : In the Add New Item dialog: Windows Phone 8.1 Development for Absolute Beginners Page 104

3 (1) Choose Class (2) Name it: Tip.cs (3) Click Add I ll copy and paste the work that I did in the previous lesson so we have exact duplicate. No changes required here. Windows Phone 8.1 Development for Absolute Beginners Page 105

4 Now that Tip class will be available to both my Windows and Windows phone projects. Next, we ll work on the Windows Phone project since we've already created that once. This should be just a matter of going to my MainPage.xaml and copying and pasting all the XAML that I created previously. After copying and pasting, I have the following result: Windows Phone 8.1 Development for Absolute Beginners Page 106

5 Next, I ll re-create the event handler method stubs by selecting each one in XAML and press the F12 keyboard command. When finished, the MainPage.xaml.cs should look similar to this: In my MainPage.xaml.cs, I ll add the PerformCalculation() helper method (and that should be the same as what I created in the previous lesson). Windows Phone 8.1 Development for Absolute Beginners Page 107

6 Near the top, we ll need to create a private field that will hold a reference to the Tip class: In the RadioButton_Click event handler, I want to call the performcalculation() helper method. Next: (1) In amounttextbox_lostfocus, I want to make sure to set the billamounttextbox.text to the tip.billamount to make sure it is formatted correctly. (2) In billamounttextbox_textchanged, I want to performcalculation() to make sure we re updating the new values. (3) In billamounttextbox_gotfocus, I want to clear the contents when the TextBox control receives focus so that I can enter fresh values. Windows Phone 8.1 Development for Absolute Beginners Page 108

7 It s time to test the app in the Emulator. Important: Currently the Windows project is selected as the Start Up Project. You can see that because it is in bold in the Solution Explorer. To change the Start Project that will execute when we start debugging to the Windows Phone project, right-click the TipCalculatorUniversal.WindowsPhone project in the solution explorer and select "Set as Start Up Project". As you can see, the project name is in a bold font as it appears inside of the Solution Explorer. Select the start debugging button to run the app in the Emulator. It should work exactly as it did in the previous lesson. Now, let's go ahead and create the Windows version of the app. First, I ll reset the TipCalculatorUniversal.Windows project as the Start Up Project using the technique I just demonstrated. Next, I ll open the MainPage.xaml of the Windows project. You can see we get more of the Microsoft Surface preview in the XAML Editor. Windows Phone 8.1 Development for Absolute Beginners Page 109

8 The purpose of this lesson is to demonstrate how little effort will be required to take our Windows Phone app and turn it into a Windows app. To that end, I ll begin by literally copying all of the XAML from my Phone s user interface and pasting it into the XAML editor for the Windows app. Once I copy and paste everything in the body of my page, I can see the preview displays my work: Admittedly, there s a lot of blank space on the right-hand side that we're not using, and I certainly could re-work a lot of this to make it utilize some of that blank space, however as a first pass, I'm pretty happy with this. It's the promise and the value of XAML that I'm able to reuse it both these contexts, and it works well. Beyond the XAML layout, we ll need to modify the MainPage.xaml.cs using the technique I demonstrated earlier, using F12 to Go To Definition and create the event handler method stubs. Windows Phone 8.1 Development for Absolute Beginners Page 110

9 The code in the code behind is identical to what we created before, so use the techniques and the code we used earlier in this lesson for the event handlers, the reference to the Tip class, and the performcalculation() helper method. Once you ve finished that, select the arrow next to the debug button that is currently set to Local Machine and change it to Simulator: Click the debug button. In the simulator, you can work with the app as expected: Windows Phone 8.1 Development for Absolute Beginners Page 111

10 As you can see, you can create a Universal App using one code base (the Tip class) and almost identical XAML for layout. Admittedly, I could tweak the Windows version of the XAML if I wanted to make it look good on the larger form factor, but even when I didn't modify it, it looked just fine, at least for this initial version. So I encourage you to do this: Whatever you're going to build, build it for both Windows and Windows Phone. Structure your shared logic with that in mind. Once you keep your shared logic / business rules / data access in the Shared project, you ll just reference methods and so forth that are inside of the classes of your Shared project from both the Windows and the Windows phone projects. Windows Phone 8.1 Development for Absolute Beginners Page 112