Learning Cocoa with Objective-C/Miscellaneous Topics/Finishing Touches

From WikiContent

Jump to: navigation, search
Learning Cocoa with Objective-C

Over the last 16 chapters, we've covered quite a bit of material and laid a decent foundation on which you can build your Cocoa programming abilities. Before we leave you at the end of the book, let's take a look at the various finishing touches that you should put on your application before sending it out into the world. In this chapter, we explore the following topics:

  • Tidying up the user interface
  • Providing an icon
  • Providing help
  • Customizing the About box
  • Tweaking compiler settings
  • Packaging for distribution

Contents

Tidying Up the User Interface

You've no doubt noticed that when running the applications we've built throughout the book, the menu items refer to a "NewApplication" instead of the name of the application you created. An example of this is shown in Figure 17-1, where we see the application menu of Dot View.

Figure 17-1. Dot View's application menu

Dot View's application menu

Thankfully, this is easy to fix. Instead of creating a new application, as we've done to introduce most of the topics in the book, we'll add all of these finishing touches to the Dot View application we built in Chapter 8.

  1. Open the Dot View project from your ~/LearningCocoa/DotViewfolder.
  2. Open the MainMenu.nib file in Interface Builder.
  3. Click on the NewApplication menu, as shown in Figure 17-2, and change the menu text "NewApplication" in the various menu items to read "Dot View". You can do this either by modifying the title of the menu item using the inspector, as shown in Figure 17-2, or by editing the menu items from the MainMenu.nib window.

    Figure 17-2. Editing the menu

    Editing the menu

    If you choose to edit the menu items from the MainMenu.nib window, click once on the applicable menu, and then double-click on an item (for example, "Quit NewApplication") to highlight it. Next, double-click again on "NewApplication" to highlight just that word, and type in the name of the application—in this case, Dot View.

  4. Click on the Help menu item, and change the "NewApplication" help menu item to read "Dot View Help".
  5. Save the nib file ([[Image:Learning Cocoa with Objective-C_I_6_tt591.png|]]-S), and return to Project Builder.
  6. Build and run ([[Image:Learning Cocoa with Objective-C_I_6_tt592.png|]]-R) the application. Check all the menu items.

Providing an Icon

All Mac OS X applications should provide an icon for their application. In fact, icons are probably the single most visible attribute of your application, so investing a bit of time and effort into them is warranted. Application icons are typically stored in a .icns file in the application's bundle. These .icnsfiles contain several images to use as the application's icons, in various sizes and bit depths.

The Developer Tools package contains a very simple utility called IconComposer (/Developer/Applications) that will convert images into Mac OS X-style icon files. Using a standard graphics application, you can create art for your icon, save it as a 32-bit image in TIFF, PICT, or Photoshop format, and then import it into IconComposer. Once the image has been imported, IconComposer can create icon masks for icons sizes that require one.

If you are comfortable working with Adobe Photoshop, use this section learn how to create source art for an icon in just a few seconds. If you don't use Photoshop, you can adapt these instructions to other graphics applications; or, you can just grab the DotViewIcon.psd file out of the sample-code download for this book (see the Preface for information about where to download the example code).

  1. Launch Photoshop, and make a new 128×128 pixel image with a transparent background, as shown in Figure 17-3. It doesn't really matter what DPI you use, but 72 DPI is traditional for screen work.

    Figure 17-3. Creating the DotViewIcon.psd file in Photoshop

    Creating the DotViewIcon.psd file in Photoshop

  2. Create your icon. The icon that we designed (and which you can get from the example download package) is shown in Figure 17-4.

    Figure 17-4. The Dot View icon in Photoshop

    The Dot View icon in Photoshop

  3. Save the file as a Photoshop document. Be sure to save with transparency.
  4. Launch IconComposer.
  5. Chose File → Import Image. IconComposer's dialog box will have a pop-up menu that lets you specify what kind of icon to make from the imported data. Select Thumbnail 32 bit data, and open the document saved in step 4.
  6. The image will appear in the Thumbnail slot of IconComposer. Drag and drop the image from the Thumbnail row to the Huge, Large, and Small rows, as shown in Figure 17-5. Each time you do this, you'll be asked whether you want to use a scaled version (say yes) and whether you want to extract a 1-bit mask from the data (also say yes).

    Figure 17-5. The Dot View icon in Icon Composer

    The Dot View icon in Icon Composer

  7. Save the file as ~/LearningCocoa/DotView.icns.
  8. Return to Project Builder, and add the DotView.icns file to the project (Project → Add Files). It doesn't need to be copied into the project directory, since we saved it there, but make sure that it is added to the Dot View target.
  9. Edit the main target (Project → Edit Active Target), navigate the outline view to Info.plist Entries → Simple View → Icon, and enter DotView.icns into the Icon file field, as shown in Figure 17-6.

    Figure 17-6. Setting the Icon using Project Builder

    Setting the Icon using Project Builder

  10. Build and run ([[Image:Learning Cocoa with Objective-C_I_6_tt597.png|]]-R) the application. When the application launches, you probably won't see the new icon in the Dock; but, when you try to close the window, you will see it in the sheet, as shown in Figure 17-7.

