iOS: User Interfaces: Interface  Builder vs. Programatically     Tennessee Valley Apple Developers    Saturday CodeJam: Fe...
Before We Start• Download the icon image at:  https://github.com/lhridley/AppleDev/blob/  master/Button_Fun/Icon.png  Save...
Create Your Project• Create a View-based Application for the  iPhone and name it “Button_Fun”• Pull downloaded icon file in...
UIViewController• All user-created view controllers are  subclasses of UIViewController• Part of UIKit• Provides a great d...
What is a “View”?•   A “view” is any iOS application screen that the    user utilizes to interact with the application – i...
Code to User Interface• User interface objects and view controllers  must send and receive messages to and from  each othe...
User Interface to Code•   Certain user interface objects also send messages    (from users) to the view controller•   Thos...
What is the “IB”?• IB stands for Interface Builder• IBAction and IBOutlet are hints for  Interface Builder to identify pro...
Adding IBOutlets/IBActionsto the View Controller header
Accessors / Mutators• Otherwise known as getters and setters
Xcode Builds these for        you• By using the compiler designations  @property and @synthesize together, you  are tellin...
Adding Actions and Outlets to the View Controller implementation
Adding Actions and Outlets to the View Controller implementation
Application Delegate• Very simply, delegates are classes that take  responsibility for doing certain tasks on  behalf of a...
UIApplication• Standard component of UIKit• Responsible for your application’s event  loop and routing input to the approp...
Button_FunApplication      Delegate• Conforms to UIApplicationDelegate  protocol• Popup overview is available by holding d...
Button_FunApplication        Delegate• Two methods from the UIApplicationDelegate  protocol are included in your applicati...
MainWindow.xib• Open in Interface Builder by double-  clicking• Causes your application delegate, main  window, and view c...
Button_FunViewController.xib• Open in Interface Builder by double-  clicking file in Xcode• Make sure the View window is op...
Button_FunViewController.xib•   Drag the following elements from the Library over to    the view window:    One (1) label ...
Label• Bring up the Inspector• Change text alignment to centered• Remove the “Label” text
Buttons• Change button text to “Left” and “Right”  respectively• Show touch on highlighted• One more thing before we go: O...
Connecting Interface to        Code• Connect File’s Owner to Label• Connect File’s Owner to View window’s  “statusText” ou...
Building Interfaces in        Code
Before We Start• Download icon located at:  https://github.com/lhridley/AppleDev/blob/  master/CodeButton_Fun/Icon.png  Sa...
Create Your Project• Create a View-based Application for the  iPhone and name it “CodeButton_Fun”• Pull downloaded icon fil...
View Properties•   Add the following properties:    statusText of type UILabel    leftStatusButton of type UIButton    rig...
View methods• Add signatures for the following methods in  header file:   -   (void) createView;   -   (void) buttonPressed...
createView method•   Every View object is contained in a CGRect object•   CGRectMake function is used to create a CGRect  ...
createView method
statusText method•   We’re overloading the standard getter•   First we’ll test to see if statusText exists; if not, we’ll ...
statusText method
leftStatusButton                method•   Again, we’re overloading the standard getter method•   Test for the existence of...
leftStatusButton     method
rightStatusButton     method
buttonPressed: method• This method is exactly the same as the  method in the prior project.• The method captures the title...
buttonPressed: method
loadView method• This is the method that …. loads the view• Create the view by calling the createView  method• Add the sub...
loadView method
Build and Run!
Creating Views•   If possible, views should be created using Interface    Builder    •   Less code to maintain    •   IB i...
• Projects are available on Github if you want  to download and/or check your code:• https://github.com/lhridley/AppleDev/...
Upcoming SlideShare
Loading in …5
×

I os user interfaces ib vs programatically

2,762 views
2,662 views

Published on

