iOS App Development Basics - Storyboard Troubleshooting

If you have been following my blog, you know that I have started dabbing into iOS App development (Can I develop an iOS App?), more so as a hobby and have been trying to cram in time during weekends to first learn Objective C and then learn iOS coding, in particular. Now I am onto Core Data and for all this Lynda.com has become my one stop destination and the videos offered by Simon Allardice are just too good. My first App is shaping up well and though my progress has been slow, it has been steady. 

The thing with Xcode is that... it is just awesome. It is such a nice App with everything you need packed into one place. There are these wonderful starting templates, which get you started right away without much of a starting trouble. But I ended up getting stuck with a particular issue yesterday that took me two hours to troubleshoot and there is no shame in admitting that it was a silly one when I found the solution. 

So here it is... When you create a new project in Xcode you get showed templates to choose from and I like the Single View Application as it is simple but has everything to build your own App from. However in Xcode 5, you cannot use a Single View template with Core Data enabled by default. You can add Core Data manually, but oh boy isn't that a pain! So if you want Core Data enabled template, you are stuck with the Master-Detail template or Empty Application template or Utility Application template. So after giving up on adding Core Data manually to a Single View Application template, I decided to go with an Empty Application template with Core Data enabled. 

When you start with a Single View template, it comes with a Storyboard and when you run the application, the program compiles just fine with whatever on the Storyboard being displayed just fine

When you start with a Single View template, it comes with a Storyboard and when you run the application, the program compiles just fine with whatever on the Storyboard being displayed just fine

When you start with a Single View template, it comes with a Storyboard and when you run the application, the program compiles just fine with whatever on the Storyboard being displayed just fine as shown in the above picture. However the Empty Application template does not come with a Storyboard built in and hence I added a Storyboard by going to file > New > File in the Xcode menu bar and choosing Storyboard from iOS > User Interface. A Storyboard appeared (MainTest2.storyboard here) and after adding the same label, when I hit run, the simulator showed a white screen with no label on it as shown below. 

Adding a Storyboard manually to an Empty Application does not display what is on the Storyboard automatically

Adding a Storyboard manually to an Empty Application does not display what is on the Storyboard automatically

So though I created a new Storyboard and everything on the side pane just looked fine, there was some connection missing that told Xcode that this Storyboard was my main Storyboard. Of course this was the easy part to figure out. But the tough part was what and where, that connection was to made. After almost an hour, I finally found out that the connection has to be made in the plist file, in the 'Supporting files' folder in the side pane. One you open the plist file, add an entry (new row) to it by clicking on Editor > Add Item (make sure that the center pane showing the plist file's rows is active) and an empty row appears in the plist file (see picture below). In the Information Property List column type in 'Main storyboard file base name' and then in the Value column type in the name of your newly created Storyboard file (only the exact filename with no extension). This tells Xcode that this custom created Storyboard is your application's main Storyboard. 

In the Information Property List column type in 'Main storyboard file base name' and then in the Value column type in the name of your newly created Storyboard file. This tells Xcode that this custom created Storyboard is your application's main Storyboard. 

In the Information Property List column type in 'Main storyboard file base name' and then in the Value column type in the name of your newly created Storyboard file. This tells Xcode that this custom created Storyboard is your application's main Storyboard. 

However there is one more thing specific to using an Empty Application template. In the AppDelegate.m file there is some unwanted code that needs to be deleted before getting your Storyboard display what is shown on it. In the method, '- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)', delete everything (see below) that is there except for 'return YES;'. This code was forcing a new window to be showed on your Storyboard as soon as the Application was launched and hence whatever was on your custom Storyboard never showed up.  

Delete everything except 'return YES;' in the above method

Delete everything except 'return YES;' in the above method

This is it. Now compile and run your Empty Application with custom Storyboard and it should display whatever is shown on the Storyboard as shown below. This issue might be a minor one and might not seem too complicated, but when you are a beginner not just in coding but  anything in life, its these seemingly little annoyances or missteps that will end up costing you a lot of time and effort. So hopefully this helps and I will continue to post such things that I learn from my App development experience, here. 

Once the Storyboard connection is made in the plist file and the unwanted code in the AppDelegate.m file is removed the contents of the custom Storyboard should appear after running the program.

Once the Storyboard connection is made in the plist file and the unwanted code in the AppDelegate.m file is removed the contents of the custom Storyboard should appear after running the program.