TweetFollow Us on Twitter

TinyViewer, Part Deux

Volume Number: 19 (2003)
Issue Number: 7
Column Tag: Programming

Getting Started

TinyViewer, Part Deux

by Dave Mark

Last month's column was a lot of fun. So much so, that I was really torn on what to do in this month's column. I really want to continue the iPod notes exploration. And I've been playing with these cool AppleScripts that I'm just dying to write about. Then there's TinyViewer, the app from my May column. I really want to finish playing with Interface Builder and updating the TinyViewer interface. So that's what I'm gonna do this month and we'll start on the other stuff next month.

TinyViewer Recap

In last month's column, we used Interface Builder to build the beginnings of an interface for TinyViewer, our Cocoa update of the old PictViewer app. We used Project Builder to create a Cocoa Application project, then double-clicked on the MainMenu.nib file to open the nib file using Interface Builder.

We went through the four interface windows that appear - the app's main window, the menu bar window, the palette window, and the window labeled MainMenu.nib, which is a central repository for all the resources and instances from your project.

We dragged out an NSImageView from the palette window into the main app window, then used the dashed, blue lines to align and resize the NSImageView inside the window. We selected Show Info from the Tools menu and used the Info window to customize our NSImageView so it was Editable and Enabled. Making it Editable was especially important to our project as it allowed us to drag-and-drop an image on the window.

We also used the Info window to set the Autosizing settings, so when we resized the window, the image resized in a pleasing way.

Finally, we did the coolest thing of all. We used Interface Builder to take the interface for a spin by selecting Test Interface from the File menu. I absolutely love this part of Interface Builder. They idea of prototyping an app, then test driving the interface, all without writing a single line of code, is amazingly useful. But beyond that, I love the fact that you can archive complex object hierarchies inside a .nib file, then bring them to life inside a completely different application. Think about this. You design and test the TinyViewer interface inside Interface Builder, then save the .nib file, wheel over to Project Builder, build and run the app, and the exact same interface appears. Again, all without writing a single line of code.

Think back to your ResEdit days. You could edit the elements that made up the interface, even do a bit of stringing them together (though not much), but when it came time to bring them to life, you had to write a lot of code. Even though PowerPlant allowed you to create all the usual interface elements and nest them within nestable views, you still had to write the code that instantiated all your objects and brought them to life.

Interface Builder brings this process to a new level. And I like it.

Now What Do We Do?

OK, so what's next? Take a look at Figure 1. This is the menu that appears when you ask Project Buillder to build and run the TinyViewer application. A couple of notes here. First, the most eagle-eyed among you might have spotted a slight discrepancy between the title of this menu and what you see on your screen. Nicely done. When you run your app inside of Interface Builder, Interface Builder actually breathes life into your objects and yields control. In effect, Interface Builder turns into your running app, until you quit. You'll know this is happening cause your app's menu title will actually say Interface Builder.


Figure 1. TinyViewer's main menu.

When you run your app in Project Builder, Project Builder actually launches your app. As you can see in Figure 1, this version of TinyViewer features a TinyViewer menu, riddled with the generic name NewApplication. Let's change this menu to something a little more appropriate.

    Note that when you run your app under Interface Builder, the IB dock icon changes into a cool, single-pole, double-throw switch (ya know, like the one Gene Wilder threw to bring life to Young Frankenstein). Quit the app and the old familiar IB icon returns. Since your app is not running as a separate process, there's no separate dock icon for your app.

But when ProjectBuilder runs your app, you'll find your app represented by an elegantly designed dock icon distinct and separate from the Project Builder icon (and by elegant, I mean generic and boring, unless of course you've designed one yourself).

Changing the TinyViewer Menu

Quit your app if it is running, then (if you are not already in Interface Builder) double-click MainMenu.nib in the project window (Files tab, TinyViewer/Resources) to open the .nib file in Interface Builder. Find the MainMenu.nib main window (see Figure 2) and double-click on the MainMenu icon.


Figure 2. The MainMenu.nib window, with MainMenu selected.

When the MainMenu window appears, start by double-clicking the left -most menu title, the one that says NewApplication, and changing it to say TinyViewer.


Figure 3. Editing the TinyViewer menu title.

Next, click on the menu title TinyViewer. A menu should appear. Find the three occurrences of NewApplication and change them all to say TinyViewer (see Figure 4). Make the same change to the single occurrence of NewApplication in the Help menu.


Figure 4. The complete TinyViewer menu.

