Brief Introduction to iOS Development - Part 5 - Linking UI with Outlet and Action

In this session, we will be connecting various UI to the code in view controller.

First, create a new single view project called "Intro5". Drag a textfield, button and label to the storyboard in the respective order. 

Embedded all the UI into stack view.

Set constraints for stack view to 50 point from the top edge and flush the left and right edge to the margin as shown below.

Next, we set the constraints for each UI so that it flush to the left and right edge.

See result below.

Continue to do the rest for button and label. Please also be reminded to change the intrinsic size for label from default to placeholder.

After setting constraints for each UI, we set the spacing in the stack view to spread the UI.

Finally, set the text and background color for each UI as shown below.

After the preparation, we are now ready to connect the code to each UI. First, click on Show Assistant Editor  and at the same time hide all the side panel as shown below.

The assistant editor will show the storyboard on the left and view controller on the right as shown below.

On the view controller, after the sentence "class ViewController: UIViewController {" add the following line "//MARK: Properties".

Now, press control key and at the same time click on the textfield and drag the the line from the storyboard to the view controller just below the line "//MARK: Properties". A dialogue box will appear as follows. Set the name of textfield so that we can reference it. Set the type to UITextfield and click Connect. 

Next, perform the same action for label. Drag the line just below the line we have added for textfield. The details for label is shown in the dialogue box below.

The view controller will produce the following sentences once we click connect.

Next, on the view controller, add a line "// MARK: Action" just above the last }.

Control+Drag the button to the view controller with the following details

The statement in the view controller should be the same as below.

Next, we can return to standard editor as shown below.

New we need to add the following code for the UIButton.

@IBAction func i5ActionButton(sender: UIButton) {

          i5TextField.resignFirstResponder()
          let textCheck = i5TextField.text ?? ""
          if textCheck.isEmpty {
               i5Label.text = "No text in the text field! Enter something and press the button"
          } else { 
               i5Label.text = i5TextField.text 
          } 
 } 

We can also refer to the screen shot below.

Next, we need to set the textfield as shown below.

We can also change the background color for the UI so that it stands out. Please see below.

Finally, we can run the app. First click on the textfield and we can enter any text as shown below.

After we finish the text, if we click on Go. There is no response. This is because we have not add any code in response to user clicking Go/Return.

However, we have coded the button. So click on the button. The label will change to what we have just entered in the textfield. Notice that the keyboard will also disappear once we click on the button.

Now, we will explain the code in the button. Lets look at the first line.

i5TextField.resignFirstResponder()

The first line i5TextField.resignFirstResponder( ) will just hide the keyboard.

let textCheck = i5TextField.text ?? ""

The second line let textCheck = i5TextField.text ?? "" will check the textfield to see if there is any text entered. If there is text, the text which is stored in i5TextField.text will be assigned to textCheck. If there is no text in the textfield "" (no text) will be stored in textCheck

The last block of statement is a conditional statement.

if textCheck.isEmpty {
     i5Label.text = "No text in the text field! Enter something and press the button"
} else { 
     i5Label.text = i5TextField.text 
} 

We perform a check on textCheck. If textCheck is empty, the label will show the following text "No text in the text field! Enter something and press the button". If textCheck is not empty then we copy the text from the textfield to label.

Now, we have made a complete program for the first time.

A copy of this project is stored at Github at https://github.com/SwiftiCode/Intro5

*** End ***