Pinter Computing

View two files side-by-side

• Open the Project Navigator
• Click the first file in the Navigator
• Option-Click the second file in the Navigator

The two files are displayed next to each other, so you can compare them and copy code between them.

Using tabs

In the Apple Xcode IDE you can use tabs to quickly switch between documents.

It looks like tabs are not the native way to open documents, because opening documents in tabs is not so intuitive.  To open a document in a new tab:

• In the View menu select Show Tab Bar. This will show an empty bar for the tabs.
• In the File menu select New -> Tab. The currently open document appears again in the new tab.
• To open another document in a new tab
  • In the File menu select New -> Tab. The same, currently selected document opens third times in the new tab.
  • Select a new document in the project navigator for the new tab.

The positive side of this is that the multiple instances of the same document are synchronized, so a change in one instance is instantly reflected in the other instances.

 

 Using multiple windows

The advantage of this setup is to be able to configure the separate Xcode windows differently, for example one for code editing, the other for graphical view design.

• In the File menu select New -> Window

Set up debugging

With the default settings in Xcode if there is an error in your app the user interface does not display the line where the error occurred. You can instruct Xcode to stop the execution on the line of code that will cause an error:

• In the Debug menu select Breakpoints -> Create Exception Breakpoint… 

Xcode creates a new breakpoint called All Exceptions. When an exception (error) happens in your application Xcode will stop on the line that caused it.

Debug your app in the iOS Simulator or on your Apple device

• Open the …ViewController.m on the project navigator
• Find the self.label.text = greeting; statement close to the end of the file
• Click the gutter (the wider light gray area) on the left side to place a break point

• Select the iPhone Simulator scheme next to the Stop button on the top of the screen
• Click the Run button to execute the application in the iOS simulator
• In the simulator enter your name in the text field
• Click the Done button on the virtual keyboard
• Click the Hello button on the simulator screen
• The program execution will stop at the break point and show the selected line in the code editor

To remove the break point click and drag it away from the gutter

Accessing the Xcode Help

• Control click anywhere in the code editor
• In the pop- up context menu one of the last items is the Source Editor Help

Monitor the performance of your app

• Start Xcode and open your project
• In the Product menu select Perform Action -> Profile Without Building
• The Profile window opens
• On the left side select All to see all available tools
• For example to test for memory leaks select the Leaks template and click Profile
• Use the application in the simulator to provide data for the profiler
• In the iOS Simulator menu select Quit iOS Simulator to close the simulator
• The Allocations option on the left side shows the memory allocation history during the execution

Manage versions of your app

Xcode can create snapshots to store multiple versions of your app in case you make a modification that stops your app working, or you accidentally delete your source code

To manually create a snapshot

• In the File menu select Create Snapshot
• Enter a name for the snapshot, so later you can find it

To see the snapshots

• Open the Organizer in the upper right corner of the screen
• Click the Project button on the top of the window

Xcode also supports the Git and Subversion source control management systems (SCM) to coordinate work among multiple developers.

In the prior parts of the series we have created a simple iOS application and tested it in the iOS Simulator. The real gratification comes when we can see our own app on a real device, an iPhone, iPod or iPad. In this article we will deploy the app to an Apple device.

Get an Apple Developer account

You have to apply for a developer account to be able to deploy your app to an Apple device. The subscription fee is $99 + tax per year.

To open a developer account go to developer.apple.com

Once you receive the iOS Developer Program activation code via email you are ready to deploy the app to a real device.

The email contains an activation code, that is also a link to activate your account. Once you activated the account wait 5 minutes before trying to set up your device in Xcode. The Apple system needs some time to recognize the account activation.

Set up your Apple device

• Start Xcode
• Unlock your Apple device with the pass code
• Connect the Apple device to the Macintosh computer
• Open the Device organizer by clicking the Organizer button in the upper right corner of the Xcode screen
• Select the device on the left side
• Click the Use for Development button in the middle of the screen
  If the button is not visible click the Add to Portal button at the bottom of the screen

• Enter your Apple Id and password that you used to register as an Apple developer
• Xcode will offer you to generate security certificates, allow the application to do that
• At the end of the certification generation process save the certificates on your computer, so you will be able to carry them to another Mac to develop on that machine too.
• Close Xcode to force the application to get the latest certificate information from the Apple Developer web site

Deploy the application on the Apple device

• Unlock your Apple device with the pass code
• Connect the Apple device to the Macintosh computer
• Start Xcode and open the project you want to deploy to the device
• In the Product menu select Scheme -> Edit Scheme… to open the scheme editor
• Select your device in the Destination pop-up menu

• Click OK to close the schema editor

• Click the Run button in the upper right corner of the screen

You may get the following error message:

“Code Signing Error. A valid provisioning profile matching the application’s Identifier … could not be found”