Change the Window Title

Next step: close the menu window and click on the TinyViewer window to bring it to the front. Now select Show Info from the Tools menu to bring up the inspector window. If you did this correctly, the inspector window will be titled NSWindow Info. Make sure Attributes is selected from the popup menu and change the window's title to TinyViewer. As soon as you hit enter or click out of the field, the TinyViewer window's title should change to TinyViewer.

    Very important! Be sure to save your .nib file in Interface Builder if you want to go back to Project Builder and test your changes.

Figure 5 shows my copy of TinyViewer with a picture dragged in and the Window's title changed. In a future column, we're going to add some code to the project to change the window title to the file name of the drag-and-dropped image. Any idea how to do this? One solution is to subclass NSImageView and insert your own dragging completion code. We'll also add in an NSScrollView to make the NSImageView scrollable. This one is doable completely within Interface Builder if you want to take a crack at this yourself.


Figure 5. TinyViewer in action. That's Ryan getting rid of my ball.

Create the About Panel

In the olden days of Mac development, the About Box was a modal dialog box with some text in it. Over time, people started customizing these dialogs and, eventually, replaced the canned About Box with customized windows. Some (Adobe PhotoShop, for example) even went so far as to write their own custom window procedures, leading to odd shaped windows, sometimes with holes in them.

Over time, the "official" method of producing About Boxes evolved, moving from About Boxes to About Windows to the current model, the About Panel. There's a terrific article on cocoadevcentral.com by Brock Brandeberg, that'll take you on a whirlwind tour of the modern About Panel:

http://cocoadevcentral.com/articles/000071.php

I'll give you the short version here, but definitely take a look at Brock's article. Well worth the read.

Just as the original Toolbox contained a canned routine for putting up an About Box, Cocoa's NSApplication class contains a member called orderFrontStandardAboutPanel:

- (void)orderFrontStandardAboutPanel:(id)sender;

This function is called automatically when About TinyViewer is selected from the TinyViewer menu (obviously, substitute your app name for TinyViewer). OrderFrontStandardAboutPanel: looks in your application's bundle for a set of elements it uses to build the About Panel. Alternatively, you can use the function orderFrontStandardAboutPanelWithOptions: to roll your own About Panel at run time:

- (void)orderFrontStandardAboutPanelWithOptions:
         (NSDictionary *)optionsDictionary;

This comment is from NSApplication.h. It describes the optionsDictionary parameter, but is useful in understanding what elements you can add to your application's bundle (more on this below):

/* Optional keys in optionsDictionary:
@"Credits": NSAttributedString displayed in the info area of the panel. If not specified, contents 
obtained from "Credits.rtf" in [NSBundle mainBundle];
if not available, blank.

@"ApplicationName": NSString displayed in place of the default app name. If not specified, uses the 
value of CFBundleName (localizable). Fallback is [[NSProcessInfo processInfo] processName].

@"ApplicationIcon": NSImage displayed in place of NSApplicationIcon. If not specified, use [NSImage 
imageNamed:@"NSApplicationIcon"]; if not available, generic icon.

@"Copyright": NSString containing the copyright string. If not specified, obtain from the value of 
NSHumanReadableCopyright (localizable) in infoDictionary; if not available, leave blank.

@"Version": NSString containing the build version number of the application ("58.4", "1.2d3"); 
displayed as "Version 58.4" or "1.0 (v58.4) depending on the presence of ApplicationVersion. If not 
specified, obtain from the CFBundleVersion key in infoDictionary; if not specified or empty string, 
leave blank.

@"ApplicationVersion": NSString displayed as the application version  ("1.0", "Mac OS X", "3", 
"WebObjects 3.5", ...), before the build version. If not specified, obtain from 
CFBundleShortVersionString key in infoDictionary..
*/

For starters, go into TextEdit and create your own About Panel text for TinyViewer. Save the file as Credits.rtf. Note that the name is case-sensitive and has to be exactly Credits.rtf. The file Credits.rtf has been used for About Panels since the birth of Mac OS X. Recent releases of the OS also recognize Credits.html and Credits.rtfd. Obviously, Credits.html allows you to include links in your About Panel and Credits.rtfd allows you to use an rtfd package. You can include all three files in your application's bundle, but priority is given to Credits.html, then Credits.rtf, then Credits.rtfd.

Why have more than one? Your best bet is to include Credits.rtf, in case your app is used by someone with an old version of Mac OS X installed. Whether you supplement this with Credits.rtfd or Credits.html is your call.

