Adding User Interface Elements

If you select the watch app target’s scheme in Xcode (by clicking HelloWatch in the toolbar and selecting HelloWatch WatchKit App, or selecting Product → Scheme → HelloWatch WatchKit App) and then you build and run (by pressing ⌘R), you’ll be greeted with a mostly blank Apple Watch screen with the time in the upper-right corner and nothing else. Congratulations: your first watch app is up and running! Now, let’s make it do something. You’ll add a button and a label to this screen; tapping the button will change the title of the label. Head to the watch app’s storyboard file in Xcode. If you don’t see it, open the Project Navigator by pressing ⌘1 and expanding the HelloWatch WatchKit App group; it’s named Interface.storyboard. Once you’ve opened the storyboard, find Xcode’s Object Library (⌃⌥⌘3). Inside the Object Library you’ll see everything you can add to your watch app’s UI. Let’s drag out a button into the black box that appears in the canvas area—the one with the arrow pointing to it. Drop in the button, and it’ll snap to the top. Do the same for a label, and it’ll snap in underneath the button. That’s it! Your UI should look like this.

Let’s do something more complicated. You’re going to link these UI elements to your code, starting with the button, so that tapping the button has an effect in your app. You want to call a method in your code when the user taps the button, at which time you’ll change the text of the label. Open the InterfaceController.swift file and add a buttonPressed function, as follows:

The code won’t build because label isn’t defined, so let’s fix that. Add a property declaration for it to the InterfaceController class:

The code compiles just fine, but if you build and run, nothing works. What gives? Well, you need to link up the interface objects you created earlier with the code you wrote. Just as you would with your iPhone app, you do this in the storyboard. Head back to it and click the black area you’ve been adding objects to (see an illustrated example of this process in the following figure). Above the black area is a title bar that will contain either an icon or a name. Hold your cursor over the icon, and it will display an Interface Controller tooltip. We’ll go into more detail on interface controllers later, but for now, just know that this is the object you added your code to. Control-drag from the icon to the label, and then select label under Outlets in the pop-up dialog that appears, as shown here. Control-drag from the button to the icon, and select buttonPressed under Sent Actions. Now your code knows what the label is and what to do when you tap the button. Build and run again, and tap the button. Your first WatchKit app with code you wrote is running! If you have an Apple Watch and want to see it running on the device, skip ahead to the section on deploying to devices,, and set up your development profile for it.

---

Figure 1. Selecting an outlet for the interface controller in HelloWatch