3.1 Get Started With Watch Scenes

Now it's time for us to introduce the first aspects that we're gonna be dealing with when it comes to the actual watch interface itself. So for the time being, let's go ahead and minimize and close up the RemindMe folder here. And let's come down to the RemindMe Watch Kit app folder, so let's single click our interface storyboard. And things are gonna be a little tight here because of the resolution that I'm using. So for now, let's just go ahead and close off the right panel so we can get a little bit more space. So as you can see in the middle here, we have one complication. So this is the complication that was generated for us when we checked the include complication button in the project template creator, when we created our watch app back at the beginning of the course. So now what we wanna do is, we wanna kinda start to set things up a little bit. Now, the basic structure of this particular application is that there's going to be two screens, we're gonna have two screens in this app. And the way that we're gonna do that is, we're going to introduce a couple different interface controllers. And then we are going to sub-class these interface controllers, so that we can get access to them programmatically. Whoa, Derek, that sounds like a lot, no, it's really not that bad. Let's go ahead and go through a simple example on this first one, so you can see just what I'm talking about and why it's important. Okay, so if we make sure that this is selected, and you can see a couple of different things about this. Right now, we have our complication selected, this has, by default, behind it an interface controller. You can't really see it, necessarily, but if you select this little guy right here, you'll see that it says interface controlle. And then over on the right-hand side, you'll see properties associated with an interface controller, okay, no big deal. Now, the other thing that you're gonna notice here is this arrow, now, this arrow is important. This arrow means that this particular controller, this particular interface is going to be the initial one that shows up when we start our application. There's a couple of different ways you can see that, by the fact that there's an arrow here is the most obvious. But if you look over on the right hand side, under interface controller, you're gonna see is initial controller. This is checked, and that means that's gonna be the first one. So if I uncheck it, the arrow disappears, if I check it, then the arrow reappears. All right, so let's just kinda get this thing up and running in the simulator, so we can see exactly what this is going to look like. Well, if we run this right now, it's gonna be a little bit dull, but we'll go ahead and do it anyway. Now if we come up to the top here where you see the little play button and stop button. And then you see these little guys right here, so what these are are known as schemes. Now, by default, because we are creating a Watch OS application, we have three schemes. We have the RemindMe scheme, which is your iPhone application scheme. We have the RemindMe Watch Kit App scheme, which is for the watch, obviously. And then the complication scheme, which you get by default, because we are using complications within this app. So if I were to stay here with RemindMe, like I said, this is for the iPhone app itself. I could come in here and I could select a simulator, and I can simulate the functionality of the iPhone app within the simulator. And I can do that, that's fine, but that's not really gonna help me, because in this course, I'm more interested in the watch app. So in order for us to use that, we need to come down below to the RemindMe Watch Kit App scheme, and I need to come in here and I need to select one of these simulators. And these look a little different, obviously, because we're talking about a particular iPhone simulator plus an Apple Watch. So now we have two different versions of Apple Watch series one, we have the 38 millimeter and the 42 millimeter. And then for the series two, we also have the 38 and the 42. So I will use the iPhone 7+ with the Apple watch series two 42 millimeter, just to make things a little bit bigger. Okay so now you can see that these things have changed up here, our scheme has changed. And now I can come over here and hit the play button. So once I hit the play button, the entire application, Xcode is going to build everything. It is going to start up the simulators, and I say simulators because it will start both. It will start the iPhone simulator as well as the Apple Watch simulator. So that you can see everything that's going on within your app. Sometimes they show up right away, sometimes they take a moment. So here is the Apple Watch simulator, and as you can see here, it says the Readme Watch Kit App, if you can see the entire thing off the side, and then it's done, there it is. I can open up the regular simulator for the phone, it's a little big because of my resolution. Plus we're not really gonna use that very much, so we'll just minimize it. So this, as I said, is the Apple Watch simulator, and it is rather dull, there's nothing going on there. We need to put something on there so that we can actually see what's going on, so how do we do that? Well, the first thing that we want to do is, let's go ahead and stop the simulator. Well, let's put something on the screen so we can see what's going on. So we've got some real estate here, the easiest thing for us to do is to come over here into our filter on the bottom where we can see kind of all of our controls that we can use on the storyboard. And let's just go ahead and type in label in the search bar, so that's gonna bring up some things that I can use are kind of label controls. So let's just grab this label, let's stick it on the interface here. And as you can see, It snaps up to the top, so I can try to drag this thing around, and it's gonna snap up to the top. We'll play around with spacing and all that kind of stuff in another lesson, but for now, just see that we can put a label on the screen. But the text label is rather dull, so what we want to do is, we want to select it in the interface. Now, sometimes and later on in this course, you're gonna notice that once you get a lot of controls on here, things get a little tight. It's hard to select the proper things sometimes, so if you go over to the left here, by default, you see this document outline. If you don't see it, down here, there's a little bit of a button here that says Hide Document Outline. If your interface looks like this, the you want to come down to this button which will now say Show Document Outline, and it's gonna show that to you. So now, you're gonna get a hierarchical view of all the controls that are on your scene. So here we have our label, so I can either select it on the interface or in the document outline. And then I can come over to the properties on the right hand side, specifically the attributes inspector, this little kind of arrow looking guy. And you'll see here that it says text, so I can change this text to say, Hello there friends, all right? So as you can see, it tries to fit everything on there, it can't always fit everything out there. So maybe we just say, hello friends, okay, so we can see that that's pretty good, so let's go ahead and save it. And then we'll go ahead and rerun our application, Xcode will compile everything. And once we get everything on there and our simulator starts up for our Apple Watch, we should see hello friends. Very cool, very simple, but very cool, but that's only half the story, because what if I want to get programmatic access to the text? I don't just want to have type everything on there, because when we start building this app and we're dealing with dynamic names of reminders and stages and all that sort of stuff. I need programmatic access to that so I can update those things on the fly. Well, let's see how we can do that as well. So the first thing that we have to do in order to get programmatic access to this is, we need a code file that kind of sits behind this. And that's obviously going to be a Swift file, because that's the language we're dealing with. So let's reopen the left hand side of Xcode and we're going to come now down into the RemindMe Watchkit Extension. Because remember, as I mentioned before, when we are dealing with the user interface aspects of the watch, all of those things are going to live within the RemindMe Watch Kit app folder. Otherwise, they need to be down in the extension. And more than that, they need to be as part of that specific target, and I'll show you what that means in just a second. So let's come into the extension, let's right click, and let's create a new file. So when we create this new file, this time, now we want to go over to Watch OS, and we want to create a watch kit class. Let's click Next, and now we're going to call this something, so we'll just call this Sampleinterface. This is gonna be a throwaway cuz we're going to modify this and make this more specific to reminders. But we'll call this sample interface controller, and this is going to become a subclass of a WK interface controller, which stands for watch kit interface controller. And we want the language to be Swift, so let's go ahead and click Next. Now, this is going to be in the extensions folder, but more importantly than that, I haven't really mentioned this before, but this is gonna become very important very soon. Is when we come down to the bottom, we wanna make sure that the target is set properly. Now, the place that we are going to be using this interface controller is going to be in the WatchKit Extension target. That's very important, and so you wanna make sure that that's checked. Now we'll go ahead and click Create, and now we have this new file. We have our sample interface controller, it's got some boiler plate code. Great, no big deal, how do we use this, what is it for? Okay, so now what we're gonna do is, we're going to close out the right and left panes in Xcode. And actually, before we do that, let's come over and select our interface storyboard in our WatchKit app. And now we'll go ahead and close out that right pane, and now we wanna use something called the Assistant Editor. This is a very helpful tool In Xcode, so now I wanna make sure I have selected my interface controller right here. I want to select my scene, then I want to come up to these two rings. These two rings are the assistant editor, so when I do that, it's going to give you this little bit of a split screen here. And this is going to allow me to hop back and forth between the user interface and some code files. All right, so once again, with this interface controller selected, let's go ahead and open up this right pane. And I want to come, so right now, we're in the attributes inspector, I wanna come over to the tabs to the left, known as the identity inspector. As you can see here, there's a class, by default, we were given a class before interface controller. That means what class in my project is going to govern this interface? So by default, we are given that interface controller. Well, I want to use ours, we created sample interface controller, so let's select that, so let's go ahead and save that, let's hide the right pane. And you can see in the assistant editor, we now have the sample interface controller over here, because we have selected that in the user interface. Great, okay, now how do we do something with this? Well, what we wanna do is, we wanna get programmatic access to this label that we've already created. Now, the way that we do that is typically, we give ourselves a little bit of space, I do it at the top of the class. Is I am going to select Hello Friends, I'm going to Ctrl+click and drag over to my code file, sample interface controller. And you can see it says, insert outlet on the right. So I'm going to let go, and it's going to create a connection for me. So I can give this a name, and so typically I might just call this textLabel, or something like that. We'll give it more specific names when we get into our actual application. We wanna make sure that the type is an interface label, because that's what our connection is for. And storage is weak, that's fine, let's go ahead and click Connect. So now you can see we get an IBOutlet with a property of textLabel, because that's what we gave it as a name, which is of type WKInterfaceLabel. So now we have programmatic access, because we have a connection now between our text label property and the text label found over here. So if I hover over this little dot, you see what I'm connected to. And when I'm connected to something, I can now get programmatic access. So I can come into my awake, which is our first function where we actually kind of start to put things on the screen, usually. So let's go ahead and say textLabel.setText, and we'll just setText to Welcome instead of Hello Friends. So let's go ahead and save those changes, let's compile and run our application in the simulator. Let's hide the big one, and when the small one comes up, when the watch simulator comes up, our application will start up. And we should see the text Welcome, well, there you have it. Now you have learned a little bit of how we're gonna start building the user interface for our application, by creating classes that are going to be inheriting from our WK interface controller. And then we are going to use that as the backing class for the interfaces, or for the scenes that we see within the storyboard. And that will allow us to create connections between code and the interface, to allow us to be able to get programmatic access to all of the controls that we put on the screen.