Adding Credits.rtf to the Project File

Let's add Credits.rtf to our project. Once you get that to work, it's an easy step to add Credits.html or Credits.rtfd to the mix.

In the project window, select the Files tab, then make sure the Resources triangle is open. In the Finder, click on your Credits.rtf file and drag it into the project window, into the Resources area. As you drag, you'll see a bold black line appear that indicates where the file will be dropped (see Figure 6).


Figure 6. Dragging Credits.rtf into the project file.

When you release your mouse button, the dialog in Figure 7 will appear. Be sure to check the "Copy items" checkbox at the top of the dialog. This tells Project Builder to copy the file into your project hierarchy. You can then do as you like with the original, cause Project Builder lets you edit the copy by double-clicking it.


Figure 7. The Add File dialog. Be sure the "Copy items" checkbox is checked.

Fill in the Bundle

My Alert Panel is shown in Figure 8. It is made up of a collection of resources, including an icon, a collection of info.plist strings, and the Credits.rtf file. You already know how to add the Credits.rtf file. To create your application's icons, you'll want to use a program like PhotoShop to create the artwork, then import that artwork into IconComposer. IconComposer is part of the developer tools and is found in /Developer/Applications/.


Figure 8. My TinyViewer About Panel. Hey! That's Kelley!

Building an icon is entire column in itself. The key is to make sure you create an alpha channel for the 128-by-128 version of the icon, save as a tiff, then import into IconComposer. If your icon looks funky when you save and reopen it, you've probably not done the alpha channel magic properly. We'll tackle this in a future column. If you want to try your hand at doing this, be sure to save the icon as a .icns file, then drag it into the project, just as you did with Credits.rtf. I called my icon TinyViewer.icns.

Your next step is to click on the Targets tab in the Project Window, then click on the TinyViewer target. This will bring up a list of settings you'll need to edit in order to fill out the rest of your About Panel, add an icon to the project, etc. Figure 9 shows my settings.


Figure 9. TinyViewer's Info.plist entries.

    Note that the CFBundleSignature is set to GETs. I logged on to http://developer.apple.com and registered this creator code with Apple specifically for TinyViewer. Feel free to use this code yourself, since I'll only use it for Getting Started projects. We'll dig into registering creator codes in a future column.

Once those changes are made, go back to the Files tab and open the Resources triangle. Click on the InfoPlist.strings item. You'll see something that looks like this:

/* Localized versions of Info.plist keys */
CFBundleName = "TinyViewer";
CFBundleShortVersionString = "TinyViewer version 1.0";
CFBundleGetInfoString = "TinyViewer 1.0, Copyright 2003 by Dave Mark. All Rights Reserved.";
NSHumanReadableCopyright = "Copyright 2003 by Dave Mark. All Rights Reserved.";

I've edited my versions to reflect the settings I want for TinyViewer. Note that the InfoPlist.strings file is your localized strings file. You might contract out to a localizing firm to take your English plist file and translate it to a German plist file. You'd keep both localized files in your project and the right strings would be displayed, depending on the language setting on your computer.

Think of the Info.plist file as the true repository for your plist keys. Any strings that need to be localized should be kept in each localized InfoPlist.strings file. The localized version, if it exists, will override any matching key in the Info.plist file. When building your project, just do the Targets version first, then do the Files version and you should be fine.

    A couple of books that really helped with this month's column: Joe Zobkiw's excellent Mac OS X, Advanced Development Techniques really digs deep into a wide variety of Cocoa-related topics. And, as I've mentioned in a previous column, Bill Cheeseman's Cocoa Recipes for Mac OS X: The Vermont Recipes is an invaluable resource. I definitely owe both these guys a beverage of their choice. And an extra tall one for Mike Trent for helping to unravel all those pesky Cocoa mysteries. Thanks!

Till Next Month...

Man.

There was way more that I wanted to get into. I just ran out of space. I am just loving Project Builder, Interface Builder and Cocoa. Not sure what we'll dig into next month. There's a little more iPod madness left in me. I also just got this really good AppleScript book. Hrm. Maybe a column on scripting my iPod? See you soon...


Dave Mark is a long-time Mac developer and MacTech contributor. Random facts about Dave? He is addicted to Age of Empires. He can't seem to stop camping. And his iPod has him hypnotized with its shiny silver grooviness.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

