Chapter 7

Storyboards

This seventh chapter will introduce a new way to create an app quickly and visually. First, some views will be laid out and you will see how they can be connected without writing code, and you will get some neat transition animations for free. This new technique was first brought to the public's attention when Apple announced that they would be introducing a new and never-before-seen feature called Storyboards, which would be built into Xcode. It would allow the easy layout of workflow apps that use navigation and tab bars to transition between views.

Apple went on to say that the new storyboards would manage the view controllers for you, while visually creating an easy to manage geospatial view of your project. It would specify the transitions and segues that are used when switching between views, without having to code them by hand! Everyone waited with anticipation for the Beta to come out and, when it did, everyone was blown away. It changed the entire coding landscape.

Storytelling

When you tell a story, you communicate with others. Whether young or old, everyone loves a story. Storytelling is an integral part of daily communication with others. When you communicate with a user, you are telling them how to travel a path you've created that will bring them to a place where they will get what they want, be it a map, a song, a recipe, the weather, where they parked their car, a phone number, a movie, or something else. So why wasn't this thought of before? Why was the creation of apps seen as geeks programming code, while storytellers were seen as being something different? I'm not sure of the answer, but as I began to think about it, I realized that this was an incredible concept. Think of it. When Walt Disney began to think of the most efficient means to organize and structure cartoons, back in the early 1920s, he came up with the concept of storyboards. He would gather his artists together and they would mount a series of boards with key scenes from a story, and then they would organize these boards into a beautiful story. This technique became a huge success; it took over the movie industry, and it is the blueprint for planning every modern film. You can see a great movie that illustrates how Disney's storyboarding took over the industry here:bit.ly/oWg5mc.

The new iOS5 Storyboard feature is much the same, except you are not necessarily looking at pictures; you are looking at a geospatial representation of your app that allows you to organize it beautifully. Before iOS5 came out, nib files were used to define the user interface. There was no choice but to do this one view controller at a time. If you had 16 view controllers, you would have to define the user interface 16 times. Not only was this boring, but it became complex and confusing. Conversely, as you will soon see, a storyboard file captures all your user interfaces in one geospatial view, and gives you the ability to easily create and edit all your individual view controllers, and the transitions between your view controllers. You can move them around like a deck of cards, just like the guys at the Disney studios. It becomes easy to realize and edit the flow of the overall user interface and experience in your app.

Roadmap Recap

You now know enough of what happens behind the scenes to install a new way of doing things. It's as if you've spent enough time tinkering around with lawnmower engines and basic car engines that you can appreciate installing a brand new engine in your old car. As you install this new engine, you know that inside this engine are pistons, spark plugs, carburetors, and so on. You do not have to yank the engine open to know these items exist; you can just install it and connect it to the chassis, the drive train, and the electronics. In storyboarding, you are going to use a whole new method for designing your app; you will simply have to connect it to your outlets, view controllers, and the other elements of your app. You don't have to open up storyboard and look inside, as you know it works; you simply have to know how to connect things. So let's do it!

Roadmap: Four Phases

This app has been divided into four phases. The most important phase is the first one because it will be common for most of the potential uses for storyboarding. Because Phase I is the lowest common denominator for so many of the future storyboards you will find yourself doing, I focus on this quite a bit, and encourage you to perform exercises that will enable you to quickly become efficient at storyboarding. Phase I sets up the root of what will be done over and over again, and the three phases that follow are specific to this particular app.

• Phase I sets up the core of most potential storyboarding configurations.
• Phase II starts at Figure 7–22, and is comprised of setting up the view controllers for Male, Female, and Geek.
• Phase III starts at Figure 7–34, and is comprised of establishing the content of the view controllers.
• Phase IV starts at Figure 7–54, and is comprised of closure and coding.

Evolve: A View-based Storyboard Application

Once again, you will work with images that let you know where in the story you are. In more technical terms, you will use images rather than code to represent a state in your app. I encourage my students to use images because, if it does not work, then youknow it's a bug in the high-level code that directs the user from state to state—not a bug in the code for a particular state.

In this app, you will see a funny set of states that show the state of a male, a female, and the other kind of human being—geeks. It will also show that when a man or a woman evolves into a higher state of consciousness they become geeks! Then, to add another state, for fun and to illustrate the purpose, it will be shown that when a geek evolves they become anÜber Geek! As funny as this is, it simply gives us a nice set of diverse states that, in storyboarding, will be easy, but that in the old one-at-a-time nib manipulation would have been substantially more complex.

First, download the images from here:bit.ly/p1L5cv where you can also download the code or view the video. Once you have downloaded the .zip file containing the images, unzip the folder, and store the images on your desktop.

I will not be holding your hand as tightly as I have thus far. Instead, I will assume that you know how to perform some of the functions you have done repeatedly in this book. Yes, I will be talking to you in a more technical manner.

Phase I: Creating Core Storyboarding Configurations

Let's get going with Phase I, where you will build a core configuration.

