Immerse yourself in the iOS environment

At this point we'll need to access 2 files at the same time: the storyboard and the controller file. 

At the top right corner of the Xcode interface you'll spot this toolbar:

 The options of this toolbar provide different layouts for the Editor panel in Xcode:

1. Standard Editor. This is a traditional view, it displays a single selected file. A visual file - like storyboard or, a code file - like our controller file.

2. Assistant Editor: This is a split view that allows working with two or more files at the same time. One of the slots is considered a primary woking file and others - assisting files. When this view is chosen Xcode makes a guess which file would be the most relevant to the current one, and, displays it as an assisting file.

3. Version Editor: This view allows to open two versions of the same file to assess or revert the changes. (This option assumes you are using a version control system. We won't use this option in this course).

We need the second view at the moment - Assistant Editor. Select the storyboard file in the Navigator on the left and click Assistant Editor icon on the toolbar we just reviewed. You should get the storyboard on the left and the code on the right.

An Outlet is connection between a UI element (a label, a button,  etc.) and the controller. Through this connection we'll be able to access any property of that element in our code. For example, we can change the text or font of our label that we originally set using the Attributes Inspector. 

To create an outlet, do the following:

1. Press and hold the Ctrl key 

2. Grab the label on the interface view and drag it to the code within the ViewController block, say above the comment "We will write our code here".

You will see a blue line appear:

When you see "Insert Outlet or Outlet Collection", you can let go. An outlet configuration popup will appear:

This popup contains the outlet's initial configuration. Most of the parameters are already pre-populated for us by Xcode, just a little left for us to complete. Let's review what's there:

• Connection: A type of connection we want to create. It already has Outlet selected - which is what we need.

• Object: A connecting object: our controller - View Controller - this is where we dragged it to.

• Name: A name we want to give to our outlet to reference the connection in our code. Since our label represents an acting task, let's keep it simple and name it  actingTask.

• Type: A type of the object we are connecting. It has UILabel already selected (UILabel describes a label).

• Storage: This is an advanced concept of programming. Leave it as is - Weak.

Lastly, click Connect!

And here it is - Xcode added the following line in your code for us (By the way, we can now remove our comment '//We will write our code here', it's no longer needed):

@IBOutlet weak var actingTask: UILabel!

Here's where to spot this new line:

To understand this new line, we need to learn a very important notion of a programming language - variables!

Variables are a core concept of any programming language, Swift is no exception. 

A variable is simply a named value stored in memory. That's all!

Let's take cooking in a kitchen as an example. Imagine if we had to hold ALL the ingredients in our hands all the time regardless what we are making and what the process is. Sounds unreasonable, doesn't it? Instead, we buy different items for different recipes and store them in our cabinets or a fridge and know what they are called. When we cook, we take those that we need for a particular dish at a time we require them during our cooking process.

Same with a computer, it has memory (cabinets) to store different values (ingredients). We name the values for our convenience in order to refer to them in a readable fashion in our code.

Variables in Swift are defined by a keyword  var. Here is an example :

var employeeCount = 16

This line means: "create a variable called employeeCount and set its value to 16."

You've managed to store an employee count value! And from now on you'll be able to use it anywhere in your code to display it on a screen or modify it. 

For example, if a company hires 4 more people, its employee count becomes 20: 

employeeCount = 20

Here we go, our variable now contains a value 20! 

We now know that a variable has a name and a value. There's a third component that defines a variable -  type. There are a number of different variable types - integer, decimal number, string, object (like view, label or button).  

To specify the type of a variable during creation, you need to add:  : myVariableType. For example :

var employeeCount: Int = 16

This line therefore means: "create a variable, which is an integer called  employeeCount  and assign the value 16 to it."

This way we know that  employeeCount  is a whole number and we don't intend to store partials .

You can also declare a variable without assigning a value to it at the moment of declaring, as long as you specify its type:

var developerCount: Int

In case we don't know a number of developers in a company, we can leave it blank.

So, we've got three ways to declare a variable:

var aVariableName = aValue // A name and an assigned value
var aVariableName: VariableType = aValue // A name, and an assigned value
var aVariableName: VariableType // A name and a type

As you already noticed, types in Swift are written in Camel case but have the first word also capitalized. I encourage you to follow the same approach when you start creating your own custom types. It would be  MyCustomType as opposed to  myCustomType.

Considering what we've just learned, how would we declare a variable for our label?

// Try to do it yourself!
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// No cheating:)
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// |
// and...
// |
// |
// |
// |
// |
// |
// |

var actingTask: UILabel // Here it is!

Good job if you declared one on your own!

Looks like something is missing compared to what Xcode generated when we create an outlet:

@IBOutlet weak var actingTask: UILabel!

Let's review the differences:

• @IBOutlet: This keyword tells Xcode that the variable in question can be connected to the Interface Builder (hence the IB prefix).

• weak: As noted previously, it's an advanced concept, and we won't go into details. I will just briefly mention, that the only another option is  strong.  The outlet variable we created,  actingTask is a reference to our label object but not the object itself. Strong means - 'hold onto it no matter what, we always expect it to be available' and weak means - 'if it looks like the object disappeared - let it go - not a big deal, we only needed it while it existed'.

• !: This is also a more advanced component of Swift. In simple terms, it indicates that the object must be available. Since we created it in our storyboard and connected it to the code, we can be sure it's always there for us. The alternative symbol is  ?- means it's optional - it may point to an object or can be blank (hold no value). 

Now we have a variable in our code that refers to the label we created in the interface. This is how we are going to alter the text in the label when we need to present a new acting task to the user! 

• An Outlet is a connection between an interface element and the code

• To create an outlet connection, you need to:

  • Switch your Editor to Assistant Editor mode

  • Perform a control-drag from the object on the interface to the code

  • Compose a Name for the outlet

  • Click on Connect to complete the outlet creation

• A Variable is a composition of three components:

  • Name

  • Type

  • Value

• A variable is declared with the keyword  var

• Creating an outlet generates the declaration of a variable

In the next chapter, we are going to create some ACTION!