Building User Interfaces
                    for iPhone Applications 101

                            John Kennedy - Febru...
Your tools: Xcode and Interface
                   Builder, and the Cocoa Touch framework.

Friday, February 20, 2009
Xcode: the IDE that includes source code
                            editor, tools, documentation and the front
          ...
The Cocoa Touch framework provides a
                            code library called UIKit for
                           ...
UIViewController is the UIKit class
                            that provides the most fundamental
                       ...
You could create your controls in your
                            UIViewController subclass
                            p...
When you consider how your application works,
                   it will probably have multiple views: for
               ...
When you consider how your application works,
                   it will probably have multiple views: for
               ...
Remember that each view is a class,
                            and so contains all the code that is
                     ...
How you switch between these views is
                            up to you, and the design of your
                      ...
Sketch your design out on paper
                            first, to make sure the ‘flow’ makes
                         ...
Sketch your design out on paper
                            first, to make sure the ‘flow’ makes
                         ...
A Tab Bar control is one way the user
                   could switch between your
                   application’s views....
A Tab Bar control is one way the user
                   could switch between your
                   application’s views....
Other common design patterns include
                   ‘drilling down’ from one view to
                   another.

Frid...
Other common design patterns include
                   ‘drilling down’ from one view to
                   another.

Frid...
The UINavigationController handles
                            this type of display for you, by
                          ...
So what does each view look like,
                            from the point of view of you, the
                         ...
Here’s what each view involves:




Friday, February 20, 2009
Here’s what each view involves:

                                 Created with Interface Builder, the NIB file
           ...
The important part!



                             NIB               .m
                            File               .h...
The important part!



                             NIB               .m
                            File               .h...
