Scribd
Upload
29 views21 pages

Data Binding: The Connection Between UI & Business Logic

Data binding is the process of establishing a connection between the user interface (UI) and business logic. It typically involves four components: a target object, target property, source object, and source property. Common ways to implement data binding in iOS include property observing, notifications, delegation, closures, key-value observing, and functional reactive programming.

Uploaded by

Lê Phương Tiến
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
29 views21 pages

Data Binding: The Connection Between UI & Business Logic

Data binding is the process of establishing a connection between the user interface (UI) and business logic. It typically involves four components: a target object, target property, source object, and source property. Common ways to implement data binding in iOS include property observing, notifications, delegation, closures, key-value observing, and functional reactive programming.

Uploaded by

Lê Phương Tiến
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Data Binding

The connection between UI & Business Logic

Mentor: Hoa Nguyen V


Presenter: Duy Tran N
Presentation

 What’s data binding

 Basic data binding concepts

 How to create a data binding in iOS


WHAT?

Data Binding is the process that established


the connection between UI & Business Logic
Basic data binding concept
Regardless of what element you are binding and the nature of your data source, each binding always follows
the model illustrated by the following figure:

Typically, each binding has these four components:


 Target object
 Target property
 Source object
 Source property
Basic data binding concept

Direction of the Data Flow


Basic data binding concept (For instance)

Target Object Target Property

userNameTextField.text = viewModel.userName

Source Object Source Property


How to binding data in iOS.

 Property Observing

 Notification

 Delegation

 Closure (Callbacks)

 Key-Value Observing (KVO)

 Functional Reactive Programming


Let’s begin with demo

One example, for all solutions:


Increase, Decrease a number, then apply it to UI using
binding.
Property Observing

This is the most simple, use some method of the property.

private var count: Int = 0 {


didSet {
NotificationCenter.default.post(
name: .countValueChanged,
object: self,
userInfo: ["count": count]
)
}
}
Notification

A container for information broadcast through a notification center to all registered observers.

Specifically in the name of the notification, it support many state of application, like some example below:
Notification

Define a name of notification (Optional)


extension Notification.Name {
static let countValueChanged = Notification.Name(rawValue: "countValueChanged")
}

Add observer in receiver


NotificationCenter.default.addObserver(self,
selector: #selector(updateCountLabel),
name: .countValueChanged,
object: nil)

Post Notification in sender


NotificationCenter.default.post(name: .countValueChanged,
object: nil)
Delegation

Delegation are a popular pattern for signaling events


Delegation

enum Action {
case increase
case decrease
} Define an enumeration

protocol ViewModelDelegate: class {


func viewModel(viewModel: DelegateBindingViewModel,
action: DelegateBindingViewModel.Action)
} Create a protocol

weak var delegate: ViewModelDelegate? Initial delegate as weak variable

delegate?.viewModel(viewModel: self, action: .increase) Send delegate


Delegation
Add delegate from sender initial place
let viewModel = DelegateBindingViewModel()
viewModel.delegate = self

Inherit from protocol & handle base on action


extension DelegateBindingViewController: ViewModelDelegate {
func viewModel(viewModel: DelegateBindingViewModel,
action: DelegateBindingViewModel.Action) {
switch action {
case .increase:
countLabel.textColor = .green
case .decrease:
countLabel.textColor = .red
}
countLabel.text = "\(viewModel.count)"
}
}
Closure
Create Box class: class Box<T> {
- Define a typealias as a closure typealias Listener = (T) -> Void
var listener: Listener?

- Value type is generic (Property Observer) var value: T {


didSet {
listener?(value)
}
}

- Initial function of class init(_ value: T) {


self.value = value
}

- Create function return a closure func bind(listener: Listener?) {


self.listener = listener
listener?(value)
}
}
Closure

final class ClosureBindingViewModel {

var count = Box(0) Create variable and inherit from class Box

func increase() {
count.value += 1
}
Modify value by access to value variable
func decrease() {
count.value -= 1
}
}
Closure

At the listener, using function bind to handle when value of variable has been changed.

viewModel.count.bind { [weak self] count in


guard let this = self else { return }
this.countLabel.text = "\(count)"
}
Key-Value Observing (KVO)

Key-Value Observation is a mechanism in Cocoa to receive callbacks when an object changes state. An
object first registers to observe a property of another object. Then, whenever that property changes
value, the observer is automatically notified
Functional Reactive Programming

Reactive programming là phương pháp lập trình với luồng dữ liệu bất đồng bộ hay những thay đổi có tính
lan truyền (the propagation of change). Khái niệm luồng (stream) rất phổ biến, bạn có thể tạo một luồng
từ bất kì kiểu dữ liệu nào: các biến (variables), giá trị đầu vào từ người dùng (user inputs), properties,
caches, data structures, etc. Có thể nói luồng là trung tâm của reactive.
Thank you so much for your attending !!
References:

https://docs.microsoft.com/en-us/dotnet/framework/wpf/data/data-binding-overview

http://reactivex.io

http://rxmarbles.com/#scan

https://github.com/blkbrds/rxswift-tutorials#get-started

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/KeyVal
ueObserving/KeyValueObserving.html

https://developer.apple.com/documentation/foundation/nsnotificationcenter

https://github.com/blkbrds/rxswift-tutorials#get-started

You might also like