1.4. UIButton, and UIAlertController

At this point, We have a TextField to get user inputs from the keyboard. Now, let's add a button below the TextField. Our goal is if a user types something on the TextField and presses the button, the app should echo the text back to the user with an alert.

We will use two UI elements for this purpose: UIButton, and UIAlertController.

Adding a new button

Let's place a Button on the Screen, center it, and anchor it 16 points below the TextField.

Objects library

Drag and drop button

Center horizontally

Add anchor to the bottom of the TextField

Button is now placed

Now, let's change the attributes of the Button. If you select the Button and look at the right pane, you will see the attributes of it. You can play with many different things, like the Style, Title, Background, and Foreground styling, etc. For now, we will just change the Title. Let's change the Title from "Button" to "Click me!"

Now, run the app, and you will see that you have the button "Click me!", and can click on it!

ViewController and AlertController

Now, we need to handle the click on the Button. So, we need to patch the frontend UI elements to our ViewController code.

We will not use the following technique very much after this lesson since most people do not use Storyboards anymore. However, it's worth the knowledge.

So, we will open the Main storyboard and the ViewController code side by side. To do that, Go to the menu, Editor -> Assistant. After you click Assistant, it opens the Viewcontroller to right of the Storyboard:

Basically, you have the front end on the left, and on the right, you have the back end.

Let's patch the UI elements with the back-end code (ViewController).

Think about what UI elements we need to handle from the backend here. We need the TextField and the Button. So, press the 'control' key on your keyboard (not the command key) and keep it pressed. While pressing the control button, click on the TextField from the storyboard, and do not release. Now, drag the mouse pointer to the right ViewController (keep both the control and mouse pointer pressed). A blue line should appear. Place it inside the class ViewController. An outlet connector appears; put the name of the logical TextField as "textFIeldUser."

It creates a @IBOutlet var textFieldUser: UITextField! variable in your ViewController. @IBOutlet means it's an outlet from the Interface Builder (storyboard). In short, textFieldUser is the logical instance of the TextField from storyboard in the ViewController class.

Let's add the Button outlet to the ViewController the same way. And name the Button "buttonClickMe."

Adding button action

Now, we need to handle if the user taps on buttonClickMe. We need to handle the event when the view finishes loading. So, find the viewDidLoad() method. When the screen is done populating the UI elements and displaying them, this method is called by the system.

Let's type buttonClickMe in viewDidLoad() method, and press . and then you will see Xcode automatically shows you the possible usage of the button. Then find the addTarget() function.

addTarget() has three parameters: target, action, and for.

• target: means where (view) we would listen for an event to happen. In our case, it is self. self is the current view, which is the View Controller screen.

• action: means which method to call if an event happens. Notice that it is asking for a Selector type function. 'Selector' is an API from the iOS system. iOS is built with Objective-C, and in the iOS system, Objective-C is heavily used. So, when an event occurs (the user taps on the Button), the system needs to delegate that to a method written in Swift to act based on the event. @objc means the Objective-C code of iOS can now read this method and delegate the event to the function to handle. We define a method onButtonClickedMeTapped() to handle the tap event.

• for: means what kind of event the system would wait for. For example, here we are using .touchUpInside. It means, If the button is tapped inside, catch the event, and delegate the event to the onButtonClickedMeTapped() method.

Let's define the onButtonClickMeTapped() method:

@objc func onButtonClickMeTapped(){
        print("Button Clicked!!")
}

Now, let's run the app and click the button.

You'll see that at the bottom right of Xcode, "Button clicked!!" is printed on the Output area.

Displaying an Alert

Now, we will display an alert instead of just printing "Button clicked!!" So, let's define an AlertController when the button is clicked. We want to display the text the user added in textFieldUser. So, we can write the code below to fetch what the user typed in the text field.

@objc func onButtonClickMeTapped(){
    //print("Button Clicked!!")
    // MARK: fetching the text the user typed...
    let text = textFieldUser.text
    
    print(text)

}

If you run the app, click the button, and check what's printed in the output, you will see:

Optional(""). That means textFieldUser.text is an Optional String. So you need to unwrap it and then use it.

@objc func onButtonClickMeTapped(){
        //print("Button Clicked!!")
        // MARK: fetching the text the user typed...
        let text = textFieldUser.text
        
        if let unwrappedText = text{
            print(unwrappedText)
        }
    }

Now, it will print the string the user types. Let's show the alert.

If the text is empty, we want to show an error message saying the text field should not be empty. Otherwise, we will show the text typed.

Let's write the following code:

@objc func onButtonClickMeTapped(){
    //print("Button Clicked!!")
    // MARK: fetching the text the user typed...
    let text = textFieldUser.text
    
    //Unwrapping the optional text...
    if let unwrappedText = text{
        //print(unwrappedText)
        
        if(unwrappedText.isEmpty){ //The user didn't put anything...
            showErrorAlert()
        } else{ //The user put some texts...
            showAlertText(text: unwrappedText)
        }
    }
}

//MARK: Error alert...
func showErrorAlert(){
    let alert = UIAlertController(
        title: "Error!", message: "Text Field must not be empty!", 
        preferredStyle: .alert
    )
    
    alert.addAction(UIAlertAction(title: "OK", style: .default))
    
    self.present(alert, animated: true)
}

//MARK: text alert...
func showAlertText(text:String){
    let alert = UIAlertController(
        title: "You said:", 
        message: "\(text)", 
        preferredStyle: .alert
    )
    
    alert.addAction(UIAlertAction(title: "OK", style: .default))
    
    self.present(alert, animated: true)
}

In the above code, we first define a UIAlertController. The initializer of the alert controller requires three parameters.

• title is the title of the alert.

• message is the String the alert will display.

• and, preferredStyle is the way you want to display the alert. If it is a simple alert, use .alert.

Then you need to add action buttons for the alert, like "OK" or "Cancel." We just added an "OK" button here by calling addAction().

Now let's run the app:

Now, we are almost done with our first app. The entire code in ViewController so far is:

//
//  ViewController.swift
//  App1
//
//  Created by Sakib Miazi on 5/9/23.
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet var buttonClickMe: UIButton!
    @IBOutlet var textFieldUser: UITextField!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        buttonClickMe.addTarget(self, action: #selector(onButtonClickMeTapped), for: .touchUpInside)
    }
    
    @objc func onButtonClickMeTapped(){
        //print("Button Clicked!!")
        // MARK: fetching the text the user typed...
        let text = textFieldUser.text
        
        //Unwrapping the optional text...
        if let unwrappedText = text{
            //print(unwrappedText)
            
            if(unwrappedText.isEmpty){ //The user didn't put anything...
                showErrorAlert()
            } else{ //The user put some texts...
                showAlertText(text: unwrappedText)
            }
        }
    }
    
    //MARK: Error alert...
    func showErrorAlert(){
        let alert = UIAlertController(
            title: "Error!", message: "Text Field must not be empty!", 
            preferredStyle: .alert
        )
        
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        
        self.present(alert, animated: true)
    }
    
    //MARK: text alert...
    func showAlertText(text:String){
        let alert = UIAlertController(
            title: "You said:", 
            message: "\(text)", 
            preferredStyle: .alert
        )
        
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        
        self.present(alert, animated: true)
    }

}