Getting Started with Swift Playground

Mariusz WisniewskiMariusz Wisniewski

As Apple announced during their latest event, you can now write Swift applications and submit them to the App Store.

One of the most interesting features of Swift and the new XCode IDE are its interactive playgrounds. In the playgrounds, you can type a line of code and the result appears immediately – enabling you to run your code after you make changes without creating new projects. You can finally stop flinching in pain when you're designer tells you a button needs to be just a few pixels farther to the left.

XCode

Before you start working in a playground, make sure you've downloaded version 6 of XCode (available on the AppStore).

Once you have it installed (it may take some time), don't start a new project. Instead, hit File -> New -> Playground.

When you create a new playground file, it will be filled with this content by default:

// Playground - noun: a place where people can play

import UIKit

var str = "Hello, playground"  

The code will fill whole left side of the file, and on the right you can see its corresponding results:

SwiftPlayground_01

Adding a function

Let's add a function to the playground to see if it works properly. Start by calculating the sum of 3 + 7:

func sumOfTwoNumbers(firstNumber: Int, secondNumber: Int) -> Int {  
&nbpsp; return firstNumber + secondNumber
}

sumOfTwoNumbers(3, 7)  

SwiftPlayground_02

As you can see on the right, the result is 10 – meaning the playground is working as expected.

Timeline

If the code you write works over time and its result changes, you can enable the timeline view to see what's happening under the hood.

Here's an example of how this works. Add a loop to your code by entering:

for index in 0...10 {  
  sumOfTwoNumbers(index, index);
}

SwiftPlayground_03

Notice how the result indicates the code ran 11 times - as it actually did. Next to that result, there is an eye icon and a circle icon.

SwiftPlayground_10

Click on the circle icon to see the Value History: a chart that shows how your values changed overtime.

There are 11 discreet points on this graph. Click on one to see it's value. For example, when you click on the sum of 5 and 5, you'll get it's sum: 10.

SwiftPlayground_04

This graph also helps with more advanced calculations, because you can quickly see if something is wrong (e.g. when larger or negative numbers are taken as inputs).

Notice what happens if we change our code to multiply both numbers when the first number is greater than 5:

func sumOfTwoNumbers(firstNumber: Int, secondNumber: Int) -> Int {  
 &npsp; if (firstNumber > 5) {
 &npsp; &npsp; return firstNumber * secondNumber
&npsp; }
 &npsp; return firstNumber + secondNumber
}

the chart would now look like this:

SwiftPlayground_05

Testing UI and the Quick Look Feature

You can also use UI code in Playground - a pretty neat feature. Start here by creating and configuring a simple UILabel.

let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 30))  
label.textAlignment = NSTextAlignment.Center  
label.font = UIFont.italicSystemFontOfSize(20)  
label.textColor = UIColor.blueColor()  
label.text = "Swift Playground"  

Now, click the Quick Look icon (the eye icon) next to the last line of your code to see how the label looks.

SwiftPlayground_06

You can also see how the label would look with varying gray backgrounds. Add this loop to change it to different UIColor instances:

for var grayColor : CGFloat = 0.9; grayColor > 0.0; grayColor -= 0.1 {  
  label.backgroundColor = UIColor(white: grayColor, alpha: 1.0)
}

To see the history of how the background changed, click the Value History icon (plus sign icon), next to the line where we set the background color.

SwiftPlayground_07

More advanced UI testing - UITableView

So what about more complicated UI things like UITableView? That also requires a data source and a delegate – and those need to be instances of existing classes, right? Fortunately, it is all possible to do in the playground.

You can start by creating a class conforming to a UITableViewDelegate protocol. Inside will be two functions - one defining the height of a single row, and another returning the custom header view.

As a requirement, your class must also conform to NSObjectProtocol. You'll do that by subclassing NSObject.

To create a custom header view, use the same code you used to create a label with one of the background colors we used earlier:

class Delegate : NSObject, UITableViewDelegate {  
  func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return 44
  }

  func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
     let label = UILabel(frame: CGRect(x: 0, y: 0, width: tableView.bounds.width, height: 50))
    label.textAlignment = NSTextAlignment.Center
    label.font = UIFont.italicSystemFontOfSize(20)
    label.backgroundColor = UIColor(white: 0.2, alpha: 1.0)
    label.textColor = UIColor.blueColor()
    label.text = "Section: \(section)"
    return label
  }
}

NOTE

Remember this is just sample code to quickly implement a table view. In your project, try to register Nib for the header whenever possible and reuse it later with the function dequeueReusableHeaderFooterViewWithIdentifier(identifier:). For simplicity, you're recreating a new UILabel here, but doing so in your own app can affect its performance.


Next, add a DataSource class. Implement obligatory functions returning the number of rows in a section, a cell for index path, and as an extra - the number of sections in a table view to see how creating the header view in Delegate works:

class DataSource : NSObject, UITableViewDataSource {  
  func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 2
  }

  func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return 4
  }

  func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    var identifier = "Identifier"
    var cell : UITableViewCell? = nil
    cell = tableView.dequeueReusableCellWithIdentifier(identifier) as UITableViewCell?
    if (cell == nil) {
      cell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: identifier)
    }
    cell?.textLabel?.text = "Row: \(indexPath.row)"
    cell?.detailTextLabel?.text = "Section: \(indexPath.section)"
    return cell!
  }
}

Now you need to create Delegate and DataSource objects and set them as properties of our newly created UITableView. At the end, you have to perform a reloadData() function for the tableView to fetch data from your data source.

let delegate = Delegate()  
let dataSource = DataSource()  
let tableView = UITableView(frame: CGRect(x: 0, y: 0, width: 320, height: 480), style: UITableViewStyle.Grouped)  
tableView.delegate = delegate  
tableView.dataSource = dataSource  
tableView.reloadData()  

Now on the last line (the one with reloadData()), you can use either Quick Look or Value History to see how your tableView looks. For this example, click on the latter to see how it changes while we change the code.

SwiftPlayground_08

Now add some more info to your cells and change its background color as well as your header view look.

In the Delegate class, change the function creating header view to:

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {  
    let label = UILabel(frame: CGRect(x: 0, y: 0, width: tableView.bounds.width, height: 50))
    label.textAlignment = NSTextAlignment.Center
    label.font = UIFont.italicSystemFontOfSize(20)
    label.backgroundColor = UIColor.whiteColor()
    label.textColor = UIColor(red: 0.5, green: 0.5, blue: 1.0, alpha: 1.0)
    label.text = "Section: \(section)"
    return label
  }

And then update the function creating a cell in the Data Source:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {  
    var identifier = "Identifier"
    var cell : UITableViewCell? = nil
    cell = tableView.dequeueReusableCellWithIdentifier(identifier) as UITableViewCell?
    if (cell == nil) {
      cell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: identifier)
      cell?.backgroundColor = UIColor(red: 0.62, green: 0.86, blue: 1.0, alpha: 1.0)
    }
    cell?.textLabel?.text = "Row Number: \(indexPath.row)"
    cell?.detailTextLabel?.text = "Section Number: \(indexPath.section)"
    return cell!
  }

After a short while, Timeline will refresh, and your Table View will change:

SwiftPlayground_09

Final words

Swift's playground can be a very useful tool, especially since you can quickly test UI element designs without creating a new project or worrying about rebuild time. Swift developers will probably begin implementing apps after testing ideas in the playground first, and then they'll continue to use the playground during the development process to quickly test small changes.

If you want to learn more about Swift, check out "The Swift Programming Language" – available in iTunes. You can also leave questions or additional comments below or email us at [email protected] - we'd be happy to help you get started!

Build powerful apps in half the time

Use our serverless platform to set up your backend in minutes.

Learn more

#ios #developer, #kravmaga learner, dev relations at @syncano. Smash fear, learn anything!