Design [Spin a Web]

This app needs some basic elements. The user will need a field to type in, and edit, an URL. It would be nice to have a built-in web browser so they can see the page at that URL and tap links to go to other URLs. It needs abutton to convert the long URL into a short one, and some place to display the shortened URL.

That’s not a particularly complicated design, and everything should easily fit on one screen, like the sketch in Figure 3-1. Let’s toss in one extra feature: a button to copy the shortened URL to the iOS clipboard. Now the userhas an easy way to paste the shortened URL into another app.

Figure 3-1. Sketch of Shorty app

Your app will run on all iOS devices, and work in both portrait and landscape orientation. Now that you have a basic design, it’s time to launch Xcode and get started.

Creating the Project

As with any app, start by creating a new project in Xcode. This is a one
screen app, so the obvious choice is the Single View Application  template.

Fill in the project details, as shown in Figure 3-2. Name the project Shorty,  set the Class Prefix to SU

(for “Short URL”), and set the Devices to Universal.

Figure 3-2. Shorty project details

Click the Next button. Choose a location to save your new project, and click Save.

Building a Web Browser

Start by building the web browser portion of your app. This will consist of a text field, where the user enters the URL they want to visit/convert, and a web view that will display that page. Let’s also throw in a refresh button, toreload that page at the current URL.

Select the Main_iPhone.storyboard file in the navigator. Start by developing your app for the iPhone.

You’ll create the iPad version later in the chapter.

In the object library, find the Navigation Bar object and drag it into the view, towards the top, as shown in Figure 3-3. Navigation bar objects are normally created by navigation controllers to display a title, a back button, and soon. You saw this in the Surrealist app. Here, however, you’re going to use one on its own.

Figure 3-3. Adding a navigation bar

Position the navigation bar so it’s the full width of the view. Control+click/right-click on the navigation bar and drag up until the Top Layout  Guide appears, as shown in 

Figure 3-4. Release the mouse and choose the VerticalSpace constraint.

Figure 3-4. Adding a vertical constraint to the navigation bar

Just as you did in the previous chapter, select the constraint and set its value to 0, as shown in 

Figure 3.5. This tells iOS to position the navigation bar at the recommended position at the top of the screen, just below thesystem’s status bar.

Figure 3-5. Constraining the toolbar to the top layout guide

Find the Web View  object in the library, and drag one into the lower portion of the screen. Move and resize the web view so it exactly fills the rest of the view, from the navigation bar to the bottom of the screen, as shown in Figure 3-6.

Figure 3-6. Adding a web view

Select the view controller (by clicking on either the object dock below the view or the View Controller object in the outline) and choose Add Missing Constraints in View Controller from the Resolve Auto Layout Issues button.Interface Builder uses the one constraint you established and fills in any additional constraints needed to establish this layout for all devices.

Find the Bar  Button   Item in the library and drag one into the right side of the navigation bar. Bar button items are button objects specifically designed to be placed in a navigation bar or toolbar. Once there, select it. Switch tothe attributes inspector and change the Identifier of the new button to Refresh (see Figure 3-7). The icon of the button will change to a circular arrow.

Figure 3-7. Making a refresh button in the navigation bar

Find the Text  Field (not the Text  View!) object in the library, and drag one into the middle of the navigation bar. This object will displace the default title that is normally displayed. Grab the resize handle on the right or left, andstretch the field so it fills most of the free space in the navigation bar, as shown in Figure 3-8.

Figure 3-8. Resizing  the URL field

The user will type their URL into this field. Configure it so it is optimized for entering and editing URLs. Select the text field object and, using the attributes inspector, change the following properties:

n     Set text to http://

n     Set Placeholder to http://

n     Change Clear Button to Appears  while   editing

n     Change Correction to No

n     Change Keyboard to URL

n     Change Return Key to Go

These settings set the initial content of the field to http:// (so the user doesn’t have to type that), and if they clear the field, a ghostly http:// will prompt them to enter a web URL. Turning spelling correction off is appropriate (URLsare not a spoken language). When the keyboard appears, it will be optimized for URL entry, and the return key of the keyboard will display the word “Go,” indicating that the URL will load when they tap it.

You’ve created, and laid out, all of the visual elements of your web browser. Now you need to write a little code to connect those pieces and make them work together.