Figure 7–1. Start by choosing a Single View Application skeleton. More views will be added later.

1. OK, let's start a new project in Xcodeby using your keyboard shortcut,N, and selecting the Single View Application project type. The Single View Application will be the starting place for this application, and likely many more of this book's applications, as well as your own.

Figure 7–2. Start with just an iPhone version of the app and the new storyboard feature selected to allow us to jump directly into design and layout. I named it “MyStory.”

2. Let's name this application “MyStory.” The Company Identifier is not relevant to us at this time, so feel free to put something creative there. For simplicity, just target the iPhone device family at this time. The brand new “Use Storyboard” option will need to be checked. This will present you with a slightly different project layout once you've saved the project. Go ahead and click the Next button.

Figure 7–3. Drag the images that you downloaded earlier to the project's “Supporting Files” directory in Xcode.

3. The first thing to do is add some image files to the project by dragging them from the desktop to the project Supporting Files directory. This is just a logical directory, and the files can actually go almost anywhere in the MyStory directory. Be sure that these files are copied in the proceeding dialog box.

Figure 7–4. Select the “MainStoryboard.storyboard” file and you will be presented with your only default view.

4. Now, select the “MainStoryboard.storyboard” file in Xcode's project file browser on the left. This shows you something a little familiar, a UIView. But this is not just a UIView, it also has an associated controller that is automatically created and linked to the view. You can add more views shortly, but one important thing to note here is that double clicking the grid pattern allows you to zoomin and out. You must be in normal viewing mode to add visual elements to the views.

Figure 7–5. Clicking this button returns you to normal viewing mode. The two buttons on either side allow you to zoom in and out.

5. It's important to become familiar with the viewing and zoom modes, as you will constantly want to zoom in to edit a detailed view and then immediately zoom out again to view the entire storyboard. Clicking the center equal sign button returns you to the normal viewing mode. The two buttons on either side allow you to zoom in and out.

Figure 7–6. You need to bring up the Utilities Panel to add some new views to the project.

6. Bring up the Utilities Panelby clicking the button circled in red in Figure 7–6. Having a larger screen makes working with Xcode easier, as more and more panels and views take up valuable screen space.

Figure 7–7. Select a Navigation Controller.

7. Once you have opened up the Utilities Panel, locate the “Navigation Controller” (UINavigationController). Select it and start dragging the Navigation Controller onto your Storyboard, as shown in Figure 7–7.

Figure 7–8. Drag a new Navigation Controller to the storyboard area; placement is not important at this point. Two new views appear, with a link between them.

8. As you drag the Navigation Controller onto the storyboard, you will see that instead of just a single view, you get a connected pair of controllers that are depicted as views. Drop it any place, as you are free to move it around as much as you need. This is, in fact, the case for almost everything that you will do in storyboards. You are not dealing just with views, you are actually seeing Apple instantiate each UI element into a set of views and controllers that allow you to build transitions. These transitions in Xcode are called segues (pronounced seg-ways), as shown in Figure 7–8.

Figure 7–9. Keep this first Navigation Controller as a simple view controller.

9. You're going to leave this first Navigation Controller alone for a now. The reason is that this is the first view that the user will see, and all you want to happen here is to have access to the code Apple has provided for the logic associated to the blue navigation bar at the top of the view. Strictly speaking, the Root View Controller on the right is actually the first view that your user will see, as the Navigation Controller is pushed to the view stack. But for now, just arrange the controllers in an orderly fashion.

Figure 7–10. Drag a UIImageView to your first view controller.

10. In the app you will not have code in each state, as already mentioned; instead, you will have images, either made or, preferably, downloaded from my site. By now you know that images need to be parked in UIImageViews. So drag a UIImageView to your first view controller, so that you can place the mystory.png onto it. This is illustrated in Figure 7–10.

Figure 7–11. Open the Utilities Panel and select the mystory.png.

11. From the UIImageView's settings in the Attributes Inspector found in the Utilities Panel, set the image to mystory.png, as illustrated in Figure 7–11.

Figure 7–12. Drag a UIButtonView out to the main view controller so that you can have an actionable item in order to push the next view controller to the stack.

12. As shown in Figure 7–12, you need to have a button on your main view controller, so drag a Round Rect Button (UIButtonView) onto it, so that you can have an actionable item to press, which will push the next view controller to the stack.

Figure 7–13. Insert text into your button; I used “Show Navigation Controller.”

13. When the user presses this first button, you want it to take the user to the navigation controller. Let's tell the user this will happen if they press this button. This is illustrated in Figure 7–13.

Figure 7–14. Start the actual linking.

14. This step is really the heart of storyboarding. Let's think about this. You want your user to be directed to the navigation controller when he or she presses the button saying “Show Navigation Controller.” Rather than writing code, just link the button to the navigation controller. To do so, place your mouse over the button, and then control-drag and release over the Navigation Controller to create a transitional link. This is the magic—no code is written to make this transition with animation, as shown in Figure 7–14. It's just free! A gift that was written by the remarkably clever people at Apple that—if you don't mind me reminding you again—includes students and readers of the first edition of this book! So hang in there!

