Chapter    2

Getting to Know Xcode

To write programs in Swift for the Macintosh, you need to use Xcode. Apple developed Xcode as a professional programming tool that they give away free to encourage everyone to write software for OS X and iOS. Despite being a free program, Xcode is a powerful program used by major companies including Microsoft, Adobe, Google, and even Apple. With Xcode on a Macintosh, you have one of the most powerful programming tools for creating OS X programs and iOS apps.

Although Xcode contains dozens of features specifically for professional programmers, anyone can learn to use Xcode. Xcode’s sheer number of features may seem confusing and intimidating at first glance, but relax. To use Xcode, you never need to learn every possible feature. Instead, you can just learn the handful of features you need and ignore all the rest. As you get more experienced, you can gradually learn Xcode’s other features. In many cases, you may never use some of Xcode’s features at all.

Xcode lets you create an OS X program or an iOS app from start to finish without ever needing another program. Within Xcode you can do the following:

  • Create a new project
  • Write and edit Swift code
  • Design and modify user interfaces
  • Manage files that make up a single project
  • Run and test your project
  • Debug your Swift code

You can download and install Xcode for free through the Mac App Store. On your Macintosh, just click the Apple menu and choose App Store. When the App Store window appears, click in the Search text field in the upper right corner, type Xcode, and press Return. Now you can click the button underneath the Xcode icon to download it as shown in Figure 2-1. Since Xcode is a fairly large file, you’ll need a fast Internet connection and plenty of space to install it on your Macintosh.

9781484212349_Fig02-01.jpg

Figure 2-1. When you search for Xcode, it will likely appear in the upper left corner of the App Store window

The four most common parts of Xcode you’ll use regularly are:

  • The project manager
  • The editor
  • Interface Builder
  • The compiler

A project represents a single OS X or iOS program. In the old days when programs were simple, you could store code in a single file. Now with programs being much larger and complicated, it’s far more common to store code in separate files. A collection of files that work together form a single project so the Xcode project manager lets you create, rearrange, and delete the files within a project.

One of the most common types of files every project will contain is a code file, identified by the .swift file extension. Code files are where you can store, edit, and type Swift code. By using Xcode’s editor, you can open a code file, copy and paste code, delete code, and write new code to save in that file. An editor basically acts like a simple word processor designed just for helping you write code in the Swift programming language.

Besides code files containing Swift code, every project will also contain a user interface stored in a separate file identified by either the .xib or .storyboard file extension. A simple program might only have a single file containing its user interface, but a more complicated program might have several files containing different parts of the user interface. The feature in Xcode that let you design, create, and modify user interfaces is called Interface Builder.

After you’ve written Swift code and designed your user interface, you’ll need to convert all the files in your project into an actual working program. The process of translating Swift code into a language that the computer can understand (called machine code) is called compiling, so the part of Xcode that does this is called a compiler.

You’ll often use these four main parts of Xcode in different order. For example, you may create a project and modify its files using the project manager feature. Then you may use the editor to write Swift code and Interface Builder to design your user interface. Finally, you’ll test your program using the compiler. If problems occur, you’ll likely go back to the editor or Interface Builder as many times as necessary until your program works right. You may even create new files and rearrange them in the project manager.

Ultimately, there is no single “best or “right” way to use Xcode. Xcode offers features for you to use whenever you need them.

Giving Commands to Xcode

Like many programs, Xcode offers multiple ways to do the exact same task. For example, to open a project, you can choose File image Open or press Command+O. In general, Xcode typically offers three ways to perform common types of commands:

  • Use the pull-down menus from the menu bar that appears at the top of the screen
  • Press a unique keystroke combination such as Command+O
  • Click on an icon that represents a command

Pull-down menus can be convenient to help you find specific commands, but they can be slower and clumsier to use because you have to click on a menu title to pull-down a menu, then you have to click on a command that appears on that menu.

Keystroke combinations are faster and easier, but they force you to memorize cryptic keystroke combinations for commonly used commands. To help you learn which commands have keystroke combinations, look on each pull-down menu, and you’ll see keystroke combinations displayed to the right of different commands as shown in Figure 2-2. (Note: Not all commands have keystroke combinations.)

