364	CHAPTER 10: Storyboards

explicitly in code somewhere, typically telling it to load its view from a nib file (except for table view controllers, which have mostly been created without a nib, which triggers them to just create their own view from scratch).

In the simplest apps, we’ve created a view controller and loaded its nib inside the app delegate. In other cases, we’ve created them in response to a user action, to then push them onto a navigation stack. In the current example, however, the view controller is created automatically when the app launches, just as the template-generated BIDViewController was at the beginning. This bit of magic happens during app launch, but there are ways of programmatically pulling any view controller out of a storyboard while the app is running. We’ll get into that a little later in the chapter.

Static Cells

Next, let’s take a look at the new table view configuration that storyboards allow you to use: static cells. Up until now, all the table view cells you’ve seen (in this chapter and previous chapters) have been created and populated dynamically within a controller’s UITableViewDataSource methods. That’s great for displaying lists whose size may vary at runtime, but sometimes you know exactly what you want to display. If the number of items and the kinds of cells are known entirely in advance, implementing a dataSource can feel like a chore.

Fortunately, storyboards provide an alternative to dynamic cells: static cells! You can now define a set of cells inside a table view, and they will be displayed in the running app exactly as they are in Interface Builder. Note that these cells are only “static” in the sense that the existence of the cells themselves will be consistent every time you run the app. Their content can change on the fly, however. In fact, you can connect outlets to them in order to access them and set their content from the controller. Let’s get started!

Select the Simple Storyboard folder in the Xcode project browser, and choose File NewNew File…. In the file creation assistant’s iOS / Cocoa Touch section, select

UIViewController subclass and click Next. Name the new class BIDStaticCellsController, select UITableViewController in the Subclass of popup, make sure the checkbox for creating a matching XIB file is switched off, and create your new files. We’ll make some changes to this controller’s implementation later, after configuring the GUI.

Go back into MainStoryboard.storyboard, and pull another UITableViewController from the library, adding it alongside the two you already have. Now, go ahead and move the big arrow—the one that points out the initial view controller—so that it points to our new controller.

If you’re concerned about the fact that we now have three view controllers here, but only one of them is ever displayed, don’t worry! When building a real application, we wouldn’t normally leave our storyboard full of discarded views and controllers, but for now, we’re just doing some exploratory programming. Later in the chapter, we’ll show you how to make use of multiple view controllers in a single storyboard.

So, let’s get back to those static cells.

www.it-ebooks.info

CHAPTER 10: Storyboards

365

Going Static

Select the table view you just dragged in with the controller, and open the attributes inspector. Click the popup at the very top, labeled Content, and change it from Dynamic Prototypes to Static Cells. Doing this changes the basic functioning of this table view, even though it still looks pretty much the same. Now, any cells you add will be created as is, in the order you specify, when this table view and its controller are loaded from the storyboard.

To give this table a slightly different look than the task list, use the Style popup to select Grouped. The table view starts off with just one section, and you’ll see that it now gets the rounded appearance of a typical grouped table view. Click to select the section (not one of the cells, but the section itself), and the object inspector will display a few items you can set there as well. Set the number of rows to 2, and set the header to Silliest Clock Ever, since that’s what this controller is going to be.

Now, select the first cell, and use the attributes inspector to set its Style to Left Detail. This is one of the built-in table view cell styles that you’ve seen before. It presents a descriptive label on the left side of the cell and a larger label to contain the value you actually want to display. Double-click to select the text of the label on the left, and change it to The Date. Repeat the same steps for the second cell, changing its text to The Time (see Figure 10-7).

Figure 10-7. Changes to our static cells in our new table view

We’re going to create a pair of outlets to connect our controller directly to the detail labels, so that we can set their values when the app runs. First, select the new view controller in the dock, bring up the identity inspector, and change the view controller’s

www.it-ebooks.info

366	CHAPTER 10: Storyboards

Class to BIDStaticCellsController. Press return to commit the change. You should see the view controller’s name change to Static Cells Controller in the dock.

Select the Static Cells Controller by clicking its icon in the dock. Bring up the assistant editor and make sure it is showing the BIDStaticCellsController.h file.

Select the right-hand label in the table view’s first cell (next to The Date label), and then control-drag from it over to the header file, releasing the mouse button anywhere between the @interface line and the @end line. In the popup that appears, set its Name to dateLabel, and leave the default values for the rest. Then do the same for the second cell of the table view, but name that one timeLabel. With these simple steps, you’ve created new outlet properties and connected them properly all at once.

Next, let’s switch over to BIDStaticCellsController.m to make it display date and time values.

So Long, Good Old Table View Data Source

Over in BIDStaticCellsController.m, we need to delete our familiar friends, the dataSource methods. All three of them must go! Otherwise, our table view may get confused about what it’s really meant to display. Simply remove these methods completely, including the content between the curly braces (which we’re not showing here).

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

{

...

}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

...

}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

...

}

With these methods out of the way, making our silly clock show the date and time is as simple as inserting the following few lines at the bottom of the viewDidLoad method:

- (void)viewDidLoad

{

[super viewDidLoad];

// Some comments you can safely ignore right now!

NSDate *now = [NSDate date];

dateLabel.text = [NSDateFormatter localizedStringFromDate:now dateStyle:NSDateFormatterLongStyle timeStyle:NSDateFormatterNoStyle];

www.it-ebooks.info