Transcript Lecture 10 Using Interface Builder to create Mac Applications The basic starting sequence: Start Xcode Choose: Create a new Xcode croject Choose: Mac OS X.

Lecture 10
Using Interface Builder
to create Mac Applications
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.
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
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
Working with IB
Adding 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
Working with IB
Resizing 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
Working with IB
Adding 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.
Working with IB
Adding 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.)
Working with IB
Establishing 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.
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.
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.
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.
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