Launch
Xcode (Developer/Applications), and then choose File, New Project.
Select the iOS
Application project type, and then find and select the View-Based
Application option in the Template list. Click Choose to continue, and
then enter the project name, FieldButtonFun, and save the new project.
Xcode will set up a skeleton
project for you. As before, we’ll be focusing on the view, which has
been created in FieldButtonFunViewController.xib, and the view
controller class FieldButtonFunViewController.
Preparing the Outlets and Actions
This
project contains a total of six input areas: Three text fields will be
used to collect the place, verb, and number values. We’ll be calling
these thePlace, theVerb, and theNumber, respectively. The project also requires two text views: one to hold the editable story template, theTemplate; and the other to contain the output, theStory. Finally, a single button is used to trigger a method, createStory, which will create the story text.
By the Way
Yes, we’ll be using a text
view for output as well as input. Text views provide a built-in
scrolling behavior and can be set to read-only, making them convenient
for both collecting and displaying information. They do not, however,
allow for rich text input or output. A single font style is all you get!
Start by preparing the outlets
and actions in the view controller’s header file,
FieldButtonFunViewController.h. Edit the file to contain contain the
code shown in listing 1.
Listing 1.
1: #import <UIKit/UIKit.h>
2:
3: @interface FieldButtonFunViewController : UIViewController {
4: IBOutlet UITextField *thePlace;
5: IBOutlet UITextField *theVerb;
6: IBOutlet UITextField *theNumber;
7: IBOutlet UITextView *theStory;
8: IBOutlet UITextView *theTemplate;
9: IBOutlet UIButton *generateStory;
10: }
11:
12: @property (retain,nonatomic) UITextField *thePlace;
13: @property (retain,nonatomic) UITextField *theVerb;
14: @property (retain,nonatomic) UITextField *theNumber;
15: @property (retain,nonatomic) UITextView *theStory;
16: @property (retain,nonatomic) UITextView *theTemplate;
17: @property (retain,nonatomic) UIButton *generateStory;
18:
19: -(IBAction)createStory:(id)sender;
20:
21: @end
|
Lines 4–9 create the outlets for
each of the input elements, while lines 12–17 establish them as
properties so that we can easily manipulate their contents. Line 19
declares a createStory method where we’ll eventually implement the logic behind the application.
By the Way
If you’re paying close attention, you may notice that we’ve declared an outlet and a property for the view’s button, generateButton.
As we mentioned earlier, typically buttons are used to trigger a method
when a certain event takes place, so we don’t usually need an outlet or
property to manipulate them.
In this example,
however, we’re going to programmatically alter the visual appearance of
the button, so we need to be able to access the object, not just
receive messages from it.
After you’ve set up the
outlets and actions, save the header file and open
FieldButtonViewController.m. As you’ve learned, properties usually have
corresponding @synthesize directives
so that they can easily be accessed in code. Add the appropriate
statements for all the properties defined in the header. Your additions
should fall after the @implementation directive and look like this:
@synthesize thePlace;
@synthesize theVerb;
@synthesize theNumber;
@synthesize theStory;
@synthesize theTemplate;
@synthesize generateStory;
That should be all the setup we need for now. Let’s turn our attention to creating the user interface.
In the previous hour, you
learned that the MainWindow.xib is loaded when the application launches
and that it will instantiate the view controller, which subsequently
loads its view from the second XIB file in the project (in this case,
FieldButtonFunViewController.xib). Locate the file in the project’s
Resources folder, and then double-click it to launch Interface Builder.
When Interface Builder
has started, open the XIB file’s Document window (Window, Document), and
then double-click the view icon to open the blank view for editing.
Adding Text Fields
Begin creating the user
interface by adding three text fields to the top of the view. To add a
field, open the Objects Library by choosing Tools, Library, and then
locate the Text Field object (UITextField) and drag it into the view. Repeat this two more times for the other two fields.
Stack the fields on top of one
another, leaving enough room so that the user can easily tap a field
without hitting all of them. To help the user differentiate between the
three fields, you’ll also want to add labels to the view. Click and drag
the Label (UILabel) object from the
Library into the view. Align three labels directly across from the three
fields. Double-click the label within the view to set its text. I’ve
labeled my fields Place, Verb, and Number, from top to bottom, as shown
in Figure 1.
Editing Text Field Attributes
The fields that you’ve created
are technically fine as is, but you can adjust their appearance and
behavior to create a better user experience. To view the field
attributes, click a field, and then press Command+1 (Tools, Attributes
Inspector) to open the Attributes Inspector (see Figure 2).
For
example, you can use the Placeholder Text field to enter text that will
appear in the background of the field until the user begins editing.
This can be a helpful tip or an additional explanation of what the user
should be entering.
You may also choose to
activate the Clear button. The Clear button is a small X icon added to a
field that the user can touch to quickly erase the contents. To add the
Clear button, simply choose one of the visibility options from the
Clear button pop-up menu; the functionality is added for free to your
application! Note that you may also choose to automatically clear the
field when the user taps it to start editing. Just enable the Clear When
Editing Begins check box.
Add these features to the three fields within the view. Figure 3 shows how they will appear in the application.
Did you Know?
Placeholder text also
helps identify which field is which within the Interface Builder
Document window. It can make creating your connections much easier down
the road!
In addition to these
changes, attributes can adjust the text alignment, font and size, and
other visual options. Part of the fun of working in Interface Builder is
that you can explore the tools and make tweaks (and undo them) without
having to edit your code.
Customizing the Keyboard Display with Text Input Traits
Probably
the most important attributes that you can set for an input field are
the “text input traits,” or, simply, how the keyboard is going to be
shown onscreen. Seven different traits are currently available:
Capitalize: Controls whether the iPhone will automatically capitalize words, sentences, or all the characters entered into a field.
Correction:
If explicitly set to on or off, the input field will correct (on) or
ignore (off) common spelling errors. If left to the defaults, it will
inherit the behavior of the iOS settings.
Keyboard:
Sets a predefined keyboard for providing input. By default, the input
keyboard lets you type letters, numbers, and symbols. Choosing the
option Number Pad will only allow numbers to be entered. Similarly,
using Email Address constrains the input to strings that look like email
addresses. Seven different keyboard styles are available.
Appearance: Changes the appearance of the keyboard to look more like an alert view (which you’ll learn about in a later hour).
Return Key: If the keyboard has a Return key, it is set to this label. Values include Done, Search, Next, Go, and so on.
Auto-Enable Return Key: Disables the Return key on the keyboard unless the user has entered at least a single character of input into the field.
Secure: Treats the field as a password, hiding each character as it is typed.
Of the three fields that we’ve
added to the view, the Number field can definitely benefit from setting
an input trait. With the Attributes Inspector still open, select the
Number field in the view, and then choose the Number Pad option within
the Keyboard pop-up menu (see Figure 4).
You may also want to
alter the capitalization and correction options on the other two fields
and set the Return key to Done. Again, all of this functionality is
gained “for free.” So, you can return to Interface Builder to experiment
all you want later on.
Connecting to the Outlets
The first three fields of the
view are now finished and ready to be connected to their variables back
in Xcode. To connect to the outlets defined earlier, Control-drag from
the File’s Owner icon in the Document window to the first field
(“Place”) either in the view window or within the Document window’s view
hierarchy. When prompted, choose thePlace from the pop-up list of outlets, as shown in Figure 5.
Repeat the process for the Verb and Number fields, connecting them to the theVerb and theNumber instance variable outlets. The primary input fields are connected.
Now we’re ready to move on to the next element of the user interface: text views.
Copy and Paste
Your
text entry areas will automatically gain copy and paste without needing
to change anything in your code. For advanced applications, you can
override the protocol methods defined in UIResponderStandardEditActions to customize the copy, paste, and selection process.