9781484212349_Fig02-02.jpg

Figure 2-2. Keystroke combinations appear to the right of commands on pull-down menus

Keystroke combinations usually include a modifier key plus a letter or function key. The four modifier keys include Command, Control, Option, and Shift as shown in Figure 2-3.

9781484212349_Fig02-03.jpg

Figure 2-3. Symbols used to represent common modifier keys

Clicking on icons to choose a command may be the fastest method of all, but you have to know the command that each icon represents. To help you understand what an icon does, just move the mouse pointer over an icon and wait a few seconds. A tiny window will appear, briefly describing the purpose of that icon as shown in Figure 2-4.

9781484212349_Fig02-04.jpg

Figure 2-4. Hovering the mouse pointer over an icon displays a brief description of that icon’s function

Some people only use pull-down menus, others rely more on icons and keystroke shortcuts, and others use a mix of all three methods. Generally people start with pull-down menus, but when they start using the same commands often, they’ll gradually switch to icons and keystroke shortcuts.

Choose whatever method you like but be aware that you almost always have other alternatives. The main point is to get comfortable using Xcode using your preferred method so you can spend more time being creative and less time trying to find the commands you need.

Modifying the Xcode Window

Because Xcode offers so many features, the Xcode window can look cluttered at times. To simplify the appearance of Xcode, you have several options:

  • Resize the Xcode window to make it larger (or smaller)
  • Close panes to hide parts of Xcode
  • Open panes to view parts of Xcode

Like all Macintosh windows, the most straightforward way to resize the Xcode window is to move the mouse pointer over the edge or corner of the Xcode window until the mouse pointer turns into a two-way pointing arrow. Then drag the mouse to resize the window.

A second way to resize the Xcode window is to click on the green dot in the upper left corner of the Xcode window. This expands the Xcode window to take up the full screen and hides the Xcode menu bar at the same time. To exit out of full screen mode, just press the Esc key on the keyboard.

A third way to resize the Xcode window is to choose Window image Zoom. This toggles between expanding the Xcode window to fill the screen while still displaying the Xcode menu bar, or shrinking the Xcode window back to its previous size.

To reduce the amount of information displayed at any given time, Xcode has three panes that you can hide (or open) as shown in Figure 2-5:

  • The Navigator pane that displays information about your project
  • The Debug Area that lets you search for errors or bugs in your program
  • The Utilities pane that lets you customize different items on your user interface

9781484212349_Fig02-05.jpg

Figure 2-5. Xcode’s Navigator pane, Debug Area, and Utilities pane

The Navigator pane displays several icons that let you switch between viewing different types of information. The most common use for the Navigator pane is to let you select a file to open by displaying the Project Navigator. To toggle between hiding and showing the Navigator pane, you have three options:

  • Choose View image Navigators image Show/Hide Navigator
  • Press Command+0 (the number zero)
  • Click the Show/Hide Navigator Pane icon in the upper right corner of the Xcode window as shown in Figure 2-6

9781484212349_Fig02-06.jpg

Figure 2-6. The Show/Hide Navigator Pane icon

The Debug area is used when you want to check if your program is working correctly. While you’re designing your user interface or writing Swift code, you’ll likely want to hide this Debug area. To toggle between hiding and showing the Debug area, you have three options:

  • Choose View image Debug Area image Show/Hide Debug Area
  • Press Shift+Command+Y
  • Click the Show/Hide Debug Area icon in the upper right corner of the Xcode window as shown in Figure 2-7

9781484212349_Fig02-07.jpg

Figure 2-7. The Show/Hide Debug Area icon

The Utilities pane displays several icons that let you switch between showing different types of information. The most common use for the Utilities pane is to help you design and modify a user interface. To toggle between hiding and showing the Utilities Pane, you have three options:

  • Choose View image Utilities image Show/Hide Utilities
  • Press Option+Command+0 (the number zero)
  • Click the Show/Hide Utilities icon in the upper right corner of the Xcode window as shown in Figure 2-8

9781484212349_Fig02-08.jpg

Figure 2-8. The Show/Hide Utilities icon