Figure 7–15. Select the “performSegueWithIdentifier: ” option.

15. Upon dropping the connector onto the navigation controller, it comes up with the option performSegueWithIdentifier:sender:, which is the name of the method that holds all the code you need for connecting these two items appropriately using storyboarding. You may note that I have also added a section in Digging the Code that describes how to add the performSegueWithIdentifier:sender method programmatically. On the other hand, if you do not see this option, go to step 16.

Figure 7–16. Rename the Root View Controller's title bar to something a little better, such as “Root”.

16. You are now going to change the title of the Root View Controller to something useful. I suggest “Root” because youdon't need to care about the aspect of the Model View Controller (MVC) when using the app. This label is also an integral part of the free naming of navigation buttons that you'll see when you run the app. This is illustrated in Figure 7–16. Naming these title bars is important for the user to understand where they are in your program, and how they got there. Double clicking the title bar, or typing in the Title section of the Attributes Panel, allows you to edit this value. When the user travels back and forth through a Navigation Controller, these labels appear in the title and the “back" button. You'll see this shortly when you test the app for functionality.

Figure 7–17. Phase 1 is almost completed—you just need styles for segues and transitions, and then a test run.

17. Before moving too far ahead, stop for a minute and catch your breath. You have successfully created the foundation not only for this storyboard app, but also for the methodology that you will use as the basis for many other apps, which is a view controller connected to your Root Navigation Controller. Essentially, you have created a view controller with a button that takes you to a navigation controller you have named “Root,” as shown in Figure 7–17. The rest of your storyboard will blossom out from this root. Now, however, you will see segue styles, transition styles, and you will do a test run over the next three steps. Once you reach step 20, you will be asked to go back and run these first twenty steps.

Figure 7–18. Select the segueyou have just created and select a segue style.

18. Select the storyboard segue you created. Now let's choose a style of segue to use. In the Attributes Panel, you can select one of three style types of segue. “Push” is the standard slide in from the right animation. “Modal” is a type you can use for a segue that goes back and forth between two views. “Custom” requires that you write your own type of segue. Mmm, let's do that later, huh? Anyway, I want you to play around with these different styles, so that you become familiar with them. Different students have different tastes. For now, just leave the defaults because they work well, as illustrated in Figure 7–18.

Figure 7–19. Select the transition of your choice.

19. Transitions are the animation types available for each style of segue. Again, just stick with the default. I chose the Flip Horizontal style for no particular reason other than it suits me. You can choose another style, if you want. Feel free to experiment here, but keep usability in mind. It is very easy to get too flashy with the animations. I often find that the popular apps, and smarter students, tend to have less flash and more utility and efficiency.

Figure 7–20. Run it to see what you achieved in Phase 1.

20. At this point, running the app will show you how little you actually had to do to get a working app with some direction. So, as depicted in Figure 7–20, hit that “Run" button and see what you have.

Figure 7–21. And, sure enough, clicking the button flips the view and shows us a blank view, with a navigation bar at the top named “Root”.

21. After hitting the “Run” button, the simulator opens and voila! It works! You've hardly done anything, and used no code, simply having shifted, dragged, and connected a few items, and you now have a running app! Clicking the button flips the view and shows a blank view, with a navigation bar at the top named “Root,” as depicted in Figure 7–21. Beautiful!

Phase II: Setting Up the View Controllers

Of course, you want to make this app do something more interesting than what you now have. Remember, in this evolving appyou have three types of human—Men, Women and Geeks—and they can all potentially evolve into Über Geeks. This means that you need to have three views connected directly to your Navigation Controller. So, before you begin to drag three view controllers onto the storyboard, let's make sure:

• That you can see everything—enough for three horizontally placed UIViewControllers.
• That your alignment on the grid can be kept so that your connection lines don't get silly looking later on, and therefore harder to follow.

Figure 7–22. Zoom out and drag a new view controller onto the storyboard.

22. So, let's drop three more view controllers into the storyboard, to the right of the Root View Controller. Another way to do this is to drop one and then, while holding the option key, drag the first one to another position, which makes a copy. This is a personal preference, but it sure makes you look like a supercalifragilistic geek if you can do it. Anthony does a great job of this in the video seen here: bit.ly/oMp984. Try to get your screen looking like the one in Figure 7–22, which shows the first of the three UIViewControllers being dragged onto the storyboard. Remember, if you're having trouble with the zoom, just click the equal button in the zoom control area so that you can add other stuff to the individual controllers.

Figure 7–23. Your storyboard after all three view controllers are placed onto the storyboard.

23. As shown in Figure 7–23, this is how your screen should look after you have dragged all three view controllers onto your storyboard. Note that they are aligned, spaced equally apart, and locked into the grid.

