A Bioinformatics Web Service with Mac OS X

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 AnalysisController.

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 dropdown and 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, AnalyisController.m and AnalysisController.h, 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 to the 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 data.

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.

The OAE 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 #Colmn field.

Next, double click on the leftmost column in the table view and give this 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 name, taskClassName, description, and parameterInfo identifiers.

Wrap Up

Congratulations, you have now successfully built Objective-C stubs using the 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.

Prev  [1] [2] [3]