By selectively showing or hiding the Navigator pane, the Debug area, or the Utilities pane, you can make the Xcode window look less cluttered and provide more room for the parts of Xcode that you want to see. To quickly open or hide these three panes, it’s usually faster to click on the Show/Hide Navigator, Debug area, or Utilities icons in the upper right corner of the Xcode window.

Creating and Managing Files

Any time you need to create a project (that represents a brand new program) or a file (to add to an existing project), you have three choices:

  • Press Command+N
  • Choose File image New to display a submenu as shown in Figure 2-9

    9781484212349_Fig02-09.jpg

    Figure 2-9. The File image New command displays a submenu that lets you choose to create a File or a Project

  • Right-click on any file displayed in the Navigator pane to display a pop-up menu as shown in Figure 2-10

9781484212349_Fig02-10.jpg

Figure 2-10. Right-clicking on a file in the Navigator pane displays a pop-up menu that lets you choose to create a File or a Project

 Note  Right-clicking may be disabled on some Macintosh computers. You can simulate a right-click by holding down the Control key while clicking. To turn on right-clicking, click the Apple menu, choose System Preferences, and click on the Mouse or Trackpad icon. Then select the “Secondary click” check box to turn on right-clicking.

When you create a new file, you can choose whether to create a file for an OS X or iOS project. For the purposes of this book, you’ll always create files for OS X.

Besides choosing to create a file for OS X, you’ll also need to choose what type of file to create. The two most common types of files you’ll create will be either files that can hold Swift code (organized under the Source category as shown in Figure 2-11) or files that can hold a user interface (organized under the User Interface category as shown in Figure 2-12).

9781484212349_Fig02-11.jpg

Figure 2-11. One type of file you can create holds Swift code

9781484212349_Fig02-12.jpg

Figure 2-12. A second type of file you can create holds part of your program’s user interface

When you create a file, that file appears in the Project Navigator. The Navigator pane can actually display several different types of information, but the most common is the Project Navigator, which lists of all the files that make up your project. To open the Project Navigator within the Navigator pane, you have three choices:

  • Choose View image Navigators image Show Project Navigator
  • Press Command+1
  • Click on the Show the Project Navigator icon as shown in Figure 2-13

9781484212349_Fig02-13.jpg

Figure 2-13. The Project Navigator pane lists all the files that make up a project

The Project Navigator closely resembles the Finder by displaying files and folders. To rename a file or folder, just select it and press Return to edit its name.

To move a file or folder, just drag it with the mouse and drop it in a new location.

To select one or more items, hold down the Command key and click on a file or folder.

Just like the Finder, the Project Navigator lets you organize files into folders. This lets you group related files together and tuck them out of sight so they don’t clutter the Project Navigator. To create a folder, click on a file or folder in the Project Navigator and then choose one of the following:

  • Choose File image New image Group (or Group from Selection to store one or more selected files in a folder)
  • Press Option+Command+N
  • Right-click on any file or folder in the Project Navigator, and when a pop-up menu appears, choose New Group (or New Group from Selection to store one or more selected files in a folder)

To delete a file or folder, select a file or folder and then choose one of the following:

  • Choose Edit image Delete
  • Press the Delete key or Command+Backspace
  • Right-click on any file or folder in the Project Navigator, and when a pop-up menu appears, choose Delete

 Note  When you delete a file or folder, you’ll have the option of Remove Reference (which removes a file/folder from a project but does not physically delete it from your Macintosh) or Move to Trash (which removes a file/folder from a project and physically deletes it from your Macintosh).

Perhaps the most important use for the Project Navigator is to let you edit a file in a project. When you click on a file in the Project Navigator, the middle pane of the Xcode window displays the contents of your selected file, which will either hold Swift code or your user interface as shown in Figure 2-14.

9781484212349_Fig02-14.jpg

Figure 2-14. Selecting a file in the Navigator pane displays the contents of that file

Creating and Customizing a User Interface

The Utilities pane is most often used for creating and customizing your project’s user interface. With OS X programs, user interface files may be one of two types:

  • .xib files
  • .storyboard files

When you create a project, you can choose which type you want to use. In general, .xib files are used for single window user interfaces while .storyboard files are used for multiple windows that are linked to appear in a certain order. It’s possible to mix both .xib and .storyboard files to create a user interface or just use .xib or .storyboard files exclusively.

