iPhone App Info Page, a Tutorial as I learn

This is a tutorial for creating modal information pages for your iPhone apps.  I will assume the reader has basic skill with XCode and Apple's Interface Builder but is basically a novice when it comes to iPhone Development.

1. Create or open you iPhone App.


2. Go to the XCode main application window and open your main View Controller, in the Classes folder. It should have a name like YourApplicationNameViewController.h for the header file and .m for the implementation.


3. In your header (.h) file, add this line within your @interface definition:
   

   - (IBAction) onInfo:(id) sender;

   Right before the @end is a good place to put it.


4. In your implementation (.m) file, add the function definition:
   

   - (IBAction) onInfo:(id) sender
   { 
   }

   We will provide the implementation for this shortly.


5. Now, back to the XCode project window; we're going to create a handler for our Info window.  Control-click the Classes group and select Add file….


6. From the list of options, under iPhone OS, select Cocoa Touch Class.  Then, from the list of file types on the left, select UIViewController subclass.  Check the With XIB for user interface box to create a corresponding view that we will edit later in the Interface Builder.  Finally, click the Next button in the bottom, right corner.


7. In the next window, we will change the File Name: to InfoViewController.m and leave the location, project and target untouched.


8. In your Info header (InfoViewController.h) file, add this line within your @interface definition:
   

   - (IBAction) onDone:(id) sender;

   Right before the @end is a good place to put them.


9. In your Info source implementation (InfoViewController.m) file, add the function definitions:

   - (IBAction) onDone:(id) sender
   {
       // Tell the parent window to close this window
       [self.parentViewController dismissModalViewControllerAnimated: YES];
   }



10. We are now ready to provide an implementation for the onInfo function; return to your YourApplicationNameViewController.m implementation file and provide the following definition:

    - (IBAction) onInfo:(id) sender
    {
        // Create a new Info View
        InfoViewController *info = [[InfoViewController alloc] init];
    
        // Display the newly created view window
        [self presentModalViewController: info animated: YES];
    
        // Free the reference to the newly created window so that it can be managed by the OS
        [info release];
    }



11. We are now ready to create the user interface elements which will control our Info window.  Return to the XCode project; in the Resources folder of you application, double click the file that is your main interface file.  If you are using the Model-View-Controller template, this file should be called YourApplicationNameViewController.xib, for other application types, it may be some other file ending in .xib.  This opens Interface Builder.


12. From the Library dialog in Interface Builder, select the Round Rect Button control and drag it onto your View — it may not look like it now, but this is going to be your i info button.


13. You should now see the Button Attributes panel; in this dialog, under Type select Info Light or Info Dark.  Your button now looks like a standard i.


14. Finally, we must link this new button to our handler; in the View Controller Attributes, select the second tab, with the rightward-pointing arrow; the title suffix of this window will change to Connections.


15. Pick up the empty circle next to the text Touch Up Inside and drag it on top of the First Responder box within the corresponding .xib window.  From the drop menu, select our onInfo method; that method will now handle the event when the user clicks on the i button.


16. Return to XCode now, so we can edit the Info Window that this button will invoke.  For some reason, XCode creates your new Info .xib file in the Classes folder with the new source files; it's a good idea to move this file to the root directory of your project with the other .xib files but I will leave that as an exercise for the reader.  In addition to this, you should move the Info .xib file to the Resources folder of your project for consistency.


17. Once you've found and moved your InfoViewController.xib to the right location, double-click on it to edit it in Interface Builder.  You will see a blank page.


18. Now, if you want your application to look normal, you probably want to create a standard Done button.  To do this, you first need a Toolbar from the widget Library; drag this to the top of your new view.  Now, select the embedded button labeled Item and under Identifier, select Done from the drop list.


19. To display our software credits and information, we need a scrollable view.  This can be achieved with the Text View widget; drag one of these onto your view.  In the Text View Attributes rollup, be sure to uncheck the Editable button to keep your credits from being changed by the user accidentally.  Now, for the Text of your view, enter the text you want to appear in your credits screen.  Be mindful of any external links: they can be automatically detected if you check the Links box, as well as addresses and Phone numbers and calendar events.  But if you use these features, when the user clicks on any of the generated links, your application will automatically be exited and the application on the iPhone responsible for handling the request (Safari, Phone, etc.) will be loaded instead.


20. Now we're going to hook up our controls to the handlers we created earlier.  Starting with the Done button, and under the Bar Button Item Attributes roll-up, select the second tab, with the forward arrow.  There you will see a section called Sent Actions and under that selector.  Across from selector is a circle; select that circle and drag it over to the Info.xib window, dropping it on top of the First Responder container.  A drop list will appear where you can select the handler your wrote, onDone:.


21. Return to XCode and compile and test; you should now see the info button you just created and when you click on it, up pops your information, about and credits screen.  Now press the Done button to return to your main screen.

Congratulations!  You now have a working information page for your app!

I leave it as an exercise for the reader with respect to loading the text of the Info Page into your about UITextView widget dynamically and how to implement a full web-browser for your credits with the help of a UIWebView widget.  Look for the answers in a future tutorial.