Figure 7–24. Add a UIImageView.

24. Looking into the immediate future, you still need to place four images: one image goes into your Root, and three images (representing Man, Woman, and Geek) are placed onto the three UIViewControllers you just created. I should not have to remind you that if you want to have an image appear on your app's view, you need to park those pictures on UIImageViews. For now, though, let's focus on the Root, where you need an image and buttons for going to the three images. Drag an Image View onto your Root, as shown in in Figure 7–24.

Figure 7–25. Set the image in the Attributes Panel.

25. You now need to choose the NavControll.png image I created, which is now located and selected from the Attributes Panel, as illustrated in Figure 7–25. Again, you can select any image you want. But, before you spend too much time creating your own image, keep the following note in mind.

Figure 7–26. Drag a UIButtonView to the navigation controller and duplicate it.

26. As shown in Figure 7–26, add a new UIButtonView to the view. You can use each button's activation to move to another view. You can either drag three buttons, by repeating the process three times, or practice using the option-drag technique you tried once already. So, option-drag from the first button you have placed and duplicate it twice, as you need three, and these will now only need relabeling. Name these buttons “Male,” “Female,” and “Geek,” in descending order, and resize them as you see fit.

Figure 7–27. Create more segues from each button to the three view controllers.

27. You need to create segues from each of your three buttons to their associated view controllers. So, just as before, control-drag from each button to another view controller in order to create a seguelink for each button. I connected “Male” to the top, “Female” to the bottom, and “Geek” to the center, as it will make the link lines look nice and organized. This is illustrated in Figure 7–27.

Figure 7–28. Connect to performSegueWithIdentifier:sender:.

28. Just as you did in 7–15, when you drop the control drag from the Male button to the Male view controller, you will get an option to select either modal, push, or custom, where you will leave it as the default, or you will see an option for performSegueWithIdentifier:sender: that holds all the code needed to connect these two items appropriately using storyboarding. This is illustrated in Figure 7–28.

Figure 7–29. Completed segue going to Male and segue to Geek in progress.

29. Figure 7–29 shows the completed segue that connects the Male button to the Male view controller. Notice that I have placed the Geek's view controller in the middle, so that you can extend beyond in a later stage of this app. This illustrates how you may have one pattern or order for the user of your app, and another order of view controllers on your storyboard. You will also find, I have no doubt, that until you get a feel for how the segues show their visual connectivity, it will take a while to make them look as elegant as those illustrated in Figure 7–29. Don't get frustrated, it just takes a little practice to learn how far out to place the view controllers and how to make sure your grid alignment has symmetry between all the objects.

Figure 7–30. Last segue, from the Female's button to its view controller.

30. OK, for this last connection, all I will say is that you should create a segue from your Female button to its view controller. Figure 7–30 shows the first portion of this step, but there are steps I am not repeating.

Figure 7–31. Zoom out and arrange the views.

31. Initially, I did not think I would have to spend much time on arranging the objects/views on the storyboard. However, after having some difficulty myself, and then seeing the wonderful spaghetti messes that some of my students came up with, I've decided to spend a little time coming up with some basic principles, that if adhered to will prevent a chaotic and tangled mess. Zoom out, as I have, and then move your objects around accordingly as you follow the three protocols I've developed:

• Mutual Exclusivity: I've already mentioned the first tip, which is to keep the order of your buttons mutually exclusive from the order of your views. The buttons on the Navigation Controller go Male, Female, and then Geek. Maintaining that order on the storyboard would create problems, as it would violate some of the principles I will mention below.
• Maintain Initial Momentum: If, for example, on the Woman view, at the bottom of Figure 7–31, you have a fan of 10 segues to 10 views that were all void of segues to the Geek branch, then keep those Woman-based segues going downward.
  • Looking at Figure 7–32, one can see a perfect example of how NOT to maintain initial momentum. Not only are the segue connections hidden, but they also overlap and disrupt the ability to follow where the segues start and end.
• Minimize Segue Connection Angles: This is easier explained when first seeing it visually: look at the Male and Female segue connections from the Navigation Controller in Figure 7–31. Notice how they first slope back and then slope forward, as compared to the less angular connections from the Navigation Controller to the same two Male and Female views depicted in Figure 7–32 and onward. An easy way to adhere to this protocol is, once segue is connected, to move the object it is connected to horizontally and vertically, until the segue connection is almost perfectly horizontal or vertical.

Figure 7–32. Oops! Violation of the second principle of “maintaining initial momentum” protocol.

32. You really need to be careful how you place your objects because the GUI can make things look very odd, as illustrated in Figure 7–32, whichdemonstrates a violation of the protocol of “maintaining initial momentum. “However, note that because you moved the Male and Female to the top and bottom, respectively, you can see that you have adhered to the protocol of minimizing segue connection angles.

Figure 7–33. Move Geeks forward.

33. In order to comply with both the “maintain initial momentum” and the “minimize segue connection angles” protocols, move the Geeks object forward, as shown in Figure 7–33. Once the Geeks object is moved forward, you will be in adherence to all three protocols.