Comparison of programming a simple iOS interface using Interface Builder vs. building interface programmatically

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,762
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
59
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • I os user interfaces ib vs programatically

    1. 1. iOS: User Interfaces: Interface Builder vs. Programatically Tennessee Valley Apple Developers Saturday CodeJam: February 26, 2011
    2. 2. Before We Start• Download the icon image at: https://github.com/lhridley/AppleDev/blob/ master/Button_Fun/Icon.png Save this image to your desktop.
    3. 3. Create Your Project• Create a View-based Application for the iPhone and name it “Button_Fun”• Pull downloaded icon file into “Resources” folder, and add it to the project’s info.plist file• Open the “Classes” folder and click on the Button_FunViewController interface (header) file
    4. 4. UIViewController• All user-created view controllers are subclasses of UIViewController• Part of UIKit• Provides a great deal of preprogrammed functionality
    5. 5. What is a “View”?• A “view” is any iOS application screen that the user utilizes to interact with the application – it’s the user’s “portal” to your app• General rule: Views are designed in Interface Builder• General rule: every view has its own view controller• Note: There are generally exceptions to every rule
    6. 6. Code to User Interface• User interface objects and view controllers must send and receive messages to and from each other• View controllers send messages to the user interface (and the user) through outlets• Outlets point to user interface objects• Outlets are designated as properties with an IBOutlet designation
    7. 7. User Interface to Code• Certain user interface objects also send messages (from users) to the view controller• Those messages are sent using actions• Actions are designated as methods of type IBAction• IBAction methods are essentially void (returning no data)• Actions are triggered through certain events (like a button click) on a user interface object
    8. 8. What is the “IB”?• IB stands for Interface Builder• IBAction and IBOutlet are hints for Interface Builder to identify properties and methods that are to be tied in some way to user interface objects
    9. 9. Adding IBOutlets/IBActionsto the View Controller header
    10. 10. Accessors / Mutators• Otherwise known as getters and setters
    11. 11. Xcode Builds these for you• By using the compiler designations @property and @synthesize together, you are telling the compiler to automatically define and compile into your app the standard getters and setters for the designated properties.
    12. 12. Adding Actions and Outlets to the View Controller implementation
    13. 13. Adding Actions and Outlets to the View Controller implementation
    14. 14. Application Delegate• Very simply, delegates are classes that take responsibility for doing certain tasks on behalf of another class instance.• Application Delegate performs certain tasks on behalf of the UIApplication class instance
    15. 15. UIApplication• Standard component of UIKit• Responsible for your application’s event loop and routing input to the appropriate controller class• Interaction with your code happens through the Application Delegate
    16. 16. Button_FunApplication Delegate• Conforms to UIApplicationDelegate protocol• Popup overview is available by holding down option key and double-clicking• Detailed documentation on UIApplicationDelegate is available by clicking upper left icon in the right-hand corner; header file can be viewed by clicking upper right icon
    17. 17. Button_FunApplication Delegate• Two methods from the UIApplicationDelegate protocol are included in your application by default: - application:didFinishLaunchingWithOptions: - applicationWillTerminate:
    18. 18. MainWindow.xib• Open in Interface Builder by double- clicking• Causes your application delegate, main window, and view controller instances to get created at runtime• Close it without saving any changes
    19. 19. Button_FunViewController.xib• Open in Interface Builder by double- clicking file in Xcode• Make sure the View window is open• Make sure the Library is visible
    20. 20. Button_FunViewController.xib• Drag the following elements from the Library over to the view window: One (1) label Two (2) Round Rect Buttons• Position the buttons on either side of the view, approximately centered vertically• Position the label along the bottom, expanded the width of the window, using the blue interface guidelines
    21. 21. Label• Bring up the Inspector• Change text alignment to centered• Remove the “Label” text
    22. 22. Buttons• Change button text to “Left” and “Right” respectively• Show touch on highlighted• One more thing before we go: On the View object, change the background color of the view to red
    23. 23. Connecting Interface to Code• Connect File’s Owner to Label• Connect File’s Owner to View window’s “statusText” outlet• Connect each button’s “Touch Up Inside” event to the File’s Owner’s “buttonPressed:” Received Action• Save nib file and close IB; back in Xcode Build and Run
    24. 24. Building Interfaces in Code
    25. 25. Before We Start• Download icon located at: https://github.com/lhridley/AppleDev/blob/ master/CodeButton_Fun/Icon.png Save to desktop
    26. 26. Create Your Project• Create a View-based Application for the iPhone and name it “CodeButton_Fun”• Pull downloaded icon file into “Resources” folder, and add it to the project’s info.plist file• Open the “Classes” folder and click on the CodeButton_FunViewController interface (header) file
    27. 27. View Properties• Add the following properties: statusText of type UILabel leftStatusButton of type UIButton rightStatusButton of type UIButton• Make sure you generate accessors and mutators, and do proper memory management coding - Setting properties to nil in viewDidUnload - Releasing in dealloc
    28. 28. View methods• Add signatures for the following methods in header file: - (void) createView; - (void) buttonPressed:(id)sender;• Add empty methods to implementation file
    29. 29. createView method• Every View object is contained in a CGRect object• CGRectMake function is used to create a CGRect object - parameters passed are: x,y location of the upper left corner (first two) - width, height (last two)• View: fill the view frame, starting at point 0,0. Make view frame 320 points wide, 480 points tall. Initializes as a UIView, autoreleased. Make background color red.
    30. 30. createView method
    31. 31. statusText method• We’re overloading the standard getter• First we’ll test to see if statusText exists; if not, we’ll create it: - frame: starting at point 20, 380, make it 280 points wide, 80 points tall - initialize as a UILabel instance, autoreleased, with text centered, background color transparent, and an empty string in the label’s text - return statusText object from method
    32. 32. statusText method
    33. 33. leftStatusButton method• Again, we’re overloading the standard getter method• Test for the existence of leftStatusButton; if false: - Create button text string (NSString) as “Left” - Create leftStatusButton as instance of UIButton (hint: use convenience method, make rounded button) - Set frame starting point 20, 220, 80 points wide, 40 points tall - Set button title to button text from above, set control state to normal - Have button visually show touch when highlighted - Add target as self, action as @selector (buttonPressed:), when Control Event “TouchUpInside” is triggered - return button• Repeat steps for right button (in new method), changing text from “Left” to “Right”, and starting coordinates for frame to 220, 220.
    34. 34. leftStatusButton method
    35. 35. rightStatusButton method
    36. 36. buttonPressed: method• This method is exactly the same as the method in the prior project.• The method captures the title of the button, builds a new string object in the format of “<title> button pressed.”, and sets the statusText’s text to the new string object.• Don’t forget to release any temporary objects created.
    37. 37. buttonPressed: method
    38. 38. loadView method• This is the method that …. loads the view• Create the view by calling the createView method• Add the subviews for statusText, leftStatusButton and rightStatusButton
    39. 39. loadView method
    40. 40. Build and Run!
    41. 41. Creating Views• If possible, views should be created using Interface Builder • Less code to maintain • IB is a quasi WYSiWYG view editor• Some functionality is not possible using Interface Builder; in those cases building some or all of a user interface in code is necessary• IB interfaces have overhead; if your app needs performance tuning, building some or all interfaces in code may be necessary
    42. 42. • Projects are available on Github if you want to download and/or check your code:• https://github.com/lhridley/AppleDev/tree/ master/Button_Fun• https://github.com/lhridley/AppleDev/tree/ master/CodeButton_Fun

    ×