7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 19Length: 2.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.6 Transition Between Screens

Great! We now have two screens. But how do we transition between them? First we need to detect a tap on a list row, get the appropriate reminder for that row, assign that reminder to the second screen, and then make it visible. Sound like a lot of work? Thankfully, it's not too bad with the overridable functions in the WKInterfaceController class.

3.6 Transition Between Screens

Now in this lesson we want to begin to start to tie these two screens together, by being able to click on a row in our reminder table interface controller, and be taken over to our actual reminder here. But before we can do that we need to do a little bit of sub-passing and get a few outlets out of the way so that we can get access to all these things. So this should be a little bit of a review for you, but just in case, you can follow along with me. And so the first thing that I wanna do, is I wanna come in to my Reminder WatchKit Extension, and I want to add a new file. So let's select Add New File, and in this case we're going to use a WatchKit Class again so let's hit Next. And this is going to be our ReminderInterfaceController, which is gonna be a Subclass of WKInterfaceController. We'll select Language Swift, and we'll click Next. And then let's make sure that we are selecting the WatchKit Extension Target, and then click Create. All right, so now once we've done that we will have a brand new interface controller here for our reminder. So let's come back into our interface, let's select our detailed interface controller here. And then let's go ahead and choose our new Reminder Interface Controller as our custom class. So once we have that all selected, let's go ahead and save that. And now, we will create some IV outlets for our different UI components. So let's give ourselves a little bit of room here, and we are going to once again use our assistant editor, so we'll come in here and select our interface controller. And we have our reminder interface controller, so once you get remember that Xschool is gonna try to help you here, but if for some other reason it selects the wrong file, you can come back in here and manually select the one. All right so let's grab a few of these, so let's give ourselves a little bit of space at the top of our interface controller, let's begin by grabbing our reminder name so we'll drag this up to the top. This is going to be our reminderNameLabel just like we did before, we are going to drag another one over for our duration. This will be our reminderDurationLabel, let's do one for our stage as well. This is gonna be important because this information is going to cycle through the different stages they were in, so this is our stageNameLabel. Now I'm gonna skip the duration one for now because we are actually gonna use a different control so this is gonna be, this is for the stage duration. We're gonna use a different control but we'll get to that in a little bit. And then finally we wanna have access to our button, now we wanna do two things with this, we're gonna create an outlet like we've done before, and this is gonna be our action button so that we can do things, at different stages of our reminder. So, that's gonna be an outlet and this is gonna be a type WKInterfaceButton, we'll connect that. But then in addition to that, we wanna be able to know when that button has been tapped. So, what we're going to do there is we're going to control click and drag over here again, but this time instead of an outlet it's gonna be an action. We're just gonna call this actionButtonClicked, like that and we'll hit Connect. So this is actually going to give us a function that's gonna be an IB action so that we know when it's clicked. But we're not gonna do anything just yet, but just so that it's there for later use. Okay so we can save all of this, now the most important part of this entire interface controller, is really having access to a reminder. So we're gonna need to have a property that's gonna allow us to hold on to a reminder, so that we know what the reminder is as well as having access to all of the stages of that particular reminder. So in order to do that, we will come down here just below all these outlets and actions, and let's create a single property. This is gonna be our active reminder so whatever we're actually using at the time, and we're going to make this an optional reminder. We're gonna come back and we're gonna do a similar trick to what we did before using the did set on a previous screen, but for now, we're just gonna have a little bit of a place holder here so we can do something with it. So now what we'd like to be able to do is we'd like to know when the user has tapped on one of these rows so we can transition over here, to this new interface controller that we created. So let's see how we can do that first, so if we come back into our ReminderTableIinterfaceController, back to our just normal standard editor here. What I wanna know is when the user has tapped on that particular row, or a row within the table or has selected a row. Now, if you've ever done any sort of other iOS development, you're gonna know that you can have different types of interface controllers. You can also have a table interface controller, and that will allow you to determine what sort of rows or which rows were selected in things of that nature. Where WatchKit strays a little bit from that, is it really just uses the WKInterfaceController, and then everything else is kind of underneath that as well so that you can get access to those types of things. So we're not necessarily needing a table interface controller, we can just use this interface controller and there's some helper functions that we can override in their to know when certain things have happened, like a table, or a row within a table being selected. So we're gonna come down here and we're actually gonna do an override, and we're gonna do an override of a function of didselectrowat. So that's how we're going to know when a row was selected within the table that we're using. And more importantly, we're going to know at the index at which that was selected so we can figure out which of our reminders was selected. So let's start by getting a hold of that and we'll say let reminder = our reminders, which is our collection. And then I can go in there and I can get the, whichever reminder was that particular row index because that's the order in which we put those rows on the table. And they're gonna be the same as the order in which they're in our collection. Now from this point, what I'm gonna do is use a convention within or use a function within the WKInterphaseController, which is presentControler. Now this is where things get a little bit different, in this case I need to present a controller with a name. So what name are we dealing with here? But in order for us to give a name, we're gonna have to go back into our interface controller and into our storyboard, and we're gonna come back to this interface controller, this is ultimately where we wanna land. This is the controller in the interface that we wanna show when the user selects a row at a particular index. But we need to give it a name and the way that we're gonna do that is to make sure that we have our InterfaceController selected. We can come to our attributes inspector, and we have to give it an identifier, and this is going to be reminder. So that's gonna be the identifier of this particular interface controller. So now I can come back into my reminder table Interface Controller. And now I can say I want to present a controller with a name and that name is going to be reminder. And then I can give it a context, now what is a context? Well, the context is the mechanism in which I can pass some sort of data, which is actually any, so I can pass any sort of object into this. That I can get access to it from the reminder that is our destination, and in this case, I want that to be my reminder. So okay, so now I've done all of that, I can save this now and I can move back over to my Reminder Interface Controller, and you're gonna notice that we have this await function that has with context. So now in here I have unable to pass into this the reminder that I have selected. So at this point we can do some basic stuff here just to make sure that we have been passed in a valid reminder object and we can save it to our active reminder property. So the way that we're gonna do that is we're gonna say if let reminder = to context, and then I wanna try to cast that as a Reminder. And if that works, I can say, self.active reminder, is now = reminder, so let's go ahead and save that. So now, we are able to do something similar to what we did before, where we were able to use the did set in here and we'll get to that in a little bit. But for now, let's simply save this and we'll come in here and we'll set a break points. We can kinda walk through this process, to make sure everything is working as desired. So before we run our application let's head back over to our Interface Storyboard and let's switch, the initial controller back over to our table. So that we can start here and hopefully transition successfully over to our new interface controller. So now let's go ahead and build this, and here we are in our Apple watch simulator. We should hopefully see our table, and now when I select Morning Wakeup, I'm going to come over, and as you can see, I've been able to transition over to my new reminder interface controller, and I've come into my awake function with my context. So now the other first thing that it's gonna do is check to see that if it can cast that context into a reminder object. And if it can it's gonna set our activity reminder, so let's go ahead and step into this. As you can see it came into our if block, so now it's gonna set our activity reminder. And now we're gonna have access to that from other places within this interface controller. Which is gonna be very important, as we continue to build the logic into this so we can show the users some useful information about not only this remainder, but all the current stages within it.

Back to the top