Here’s a step-by-step guide to how you
                            create a new view (both source code and
               ...
1.0 Creating the source code.




            Select ‘Classes’ and Add -> New File...

Friday, February 20, 2009
1.1 Creating the source code.




                      Select UIViewController Class from
                              C...
1.2 Creating the source code.




              Give it a name. I like to use the form
               XXXViewController. Y...
1.3 Creating the source code.




              There you go: your .h and you .m file,
            describing a subclass o...
2.0 Create the NIB file part.




            This time select Resources as the folder, and
                          Add ...
2.1 Create the NIB file part.




                             Use a View.XIB template.
                (Note: XIB is the ...
2.2 Create the NIB file part.




              Pick a name that will remind you which
            UIViewController class ...
2.3 Create the NIB file part.




    Enjoy your new NIB file as it opens in Interface Builder.
     The blank View panel ...
2.4 Create the NIB file part.




              Drag some controls onto your View from
                           the Libr...
3.0 Connect the NIB to the Class.




             Select File’s Owner, and make sure its class is set
               to b...
3.1 Connect the NIB to the Class.




                    Connect the View to File’s Owner.
            (Option-Click on F...
And that’s that.




Friday, February 20, 2009
But how do you make the views, you
                            know, actually visible?




Friday, February 20, 2009
When your application launches, the
                            default view (MainWindow.xib) will be
                    ...
When your application launches, the
                            default view (MainWindow.xib) will be
                    ...
Other controls (such as Tab Bar
                            controls) can link to the NIB files,
                         ...
Other controls (such as Tab Bar
                            controls) can link to the NIB files,
                         ...
You can create them programmatically
                            from within your application.




Friday, February 20, 20...
You can create them programmatically
                            from within your application.




                       ...
For example, this code creates a new
                      view and uses a Navigation Controller
                      to ...
See? It’s not as scary as you might
                            think to create views and display them.

                 ...
The End

                            Please let me know of errors and
                            omissions: john_kenn@mac...
Upcoming SlideShare
Loading in …5
×

Building User Interfaces For iPhones 101

2,551 views

Published on

An introduction to developing user interfaces for Cocoa Touch based iPhone applications, covering the basics of UIViewControllers and how they interact with Interface Builder.

Published in: Education
1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total views
2,551
On SlideShare
0
From Embeds
0
Number of Embeds
109
Actions
Shares
0
Downloads
260
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide













































  • Building User Interfaces For iPhones 101

    1. 1. Building User Interfaces for iPhone Applications 101 John Kennedy - February 2009 Friday, February 20, 2009
    2. 2. Your tools: Xcode and Interface Builder, and the Cocoa Touch framework. Friday, February 20, 2009
    3. 3. Xcode: the IDE that includes source code editor, tools, documentation and the front end for the compiler i.e. with Xcode you can enter, build and debug your application. Interface Builder: an editor program for dragging controls into your application’s views and editing them visually. Cocoa Touch: a framework of code for you to use. Cocoa Touch contains controls and other useful stuff for your iPhone applications. Friday, February 20, 2009
    4. 4. The Cocoa Touch framework provides a code library called UIKit for creating iPhone-friendly controls. Controls can be created programmatically, but.. The Interface Builder tool makes almost all of the process ‘drag and drop’, and is the recommended approach whenever possible. Friday, February 20, 2009
    5. 5. UIViewController is the UIKit class that provides the most fundamental support for all iPhone ‘views’. UIViewController, or its subclasses, can manage (amongst others) tab bars, navigation controls, and will even rotate the display for you automatically. Friday, February 20, 2009
    6. 6. You could create your controls in your UIViewController subclass programmatically, by implementing the loadView method. Or you could use Interface Builder to create a NIB file that contains all the details of your view’s controls. That’s all a NIB file is: a way of storing a user interface. We’ll do it that way. Friday, February 20, 2009
    7. 7. When you consider how your application works, it will probably have multiple views: for example; one that displays groups, and one that displays a list of names. Friday, February 20, 2009
    8. 8. When you consider how your application works, it will probably have multiple views: for example; one that displays groups, and one that displays a list of names. Friday, February 20, 2009
    9. 9. Remember that each view is a class, and so contains all the code that is required to do what it needs to do: for example, the class might contain code that creates a list of names and let the user select one. Your application works by switching between these different views. Friday, February 20, 2009
    10. 10. How you switch between these views is up to you, and the design of your application. It is important to spend time in advance thinking about how your user will switch between views. Friday, February 20, 2009
    11. 11. Sketch your design out on paper first, to make sure the ‘flow’ makes sense. Think about dividing information between views. Will all your settings be in one view? How many views are needed? Friday, February 20, 2009
    12. 12. Sketch your design out on paper first, to make sure the ‘flow’ makes sense. Think about dividing information between views. Will all your settings be in one view? How many views are needed? Friday, February 20, 2009
    13. 13. A Tab Bar control is one way the user could switch between your application’s views. Friday, February 20, 2009
    14. 14. A Tab Bar control is one way the user could switch between your application’s views. Friday, February 20, 2009
    15. 15. Other common design patterns include ‘drilling down’ from one view to another. Friday, February 20, 2009
    16. 16. Other common design patterns include ‘drilling down’ from one view to another. Friday, February 20, 2009
    17. 17. The UINavigationController handles this type of display for you, by maintaining a stack of views and providing navigation. Friday, February 20, 2009
    18. 18. So what does each view look like, from the point of view of you, the programmer? Each views will be encapsulated in separate ‘chunks’ within your application. Friday, February 20, 2009
    19. 19. Here’s what each view involves: Friday, February 20, 2009
    20. 20. Here’s what each view involves: Created with Interface Builder, the NIB file NIB 1. contains the controls, buttons, and other elements File that you have visually designed. A class (comprised of a .m file, and a .h file) .m 2. which is a subclass of UIViewController. Xcode will .h quickly help you create these source files. Class NIB Friday, February 20, 2009
    21. 21. The important part! NIB .m File .h You must introduce the NIB to the code so they know about each other. Friday, February 20, 2009
    22. 22. The important part! NIB .m File .h You must introduce the NIB to the code so they know about each other. Friday, February 20, 2009
    23. 23. Here’s a step-by-step guide to how you create a new view (both source code and NIB) and wire them together.. watch closely.. there is nothing up my sleeve.. Friday, February 20, 2009
    24. 24. 1.0 Creating the source code. Select ‘Classes’ and Add -> New File... Friday, February 20, 2009
    25. 25. 1.1 Creating the source code. Select UIViewController Class from Cocoa Touch Classes Friday, February 20, 2009
    26. 26. 1.2 Creating the source code. Give it a name. I like to use the form XXXViewController. You don’t have to. Friday, February 20, 2009
    27. 27. 1.3 Creating the source code. There you go: your .h and you .m file, describing a subclass of UIViewController. Friday, February 20, 2009
    28. 28. 2.0 Create the NIB file part. This time select Resources as the folder, and Add -> New File. Friday, February 20, 2009
    29. 29. 2.1 Create the NIB file part. Use a View.XIB template. (Note: XIB is the new, improved version of NIB. We just keep calling them NIB files for old time’s sake and to confuse noobs.) Friday, February 20, 2009
    30. 30. 2.2 Create the NIB file part. Pick a name that will remind you which UIViewController class is associated with. Friday, February 20, 2009
    31. 31. 2.3 Create the NIB file part. Enjoy your new NIB file as it opens in Interface Builder. The blank View panel is where you can drag and drop controls. Friday, February 20, 2009
    32. 32. 2.4 Create the NIB file part. Drag some controls onto your View from the Library. Friday, February 20, 2009
    33. 33. 3.0 Connect the NIB to the Class. Select File’s Owner, and make sure its class is set to be the ViewController class you just created. Friday, February 20, 2009
    34. 34. 3.1 Connect the NIB to the Class. Connect the View to File’s Owner. (Option-Click on Files’s Owner and drag to View) Friday, February 20, 2009
    35. 35. And that’s that. Friday, February 20, 2009
    36. 36. But how do you make the views, you know, actually visible? Friday, February 20, 2009
    37. 37. When your application launches, the default view (MainWindow.xib) will be displayed. Friday, February 20, 2009
    38. 38. When your application launches, the default view (MainWindow.xib) will be displayed. This is the easiest way, and it means you can write a simple one-view application in about 60 seconds! Friday, February 20, 2009
    39. 39. Other controls (such as Tab Bar controls) can link to the NIB files, thus causing them to appear. Friday, February 20, 2009
    40. 40. Other controls (such as Tab Bar controls) can link to the NIB files, thus causing them to appear. This isn’t that hard either: you just need to remember to wire them up properly from Interface Builder. Friday, February 20, 2009
    41. 41. You can create them programmatically from within your application. Friday, February 20, 2009
    42. 42. You can create them programmatically from within your application. It turns out that only takes a few lines of Objective-C to open a View from a NIB and make it visible! Friday, February 20, 2009
    43. 43. For example, this code creates a new view and uses a Navigation Controller to make it slide smoothly onto the screen. Friday, February 20, 2009
    44. 44. See? It’s not as scary as you might think to create views and display them. For more information, there are several good 3rd party books including my favourite “iPhone SDK Development” from Pragmatic Programmers. Don’t forget: Apple has some surprisingly good documentation on its iPhone Developer site. Friday, February 20, 2009
    45. 45. The End Please let me know of errors and omissions: john_kenn@mac.com Friday, February 20, 2009

    ×