iPhone Application Development : Working with Text, Keyboards, and Buttons (part 2) - Adding Text Views

Adding Text Views

Now that you know the ins and outs of text fields, let’s move on to the two text views (UITextView) present in this project. Text views, for the most part, can be used just like text fields. You can access their contents the same way, and they support many of the same attributes as text fields, including text input traits.

To add a text view, find the Text View object (UITextView) and drag it into the view. This will add a block to the view, complete with Greeked text (Lorem ipsum...) that represents the input area. Using the resizing handles on the sizes of the block, you can shrink or expand the object to best fit the view. Because this project calls for two text views, drag two into the view and size them to fit underneath the existing three text fields.

As with the text fields, the views themselves don’t convey much information about their purpose to the user. To clarify their use, add two text labels above each of the views, Template for the first, and The Story for the second. Your view should now resemble Figure 6.

Figure 6. Add two text views with corresponding labels to the view.

Editing Text View Attributes

Text view attributes provide many of the same visual controls as text fields. Select a view, and then open the Attributes Inspector (Command+1) to see the available options, as shown in Figure 7.

Figure 7. Edit the attributes of each text view to prepare them for input and output.

To start, we need to update the Text attribute to remove the initial Greeked text and provide our own content. For the top field, which will act as the template, select the content within the Text attribute of the Attributes Inspector, and then clear it. Enter the following text, which will be available within the application as the default:

The iPhone developers descended upon <place>. They vowed to <verb> night and
day, until all <number> Palm Pre owners came to their senses. <place> would
never be the same again.

					  

When we implement the logic behind this interface, the placeholders (<place>, <verb>, <number>) will be replaced with the user’s input.

Next, select the “story” text view, and then again use the Attributes Inspector to clear the contents entirely. Because the contents of this text view will be generated automatically, we can leave the Text attribute blank. This view will also be a read-only view, so uncheck the Editable attribute.

In this example, to help provide some additional contrast between these two areas, I’ve set the background color of the template to a light red and the story to a light green. To do this in your copy, simply select the text view to stylize, and then click the Attributes Inspector’s View background attribute to open a color chooser. Figure 8 shows our final text views.

Figure 8. When completed, the text views should differ in color, editability, and content.

Setting Scrolling Options

When editing the text view attributes, you’ll notice that a range of options exist that are specifically related to its ability to scroll, as shown in Figure 9.

Figure 9. Scrolling regions have a number of attributes that can change their behavior.

Using these features, you can set the color of the scroll indicator (black or white), choose whether both horizontal and vertical scrolling are enabled, and even whether the scrolling area should have the rubber-band “bounce” effect when it reaches the ends of the scrollable content.

Using Data Detectors

Data detectors automatically analyze the content within onscreen controls and provide helpful links based on what they find. Phone numbers, for example, can be touched to dial the phone; detected web addresses can be set to launch Safari when tapped by the user. All of this occurs without your application having to do a thing. No need to parse out strings that look like URLs or phone numbers. In fact, all you need to do is click a button.

To enable data detectors on a text view, select the view and return to the Attributes Inspector (Command+1). Within the Text View Attributes area, click the check boxes under Detection: Phone Numbers to identify any sequence of numbers that looks like a phone number; Addresses for mailing addresses; Events for text that references a day and/or time; and Links to provide a clickable link for web and email addresses.

Watch Out!

Data detectors are a great convenience for users, but can be overused. If you enable data detectors in your projects, be sure they make sense. For example, if you are calculating numbers and outputting them to the user, chances are you don’t want the digits to be recognized as telephone numbers.

Connecting to the Outlets

Connect the text views to the theStory and theTemplate outlets you defined earlier. Control-drag from the File’s Owner icon in the Document window to the text view that contains the template. When prompted, choose theTemplate from the pop-up list of outlets (see Figure 10).

Figure 10. Connect each view to its corresponding outlet.

Repeat this for the second text view, this time choosing theStory for the outlet. You’ve just completed the text input and output features of the application. All that remains is a button!