Creating the Interface

The first step toward creating our GUI wrapper for the tar program is creating a new Cocoa-Ruby Application in Xcode. You begin just as we did when testing our RubyCocoa install. Select "New Project" from Xcode's "File" menu and choose "Cocoa-Ruby Application" in the "New Project" dialogue. Once you've selected the correct application type, give your new project a name (I called mine "RubyCocoaTar") and select its location in the file system, and voila! We have a new RubyCocoa application. Doesn't do much right now, but we'll remedy that shortly.

After creating a new RubyCocoa project, we need to create our GUI using Interface Builder (IB). We do this just as we would for an Objective-C or Java Cocoa-based application. You double click on the "MainMenu.nib" file under the "Resources" folder in Xcode. This will open Interface Builder with a new Window ready for us to alter.

The first thing to do is to remove the unnecessary menus and rename the main window and all of the remaining menu items. In my application I've only kept the "NewApplication" menu (although I renamed it to "RubyCocoaTar" to match my application's name), and I got rid of the "Preferences" option underneath that menu. After
renaming the rest of the items under the "NewApplication" menu to match the name you've given your project, you can proceed on to crafting the application's GUI.

You're going to create an application with a tab-view interface, with one tab for creating our tar files and another tab for extracting already existing tar files. So, you'll need to click on the "Cocoa-Containers" palette and drag the NSTabView over to the main window. Resize the NSTabView instance and rename the tabs to "Create" and "Extract" so that, when finished, your window looks like the image below.

Figure 1. NSTabView added to the main RubyCocoaTar window.

Once you've got the NSTabView object set up properly, you'll need to add the rest of the components to each of the two tabs. First, we'll add the necessary components to the "Create" tab. We're going to keep our main interface about as simple as possible. For the "Create tar file" portion of our interface we'll only need an NSTableView object for displaying the files we've chosen to tar and compress, and three buttons for adding,
removing, and tarring files.

Go ahead and add each of these items to the "Create" tab so that it looks like the image below. Make sure that the NSTableView only has one column, and rename that column to "Files".

Figure 2. "Create" tab for the RubyCocoaTar application.

I like to get my interface fully set up before creating my controller class and adding the connections. So, why don't we go ahead and add the GUI elements to the "Extract" tab and then come back and create our controller class and all of its connections.

Considering how simple our "Create" tab interface is, it's hard to believe that the "Extract" tab could be any simpler, but guess what — it is. The "Extract" tab only needs an NSTextField to hold the name of the file we wish to decompress and untar, a button for calling up an NSOpenPanel to locate the file, and a button to call our extraction method, plus a label and separator to finish out the package. After adding these elements to our interface, the "Extract" tab should look like the image below.

Figure 3. "Extract" tab for the RubyCocoaTar application.

Well, we've added all of the major elements to our tar GUI and are just about ready to create our controller class and start adding some connections to our interface. However, we have one final, minor, GUI element to create.

There are three types of compression that we are going to focus on in our application, and thus, with the inclusion of tarring without compression, we will have four different file types: .tgz, .bz2, .Z, .tar. This NSSavePanel also needs to provide the user with a way of choosing the type of tarred file they wish to create (e.g., .tgz, .bZ2, .tar, or .Z). In order to do this, we'll need to create a new NSView object that houses an NSPopUpButton containing a list of file extensions to be used with the NSSavePanel. So, let's go ahead and get our new NSView object created, and a bit later we'll find out how to add it to the NSSavePanel.

To create our file types view, we'll need to add an instance of the NSView class to our nib file. Click on the "Cocoa-Containers" palette and drag the NSView over to the Instances tab of the "MainMenu.nib" window. This should display a new window with the title "View" in which we will add our file types drop-down list. If not, simply double click on the instance of NSView you dragged over to the "MainMenu.nib" window and the "View" window should display. You can change the name of the view if you like, although it's not absolutely necessary, since we are not really as concerned with the NSView object as much as we are the file types drop-down list.

Once we have a window open displaying our custom view, we can add the label and drop-down list (NSTextField and NSPopUpButton respectively) to it. In our application we are going to give the user the option to tar a group of files either with or without compression.

There are three types of compression that we are going to focus on in our application and thus with the inclusion of tarring alone, we will have four different file types: .tgz, .bz2, .Z, .tar. Since the NSPopUpButton provides us with only three menu items by default we'll have to add one more menu item to the component. To do this, drag-and-drop a "Menu Item" from the "Cocoa-Menus" palette onto the new NSPopUpButton item in our custom view. Once we have four menu items, we can go ahead and change each one to one of the four file extensions mentioned above.

Once finished, you should have a custom view that looks like the view in the following image.

Figure 4. Custom view for selecting the file type.

That takes care of the GUI design for our system. Now that we have the GUI entirely laid out, we can move on to creating the controller class for the GUI and assigning actions and outlets to it. The next section deals with this step.