698	CHAPTER 21: Application Localization

Figure 21–8. The application is partially translated into French now.

Localizing an Image

We could change the flag image directly in the nib by just selecting a different image for the image view in the French localized nib file. Instead of doing that, we’ll actually localize the flag image itself.

When an image or other resource used by a nib is localized, the nib will automatically show the correct version for the language (though not for the dialect, at the time of this writing). If we localize the flag.png file itself with a French version, the nib will automatically show the correct flag when appropriate.

First, quit the simulator and make sure your application is stopped. Back in Xcode, single-click flag.png in the project navigator. Next, bring up the file inspector, and locate the Localization section, which you’ll see is currently empty. Make sure flag.png is still selected, and then press the + button at the bottom of the Localization section. Xcode will add an English localization for the file and move flag.png into the en.lproj folder (check the Finder to see this for yourself).

www.it-ebooks.info

CHAPTER 21: Application Localization

699

NOTE: In the current version of Xcode 4.2, there seems to be a slight bug in the GUI that shows up here. With flag.png selected, clicking the + button as we just described causes the file to be deselected, which makes the inspector suddenly pop into a no selection state. But don’t worry; it

has done its work properly anyway. Just select flag.png in the project navigator again and

continue.

You’ll see that where flag.png is shown in the project navigator, there’s still no disclosure triangle to indicate that it’s a localized resource. That’s because we still have just one version of it, in en.lproj, just as BIDViewController.xib started out.

Make sure flag.png is still selected, and use the Localization section of the file inspector to add a new localization. This time when the popup list appears, you’ll see both English and French at the top of the list, since Xcode knows those are already represented in the project. Select French, and you’ll see that flag.png immediately acquires a disclosure icon. Expand that, and you’ll see two copies of the flag: one labeled English and one labeled French.

Switch back to the Finder and your project’s directory, and you’ll see this situation mirrored in the file system, with en.lproj and fr.lproj each containing a flag.png file. The one in fr.lproj is a copy of the original, which is obviously not the correct image. Since Xcode doesn’t let you edit image files, the easiest way to get the correct image into the localization project is to just copy that image into the project using the Finder.

Go to the 21 - LocalizeMe folder, open the Images folder, open the French folder, and use the flag.png file in that folder to replace the flag.png you’ll find in LocalizeMe/fr.lproj.

That’s it. You’re finished. Back in Xcode, click the image file flag.png (French) in the project navigator. You should see the French flag.

Now, try running the app again. We hope you’ll see something akin to the image shown in Figure 21–9. If not, do not despair. Chances are the US version of the flag image is being cached, either by the simulator or by the device, if you are running the app that way. We’ll go over a couple approaches you can try to get the correct image.

www.it-ebooks.info

700	CHAPTER 21: Application Localization

Figure 21–9. The flag image and application nib are both localized to French now.

If you are running in the simulator, first quit the app (but not the simulator). Click over to Xcode and stop the application. Return to the simulator and select iOS Simulator Reset Contents and Settings to reset the simulator, and then quit the simulator. Return to Xcode and select Product Clean to force a complete rebuild. Now, run the app again. Once you rerun the app, you’ll need to reset the region and language to get the French flag to appear. If this still does not work, try doing the simulator reset, quit the simulator, do a Product Clean, quit Xcode, and then start the whole thing again.

If you’re running on the device, your iPhone has probably cached the American flag from the last time you ran the application. You can remove the old application from your iPhone using the Organizer window in Xcode. Select Window Organizer to bring up the Organizer window. Under the Devices tab, you’ll see a column on the left showing all the iOS devices that Xcode knows about. The currently connected device has a green dot next to its name. Select the Applications item belonging to your devices, and you’ll see a list of all the applications you’ve compiled and installed on your own. Find LocalizeMe in the list, select it, and click the minus (–) button to remove the old version of that application and the caches associated with it. Now, select Project Clean. When that’s complete, build and run the application again. Once the application launches, you’ll need to reset the region, and then the language. The French flag should now come up in addition to the French words down the left side (see Figure 21–9).

www.it-ebooks.info

CHAPTER 21: Application Localization

701

Generating and Localizing a Strings File

In Figure 21–9, notice that the words on the right side of the view are still in English. In order to translate those, we need to generate our base language strings file and then localize that. To accomplish this, we’ll need to leave the comfy confines of Xcode for a few minutes.

Launch Terminal.app, which is in /Applications/Utilities/. When the terminal window opens, type cd followed by a space. Don’t press return.

Now, go to the Finder, and drag the project folder 21 - LocalizeMe to the terminal window. As soon as you drop the folder onto the terminal window, the path to the project folder should appear on the command line. Now, press return. The cd command is Unix-speak for “change directory,” so what you’ve just done is steer your terminal session from its default directory over to your project directory.

Our next step is to run the program genstrings and tell it to find all the occurrences of NSLocalizedString in your .m files in the Classes folder. To do this, type the following command, and then press return:

genstrings ./LocalizeMe/*.m

When the command is finished executing (it just takes a second on a project this small), you’ll be returned to the command line. In the Finder, look in the project folder for a new file called Localizable.strings. Drag that to the LocalizeMe folder in Xcode’s project navigator, but when it prompts you, don’t click the Add button just yet. First uncheck the box that says Copy items into destination group’s folder (if needed), because the file is already in your project folder. Click Finish to import the file.

CAUTION: You can rerun genstrings at any time to re-create your base language file, but once you have localized your strings file into another language, it’s important that you don’t change the text used in any of the NSLocalizedString() macros. That base-language version of the string is used as a key to retrieve the translations, so if you change them, the translated version will no longer be found, and you will need to either update the localized strings file or have it

retranslated.

Once the file is imported, single-click Localizable.strings, and take a look at it. It contains five entries, because we use NSLocalizableString five times with five distinct values. The values that we passed in as the second argument have become the comments for each of the strings.

The strings were generated in alphabetical order. In this case, since we’re dealing with numbers, alphabetical order is not the most intuitive way to present them, but in most cases, having them in alphabetical order will be helpful.

/* The number 5 */ "Five" = "Five";

www.it-ebooks.info

702CHAPTER 21: Application Localization

/* The number 4 */ "Four" = "Four";

/* The number 1 */ "One" = "One";

/* The number 3 */ "Three" = "Three";

/* The number 2 */ "Two" = "Two";

Let’s localize this sucker.

Make sure Localizable.strings is selected, and then repeat the same steps we’ve performed for the other localizations:

Open the file inspector if it’s not already visible.

In the Localizations section, click the + button once to create an English localization. This will likely unselect the file, but it will create the English localization.

Reselect Localizable.strings. Then click the + button once again to make a French localization.

Back in the project navigator, select the French localization of the file. In the editor, make the following changes:

/* The number 5 */ "Five" = "Cinq";

/* The number 4 */ "Four" = "Quatre";

/* The number 1 */ "One" = "Un";

/* The number 3 */ "Three" = "Trois";

/* The number 2 */ "Two" = "Deux";

In real life (unless you’re multilingual), you would ordinarily send this file out to a translation service to translate the values to the right of the equal signs. In this simple example, armed with knowledge that came from years of watching Sesame Street, we can do the translation ourselves.

Now save, compile, and run the app. You should see the relevant numbers translated into French.

www.it-ebooks.info