In todays post, we’re going to take a look at Xcode 5, the integrated development environment provided by Apple, and the tool that we will be using for almost all our iOS application development. The aim of this post is to orient you with the main parts of the Xcode 5 interface so that as we move forwards with building our apps, we can focus on the task of creating the app rather than learning our way around Xcode.
By now, you should have already installed Xcode. In order to properly follow along in this post and take a true look round the interface, you will need to have created yourself a new empty project. If you haven’t done both of these steps already head over to my other posts on How To Install Xcode and How to Create a New Project in Xcode 5 and come back here when you’re done….
All set? Let’s start the tour…
The Xcode Workspace Window
The Xcode Workspace Window is the main window that Xcode displays after you have created a project.
As you can see, the Xcode Workspace Window is divided into a number of distinct areas:
- Navigator Area
- Editor Area
- Debug Area
- Utility Area
We’ll take a look at each of them in turn.
The Toolbar, running along the top of the Xcode Workspace Window, provides you with some high-level controls for building and running your application, getting feedback on your project and the tasks that are in progress as well as allowing you to configure the Xcode Workspace Window itself.
On the left-hand side of the Toolbar, there are two buttons:
Run button, which builds and runs your application
Stop button which, as you might expect, stops your application running.
If you click and hold on the Run button, you will also see a pop-up menu that provides some additional options:
- Run – Allows you to simply run the application. The same as simply clicking the Run button.
- Test – Allows you to run unit tests on your application.
- Profile – Allows you to characterise your applications performance characteristics.
- Analyze – Allows you to perform static analysis on your applications code and helps identify any logical code errors.
Right next to the Run and Stop buttons is the Scheme Menu.A Scheme is a collection of settings that specifies the targets to build for your project (i.e. which products will be built), the configuration to use when building them and the environment in which to run the resulting executables (such as on a real device or the iOS Simulator).
The main thing you’ll need to focus on just now is the Destination section of the Scheme Menu.
This section allows you to configure where your application will run after it has been built. If you click it, you’ll see a pop-up menu that allows you to switch between running your app in the iOS Simulator and running it on a real device (if it is connected).
To the right of the Scheme Menu in the middle of the toolbar is the Activity Viewer.
This shows the progress of any tasks that are currently executing (such as building, linking and running your application) as well as other information about your project such as warnings or errors.
To the right of that, are three icons that make up the Editor Selector.
The Editor Selector allows you to configure the main Editor Area of the Xcode Workspace Window. The three buttons are:
- Standard Editor – Shows a single pane with the contents of the a file selected from the Project Browser.
- Assistant Editor – Shows two connected panes where the content in the right-hand pane is logically related to the content in the left-hand pane.
- Version Editor – Shows the differences between the selected file in one pane and another version of the file in the second pane.
To the right of the Editor Selector buttons and on the far right-hand side of the Toolbar are the View Selector buttons.
These buttons are used to optionally hide the Navigator Area, Debug Area and Utility Area respectively. They are mainly used if you want some more screen real-estate and can be extremely useful when editing code files or designing your applications user interface.
The Navigator Area
On the left-hand side of the Xcode Workspace Window is the Navigator Area.
The Navigator Area is split vertically into three main sections:
- Navigator Selector Bar
- Content Area
- Filter Bar
At the top of the Navigator Area, is the Navigator Selector Bar. This allows you to choose between the 8 different navigators for your project, each of which displays a slightly different perspective on the contents and state of your project.
From left-to right the icons represent:
- Project Navigator – Allows you to manage the files within your project and choose which file to display within the Editor Area of the Xcode Project Window. It also provides you with information about files that have some status with your source code version control system.
- Symbol Navigator – Allows you to browse through the class hierarchy in your source code.
- Find Navigator – Allows you search your project files and options for a particular string.
- Issue Navigator – Displays issues with your project such as warnings, errors.
- Test Navigator – Allows you to create, manage and run one or more unit tests for your project.
- Debug Navigator – Allows you to examine the running threads and stack information for your application whilst it is running.
- Breakpoint Navigator – Allows you to managed the breakpoints for your application, points at which your application will automatically stop when it is running to allow you to investigate what it is doing.
- Log Navigator – Allows you to view the history of your activites within your Xcode project such as performing builds, running unit tests or performing debugging.
In the middle of the Navigator Area is the Content Area. This shows the information relevant to the currently selected button from the Navigator Selector Bar.
At the bottom of the Navigator Area is the Filter Bar.
The Filter Bar allows you to filter the items displayed in the Content Area. Contents can be filtered either by typing a term in the search field or by clicking one of two buttons:
- Show recently changed files.
- Show only those files that have status within your source control system.
The third button allows you a quick way to add files to your project.
The Editor Area
The central part of the Xcode Workspace Window is the Editor Area.
This is always shown and depending on the file is selected in the Project Navigator will show one of:
- Source Editor – Allows you to write and edit your source code. This is usually displayed if you have selected a file that ends in either .h or .m in the Project Navigator.
- Interface Builder – Allows you to graphically design and develop the interface for your application. It is automatically displayed if you select a file ending in either .storyboard or .xib in the Project Navigator.
- Project Editor – Allows you to view the settings for your project and edit how the project is built, which targets it is built for and which features will be included within your application. This is usually the first screen that is displayed after you create your application and will be shown automatically when you select your project at the top of the Project Navigator.
In addition there are a number of other editors that you might see over time though they are less commonly used than the three listed above:
- Property List Editor – Allows you to view and edit the contents of property lists (also known as plists).
- Rich Text Editor – Allows you to edit the contents of Rich Text (.rtf) files.
- Core Data Model Editor – Allows you to implement or modify a Core Data Model.
- Mapping Model Editor – Allows you to specify the mapping between one version of a Core Data Model and another.
- Script Editor – Allows you to edit AppleScript script files.
- Scripting Dictionary Editor – Which allows you to create and edit scripting definition (.sdef) file for your application.
In addition, the contents of the Editor Area are also affected by the Editor Selector buttons in the Toolbar.
At the top of the Editor Area is the Jump Bar. The Jump Bar provides a quick hierarchical mechanism of navigating around your project. The contents of the jump bar are automatically customized based on the content that is currently being displayed in the Editor Area. From left-to right the Jump Bar consists of three main sections:
- Related Items Menu – which when clicked displays a pop-up menu that provides additional related selections based on the current contents of the Editor Area.
- Previous and Next Buttons – which allows you to step back and forward through your navigation history
- Hierarchical Path Menu – Made up of one or more segments. If you select a segment in the hierarchical path menu you will see another pop-up menu that displays relevant sub items and allows you to quickly navigate your way around.
The Debug Area
At the bottom of the Xcode Workspace Window is the Debug Area. By default this is not displayed but can be shown by selecting the second of the three icons that make up the View Selector buttons in the Toolbar. Alternatively, it can be displayed by pressing (⇧⌘Y) on your keyboard.
The Debug Area allows you to control the execution of your code, view program variables, view console output and provides controls for the debugger. The Debug Area in itself is split into a number of different areas:
- Debug Toolbar
- Variable Viewer
- Console Output
At the top of the Debug Area is the Debug Toolbar with a number of icons on the left-hand side. These represent:
- Hide / Show the Debug Area
- Turn On All Breakpoints
- Pause / Continue Execution of Your Application
- Step Over The Current Line of Code Whilst Debugging
- Step Into the Current Method Whilst Debugging
- Step Out of the Current Method Whilst Debugging
- Simulate a Location
On the right-hand side of the Toolbar is a Jump Bar similar to that in the Editor Window only this time, it allows you to navigate the threads and call-stack for your application.
On the left-hand side of the Debug Area is the Variable Viewer. This allows you examine the state of the variables within your application. As with the Navigator Area, there is also a Filter Bar at the bottom that allows you configure what is displayed in the Variable Viewer.
On the right-hand side of the Debug Area is the Console Output area. This displays any console output for your application.
The Utility Area
On the right-hand side of the Xcode Workspace Window is the Utility Area.
The Utility Area is divided vertically into five main areas:
- Inspector Selector Bar
- Inspector Pane
- Library Selector Bar
- Library Pane
- Library Filter Bar
At the top of the Utility Area is the Inspector Selector Bar. You can use this to select the inspector that is most relevant for your current task. It consists of a number of icons, two of which are always displayed:
- File Inspector – Allows you to manage the meta-data for a file you have selected in the Project Navigator such as its name, type, path etc.
- Quick Help Inspector – Provides a quick way to view documentation about a symbol, interface element or build setting that you have selected in the Editor Area.
If you have Interface Builder displayed in the Editor Area and you can select an interface element and you will also see a number of other icons in the Inspector Selector Bar:
- Identity Inspector – Allows you to manage the metadata for an object such as its class name, accessibility information, runtime attributes etc.
- Attributes Inspector – Allows you to configure the attributes for a selected interface object. The attributes available are specific to interface the object you have selected.
- Size Inspector – Allows you to specify the size characteristics, position and auto-sizing rules for a selected interface object.
- Connections Inspector – Allows you to view the outlets and actions for an interface object as well as making new connections and breaking existing ones.
Below the Inspector Selector Bar is the Inspector Pane. The contents displayed in this area are dependent on the current selection in the Inspector Selector Bar.
Below the Inspector Pane is the Library Selector Bar which contains four icons which from left to right represent:
- File Templates – Which provides access to templates for common files and code constructs simply by dragging it to the Project Navigator.
- Code Snippets – Which provides access to short pieces of source code that you can use in your software, simply by dragging them into the Source Editor window.
- Objects – Which provide access to interface objects which can simply be dragged into your Interface Builder editor window.
- Media Files – Which provides access to graphics, sound and icons, again by simply dragging them into your Interface Builder editor window.
Blow the Library Selector Bar is the Library Pane itself. This displays the current contents of the library, whether it be a file template, code snippet, object or media file.
Finally, at the bottom of the Utility Area is the Library Filter Bar. This is used to filter the content displayed in the Library Pane and can be extremely useful, especially when trying to find interface objects.
The Organizer WindowNext up on our tour of the Xcode Interface is the Organizer Window. The Organizer Window collects together a number of functions that support your development activities such as managing devices, project and build products. The Organizer Window can be shown by selecting the Window > Organizer Xcode menu or by selecting ⇧⌘1 on your keyboard.
The Organizer Window itself consists of three different organizers. You can switch between the different organizers using the icons at the top of the window. From left-to-right the icons respectively represent:
- Device Organizer – Allows you to provision devices for use in your development, manage your developer profile, install iOS on a device and work with your application and its data.
- Projects Organizer – Allows you to manage an opened project and its associated data and snapshots.
- Archives Organizer – Allows you to manage build product archives resulting from your distribution schemes.
The Documentation Window
Our final, and potentially the most important stop on our tour of the Xcode Interface is the Documentation Window. This is your interface to the copious amounts of documentation, sample code and videos that Apple provide on Xcode, Objective-C and the other libraries available in the iOS SDK. The Documentation Window can be displayed either by selecting the Help > Documentation and API Reference Xcode menu or by selecting ⌥⌘? on your keyboard.
The Documentation Window is split vertically into two main sections; the Toolbar at the top and the Content Pane toward the bottom of the window. The Toolbar contains the following icons along with a search field:
- Forward and Back Buttons – Allows you to navigate through your search history.
- Show / Hide Navigator – Which shows or hides the documentation navigator and displays the different documentation sets that are available.
- Show / Hide Table of Contents – Which as you might expect, shows or hides the table of contents for the documentation that you’re looking at.
- Share – Allows you to share the current document either by adding a bookmark, sending it via email or iMessage or opening it as a PDF.
Toward the bottom of the Documentation Window is the Content Pane. With both the Navigator and Table of Contents icons selected in the Toolbar, the Navigator will be displayed on the left hand side of the content pane. As I hinted at above the Navigator shows the different documentation sets that are available within your current Xcode installation and provides you with an easy way to browse through that documentation.
To the right of the Navigator, is the Table of Contents for the current document that is selected. This will update automatically based on the documentation you select in the Navigator and provides a quick way of navigating within your chosen document.
Finally, to the right-hand side of the Table of Contents is the document content itself. This right-hand area also doubles up to display the search results for any search you’ve made using the search field in the Toolbar.
Ending the Xcode Interface Tour
And with that, we’ll draw our tour to a close. I’m sure you’ll find, as you continue your journey into iOS app development, Xcode is a well designed, well integrated development environment and is an almost essential part of the process for getting your app into the App Store. I hope this post has given you a better understanding of the major sections of the Xcode Interface, and in true tour-guide style, if you have any tips or comments or think I’ve missed something useful, please feel free to leave a comment below. Until next time.