Phase III: Establishing View Controller Content

Figure 7–34. Add a UIImageView to the Male view.

34. Yournext step will be to add images to your Male, Female, and Geek view controllers. Let's start at the top and drag an Image View onto the Male view, as shown in Figure 7–34.

Figure 7–35. Select the image to use for Male from the Attribute panel.

35. Associate the man.png image with the Male controller by selecting it from the Attributes Panel, as shown in Figure 7–35.

Figure 7–36. Add a UIImageView to the Geek view.

36. You now need to drag the UIImageView and associate an image with it—just as you did with Male—two more times. So let's do it: drag a UIImageView onto the Geek view, as shown in Figure 7–34.

Figure 7–37. Select the image to use for Geek from the Attribute panel.

37. Associate the Geek.png image with the Geek controller by selecting it from the AttributesPanel, as shown in Figure 7–35.

Figure 7–38. Add a UIImageView and select the image for Female.

38. Yup! You can do this one on your own now. Add an UIImageView and associate the female.png with it. This is shown in Figure 7–38.

Figure 7–39. Name the Female controller bar title.

39. Naming the controller bar titles in storyboarding actually instantiates connectivity under the hood, and this eliminates the need for you to code some of these segues. This is explained in more detail in Digging the Code but, for now, just accept that applying names in a storyboard controller bar title is in essence a “freebie" with code. Do this with your Male, Female, and Geek controller bar titles. In Figure 7–39 you can see the default value of the Female controller changing to “Female.”

Figure 7–40. Name the Geek controller bar title.

40. Figure 7–40 shows the Geek controller bar title being renamed.

Figure 7–41. Name the Male controller bar title.

41. Figure 7–41 shows the Male controller bar title being renamed.

Figure 7–42. Run it! Let's see if it all works correctly.

42. Figure 7–42 shows how you perform a quick run to see if the segue connections and the images are all working correctly.

Figure 7–43. Yes, it works!

43. Figure 7–43 illustrates how the app, without any coding, is working beautifully. All the images show not one state, but the transition between two states connected by the segue. From the view controller on the very left-hand side, you see four images. The top image shows the click from the Navigation controller to Male. The next image, to the right, shows the click on the bar controller going back to the Navigation Controller. The remaining two images show segue transitions from the Navigation Controller to Female and Geek, respectively.

Figure 7–44. Now let's “Evolve.”

44. You are now getting to the fun portion of this app that makes students laugh out loud in class. You understand that in this world there are Males and Females (for the most part!). In your app, you are going to show the world that evolution is still happening. You are going to show the world that both Males and Females can still evolve to a higher level of consciousness, and that, of course, is the state of being known as … yes, you got it … Geek! So you need to add a segue going from your Male and Female state to Geek. Mmm, do you know how you should do this? How about adding a “Button Bar Item” to both the Male and Female views' navigation bars and giving them the title “Evolve”? Then, after this, you can segue from these “Evolve” buttons to Geek. OK! Start off by dragging a “Bar Button Item” onto the Male, as shown in Figure 7–44. Once you have dropped your second Bar Button Item onto the Female, there is an important thing I want you to remember about Bar Button Icons. These buttons act just like regular UIButtonViews, but they look different, and they are designed to go in only one place, a navigation bar.

Figure 7–45. Rename the Female Bar Button Item.

45. As illustrated in Figure 7–45, rename the Bar Button Item you dragged onto the Female as “Evolve.”

Figure 7–46. Rename the Female Bar Button Item.

46. As illustrated in Figure 7–46, click on the Bar Button Item you dragged onto the Male. Now name it “Evolve.”

Figure 7–47. Control-drag from the Male's Evolve button to the Geek view controller.

47. You want to segue from the Evolve button to Geek. Click on the Male's Evolve button and control-drag to the Geek's view controller. What you have here is a new way to get a segueto another view. Note that I kept the transitions linear for simplicity. They can have loops or be entirely circular. This is illustrated, exactly as shown on the video, in Figure 7–47.

Figure 7–48. Completed connection from the Male's Evolve button to the Geek object.

48. Figure 7–48 illustrates the completed connection from the Male's Evolve button to the Geek object. You may notice that, at this point, you improve a violation of the third protocol, which is the “minimize segue connection angles" protocol. So go ahead and move it to the right until you minimize the angles.

Figure 7–49. Segue from the Female's Evolve button to the Geek Object.

49. Now that you have connected the Male's Evolve button to the Geek object, do the same for the Female. This is illustrated in Figure 7–49.

Figure 7–50. Just in case you forgot, or thought I forgot… Mmm!