Figure 17-7. The icon file in use by the application

The icon file in use by the application

Tip

When you run the Dot View application from Project Builder or out of the build directory, you won't always see the icon used in the Dock or in the Finder. However, as soon as you drag the built application to another directory (e.g., ~/Applications), the icon will probably work correctly. Sometimes logging out and back into your machine is required. This behavior is due to the Finder caching the icons for display on screen.

Chapter 10 of Apple's Inside Mac OS X: Human Interface Guidelines contains quite a bit of information about icon design. You can find this book on your system in the /Developer/Documentation/Essentials/AquaHIGuidelinesfolder.

Providing Help

Among the other features of Mac OS X is an integrated help system known as Apple Help. Introduced as part of Mac OS 8.5 as part of Carbon, Apple Help is an integral part of Mac OS X, displaying help content authored in the HTML format in the industry standard HTML 3.2 specification. Using HTML for the help file format is a big win and means that you can create help files using a text editor or your favorite web page authoring tools, such as BBEdit, Dreamweaver, or GoLive. In addition, Apple Help can display any media supported by QuickTime. This means that most of the major image formats, as well as Flash content, are supported for display.

The following steps guide you through adding help to the Dot View application:

  1. Create a subfolder in your ~/LearningCooca/Dot Viewfolder, named Help, as shown in Figure 17-8.

    Figure 17-8. Adding a Help folder

    Adding a Help folder

  2. Add the Help folder to Project Builder (Project → Add Files). Select the Help folder created in step 1, and click the Add button. On the next sheet that appears, click the Create Folder References for any added folders radio button, as shown in Figure 17-9. This instructs Project Builder to copy all of the contents of the built application's Resources folder.

    Figure 17-9. Adding the help folder as a Folder Reference to our project

    Adding the help folder as a Folder Reference to our project

  3. Create a new file (File → New File → Empty File) named index.html in the Help directory.
  4. Edit the index.html file as follows:
    <html>
    <head>
    <meta name="AppleTitle" content="Dot View Help">
    <title>Dot View Help</title>
    </head>
    <body>
    <h1>Dot View</h1>
    <p>Click the Dot. Change its color. Have Fun.</p>
    </body>
    </html>
    

    This is a standard HTML file with the addition of a meta tag that names its attribute set to AppleTitle. This meta tag is used by Apple Help.

    Tip

    You can find much more 0information about Apple Help, including all the special tags that you can add to your HTML files, in the Carbon documentation installed with the Developer Tools. Start with /Developer/Documentation/Carbon/HumanInterfaceToolbox/AppleHelp /ProvidingUserAssitAppleHelp/index.html.

  5. The last step is to add two keys to the application's property list. Unlike setting the icon file, Project Builder doesn't yet provide a GUI for setting these properties, so use the following directions:
    1. Open the main target of the application (Project → Edit Active Target).
    2. Navigate the outline view to Info.plist Entries → Expert View, as shown in Figure 17-10.

      Figure 17-10. Adding properties to the target in the Expert View

      Adding properties to the target in the Expert View

    3. Click the New Sibling button. Name the new key CFBundleHelpBookFolder, and give it a string value of Help.
    4. Click the New Sibling button again. Name the new key CFBundleHelpBookName, and give it a string value of Dot View Help.

  6. Build and run ([[Image:Learning Cocoa with Objective-C_I_6_tt603.png|]]-R) the application. When the application launches, ask for Help (Help → Dot View Help, or use the [[Image:Learning Cocoa with Objective-C_I_6_tt604.png|]]-? keyboard shortcut). The Apple Help application will launch and display your help, as shown in Figure 17-11.

Figure 17-11. Dot View Help

Dot View Help

Customizing the About Box

Cocoa applications get a "free" About Box by default. When you run the Dot View application and select the Dot View → About Dot View menu item, you'll see an About Box that looks like Figure 17-12.

Figure 17-12. The default About Box for Dot View

The default About Box for Dot View

This default about box displays the application icon—in our case, the icon we added earlier in the chapter—the application name, and a couple of strings obtained from the application bundle. To set these strings to something a bit more sensible, use the following steps.

  1. Open the InfoPlist.strings file in the Resources folder of the Groups & Files panel, as shown in Figure 17-13.

    Figure 17-13. Editing the InfoPlist.strings file

    Editing the InfoPlist.strings file

  2. Edit the CFBundleGetInfoString and NSHumanReadableCopyright strings to whatever you choose. These strings are what the default about box uses.
  3. Build and run ([[Image:Learning Cocoa with Objective-C_I_6_tt608.png|]]-R) the application. When you open the About Box, you'll see the strings that we just edited.

    You'll notice that one part of the about box still refers to a "v0.1". You can change this string in the Info.plist Entries → Simple View → Basic Information area of the Dot View target.


