Finishing and Packaging Your Program

Published: July 20th 2005



This tutorial is designed for those of you who are just breaking into the business of programming for the Mac. I’m going to explain how to take your completed app and package it for the World Wide Web. I assume that you have written a functioning app and you are ready to distribute it. A few sections are specific to Xcode so if you are using a different IDE you can skip ahead to the following sections.


Your Finished, but Wait…

So you just completed that cool program, and you think its ready. Well perhaps it is, but we want to make sure that all your loose ends are tied up and that we provide the user a perfect product. Open up your project in Xcode. The first file we want to double check is InfoPlist.strings. Most of the time these strings will be correct, but it is always good to check.


Figure 1.1

CFBundleName = "QuickTunes";
CFBundleShortVersionString = "2";
sCFBundleGetInfoString = "QuickTunes version 2, Copyright 2004 OpenSoft.";
NSHumanReadableCopyright = "Copyright 2004 OpenSoft";


The above code is what you will most often find in your InfoPlist.strings file. Just double check and make sure everything is spelled right and it has the correct version numbers.

The next properties you should check can be viewed by clicking on “Target” and then clicking on your program name. Then press cmd-I to bring up the info panel. Click on the properties tab to display all your program attributes. Check version numbers, names and that you have the appropriate icon. In the identifier box type an identifier for your program’s user preferences. For instance, QuickTunes is com.opensoft.quicktunes. Most developers follow the format of You should leave all the rest of the settings alone unless you know what you are doing.


Check Your Frameworks

Another important factor is to confirm that all libraries you are referencing are included in your program. Scan to your frameworks folder and confirm they are all there.


Build It

You are now error prone. Your program has all the correct data properties its time to compile your app for the user. Select the Build menu and then select Detailed Build Results. This should bring up another window you may not have seen before. Confirm that the active target is in fact your application. Where it says Active Build State choose Deployment. This will tell the compiler that you are compiling for the user so it should not use zero-link and other quick-building technologies. I know you were just about to push build but wait. You first need to clean all your targets. At the right click Clean All and then Clean All Targets. This will just make sure that all of the references in your app have been remade (like images and such). Now that this step has occurred press Build. Wait for Xcode to compile your app. After it says Build Successful, navigate to where your program is stored on your hard disk (eg: /users/dustin/programming/quicktunes/). Inside that folder double click on the build folder. Inside this folder you should see your application icon. This is your double-clickable app. How about we move that to the desktop for easy use. Double click it and test run your app to just make sure it loads. If it does you are ready to package it for the web.


Make a Disk Image

My preferred way to package apps is to make a disk image. They are cool, fast and easy. Locate the program Disk Utility in /Applications/Utilities/. At the top of this window you should click on New Image. A sheet will roll out asking you for some details. In the save as dialog name your disk image to whatever you wish it to be. Also choose the folder you wish to save it in. In the size pop-up box choose the size of the program and any included files (ie: readme.txt). You don’t need to be exact but be close. It will compress it shortly. Keep encryption as none and format to read/write disk image. You will now notice that there is a new disk image on your desktop. Double click it to open the disk image folder. In this folder drag your program, documentation, liscense, etc. Anything that you would like to couple with your app should be placed in this folder now. You can also configure this folder to have an image or background color. With this new folder as the front window press cmd-J to bring up another panel. At the top be sure to select This Window Only so that you edits only effect this folder. Below you can customize the icon size with the slider, the text size, the label position and more. If you would like your folder to have a color choose color and a color-well will appear with which you can select a color.


Why color, when you can have a picture?

If you instead would like an image to be your background that can also be done but it requires a larger final file, so if space is really important to your product then maybe a folder color would be better. To add a picture to your folder it will take a little more customization. Open up, which can also be found in /Applications/Utilities. At the command prompt navigate to your disk image folder by typing replacing folderName with the name of  your disk image folder.


Figure 1.2

cd /volumes/folderName


The next step is to create a hidden folder inside this directory. A hidden folder is registered with a ‘.’ (period) symbol before the name of the folder. So lets create the picture hidden folder with this command:


Figure 1.3

mkdir .pictures


I assume that you have the picture you want as your folder background on your desktop. We need to move that picture into this hidden folder on the disk image. Do this by typing:


Figure 1.3

mv ~/desktop/picture.jpg /volumes/folderName/.pictures


Take note that the picture can be named anything and does not have to be a jpg. It can be gif, jpg, etc.


Now that the actual file is stored inside the dmg we need to connect it so that it is the background for the dmg folder. If the dmg is not opened, open it and press cmd-J to bring up that same panel. Click on image and the click on select. Here one might be frightened because we all know that Finder won’t allow you to navigate to a hidden window normally. We can still get to this file by bringing up the Go To Folder window by pressing cmd-shift-G. In the dialog type the address to the folder (eg: /volumes/folderName/.pictures). Now you will see your picture and simply double click it.


Compress and Protect it

The final step to this process is to take the dmg we have created and compress it and make it so it is read-only. Switch back over to Disk Utility and select the created dmg in the left table. Then click on the Images menu and select Convert. A new panel will show up which allows you to choose the final name for your dmg. Fill in the top text box with the name. Leave the other options to the default and press save. You now have two .dmg files on your desktop. You can delete the first one we created. The last one we made is your final product. You should upload it to your web server.



Today we learned how to compile our program so that it is ready for our users. We then learned how to package the finished project in a .dmg file with a picture for a background. I hope you can now distribute your software easily to your users.

Home | About | Products | Developers | Support | Dustin Bachrach | Blog

Get Firefox!