GarageSale 7.0.8 - Create outstanding eB...
GarageSale is a slick, full-featured client application for the eBay online auction system. Create and manage your auctions with ease. With GarageSale, you can create, edit, track, and manage... Read more
Backblaze 5.0.0.116 - Online backup serv...
Backblaze is an online backup service designed from the ground-up for the Mac. With unlimited storage available for $5 per month, as well as a free 15-day trial, peace of mind is within reach with... Read more
Parallels Desktop 13.0.0 - Run Windows a...
Parallels allows you to run Windows and Mac applications side by side. Choose your view to make Windows invisible while still using its applications, or keep the familiar Windows background and... Read more
Mellel 4.0.0 - The word processor for sc...
Mellel is the leading word processor for OS X and has been widely considered the industry standard for long form documents since its inception. Mellel focuses on writers and scholars for technical... Read more
Adobe Muse CC 2017 2017.1.0 - Design and...
Muse CC 2017 is available as part of Adobe Creative Cloud for as little as $14.99/month (or $9.99/month if you're a previous Muse customer). Adobe Muse 2017 enables designers to create websites as... Read more
WhatsApp 0.2.5862 - Desktop client for W...
WhatsApp is the desktop client for WhatsApp Messenger, a cross-platform mobile messaging app which allows you to exchange messages without having to pay for SMS. WhatsApp Messenger is available for... Read more
WhatsApp 0.2.5862 - Desktop client for W...
WhatsApp is the desktop client for WhatsApp Messenger, a cross-platform mobile messaging app which allows you to exchange messages without having to pay for SMS. WhatsApp Messenger is available for... Read more
Things 3.1.3 - Elegant personal task man...
Things is a task management solution that helps to organize your tasks in an elegant and intuitive way. Things combines powerful features with simplicity through the use of tags and its intelligent... Read more
BetterTouchTool 2.292 - Customize Multi-...
BetterTouchTool adds many new, fully customizable gestures to the Magic Mouse, Multi-Touch MacBook trackpad, and Magic Trackpad. These gestures are customizable: Magic Mouse: Pinch in / out (zoom... Read more
Things 3.1.3 - Elegant personal task man...
Things is a task management solution that helps to organize your tasks in an elegant and intuitive way. Things combines powerful features with simplicity through the use of tags and its intelligent... Read more

KORG iMono/Poly (Music)
KORG iMono/Poly 1.0.0 Device: iOS Universal Category: Music Price: $19.99, Version: 1.0.0 (iTunes) Description: *** Special Sale for a limited time to celebrate the debut of KORG iMono/Poly (33% OFF) until Sep 30! *** Reviving a... | Read more »
Super Phantom Cat 2 beginner's guid...
Super Phantom Cat 2 presents a whole new world of fun platforming challenges and perplexing puzzles. It's a well-designed platformer with a bright, neon aesthetic that brings the genre up to date. [Read more] | Read more »
Shadow Fight 2 Special Edition (Games)
Shadow Fight 2 Special Edition 1.0.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0.0 (iTunes) Description: ** New story chapter! **** No Ads! **** No energy! ** The best fighting series on mobile has returned and... | Read more »
4 RPGs like Final Fantasy XV that deserv...
Square Enix announced another Final Fantasy XV spin-off today - Final Fantasy XV Pocket Edition. This mobile, episodic version of the hit RPG gives the game a chibi-fied makeover. The first episode will be free, followed by 9 more premium episodes... | Read more »
Guild sieges and soul gems in latest upd...
Webzen’s MU Origin hit app stores last year, giving fans of fantasy hack-n-slash MMOs like Diablo a new fix to fixate on. This latest update introduces a competitive guild battle, a fresh dungeon challenge, a mini-game and some elemental gems to... | Read more »
Little Red Lie (Games)
Little Red Lie 1.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0 (iTunes) Description: ARE YOU MORE AFRAID OF POVERTY THAN DEATH? Little Red Lie is a narrative-focused, interactive fiction experience that reduces... | Read more »
You can now apply to be Clash of Clans...
Earlier this month, word got out that the Builder, the trusty handiman who tirelessly built every single building inevery singleClash of Clansbase had called it quits. Sick of seeing his work destroyed endless, the Builder has set out for our world... | Read more »
Meshi Quest beginner's guide - how...
Meshi Quest is Square Enix's newest free-to-play release, and it's a real charmer. You start off as the head of a sushi restaurant, upgrading your food and equipment as you serve visitors heaping helpings of your delicious meals. As you progress,... | Read more »
BUST-A-MOVE JOURNEY (Games)
BUST-A-MOVE JOURNEY 1.0.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0.0 (iTunes) Description: BUST-A-MOVE Features:- Shoot bubbles and match 3 or more bubbles of the same color to make them pop!- Complete your... | Read more »
The best card combos in Clash Royale
Clash Royale is all about building a deck of units that synergise well. To help you get off to a flying start, we've put together a list of unit combinations that are incredibly effective. Looking for some choice 2v2 combos? Check out our guide. [... | Read more »

Price Scanner via MacPrices.net

Clearance 2016 13-inch MacBook Airs, Apple re...
Apple has Certified Refurbished 2016 13″ MacBook Airs available starting at $809. An Apple one-year warranty is included with each MacBook, and shipping is free: – 13″ 1.6GHz/8GB/128GB MacBook Air: $... Read more
2017 13-inch MacBook Airs on sale for $100 of...
B&H Photo new 2017 13″ MacBook Airs on sale today for $100 off MSRP, starting at $899: – 13″ 1.8GHz/128GB MacBook Air (MQD32LL/A): $899, $100 off MSRP – 13″ 1.8GHz/256GB MacBook Air (MQD42LL/A... Read more
Sale! 13-inch 2.3GHz MacBook Pros for $100 of...
B&H Photo has 13″ 2.3GHz MacBook Pros in stock today and on sale for $100 off MSRP including free shipping plus NY & NJ sales tax only: – 13-inch 2.3GHz/128GB Space Gray MacBook Pro (MPXQ2LL... Read more
2016 MacBook Pros, Apple refurbished, availab...
Apple has Certified Refurbished 2016 15″ and 13″ MacBook Pros available starting at $1189. An Apple one-year warranty is included with each model, and shipping is free: – 15″ 2.7GHz Touch Bar Space... Read more
Apple offers Certified Refurbished iPhone 6s...
Apple has Certified Refurbished unlocked iPhone 6s’s and 6s Plus’s available starting at $449. An Apple one-year warranty is included with each phone, and shipping is free: – 16GB iPhone 6s: $449, $... Read more
Apple offers Certified Refurbished Pencils fo...
Apple has Certified Refurbished Apple Pencils available for $85 including free shipping. Their price is $14 off MSRP, and it’s the lowest price available for a Pencil. Read more
2016 15-inch 2.6GHz Touch Bar MacBook Pro ava...
B&H Photo has clearance 2016 15″ 2.6GHz MacBook Pros in stock today and on sale for $500 off original MSRP. Shipping is free, and B&H charges NY & NJ sales tax only: – 15″ 2.6GHz Touch... Read more
21-inch 2.3GHz iMac on sale for $999, save $1...
Amazon has the new 2017 21″ 2.3GHz iMac (MMQA2LL/A) in stock and on sale for $999.99 including free shipping. Their price is $100 off MSRP, and it’s the lowest price available for this model. Read more
Free Instant Translator 2.0 App For iOS Relea...
Mobile application development company, Neoappz has announced the release and immediate availability of Instant Translator 2.0 for iOS devices. Instant Translator is a user-friendly application which... Read more
2017 15-inch MacBook Pros on sale for $200 of...
Amazon has 2017 15″ MacBook Pros on sale for $200 off MSRP. Shipping is free: – 15″ 2.8GHz MacBook Pro Space Gray: $2199.99, $200 off MSRP – 15″ 2.8GHz MacBook Pro Silver: $2296, $103 off MSRP – 15″... Read more

Jobs Board

Development Operations and Site Reliability E...
Development Operations and Site Reliability Engineer, Apple Payment Gateway Job Number: 57572631 Santa Clara Valley, California, United States Posted: Jul. 27, 2017 Read more
Frameworks Engineering Manager, *Apple* Wat...
Frameworks Engineering Manager, Apple Watch Job Number: 41632321 Santa Clara Valley, California, United States Posted: Jun. 15, 2017 Weekly Hours: 40.00 Job Summary Read more
Development Operations and Site Reliability E...
Development Operations and Site Reliability Engineer, Apple Payment Gateway Job Number: 57572631 Santa Clara Valley, California, United States Posted: Jul. 27, 2017 Read more
Frameworks Engineering Manager, *Apple* Wat...
Frameworks Engineering Manager, Apple Watch Job Number: 41632321 Santa Clara Valley, California, United States Posted: Jun. 15, 2017 Weekly Hours: 40.00 Job Summary Read more
*Apple* Retail - Multiple Positions - Apple,...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.