Follow the steps in the answer at http://stackoverflow.com/questions/16155613/a-valid-provisioning-profile-matching-the-applications-identifier-could-not-be

• A new icon appears on the screen of your Apple device. Tap it, now you can run your brand new application on your own device!

In this article we will make our application work. We already created a simple application and added a Text field, a Label and a Button to the view. We created connections between the user interface elements and the View Controller.

To make more room to work, close the Utilities area by clicking the Utilities button in the View group in the upper right corner of the screen or in the View -> Utilities menu click Hide Utilities

Create a Property to store your name

To be able to work with the data entered into the text field we have to create a property to store it and make it available for other processes. The property is a placeholder where we store values.

• In the project navigator on the left side of the screen select the …ViewController.h
• Before the @end statement write the following:

  @property (copy, nonatomic) NSString *userName;

You can copy the text into the editor, but if you choose to type it, Xcode will help you to complete the words. Just hit Return to accept the suggestions.

As you continue to type Xcode will show selection lists to help you. Use the arrow keys to select the appropriate item and press Return.

Make the button work

In the previous article, Part 2,we already connected the button to the controller, now we will tell the controller what to do when the user clicks the button.

• In the project navigator on the left side of the screen select the …ViewController.m item
• Scroll down to the bottom to see the implementation of the changeGreeting: method at the end of the @implementation section
• Add lines to the method, it should look like the text below. The first and last lines (the method definition and the closing bracket) are already there, to overwrite them copy the text below, select the first and last line in the editor and replace them with the full text.

- (IBAction)changeGreeting:(id)sender {

    self.userName = self.textField.text;

    NSString *nameString = self.userName;
    if ([nameString length] == 0) {
        nameString = @"World";
    }
    NSString *greeting = [[NSString alloc] initWithFormat:@"Hello, %@!", nameString];
    self.label.text = greeting;
}

You can run your app now to make sure all parts are correct, but it is not done yet.

• Click the button on the simulated screen and  “Hello, World!” should appear in the the label.
• If you click the text field you can enter letters there, but there is no way yet to close the automatically appearing keyboard

Make the keyboard disappear

The text field cannot close the keyboard, but it can ask the View Controller to act in behalf of it, so we will delegate the work to the View Controller

• Stop the simulator by clicking the Stop button in the upper right corner of the screen

Teach the View Controller what to do

• Select the …ViewController.m in the project navigator on the left side of the screen
• At the bottom of the file before the @end statement enter the following. The easiest way to to this is to copy and paste the code.

- (BOOL)textFieldShouldReturn:(UITextField *)theTextField {
    if (theTextField == self.textField) {
        [theTextField resignFirstResponder];
    }
    return YES;
}

In the method the resignFirstResponder instruction will close the keyboard.

Set up the View Controller to work on behalf of the text field

• In the project navigator select the …ViewController.h item
• To the end of the @interface line add the following:  <UITextFieldDelegate>The line should look like this:

  @interface HelloWorldViewController : UIViewController <UITextFieldDelegate>

  If there is already something between the < and > signs, just add ,UITextFieldDelegate starting with a comma (,) between the < and > signs.

 

Test your application

• Click the Run button in the upper right corner of the screen

The application should behave as you expect it:

• When you click the text field the keyboard appears
• When you enter your name the letters show up in the text field
• When you click the Done button on the keyboard the keyboard disappears
• When you click the button on the screen “Hello, your name” appears in the label

Congratulations, you just created your first working iPhone, iPod, iPad app!

Add user interface elements to the view

• Open the MainStoryboard.storyboard file in the project navigator
• Open the Utilities area by clicking the right most view button in the upper right corner of the screen
• In the Library selector bar of the Utilities area select the object library

• From the list drag a Text Field, a Label, and a Button  to the view

• When you drag the UI elements on the canvas blue alignment guides appear to help you to align the elements on the view

• To resize the UI elements drag the white squares at the middle of the sides or in the corners

• The blue alignment guides also help you to set the proper size

Set the attributes of the User Interface elements

• If necessary open the Attributes inspector by clicking the Attributes icon in the Inspector selector bar

• Select the text field and enter the description of the text field in the Placeholder field of the Attributes inspector
• With the Alignment attribute you can align the text to left, center or right

• To specify how the text field will be used, specify scroll down to the bottom of the Text Field area and set
  • Capitalization to Words
  • Correction to No
  • Keyboard to Default
  • Appearance to Default
  • Return key to Done

 

To add an action to a button

• Hide the Utilities area by clicking the right most View button in the upper right corner of the screen
• Open the Assistant area by clicking the Assistant Editor button in the upper right corner of the screen
• Make sure that the Assistant displays the view controller’s implementation file (that is, ...ViewController.m). If it shows ...ViewController.h instead, click the ...ViewController.h text above the editor area and select ...ViewController.m
• Press the Control key on the keyboard and drag the button to the @interface section of the …ViewController.m editor

 