50. Figure 7–50 reminds you that I am no longer telling you every single step. For the last three segues, if you come up with the option of modal, push, or custom, leave it as the default, or, as you did before, use the performSegueWithIdentifier:sender: that holds all the code needed to connect these two items appropriately using storyboarding. If you have been doing it on your own and forgot that I was not telling you to do each of these steps, then you're doing great. If you struggled a bit during the last three performSegueWithIdentifier:sender: let me remind you that I am letting the leash go a little and allowing you to think of things on your own. I have designed the book so that, as you become more confident, you can simply look at the figure comments and fly. OK, let's move on!

Figure 7–51. Complying with the third storyboard protocol.

51. Getting back to what was said in step 48, move the Geek object out and make it comply with the third protocol. This is illustrated in Figure 7–51. After a while, you will not think of protocols one, two, or three, and you'll simply find yourself doing a little rearranging here and there until you have amouth-watering symmetrical layout!

Figure 7–52. One last UIViewController!

52. Now that you've been living in the geek world for a few chapters, you've probably caught on to the fact that geeks know something of which normal people are completely ignorant. Yup! There is an even higher state of humankind than a geek! These special geeks, who evolve into a higher state of consciousness, are called Über Geeks. Über Geeks are very rare and can only be recognized by geeks. But this will be illustrated in your app. So, you essentially need to add another state of human evolution beyond that of Geek! Youneed to add one last UIViewController, which will demonstrate how to gain programmatic access to the controller and its data. This is illustrated in Figure 7–52.

Figure 7–53. You can use a simple invisible button over your background imagery as a simple hack to avoid spending time working on a fancy button.

53. As you know, only geeks know that there is a state of human consciousness that is higher than a Geek. The next state up, Über Geek, is invisible. So you need to make an invisible button that only geeks will know segues to the higher Über Geek state of consciousness. Mmm, I can just hear you thinking, “How do we make an invisible button?!" Well, it's all part of being a geek. Normal humans even think that the geek symbol is the “Power" symbol! Geeks know it's really the geek symbol. There are also secret ways of doing things, like running the universe and all computers and gaining access to all kinds of cool things via invisible secret doors and gateways. Today you are evolved enough to learn how to make an invisible button. Read this carefully, and make sure you do not let non-geeks read this, please! As shown in Figure 7–53, drag a seemingly innocent, benign round rectangular button onto your Geek object.

Phase IV: Working on Closure and Coding

You're into the final phase now, so let's finish the app.

Figure 7–54. Cover the entire Geek symbol, for starters.

54. As illustrated in Figure 7–54, once your button is placed on the Geek object, expand the button so it covers the entire Geek symbol.

Figure 7–55. Make that button vanish into thin air!

55. You want to make it invisible, so, as illustrated in Figure 7–55, set the button type to Custom and the GUI will immediately default to making the button invisible, though still clickable for geeks!

Figure 7–56. Control-drag from the invisible button to the next View Controller.

56. Now that you've made your invisible button, you need to make a segue to the next transition. Click where you know your invisible button is, and then control-drag over to the new view controller, as illustrated in Figure 7–56.

Figure 7–57. This time, let's add a Web View to the view.

57. For this last state, you will, for learning purposes, have a little more than an image. Let's insert a URL. To insert a URL, drag a Web View into the view. I go deeper into the additional bells and whistles associated with UIWebView in the Digging the Code section, but for now, drag a default UIWebView into the Über Geek's View Controller. This is illustrated in figures 7–57 and 7–58.

Figure 7–58. Placement of the Web View.

58. Figure 7–58 illustrates how you place the Web View into the Über Geek's View Controller.

Figure 7–59. Create a new class.

59. Recall how I said that in this example you will use images rather than code. Well, that was true for everything you've done so far, but you need to see, at least once, how to insert code behind one of these states. This is the reason I've chosen a very simple URL with a couple of lines of code, which will at least connect a few synapses in your brain about how to add code. So, for this new Web View, you are going to create a new class, which you'll connect to this last view, and access some data in the view controller programmatically. Right-click (or control click) the main directory in the project and select New File, as shown in Figure 7–59. If you can do this on your own, then skip to step 61 and Figure 7–61. If you need a little guidance, then continue to the next step.

Figure 7–60. Select “New File”

60. Use your keyboard shortcut N, or select New File, as illustrated in Figure 7–60.

Figure 7–61. Select a UIViewController subclass.

61. Select a UIViewController subclass, as shown in Figure 7–61. From a technical standpoint, one can say that this corresponds to the same type as the object in the GUI builder.

Figure 7–62. Click Next.

62. As shown in Figure 7–62, click Next.

Figure 7–63. Name the new class ÜberView.

63. As shown in Figure 7–63, let's name the new class ÜberView, and click Save.

Figure 7–64. Bring up the Assistant.

64. Bring up the Assistant so thatyoucan see the storyboard and the header files at the same time, as shown in Figure 7–64.

Figure 7–65. Bring up the storyboard file in the main editor.

65. Click the storyboard file again to bring it up in the main editor, as this will make the associated headers appear in the right editor, as shown in Figure 7–65.

Figure 7–66. Select the appropriate View Controller.

