Workshop 12: Add a Playground File in An iOS Project

In this workshop you will learn how to add a playground file in the iOS project called Swift Variable. You will get a bird’s eye view of the playground interface. Finally, you will try out Swift code in the playground.

Add Playground in The iOS Project

The first order of business is to add a playground file in the iOS Swift Variable project. Click the Add new file (+) button located at the bottom of the Navigator area. Select the New Playground… from the pop up menu.

In the New File options window that appear on your screen, type Variable in the Name field then click the Next button.

On the next window that appear on your screen, just click the Create button.

Xcode add the Variable.playground file in the project and it look like this.

Overview of The Playground Interface

By default the playground display two panels. The one on the left is called the Code editor, the one on the right is called the Result sidebar. The narrow area on the left side of the Code Editor is called a gutter. As you can see in above image, line numbers are show in the gutter.

You can type only Swift code in the Code editor panel. As you type, the compiler compile your code and display results in the Result sidebar and/or the Timeline. If you type invalid code, the compiler warns you by displaying a red circle in the gutter.  To see details of the error and how to fix it, click the red circle and your screen will look something like this:

Now, the playground can display a third panel on the right side of the Result sidebar, and it is called a Timeline-see image below. The Timeline display various information. To show it, click the Assistant editor button. To hide the Timeline, click the Standard editor button. It is located on the left side of the Assistant editor button. Another way to hide the Timeline is to click the Remove Assistant Editor button. It’s the little x in the Timeline’s jump bar. You can think of the Timeline as an extended version of the Result sidebar.

Now, when you hover your mouse over a line in the Result sidebar, two buttons appear-see Figure A below. The first button, is called Quick Look and Figure B shows what you’ll see when you click it. The second button is called the Value History and Figure C shows what you’ll see when you click it.

Add Code in The Code Editor

To test code in the playground you simple type it in the Code editor panel. For example, add code shown in the image below, in the playground.

The first statement declared and initialized a string variable. The second statement declared and initialized an integer constant. The third statement used Swift’s println() function to display content of the userAge constant in the Result sidebar and the Timeline.

That all there is to the playground feature of Xcode 6.