📱 Using Text Fields, Buttons, Labels, Web Views, and Page Controllers in iOS (Xcode)

---

✅ 1. Overview

These UI components are essential for building interactive iOS apps:

• Text Field → User input
• Button → Trigger actions
• Label → Display text
• Web View → Display web content
• Page Controller → Swipe between screens

---

🧠 2. Key UI Components

---

🔹 1. Text Field (UITextField)

📌 Definition

A Text Field allows users to enter text input.

📍 Uses

• Login forms (username, password)
• Search bars

⚙️ Example

@IBOutlet weak var nameField: UITextField!

let userName = nameField.text

---

🔹 2. Label (UILabel)

📌 Definition

A Label displays read-only text.

📍 Uses

• Titles
• Messages
• Output display

⚙️ Example

@IBOutlet weak var resultLabel: UILabel!
resultLabel.text = "Welcome!"

---

🔹 3. Button (UIButton)

📌 Definition

A Button is used to trigger an action when tapped.

📍 Uses

• Submit forms
• Navigate screens

⚙️ Example

@IBAction func submitPressed(_ sender: UIButton) {
    resultLabel.text = "Submitted!"
}

---

🔹 4. Web View (WKWebView)

📌 Definition

A Web View is used to display web pages inside the app.

📍 Uses

• Open websites
• Show online content

⚙️ Example

import WebKit

@IBOutlet weak var webView: WKWebView!

if let url = URL(string: "https://www.apple.com") {
    webView.load(URLRequest(url: url))
}

---

🔹 5. Page Controller (UIPageViewController)

📌 Definition

A Page Controller allows users to swipe between multiple screens/pages.

📍 Uses

• App tutorials
• Image sliders
• Onboarding screens

---

🏗️ 3. How They Work Together

👉 Example Flow:

1. User enters text in Text Field
2. Presses Button
3. Action triggered
4. Result shown in Label
5. Optional: Open link in Web View
6. Navigate pages using Page Controller

---

📊 Diagram Description (for Exams)

Draw:

TextField → Button → IBAction → Label Update
                     ↓
                  WebView (optional)
                     ↓
             Page Controller (multiple screens)

---

⚙️ 4. Step-by-Step Implementation

---

🔹 Step 1: Add UI Elements

From Objects Library:

• Drag:

  • Text Field
  • Label
  • Button
  • Web View

---

🔹 Step 2: Connect Outlets

@IBOutlet weak var textField: UITextField!
@IBOutlet weak var label: UILabel!
@IBOutlet weak var webView: WKWebView!

---

🔹 Step 3: Add Button Action

@IBAction func showText(_ sender: UIButton) {
    label.text = textField.text
}

---

🔹 Step 4: Load Web Content

if let url = URL(string: "https://example.com") {
    webView.load(URLRequest(url: url))
}

---

🔹 Step 5: Setup Page Controller

Basic steps:

1. Create multiple view controllers
2. Embed in UIPageViewController
3. Enable swipe navigation

---

📌 5. Important Rules / Tips

• Use secure text entry for passwords
• Always validate user input
• Keep UI responsive with Auto Layout
• Do not overload one screen with too many elements
• Use Page Controller for better UX in tutorials

---

💡 6. Example Application

🎯 Simple Search App

• Text Field → Enter URL
• Button → Load page
• Web View → Display website

@IBAction func loadWebsite(_ sender: UIButton) {
    if let text = textField.text,
       let url = URL(string: text) {
        webView.load(URLRequest(url: url))
    }
}

---

📝 7. Likely Exam Questions

1. Define UITextField and its uses.
2. What is UILabel? Explain with example.
3. How does UIButton work in iOS?
4. Explain WKWebView and its purpose.
5. What is UIPageViewController?
6. Write code to display text from TextField to Label.
7. How do you load a webpage inside an app?
8. Explain interaction between UI components.

---

📚 8. Quick Revision Summary

• Text Field → Input
• Label → Output
• Button → Action trigger
• Web View → Display web pages
• Page Controller → Swipe between screens

👉 Flow: User Input → Button → Action → Output / Navigation

---