macdevcenter.com
oreilly.comSafari Books Online.Conferences.

advertisement

AddThis Social Bookmark Button

Applying "Digital Hub" Concepts to Enterprise Software Design, Part 5
Pages: 1, 2, 3, 4

The DataItem Class

Next, we are going to create a class to store a weather data item. The class will not have any methods but will have instance variables for the data, the measureType, and the date that the measurement was taken.

  1. Right-click (or Control-click) the Classes folder in the left panel of your project (you may need to expand the EnterData group) and choose Add -> New File....

    Right-click (or Control-click) the Classes folder in the left panel of your project (you may need to expand the EnterData group) and choose Add -> New File....
  2. Under the Cocoa section, choose the Objective-C Class type and click Next.

  3. Name the file DataItem.m and click Finish.

    Name the file DataItem.m and click Finish.
  4. Find the DataItem.h file that was just created in Xcode, and modify it to match the following:

    /*
        Contains the data associated with a measurement item.
    */
    
    #import <Cocoa/Cocoa.h>
    
    
    @interface DataItem : NSObject {
        
        NSString *theData;         // Value of measurement data
        NSString *typeName;        // Type of the data
        NSCalendarDate *timeTaken; // Timestamp
    }
    
    @end

    The above header should be pretty self-explanatory, even if the Objective-C syntax is new to you. We are simply creating string variables for the data and type names that we will store, and a date variable for the time the data was taken.

    The class file will be pretty simple, too. There will be an init method that allocates memory for the timeTaken variable when the DataItem object is created, and a dealloc method that releases the memory when the object is destroyed.

  5. Replace the contents of DataItem.m with the following:

    #import "DataItem.h"
    
    @implementation DataItem
    
    - (id)init
    {
        if (self = [super init]) {
            timeTaken = [[NSCalendarDate alloc] init];
        }
        return self;
    }
    
    - (void)dealloc
    {
        [timeTaken release];
        [super dealloc];
    }
    
    @end
  6. If you would prefer to download the code, here are the links: DataItem.h and DataItem.m.

Laying out the User Interface

  1. Find and double-click MyDocument.nib in Xcode. You can find it in the Resources group or use search to find it. Double-clicking the .nib file will automatically launch Interface Builder. To avoid a cluttered screen, I recommend that you hide all of the applications on your screen except Interface Builder. You can do this by holding down the Option key together with the Apple key and then clicking the Interface Builder icon.

  2. Select the text that says "Your document contents here" and press delete to remove it.

  3. Choose Show Info in the Tools menu do display the attributes of the selected object. The info panel should be labeled "NSWindow," as the window is the only item that can currently be modified.

  4. Check the "Has texture" checkbox to give the window a metal appearance.

    Check the "Has texture" checkbox to give the window a metal appearance
  5. Interface Builder has a palette full of user interface elements that can be dragged onto your window. Find the palette containing Cocoa Text Controls and drag a text field to your textured window.

  6. Switch to the Cocoa Controls and Indicators palette and drag a pop-up menu and an aqua button over the interface. Arrange the user interface elements to look like the following screen shot. Notice that as you are moving elements around, blue guides with help you align the elements to match Apple's standards.

    Switch to the Cocoa Controls and Indicators palette and drag a pop-up menu and an aqua button over the interface.
  7. Double-click the button and change its text to "Add".

  8. While the button is selected, notice that the information panel has changed to show the attributes for the NSButton class. Use the drop-down menu next to "Key Equiv:" to set Return as the keyboard shortcut for your Add button. Notice that this causes the button to appear blue instead of clear.

  9. Using the mouse, select all three of our user interface elements by dragging a box around them. Then group the elements by choosing "Make subviews of > Box" in the Layout menu. You will probably need to move things around to make them look good. Double-click the box title (or use the information panel) and change it to Enter new measurement then click "Add". Your window should now look something like this:

    Using the mouse, select all three of our user interface elements by dragging a box around them.
  10. Next, change the palette to Cocoa Data Views and drag a table over your window. Adjust its size so that it fills the middle portion of the window.

  11. Select the table and use the information panel to specify three columns. Then edit the names and widths of the columns so that they look like the screenshot below. In order to edit a column, you may need to click the column header several times to make sure that you have the column selected, as opposed to the table as a whole.

    Select the table and use the information panel to specify three columns
  12. Find the icon labeled PopUp in the palette and drag it onto the column header for Type. A small up-and-down arrow icon should appear in every table cell that is in that column.

  13. Finally, drag one more button onto the bottom of the window and rename it Delete Selected. I chose a metal look for this button, but it does not really matter which one your choose. Adjust your layout so that everything looks nice and matches the Apple layout standards.

    Finally, drag one more button onto the bottom of the window and rename it Delete Selected

Once upon a time, I developed a Windows application that was similar to the tool we are building today. It took about three weeks for my team to build the first version. The users of the tool, who did not have much sympathy for developers, wanted an application that was resizable like all of the other applications that they were used to. Well, it took about another month to write the complicated code to handle resizing properly. I would rather have spent that month solving world peace, or at least doing something a bit more exciting than working on window resizing.

When I later came across the way that Cocoa handles resizing, I just about fell out of my chair. It is great and it does not require a graphing calculator to figure out! Let me show you how to do it:

  1. First select the box that contains the three elements at the top of the window. In the information pane, select Size in the drop-down menu at the top of the pane. In the picture of the square, you can toggle straight lines and springs by clicking on them. Create three springs outside of the center square; left, right, and bottom. See the screenshot if you need help. Since there are no springs inside of the square, our user interface box will not change size as the window is resized. It will stay attached to the top of the window, will stay centered, and will not get dragged downward as the window gets taller.

    Create three springs outside of the center square; left, right, and bottom
  2. Next, let's do the Delete Selected button. Make sure the button is selected, choose Size in the information page, then create springs above and to the sides of the square. This will emulate the behavior of the box except that the button will stay anchored to the bottom of the window instead of the top of the window.

    Next, let's do the Delete Selected button
  3. Finally, we are going to set up the table. Because the table could contain quite a bit of data, we want to let it take most of the screen real estate. So select the table, make sure Size is selected in the information pane, and create springs inside of the square. This will cause the table to expand to fill the space available, keeping the margin between the table and the window constant on all sides.

    Finally, we are going to set up the table
  4. To test your interface, choose Test Interface from the File menu. Play around with the resizing and confirm that it works that way you expect. Click Apple-Q to return to Interface Builder. Celebrate good times, come on!

Pages: 1, 2, 3, 4

Next Pagearrow