66. Unlike in previous apps, things are a little more complex now, so you need to help the Assistant bring up the correct view. In order to tell the Assistant Editor what to bring up, simply select the view controller that holds your Web View. This is illustrated in Figure 7–66. Notice, in the column of View Controllers, they are ordered according to the order of creation. You can see your Male, Female, and Geek view controllers amongst the others you made, and then down at the bottom is the one you just made, called “View Controller Scene" because you have yet to name it. This is the view controller you want.

Figure 7–67. Set the class of your view controller.

67. You now need to set the class of this new view controller to ÜberView in the Attributes Panel, as shown in Figure 7–67.

Figure 7–68. Select the ÜberView.h file.

68. You need to create UIOutlets for your URL, so you need to have the Assistant open the ÜberView.h file. You need to explain to the Assistant that this is what you need because the Assistant Editor has more than one choice for what you might want to edit. Furthermore, when things get a little complex, as they are here, it usually gets it wrong, so you need to select the header file, as shown in Figure 7–68.

Figure 7–69. Control-drag to your header file.

69. Now that you've set up your Assistant correctly, simply control-drag from your UIWebView over the header file and drop it under Überview's @interface to let Xcode do its work, as shown in Figure 7–69.

Figure 7–70. Name your Outlet.

70. Of course, you need to keep it as an Outlet, meaning that all you need to do is give it a name. You can name it anything you please, but if you want to check your code against mine, then I suggest you name it what I named it, webView, as shown in Figure 7–70.

Figure 7–71. Open the implementation file.

71. When you insert code into a state such as this, you will probably do a little more than use a URL. You will need to bounce back and forth between your header and implementation file, to say the least. So let's do it here, as we will want to add a few bells. Back in the implementation file for the new controller class, you can make your Web View do stuff. This is shown in Figure 7–71.

Figure 7–72. Let's code!

72. Uncomment the viewDidLoad method, as that is where you want to initiate your web content loading code. See Figure 7–72.

Figure 7–73. Start with a NSURL Request.

73. You need to delegate data flow for your URL request, so start with aNSURLRequest, which will automatically do this. See Digging the Code for information on NSURLRequests. See Figure 7–73.

Figure 7–74. Add the URL to the request.

74. You need to add the URL address to the request and ask the webView object, which you linked to with an Outlet, to load your request, as shown in Figure 7–74.

Figure 7–75. IMPORTANT:The webView outlet linkage.

75. This is important. Somehow, students have a hard time getting this, so I've illustrated this in both the video and the book. You need to associate the webView outlet linkage in your header file with the conditions set forth in your implementation file. I have illustrated this in Figure 7–75. Essentially, you want to add the URL to the request and ask the UIWebView object, which you made an IBOutlet for, to load your request. Below is the code for both the implementation and header files. Study it, and make sure you understand the webView correlation between the two files.

Figure 7–76. You want a proper Ü character … but a Lion crossed your path!

76. As a geek, you likely want to have the proper “Ü” character in your last view controller's navigation bar. Initially, in the video and in figures 7–76 through 7–85, I explained exactly how to do this. It was a beautiful thing. But then something happened along the way. Mac OS X Lion removed the need for this entirely; an unexpected surprise. Now, you simply hold the u key until a little window appears, and you make the selection you need. Similar variations are available for other characters. You can explore these at your leisure. So, all these steps, between figures 7–76 and 7–89, were going to be taken out, but then something else funny happened. Many universities and community colleges had recently updated to Mac Leopard and would not have a Lion license for another year, at least. So this meant that there would be thousands of students left clueless as to how to create the proper “Ü”. So, if you have Lion, hold the u key down until the correct letter appears, and then go to Figure 7–86. If you do not have Lion, then follow along. Start by opening the System Preferences app from the Apple menu, as shown in Figure 7–76.

Figure 7–77. Open the Language & Text preferences panel.

77. Open the Language & Text preferences panel in the top row, as shown in Figure 7–77.

Figure 7–78. Select the Keyboard & Character Viewer.

78. In the Input Sources tab, select the Keyboard & Character Viewer from the source list. Also, turn on the menu item, as shown near the bottom in Figure 7–78.

Figure 7–79. Minimize this window to free up screen space.

79. Now, minimize this window to free up screen space. You'll turn the menu item back off later. See Figure 7–79.

Figure 7–80. Bring up the Character Viewer.

80. Now, from the new icon that popped up in the menu bar, select Show Character Viewer. A tiny keyboard shows up. As you type on your keyboard, the keys will be highlighted, as shown in Figure 7–80.

Figure 7–81. You want the orange keys.

81. Holding the option key shows a plethora of symbols that you can type. The orange keys are for special keys with marks above the characters in other languages, such as “ö” or “ê”. Mmm, this is exactly what you want. See Figure 7–81.

Figure 7–82. Enter your Über Geek!