Giving Some Credit

It's not obvious, but if you provide a Credits.rtf file in your application's bundle, the default about box will display it as part of its content. To see this in action:

  1. Use Text Edit (or the Simple RTF Edit application we made in Chapter 11) to create a Credits.rtffile. You can say anything you'd like here. We chose to create the text you see in Figure 17-14.

    Figure 17-14. Creating the Credits.rtf file

    Creating the Credits.rtf file

  2. Save this file to ~/LearningCocoa/Dot View/Credits.rtf.
  3. Return to Project Builder, and add the Credits.rtf file to the project (Project → Add Files). Be sure that it is added to the Dot View target.
  4. Build and run ([[Image:Learning Cocoa with Objective-C_I_6_tt610.png|]]-R) the application. When you open the about box, you should see something like Figure 17-15.

    Figure 17-15. Our finished about box

    Our finished about box


Tip

Once you create an RTF file and add it to Project Builder, you can edit it directly in Project Builder. However, we couldn't start by creating the RTF file directly in Project Builder. Hopefully, the Project Builder team will add this functionality in future revisions to the Developer Tools.

Tweaking Compiler Settings

The last step before shipping an application is to build an optimized version of it with no debugging information. To set up the compiler for this:

  1. Open the active target settings (Project → Edit Active Target), and navigate to the Settings → Simple View → GCC Compiler Settings panel, as shown in Figure 17-16.

    Figure 17-16. GCC Compiler Settings

    GCC Compiler Settings

  2. Uncheck the Generate debugging symbols box.

A setting that you will be tempted to tweak, but probably shouldn't until you have quite a bit of experience, is the optimization level box. Project Builder ships with many possible settings for this, but in general the default setting of -Os (optimize for code size) is the best to use, as it makes the resulting binary as small as possible, both on disk and in memory. The number one performance problem of applications, according to Apple engineers, is that a large application memory footprint will cause Mac OS X's virtual memory system to work overtime. Using the -Os setting helps prevent your application from large amounts of memory swapping to and from disk, thus increasing your user's experience.

Packaging for Distribution

The last thing you do when developing an application—packing it up for distribution—is the first experience most users will have with your software. Unfortunately, too many applications out there come with installers that make their users jump through hoops. Since Cocoa applications are bundles that can be drag-and-dropped anywhere on your system with ease, it makes sense to distribute your applications in the simplest way possible: using compressed disk images. Compressed disk images download easily, most browsers will automatically mount the drives contained in them, and, best of all, they don't require the purchase of an expensive installer that your user probably won't appreciate.

Making a compressed disk image is simple. The following steps will bundle up our Dot View application for distribution:

  1. Create a new folder on your desktop, named Dist.
  2. Drag the built Dot View application from the ~/LearningCocoa/Dot View/buildfolder to the Distfolderon your desktop.
  3. Launch the Disk Copy utility. It is located in your /Applications/Utilitiesfolder.
  4. Select the New → Image from Folder or Volume menu from Disk Copy. Disk Copy presents a dialog box to choose the folder. Select the Dist folder on your desktop, and click the Image button.
  5. Another dialog box will open, as shown in Figure 17-17, asking you to select some options. Select compressed for the image format, and save the resulting image to your desktop.

    Figure 17-17. Making a compressed disk image using Disk Copy

    Making a compressed disk image using Disk Copy

  6. Click the Save button. After a few status boxes go by, you should have a Dot View.dmg file ready for distribution. Double click on the .dmgfile, and mount it as a disk drive.

Closure

After 17 chapters, you should now have a working foundation of how to build simple Cocoa applications. (And it is quite likely that you have finished the book in a much shorter time than it took to write!) To be sure, we haven't covered every topic in depth, but we have given you enough knowledge to be dangerous. These are the next steps you should take in your quest to become a great Cocoa programmer:

  • Read more about Cocoa. We noted a few books on Cocoa in the Preface, which you should check out.
  • Write applications. There's no substitute for experience.

There's still a lot you will need to learn to master Cocoa programming, but you should now be over the initial "huh?" stage and ready to dive in deep.

Good luck!

Exercises

  1. Provide an icon, "help", and customize the about box for the Simple RTF Edit application from Chapter 11.
  2. Package up for distribution the Simple RTF Edit application.
  3. Write a complete application from scratch, utilizing the knowledge that you've gained from this book.
Personal tools