Whether you use .xib or .storyboard files, you’ll need to use the Utilities pane for two purposes. First, you’ll need to drag and drop items on to your user interface such as buttons, text fields, and pictures. Second, you’ll need to customize those user interface items by changing their names, color, or size.

To design a user interface, you start with the Object Library, which appears at the bottom of the Utilities pane as shown in Figure 2-15. To open the Object Library, you can do the following:

  • Choose View image Utilities image Show Object Library
  • Press Control+Option+Command+3
  • Click the Show Object Library icon

9781484212349_Fig02-15.jpg

Figure 2-15. The Object Library contains different user interface items

To find a user interface item in the Object Library, you can simply scroll up and down the list. However, if you know the name of the item you want, a faster method is to click in the Search field at the bottom of the Object Library window, type all or part of the name of the item you want, and press Return. The Object Library will then show only those items that match what you typed. So if you typed “Button,” then the Object Library would only display different buttons you can add to your user interface.

After you have placed one or more items on your user interface, the second step is to customize those items using the Inspector pane. The Inspector pane can display several types of panes but the two most common you’ll use to customize user interface items are the:

  • Attributes Inspector
  • Size Inspector

The Attributes Inspector lets you modify the appearance of an item. The Size Inspector lets you modify the size and position of an item on the user interface.

To open the Attributes Inspector, you can do one of the following:

  • Choose View image Utilities image Show Attributes Inspector
  • Press Option+Command+4
  • Click the Show Attributes Inspector as shown in Figure 2-16

9781484212349_Fig02-16.jpg

Figure 2-16. The Show Attributes Inspector and Show Size Inspector icons.

To open the Size Inspector, you can do one of the following:

  • Choose View image Utilities image Show Size Inspector
  • Press Option+Command+5
  • Click the Show Size Inspector as shown in Figure 2-16

After opening the Attributes or Size Inspectors, you can then click on a user interface item to modify (such as a button or text field) and then type or choose different options to modify that item’s appearance.

The Standard and Assistant Editors

You’ll spend most of your time using the editor or Interface Builder. The editor acts like a word processor and lets you type and edit Swift code. Interface Builder acts like a drawing program and lets you drag and drop, resize, and move items on the user interface such as buttons, text fields, and graphics.

To edit Swift code, just click on any file in the Project Navigator pane that contains the .swift file extension. When you click on a .swift file, the contents of that file appears in the middle Xcode pane as shown in Figure 2-17.

9781484212349_Fig02-17.jpg

Figure 2-17. Clicking on a .swift file displays the Swift code stored in that file

To edit your user interface, just click on any file in the Project Navigator pane that contains the .xib or .storyboard file extension. This displays the contents of that user interface in the middle Xcode pane as shown in Figure 2-18.

9781484212349_Fig02-18.jpg

Figure 2-18. Clicking on a .xib or .storyboard file displays the user interface stored in that file

Each time you click on a different file in the Project Navigator pane, Xcode displays the contents of that new file in the middle pane of the Xcode window.

When Xcode displays the contents of a single file in its middle pane, that’s called the Standard Editor. However, it’s often useful to view the contents of two files side by side. When Xcode displays two file contents side by side, that second file pane is called the Assistant Editor .

The most common reason to open the Assistant Editor is when you have the user interface displayed in the left pane and a Swift file displayed in the right pane as shown in Figure 2-19. The purpose for this is to let you link your user interface to your Swift code.

9781484212349_Fig02-19.jpg

Figure 2-19. The Assistant Editor displays two file contents side by side

When you create a user interface, it’s completely independent from your Swift code (and vice versa). That gives you the freedom to replace your user interface with a new user interface without affecting how your Swift code behaves. Likewise, this also lets you modify your Swift code without worrying about affecting your user interface.

In the old days, programmers had to create their user interfaces using code, which meant changing your code often affected your user interface, increasing the chance of errors or bugs in your program. By separating the user interface from your code, Xcode eliminates this problem and helps you create more reliable software.