82. Back in Xcode, double-click the ÜberView's title bar to edit it. Start by typing option-u and watch the little keyboard below. Now you have two dots in a yellow box. The next letter you type will have these marks above it. Type shift-u. Ta-da—Ü. Finish it with “ber Geek,” as shown in Figure 7–83.

Figure 7–83. Voila! You now have a proper spelling for Über.

83. Figure 7–83 shows the proper spelling of Über Geek.

Figure 7–84. Close the keyboard.

84. Figure 7–84 illustrates how you can close the keyboard just like any other window.

Figure 7–85. Hide the menu item.

85. As mentioned earlier, you may want to hide the menu item from the preference panel that you minimized earlier, as shown in Figure 7–85.

Figure 7–86. Save it!

86. Let's save everything and test it out, as shown in Figure 7–86.

Figure 7–87. Run it!

87. Figure 7–87 illustrates the final step—running it.

Figure 7–88. Try to keep track in your head—as you can see, Anthony lost his head, and then found another, and then realized he had not lost his first head to begin with, and now he has two!

88. Well done!

Digging the Code

Yes, I know this has been quite exhausting. Students are completely worn out after this class. I've tried to understand why this is so. When I tell them this is much easier than programming, they look at me as if I've lost my head. With this in mind, I have decided to do the next chapter as a recap, but using a business model so that two birds can be killed with one stone, allowing you to practice what you learned in this chapter while adding just enough of a twist that it allows business owners, and other innovative minds, to see how to apply storyboarding to a financial model.

With this in mind, the Digging the Code section of this chapter will be kept as an advanced reference, which you can come back to later when you try an advanced version of storyboarding. So, either move straight on to Chapter 8 or just glance through Digging the Code, without freaking out if you don't absorb anything. Just let your brain see what's here, zone out, take a break, and move on to the next chapter.

Storyboard View Controllers, iOS4 and Programmatically Creating Them.

The question I get asked the most by students, and folks on the web, is whether storyboards will be compatible with iOS4. I am not sure why so many people want to know this. Move forward, embrace new technology, and keep moving forward into new territory. But the answer is NO! Storyboards never have been, and never will be, compatible with iOS4 because they are based upon new runtime classes only available in iOS5 and Lion. The next most popular question is whether one can program the storyboard. Mmm, let's see, that is almost like saying, “OK, I have a car I can drive, but can I get out and push it?”

I cannot understand why so many people want to change it, or try to get under the hood. I could understand this if you had first mastered storyboarding and found huge gaps that you want to get around. However, in this case, as I write this, storyboarding has hardly been out very long, and people who have not done a single storyboarding app want to know if they can change it. I am going to answer this question, though, because by the time this book is released there is a chance that the latter will apply.

To answer this, you need to view storyboarding from the runtime point of view. The transitions and segues between view controllers ought to be viewed in runtime. Here, one will note that there is indeed a mechanism to instantiate segues programmatically.

• First, looking at how to program and tweak an existing segue programmatically, you need to look at the code that exists between the current view controller and the destination view controller. This is where you will be able to trigger your segue programmatically, using the performSegueWithIdentifier:sender: method of UIViewController.
• Second, if you do not have a segue between your view controllers, but you have defined your destination in your storyboard file, then you are in luck. You can load the view controller programmatically with the instantiateViewControllerWithIdentifier: method of UIStoryboard. After you have done this, you can connect your view controller by simply pushing it on a navigation stack. Warning—do not attempt to access it through Interface Builder. I've seen some of my students' Macs completely crash.
• Finally, if your storyboard is not connected to your destination view controller, you can create it programmatically, however the author has not explored this in depth in the Apple Dev site. It is there—I have no idea why you would want to do this, but it is in the View Controller Programming Guide for iOS.

If you do want to understand storyboarding, it is important to remember two things:

• First, it inherits from, and conforms to, NSObject
• Second, its framework is from /System/Library/Frameworks/UIKit.framework.

The important issue I want you to understand is that, right now, you can program endlessly using what you already know about storyboarding. Keep in mind the basics, and really understand these basics. Forget about programming storyboards programmatically. Use it as it is, and understand the basics.

The first basic function of storyboards that you must know is that they all need to begin with an initial view controller that represents the starting point of your app and connects to your user interface. This will be the first screen your user sees. In your case, it was the My Story View Controller. If you have a bug, you may want to check your transitions to the initial view controller in a different storyboard file, which is the storyboard file specified in the application's Info.plist file, using the UIMainStoryboardFile key, which is the initial view controller that is loaded and presented automatically when your program begins.

In the Chapter Ahead

In Chapter 8, we will introduce you to the world of debugging. We will first take a broad look at the debugging landscape. We will talk about some of the intimidating debugging tools, what they mean, when you may use debugging in the future, and most importantly how you can debug now using a very simple tool.

You will learn how to find a bug in code you wrote in a previous chapter. But more importantly you will embrace the art of debugging rather than view it as an endless, hopeless, bottomless pit.

Onward to the bugs that await us in the next chapter!