Implementing the iOS App10:16 with Heath Hodgert
We'll use the iOS designer in Visual Studio to customize our app in the iOS project. Using the iOS designer we'll provide outlet for presentation elements that we can later use in the code behind. We'll also use the outlet we created in the designer and hook them to our pizza service to handle the calculations and return results.
- MVC: Model View Controller pattern
To learn more about iOS development, check out the courses and workshops available on Treehouse.
When implementing iOS, there are a number of differences from Android. 0:00 First, layout is done in a designer only, instead of an editable XML file. 0:05 Also, instead of an activity, iOS uses a model view controller pattern, 0:11 or MVC, to render its interfaces. 0:16 We should not do any code here, 0:20 since the app environment is not completely initialized. 0:21 The one thing this does is identify the app delegate. 0:25 So when our app launches, the AppDelegate will handle the delegate events. 0:29 Open AppDelegate. 0:36 This class must be registered as the AppDelegate, 0:38 using the attribute, which must be what we named it in the main CS. 0:41 With the AppDelegate registered, we override the finish launching, which is 0:45 the first point where we know the app is completely initialized and ready to run. 0:50 There's nothing to do in our app since we're using a storyboard for this UI. 0:55 If we wanted to change the story board based on a phone or tablet size, 0:59 this is the place we would do it, although with some of the new IOS layout features. 1:05 We'll be able to make our app look good at any resolution. 1:10 So we should not need to change story board. 1:15 Now let's look at the main story board and customize it for our app. 1:18 If you not setup your app to connect with a MAC agent, 1:22 you'll get this error message. 1:25 So let's set it up. 1:28 To make sure we can connect to the MAC agent, 1:30 we need to turn on sharing in the system preferences on your MAC. 1:33 So let's switch to the MAC. 1:38 Open system preferences. 1:41 Sharing. 1:44 Enable remote login. 1:47 Allow access for all users. 1:49 This will make sure we can log in when we setup the Mac agent on a Windows machine. 1:52 Since we set up our Mac agent, 1:58 we can connect it from our Visual Studio for Windows. 2:00 Open up the Mac Agent dialogue. 2:05 You could open it from the Tools menu, under iOS. 2:07 If your Mac Agent is on the same network, it should show up on this list. 2:12 If it does, simply right click and connect. 2:17 You'll be prompted for your Mac log-in credentials, and 2:21 then we'll negotiate a connection. 2:24 If your Mac is not discovered automatically, then click the add Mac 2:28 button, and enter either the IP address or the name of the Mac. 2:31 Although if your Mac was not automatically discovered, 2:36 your best choice is IP address. 2:39 You can get the IP address on the Mac in the settings under the Network app. 2:41 So now, the Storyboard Designer's open and 2:46 we can see the button that counts the clicks in the Template app. 2:48 Right-click on the background to select the View Controller in the Designer. 2:51 This is a good time to explain what a view controller does. 2:59 iOS uses a model view controller, or MVC pattern, for its interfaces. 3:04 The view controller is the controller which handles 3:10 all interactions between the model and the view or any other services. 3:12 The view is simply the layout of the user interface, and 3:18 is referenced by their ViewController. 3:21 There's more on the MVC pattern in the teacher's notes. 3:24 Take a look at the ViewController, which is a partial class, 3:28 and a UI view controller. 3:31 It's a partial class cuz when the IOS project get's compiled, 3:34 it generates glue code between the story board and 3:38 the view controller, also as a partial class, that they're joined together. 3:42 If we look back at the main story board, we can see where we assign 3:47 our ViewController to the ViewController in the Designer. 3:50 Select the ViewController by right clicking and selecting. 3:54 Open up Properties and you can see a class property, 3:59 with the list of UI ViewControllers in our app. 4:02 In this case, we only have one. 4:06 To start customizing our application, right click the button, And delete it. 4:08 Now open the toolbox, 4:15 And add a text field 4:24 Button. 4:33 And a label. 4:40 We need to give each of these controls a name so 4:46 that we can reference them later in the ViewController. 4:49 Select the text, call this PeopleEntry, 4:54 And let's remove the text. 5:01 We'll call the button, calculate button 5:08 And change it's text to calculate. 5:16 And then Pizza label. 5:24 And remove its text. 5:36 Depending on which device you're using, our app maybe completely unusable. 5:39 Because the text entry field is off the screen or the button is not clickable. 5:44 This happens because iOS views are absolutely positioned 5:49 when laying out on the screen. 5:53 So wherever you put the control, while in the designer is where it stays. 5:54 So if your screen is smaller than your designer it may not be visible. 6:00 As you can see, its different sizes will make our app very difficult to use. 6:09 To fix this, we can add constraints so that the controls will resize and 6:17 align with any screen size. 6:21 To do this, we'll need to apply constraints. 6:23 This can get a little tricky to get right. 6:26 But a good way to approach it is vertically, then horizontally. 6:29 Click the PeopleEntry, pause and 6:34 then click it again to put you in constraint mode. 6:36 Drag the top T shaped icon to the top of the screen. 6:45 This will give us a starting point for all other controls. 6:51 Next, select the button and 6:56 drag the top T icon to the bottom of the PeopleEntry control. 6:58 Once more for the Pizza account label 7:03 that drag it's top T icon to the bottom of the calculate button. 7:05 For horizontal, starting with the PeopleEntry, drag the left T icon to 7:10 the left side of the view and the right T icon to the right side of the view. 7:15 Do the same for the button. 7:20 You will notice button is too small to hold the text. 7:21 Lt's select it again and change its size. 7:27 Label also is probably too small. 7:41 So let's increase its size. 7:51 To test out the constraints, change the View As option to something smaller and 8:08 larger. 8:12 And switch landscape to portrait and back and forth. 8:14
You need to sign up for Treehouse in order to download course files.Sign up