Initially when you create a user interface, it won’t do anything. That’s why you need to link some of your user interface items to Swift code that makes the user interface actually work. For example, if your user interface displays a button, clicking on that button won’t do anything. You have to write Swift code to tell that button what to do. Then you have to link your button to your Swift code.

That’s the purpose of the Assistant Editor. By displaying your user interface next to your Swift code file, the Assistant Editor makes it easy to drag the mouse from your user interface to your Swift code files, creating a link between your user interface and your Swift code.

To open the Assistant Editor, you can choose one of the following:

  • Choose View image Assistant Editor image Show Assistant Editor
  • Press Option+Command+Return
  • Click the Assistant Editor icon as shown in Figure 2-20

9781484212349_Fig02-20.jpg

Figure 2-20. The Standard and Assistant Editor icons

To close the Assistant Editor, you have to open the Standard Editor in one of the following ways:

  • Choose View image Standard Editor image Show Standard Editor
  • Press Command+Return
  • Click the Standard Editor icon as shown in Figure 2-20

One problem with using the Assistant Editor is that Xcode displays both file contents in narrow panes. If you prefer seeing two or more files in a wider view, you can display them in separate tabs. This lets you see the contents of each file in the middle pane of Xcode and to simply click on a tab to see a different file’s contents.

The drawback of tabs is that you can only see the contents of one file at a time. A second drawback is that you can’t see your user interface next to your Swift code so you can’t connect user interface items to your Swift code.

To create a tab, choose one of the following:

  • Choose File image New image Tab
  • Press Command+T

Now you can click on each tab to view the contents of that file. To close a tab, move the mouse over the tab and choose one of the following:

  • Click the close icon (it looks like a big X) in the left of the tab
  • Right-click on the tab and when a pop-up menu appears, click Close Tab as shown in Figure 2-21

9781484212349_Fig02-21.jpg

Figure 2-21. Right-clicking on a tab displays a pop-up menu

Running a Program

Typically you’ll run your program multiple times to test and make sure it works right. When you run a program, Xcode compiles it into a file that you can distribute to others if you wish. Running a program lets you test your program directly on your Macintosh.

The three ways to run a program are:

  • Choose Product image Run
  • Press Command+R
  • Click the Run icon as shown in Figure 2-22

9781484212349_Fig02-22.jpg

Figure 2-22. The Run and Stop icons let you test your OS X project

Once your program is running, you can stop it in several ways:

  • Choose YourProgramName image Quit where “YourProgramName” is the name of your project
  • Click the icon on the Dock that represents your program and press Command+Q
  • Click the Stop icon in Xcode as shown in Figure 2-22

If your program has major errors that prevent it from responding to any commands, you can also use the Force Quit command to shut down your program. To use Force Quit, click the Apple menu and choose Force Quit.

When the Force Quit window appears, click on your program’s name and then click the Force Quit button to shut it down.

Summary

This chapter introduced you to the major features of Xcode and showed various ways to choose common commands. Don’t worry about memorizing or fully understanding everything in this chapter just yet. Think of this chapter as an introduction to Xcode that you can refer back to whenever you have a question.

In the next chapter, we’ll actually go through the typical process of creating an OS X program using Xcode. That way you can see the purpose of Xcode’s various features that you learned about in this chapter.

Just remember that with Xcode, there are often two or more ways to choose the exact same command, but you don’t have to learn all of these different ways. All you have to do is choose the method you like best and ignore the other methods.

As you can see, Xcode offers everything you need to turn your ideas into a fully functional OS X program that you can sell and distribute to others. By learning Xcode, you’ll be learning to use the programming tool that professional programmers use to create both OS X and iOS software. The more you use Xcode, the more comfortable you’ll get and the less intimidating Xcode’s user interface will feel. Pretty soon, you’ll be using Xcode like a pro.

Remember, the real key to programming isn’t having the best programming tools but knowing how to use them. The more you use Xcode, the more you’ll understand how to turn your great ideas into actual working programs. Learning Xcode is your path to writing software for the Macintosh and Apple’s many other devices such as the iPhone, iPad, and Apple Watch. By learning Xcode today, you can take advantage of the many lucrative programming opportunities that will be available now and far into the future. Welcome to the world of Xcode!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset