You’re almost ready to test your app, there’s just one tiny detail to attend to first. You’ve written the code that sends the request to the X.co service, you’ve set up delegate methods to collect the data that comes back, andyou’ve written code to deal with any problems. The only thing left to do is connect the “shorten URL” button in the interface to your -shortenURL: action, so all that happens when you tap the button.
Select the Main_iPhone.storyboard file. Holding down the control key, click on the “shorten URL” button and connect its action to the File’s Owner. Release the mouse button and choose the-shortenURL: method, as shown in Figure 3-28.
Figure 3-28. Connecting the “shorten URL” button
Run your app and enter an URL. In the example shown in Figure 3-25, I’ve entered http://www.apple.com. When the page loads, the “shorten URL” button becomes active. Tap on it and, within a second or two, a short URL to thispage appears in the toolbar (on the right in Figure 3-29).
Figure 3-29. The Shorty app in action
This calls for a celebration! You’ve created a remarkably sophisticated app by leveraging the power of existing iOS classes, judiciously connecting the right objects together, and writing action and delegate methods to handlethe details.
Final Touches
You’re still not quite done. You’ve yet to write the action that copies the short URL to the system clipboard. Fortunately, that’s not difficult to code either. In your SUViewController.m file, add this method:
- (IBAction)clipboardURL:(id)sender
{
NSString *shortURLString = self.shortLabel.title;
NSURL *shortURL = [NSURL URLWithString:shortURLString]; [[UIPasteboard generalPasteboard] setURL:shortURL];
}
The first line gets the text of the URL from the shortLabel button that was set by
-connectionDidFinishLoading:. The second line turns the text of the short URL into an URL object, just as you did in the -loadLocation: method you wrote at the beginning of the chapter. Finally,
the [UIPasteboard generalPasteboard] method returns the system-wide pasteboard for “general” data—what most people think of as the clipboard. You send that pasteboard object the -setURL: message, passing it the URLobject you just created. And almost as if by magic, the short URL is now on the clipboard.
In your SUViewController.h file, add this line:
- (IBAction)clipboardURL:(id)sender;
Now you can use Interface Builder to connect the “copy to clipboard” button to the -clipboardURL:
method. Do this the same way you connected the “shorten URL” button (refer to Figure 3-24).
With everything hooked up, run your app again. You should get in the habit of running your app as you write it, testing each new feature and function as it is developed. In the simulator, go to an URL, and generate a shortenedone, as shown on the left in Figure 3-30. Once you have a shortened URL, tap the Copy button.
Figure 3-30. Testing the clipboard
Tap in the text field again, and clear the field. Hold down your mouse (simulated finger) until the Paste pop-up button appears (middle in Figure 3-30). Tap the paste button, and the shortened URL will be pasted into the field, asshown on the right in Figure 3-30. This would also work with any other app that allows you to paste text.
As a final test, tap the Go button. The shortened URL will be sent to the x.co server, the server will redirect your browser back to the original URL, and the web page you started at will reappear in the browser, along with theoriginal URL in the text field.
Cleaning Up the Interface
You app is fully functional, but there are still a few quirks in the interface. With the simulator still running, choose the Hardware ➤ Rotate Left command. This simulates turning the device 90° counter-clockwise, as shown in Figure 3-31. Most of it still looks OK, but the buttons in the bottom toolbar get squished over to the left, which looks cheesy.
Figure 3-31. Testing device rotation
Quit the simulator, change the project destination in the toolbar to iPad Simulator, and run your app again, this time on a simulated iPad (on the right in Figure 3-31). This is terrible! The iPad version doesn’t show any interface at all!
That’s because you haven’t created one. All of your interface objects were created and connected
in the Main_iPhone.storyboard file. As you are undoubtedly realizing, that’s the Interface Builder file that gets loaded when your app runs on your iPhone. The Main_iPad.storyboard file is still empty. You’ll take care of both ofthese problems in short order.
Start by fixing the layout of the toolbar. Quit the simulator, or click the stop button in Xcode. Select the Main_iPhone.storyboard file. In the library, find the Flexible Space Bar Button Item. This object, with a ridiculously longname, acts as a “spring” that fills the available space in a toolbar so the button objects on either side get pushed to the edge of the screen.
Drag one flexible space item object and drop it between the “shorten URL” button and the short URL field. Drop a second between the URL field and the “copy the clipboard” button, as shown in Figure 3-32.
Figure 3-32. Adding flexible space bar button items
With two flexible items, the “springs” share the empty space, causing the label in the middle to be centered, and the copy button to shift all the way to the right. It’s not obvious in portrait orientation, but if you rotate the deviceto landscape it works perfectly. Switch back to the iPhone simulator, run your app
(see Figure 3-33), and rotate the device to the left (or right). Now the toolbar looks much nicer (on the right in Figure 3-33).
Figure 3-33. Testing iPhone rotation
Creating the iPad Version
The very last step will be to create the iPad version of your app. You might be groaning, thinking that you have to start over from the beginning. Don’t worry; you’re surprisingly close to being finished. First, a lot of the work in thisapp was the code, which you’ve already written. Second, just as you did in the Surrealist app, you can copy and paste objects you’ve already created.
Select the Main_iPhone.storyboard file. Using the outline, select all of the top-level objects in the view and copy them, as shown in Figure 3-34.
Figure 3-34. Copying the iPhone interface
Select the Main_iPad.storyboard file. Select the view object in the outline, and paste all of the objects you just copied, as shown in Figure 3-35.
Figure 3-35. Pasting object into the iPad interface
The clipboard duplicates all of the objects you created for the iPhone version, along with their attributes. What it doesn’t copy is their positions, most constraints, or any of their connections.
Start by choosing Clear All Constraints in View Controller from the Resolve Auto Layout Issues button. Exactly as you did for the iPhone interface (refer to Figure 3-4), add a Vertical Spacing constraint from the toolbar andthe Top Layout Guide and set the constraint’s value to 0. Arrange the remaining objects in the iPad interface so they look like the iPhone’s. Everything will be bigger than the iPhone version, including a wider text field in thenavigation bar. When done, choose the Add Missing Constraints item in the Resolve Auto Layout Issues button.
Using the connections inspector, or by control+dragging, establish the same connections you did for the iPhone. This will include:
n Connect each of the File’s Owner outlets to the correct interface object
n urlField to the text field
n webView to the web view
n shortenButton to the “shorten URL” (left) button in toolbar
n shortLabel to the plain (middle) button in the toolbar
n clipboardButton to the “copy to clipboard” (right) button in the toolbar
n Connect the sent events of the text field and each button to their respective action:
n text field’s Did End On Exit event to -loadLocation:
n refresh button to -loadLocation:
n “shorten URL” (left) button to -shortenURL:
n “copy to clipboard” (right) button to -clipboardURL:
n Don’t forget to set the web view’s delegate outlet
When you’re done, you’ll have a finished iPad app too. Switch to the iPad simulator and test it out, as shown in Figure 3-36.
Figure 3-36. Testing iPad version
Summary
This was a really important chapter, and you made it through with flying colors. You learned a lot about the fundamentals of iOS app development and Xcode’s workflow. You will use these skills in practically every app youdevelop.
You learned how to whip up a web browser, something that can be used in a lot of ways, not just displaying web pages. For example, you can create static web content by adding .html resource files to your app, and have aweb view load those files. The web view class will also let you interact with its content using JavaScript, opening all kinds of possibilities.
Learning to create, and connect, outlets is a crucial iOS skill. As you’ve discovered, an iOS app is a web of objects, and outlets are the threads that connect that web together.
Most importantly, you learned how to write action methods and create delegates. These two patterns appear repeatedly throughout iOS.
In the next chapter, I’ll explain how events turn a finger touch into an action.
No comments:
Post a Comment