As you’ve probably noticed by now, we prefer to work on examples that do
something. It’s one thing to show a few lines of code in a chapter and
say “this will do <blah>,” but it’s another to take a collection
of features and combine them in a way that results in a working
application. In some cases, the former approach is unavoidable, but this
isn’t one of them. Our first hands-on example makes use of web views, a
segmented control, and a toggle switch.
Implementation Overview
In this project, we create an application that displays flower photographs and flower information from the website FloraPhotographs.com. The application will enable a user to touch a flower color within a segmented control (UISegmentedControl), resulting in a flower of that color being fetched and displayed from the FloraPhotographs site in a web view (UIWebView). The user can then use a toggle switch (UISwitch) to show and hide a second web view that contains details about the flower being displayed. Finally, a standard button (UIButton)
will enable the user to fetch another flower photo of the currently
selected color from the site. The result should look very much like Figure 1.
Setting Up the Project
This
project will, once again, use the View-Based Application template we’re
starting to love. If it isn’t already running, launch Xcode
(Developer/Applications), and then create a new project called FlowerWeb.
You should now be
accustomed to what happens next. Xcode sets up the project and creates
the default view in FlowerWebViewController.xib and a view controller
class in FlowerWebViewController. We’ll start with setting up the outlets and actions we need in the view controller.
Preparing the Outlets and Actions
To create the web-based
image viewer, we need three outlets and two actions. The segmented
control will be connecting to an outlet called colorChoice because we’ll be using it to choose which color is displayed. The web view that contains the flower will be connected to flowerView, and the associated details web view to flowerDetailView.
For the actions, the application must do two things: get and display a flower image, which we’ll define as the action method getFlower; and toggle the flower details on and off, something we’ll handle with a toggleFlowerDetail action.
Why Don’t We Need an Outlet for the Switch?
We don’t need to include an outlet for the switch because we will be connecting its Value Changed event to the toggleFlowerDetail method. When the method is called, the sender parameter sent to the method will reference the switch, so we can just use sender to determine whether the switch is on or off.
If we have more than one control using toggleFlowerDetail, it would be helpful to define outlets to differentiate between them, but in this case, sender will suffice.
Open the flowerWebViewController.h file in Xcode and create the IBOutlets for colorChoice, flowerView, and flowerDetailView. Then add the IBActions for getFlower and toggleFlowerDetail. Finally, add @property directives for the segmented control and both web views so that we can easily manipulate them in our code.
The completed header file should look very similar to Listing 1.
Listing 1.
#import <UIKit/UIKit.h>
@interface FlowerWebViewController : UIViewController {
IBOutlet UISegmentedControl *colorChoice;
IBOutlet UIWebView *flowerView;
IBOutlet UIWebView *flowerDetailView;
}
-(IBAction)getFlower:(id)sender;
-(IBAction)toggleFlowerDetail:(id)sender;
@property (nonatomic, retain) UISegmentedControl *colorChoice;
@property (nonatomic, retain) UIWebView *flowerView;
@property (nonatomic, retain) UIWebView *flowerDetailView;
@end
|
Save the header file and open the view controller implementation file (flowerWebViewController.m). Add matching @synthesize directives for each of the properties you declared in the header. These, as always, should be added after the @implementation directive:
@synthesize colorChoice;
@synthesize flowerDetailView;
@synthesize flowerView;
Now, let’s
build the user interface. Open the FlowerWebViewController.xib file in
Interface Builder, and make sure that the view is open and visible.
We’ll begin by adding the segmented control.
Adding a Segmented Control
Add a segmented control to the user interface by opening the Library (Tools, Library), finding the Segmented Control (UISegmentedControl)
object, and dragging it into the view. Position the control near the
top of the view in the center. Because this control will ultimately be
used to choose colors, click and drag a label (UILabel) into the view as well, position it above the segmented control, and change it to read Choose a Flower Color:. Your view should now resemble Figure 2.
By default, the segmented
control will have two segments, titled First and Second. You can
double-click these titles and edit them directly in the view, but that
won’t quite get us what we need.
For this project, we need
a control that has four segments, each labeled with a color: Red, Blue,
Yellow, and Green. These are the colors that we can request from the
FloraPhotographs website for displaying. Obviously, we need to add a few
more segments to the control before all the choices can be represented.
Adding and Configuring Segments
The
number of segments displayed in the segmented control is configurable
in the Attributes Inspector for the object. Select the control that
you’ve added to the view, and then press Command+1 to open the
Attributes Inspector, demonstrated in Figure 3.
Using
the Segments field, increase the number from 2 to 4. You should
immediately see the new segments displayed. Notice that directly below
where you set the number of segments in the inspector is a drop-down
with entries for each segment you’ve added. You can choose a segment in
this drop-down, and then specify its title in the Title field. You can
even add images resources and have them displayed within each segment.
By the Way
Note that the first segment is
segment 0, the next is segment 1, and so on. It’s important to keep
this in mind when you’re checking to see which segment is selected. The
first segment is not segment 1, as you might assume.
Update the four segments in the control so that the colors Red, Blue, Yellow, and Green are represented.
Sizing the Control
Chances are, the control you’ve
set up doesn’t quite look right in the view. To size the control to
aesthetically pleasing dimensions, use the selection handles on the
sides of the control to stretch and shrink it appropriately. You can
even optimize the size of individual segments using the Segmented
Control Size options in the Size Inspector (Command+3), as shown in Figure 4.
Choosing a Segment Control Appearance
In addition to the usual
color options and controls available in Attributes Inspector, there are
four variations of how the segmented control can be presented. Use the
Style drop-down menu to choose between Plain, Bordered, Bar, and Bezeled. Figure 5 shows each of these.
For this project,
stick with Plain, Bordered, or Bezeled. The segmented control should now
have titles for all the colors and a corresponding label to help the
user understand its purpose.
To finish things up for the segmented control, we need to connect it to the outlet we defined earlier (colorChoice) and make sure that it triggers the getFlower action method when a user switches between colors.
Connecting to the Outlet
To connect the segmented control to the colorChoice
outlet, make sure the Document window is visible, and then Control-drag
from the File’s Owner icon to either the visual representation of the
control in the view or to its icon in the Document window, and then
release the mouse button. When prompted, choose the colorChoice outlet to finish the connection, as shown in Figure 6.
Connecting to the Action
Like other UI elements, the segmented control can react to many
different touch events. Most frequently, however, you’ll want to carry
out an action when the user clicks a segment and switches to a new value
(such as choosing a new color in this app). Thankfully, Apple has
implemented a Value Changed event that does exactly what we want!
In our application, we want
to load a new flower if the user switches colors. To do this, we need to
create a connection from the Value Changed event to the getFlower
action. Open the Connections Inspector by selecting the segmented
control and then pressing Command+2. Drag from the circle beside Value
Changed to the File’s Owner icon in the Document window, and release
your mouse button. When prompted, choose the getFlower action method, as shown in Figure 7.
The segmented control is
now wired into the interface and ready to go. Let’s add our other
interface objects, and then write the code to pull it together.
