Data Binding (The M Project 1.x) - mwaylabs/The-M-Project GitHub Wiki

Introduction

Data Binding is a core concept within every MVC based framework, so for sure it is also part of The M-Project. We use Data Binding to automatically update views, whenever a property they observe changes. To achieve that, we implemented the observer pattern as shown in simplified the UML diagram below.

https://github.com/mwaylabs/The-M-Project/raw/master/doc/images/observer_pattern.png

Let's get started: Two Textfields – one master, one slave

To begin understanding the concept behind the Data Binding, let's take a look at a simple example app. Imagine you've got two textfield on your screen. You click into the first one – the master, begin to type and want the second one – the slave – to display exactly the same text. The figure below shows how this could look like.

https://github.com/mwaylabs/The-M-Project/raw/master/doc/images/observer_pattern_screenshot01.png

How does this work? How does the first textfield tell the second one that it's content changed? Do they communicate directly at all? If you take a look at the observer pattern UML diagram above, you will see that they don't. Instead there is a “central instance”, an M.Observable, that knows that the second textfield observes a property that is again set by the first textfield. This “central instance” is realised as a property of the corresponding controller to our views. The following sequence diagram illustrates this process of changing the value inside the first textfield and delegating these changes right to the second textfield.