Lecture 10 Using Interface Builder to create Mac Applications

1. Lecture 10Using Interface Builderto create Mac Applications

2. The basic starting sequence: Start Xcode Choose: Create a new Xcode croject Choose: Mac OS X - Application Choose icon: Cocoa Application Name the application Set its location After clicking SAVE the Xcode IDE window is brought up containing a runnable minimal application.

3. The Minimal Application The minimal application presented by the starting Xcode IDE contains one NSWindow To see it running click on Build and Run To start using IB double click on the filename MainMenu.xib

4. Interface Builder - Interface Upon starting, the IB presents: 1. The application window as it currently looks 2. The MainMenu.xib window 3. A menu bar for the application

5. Working with IBAdding GUI items to the window Open the Library window of IB From the Objects or Classes tabs you can drag various GUI items into your window and release them there – IB will automatically create the corresponding GUI object If an item is not suitable to be in the window the dragging will simply not work

6. Working with IBResizing and positioning GUI items All GUI items in the window can graphically be repositoned and resized, can be given color, certain frames, text, or pictures Save the additions and changes made to IB by typing ⌘ S while focussed on an IB window Quit IB by typing ⌘ Q while focussed on an IB window

7. Working with IBAdding behavior to GUI items -1 All Gui items have the predetermined behaviour corresponding to the item, for example: a TextField will allow text to be typed into it and be changed and edited, a button will change color upon being clicked on, etc. However, we always want additonal behaviour that is determined by the logic of our application, for example: the text typed into a TextField should be analysed by our program code and then certain actions should follow, or the click on a button should start some other action in our application.

8. Working with IBAdding behavior to GUI items -2 • You basically need to do two things: • You MUST in your code have references to those GUI items that are intended to trigger actions in your code or whose data you want to use, etc. • You MUST program these actions and set them to be called on when the user event happens (mouse click, or typing, etc.)

9. Working with IBEstablishing a reference to a GUI item Create a reference of the same type as the GUI item in your code: If your GUI item is a TextField, create a NSTextField* in the application code. Where in your code? It must be inside a class that is known to IB. This has nothing to do with the GUI item in which your TextField is graphically located. For example: you cannot put it in the NSWindow class, because your application does not have the NSWindow code. On the other hand, you can put it in the ...AppDelegate class, because you see this class listed in the MainMenu.xib window. Or you put it in a class of your own making that you add to IB. More about this later.

10. Establishing a reference to a GUI item contd. Example (Application name: ABC) 1. place the line IBOutlet TextField* tf1; in the ABCAppDelegate class, to declare the reference 2. open the Inspector window on Connections 3. highlight the ABCAppDelegate class in the MainMenu.xib window, because the reference is in that class then the identifier tf1 will show up in the listing for Outlets in the Connections Inspector.

11. Establishing a reference to a GUI item contd. Below is the ABC window with the Connections Inspector before and after the connection is made, you can see tf1 under Outlets. Click on the empty circle to the right of tf1, drag it onto the textfield item in the window and release it there. In essence, you are pointing the identifier tf1 to the text field item in the window.

12. Adding an action to a GUI item 1) Write the action code as a method of any class that IB knows (for example: ...AppDelegate or any class of your own making that you make known to IB) 2) Click on the GUI item in the application window whose action you want to set 3) Open the Connections Inspector Under the Sent Actions listing you will see ‘selector’, for that item. Click on the empty circle to the right and drag it to the MainMenu.xib window to the class where the action method is implemented; release it there. Upon release a listing of all implemented methods that can serve as actions is shown. Choose one with the mouse and click on it.

13. Adding an action to a GUI item contd. This process corresponds to the target-action pattern that we used in writing the app without IB. The action method must be written with one parameter of type id. These are the elementary steps for using IB