Making A User Interface With Interface Builder
We are now ready to start building the interface to our application code with the Interface Builder. Interface Builder is an application bundled with developer tools that is tightly integrated with Project Builder. It allows the developer of Cocoa/Aqua applications to easily build a GUI for an application.
Interface Builder allows a developer to concentrate on the look and feel of an application without having to care about the programmatic details of low-level event handling, widget layout, etc. All you have to do is drop a few buttons, windows, and text fields onto the default window and off you go. Interface Builder hides a lot of the details of writing a GUI by hiding widget location information and signaling details in a file format called a NIB.
This article will not delve too deeply into Interface Builder; there are some very good resources available online from O'Reilly author Mike Beam. Mike has written a series of articles that describe how to program for OS X. Another great resource is the book Building Cocoa Applications a Step by Step Guide. I encourage readers of this article to visit the O'Reilly MacDevcenter.com site, build and run the Working with Tables: Writing an Address Book Application example and then proceed with the rest of this article.
With the Analysis Application open, double click on the
MainMenu.nib. This will open up Interface Builder. The GUI
for our application will consist of a tab pane, two buttons, a drop down
menu, and a table view.
Drag these items on the main menu so that they appear as shown in Figure 6 below:
Next you will need to make a controller class to handle events and act
as a data source for the table view that will be populated with analysis
task details. Subclass
NSObject and name the generated class
We need to add outlets that correspond to the drop down and table view
that we set up in Interface Builder to send data to these objects. Add to
the controller class the outlets
textField. You will also need to add the action
getTasks to the AnalysisController. This action will get
fired when the user clicks on the "Get Tasks" button.
After you've set up these outlets and actions, go to the Interface
Builder and instantiate the controller class. Then you need to make the
necessary connections between the buttons, views, and drop downs to the
AnalysisController class (remember that you need to
"control-drag" to make connections between components). After you are
finished making all the connections, you will need to select the
AnalysisController in the classes tab in Interface Builder
and then select "Create files for controller". Two new files,
will be added to your project. Now we're almost done.
Connecting The Table View Object to the Controller Class
Connecting the table view to the controller class and making this class your data source is the one tricky part.
Select the table view object in Interface Builder by double clicking it
(it will turn grey). Control-drag a connection from the table view object
AnalysisController class. The directionality of this
connection is very important, so you must make sure that you drag
from the table view to the controller class. What we are
doing is telling Interface Builder that the table view will be getting its
data from the controller class and to make calls to it for all its
Once you have made the connection from the table view to the controller class, you will see a list of outlets available to choose from. Choose "datasource" from the list of outlets and then select the "connect" button at the bottom of the info window. This tells the table view widget that our controller class is the source of data for this widget.
Next, we need to define an identifier for each column in our table view. We do this for two reasons. First, we will pass this identifier to our NSDictionary full of web service details to and pull out algorithm specific information defined above. Second, using identifiers makes our programming life easier.
getTasks method provides us with 4 pertinent
pieces of information that we would like to display:
- The ID of the algorithm that is registered with the engine
- The name of the algorithm
- The java class that executes this algorithm
- A textual description of the algorithm
We will display this information in our table view after the "Get Tasks" button is pressed in out GUI.
Now that we know what pieces of information we want to display to the
user, let's set up the table view to handle them. In Interface Builder,
double click on the table view object (it will become grey). Press
command-1 to get a list of attributes displayed for this widget and set
the number of columns to 5 by typing "5" in the
Next, double click on the leftmost column in the table view and give
NSTableColumn object an identifier of ID by typing "ID"
in the identifier text field found in Interface Builder's info
window. Give the next four columns
Congratulations, you have now successfully built Objective-C stubs
WSMakeStubs utility provided by Apple, integrated
the autogenerated files into a project using Project Builder, and wired up
your graphical user interface for the OAE client application.
We'll finish up the project next week and show you how to write the Objective-C code to execute the web service, respond to user input, and populate the widgets that you dropped onto the graphical user interface.
Brian Gilman is a Group Leader in the Medical And Population Genetics Department at the Whitehead Institute Center For Genome Research.
Return to Mac DevCenter.
How do you call these methods?
2009-12-16 10:42:27 BruceMartin [View]
How do you call these methods?
2010-06-15 16:17:07 Wampa007 [View]
2003-02-10 08:44:22 jlamarche [View]
2003-02-10 08:43:55 jlamarche [View]
2003-02-07 05:06:49 cmittendorf [View]
2003-02-07 05:06:34 cmittendorf [View]