• When you release the Control key a pop-over appears

• In the Connection pop-up menu select Actionhe
  
• In the Name field enter changeGreeting:  and finish the word with a colon(:)
• Leave the Type field as id
• Leave the Event pop-up menu as Touch Up Inside
• Make sure the Arguments pop-up menu displays Sender
• Click the Connect button to close the dialog

A few new lines of code appears in the …ViewController.m file with a gray filled circle on the left to indicate that a connection has been made between the button and the Controller

To get the user input from a text field create an Outlet

Control drag the text field to the @interface area of the …ViewController.m file

In the pop-over set the following values

• Make sure the Connection contains Outlet
• In the Name field type textField
• Make sure the Type contains UITextField
• Make sure the Storage is set to Weak
• Click the Connect button to close the pop-over

To display the result in a label create an Outlet for the label

• Control drag the label to the @interface section of the @…ViewController.m file
• Make sure that the Connection pop-up menu contains Outlet.
• In the Name field, type label
• Make sure that the Type field contains UILabel
• Make sure that the Storage pop-up menu contains Weak
• In the popover, click Connect.

To view the connections you just created

•  Click the Standard editor button to close the assistant editor and switch to the standard editor view. The Standard editor button is the leftmost Editor button and it looks like this:
• Click the Utilities view button to open the utilities area.
• Select the View Controller in the outline view.
• Show the Connections inspector in the utilities area. The Connections inspector button is the rightmost button in the inspector selector bar, and it looks like this: 

Specify the View Controller as the delegate object for the text field to close the keyboard when the user clicks the Done button

•  Make sure the MainStoryboard.storyboard is selected in the project navigator on the left side of the screen
• Control drag the text field to the bottom of the canvas onto the yellow sphere that represents the View Controller
• When you release the Control key you will see this

• Select delegate in the Outlets section of the pop-over

To add accessibility hint to the text field, so the Apple VoiceOver screen reader can help people with visual disability

•  Select the storyboard file in the project navigator on the left side of the screen
• Select the text field

•  In the upper right corner select the Utilities view button
• In the Inspector bar select the Identity inspector button
• Enter the hint in the Accessibility section

As of the writing of this article to create iOS apps for iPhone, iPod and iPad you need a Macintosh computer with the Lion (Mac OS X 10.7),  Mountain Lion (Mac OS X 10.8) or later operating system.

Check the hardware requirements of Lion and Mountain Lion if you need to upgrade you computer from Snow Leopard (Mac OS X 10.6) or earlier, because Mountain Lion only runs on newer models with aluminum housing. If you have an earlier model with black or white housing from 2008 upgrading to Lion can be your solution. My black MacBook with the serial number ending with UMoP2 can only be upgraded to Lion.

To see the serial number of your Mac

• Click the Apple icon in the upper right corner of the screen
• Select About This Mac
• On the popup window double click the word Version under the Mac OS X text

To deploy your app to any Apple device or submit it to the Apple App Store  you need to register as a developer at developer.apple.com and pay $99 plus tax a year membership fee.

To test the app on your Macintosh in an iOS simulator you don’t need the developer account, just download Xcode, the Apple development environment for free. This way you can decide without paying anything if you are interested in the Apple iOS app development.

In this series of articles we will use Xcode, the Apple development platform to create, test and deploy our applications.

To get Xcode

• Start the Mac App Store application in your Mac
• Download Xcode, the Apple IDE for iOS and Mac software development

The first steps

• Start Xcode
• On the Welcome page click Create a new Xcode project
• To create an iOS application for iPhone, iPod or iPad click Application under iOS on the left side
• Select the application type you want to develop
  • To create a simple one page application select Single View Application
• Enter the name and other parameters of the application
  • Enter your initials for the class prefix to create a unique set of classes
• Create a folder for the application in the Documents folder of your computer and save the project in that folder

Set the initial view (the view that opens when the app starts)

In this example you can skip this if you selected the Single View Application, but later when you create apps with multiple views this will be the way to select the view that loads when the app starts.

• Open the storyboard file
  • In the project navigator on the left side of the screen click the MainStoryBoard_iPhone.storyboard item

 

• In the middle pane select the Controller you want to handle the initial view
• To display the Utilities pane click the right View button in the upper right corner
• To display the Attributes click the Attributes icon in the Inspector selector bar

• In the View Controller section click the Initial Scene check box

Set the background color of the view

• In the middle of the screen select the view you want to modify
• Open the Attributes inspector as described above
• In the Attributes inspector set the background color

To open the color wheel to select from all possible colors select Other in the Background drop down list

Run the application in the iOS Simulator

• Select the device you want to simulate in the Scheme pop-up menu on the top of the screen next to the Stop button
• Click the Run button to compile and run your app
• The simulator does not have a stop button, but you can close it in the iOS Simulator menu.