{"id":963,"date":"2010-08-03T13:50:43","date_gmt":"2010-08-03T12:50:43","guid":{"rendered":"http:\/\/www.minddriven.de\/?p=963"},"modified":"2010-08-04T08:24:37","modified_gmt":"2010-08-04T07:24:37","slug":"common-ui-problem","status":"publish","type":"post","link":"https:\/\/www.minddriven.de\/index.php\/technology\/development\/design-patterns\/common-ui-problem","title":{"rendered":"A common UI problem"},"content":{"rendered":"

This blog post is all about a common UI-related programming problem. Ever since my first UI-based application I’ve come across with this problem and never found a satisfying way to resolve it (until now \ud83d\ude09 ). This first blog post is about describing the problem and my former solution approaches. In the next blog post<\/a> I will demonstrate a more proper solution.<\/p>\n

The code in these two blog posts is using WinForms and C#, but it should be easy adoptable to other UI technologies as well.<\/p>\n

Problem description<\/h3>\n

It’s a common problem: you want to react on an event like the TextChanged<\/code> event on a TextBox<\/code>, but ONLY<\/em> if the user changed<\/strong> the text and it’s not changed programmatically. For example you want to update some data, when the user changes the content of a TextBox<\/code>, but this update process should not be triggered when the progam itself sets some data and therefore updates the text. The starting point for that could be something like the following code:<\/p>\n

public partial class SomeControl : UserControl\r\n{\r\n    \/\/ ...\r\n\r\n    private ViewData _viewData;\r\n    public ViewData ViewData\r\n    {\r\n        get { return _viewData; }\r\n        set\r\n        {\r\n            _viewData = value;\r\n            if (value != null)\r\n            {\r\n                _someTextBox.Text = value.SomeValue;\r\n                \/\/ other operations\r\n            }\r\n        }\r\n    }\r\n\r\n    private void OnSomeTextBoxTextChanged(object sender, EventArgs e)\r\n    {\r\n        \/\/ perform data\/view update operations\r\n    }\r\n}<\/pre>\n
Here the OnSomeTextBoxTextChanged()<\/code> method is bound to the _someTextBox.TextChanged<\/code> event. ViewData<\/code> is a class with arbitrary data that should show up in the UI.
\nNotice the problem<\/strong>: when the ViewData<\/code> property is set programmatically the OnSomeTextBoxTextChanged()<\/code> method is being executed, which is not what was intended (firing the event only when the user changes the value of the TextBox<\/code>).<\/p>\n
A similar problem arises with infinite loops<\/strong>. Imagine a user changes something in the UI and an event X<\/code> is fired. You hook this event and start a complex UI workflow, which at the end fires the event X<\/code> again. The proces is executed again and very easy you come into an infinite loop situation. If you are an UI developer you would very probably agree that UI event chains are often opaque and can get messy.<\/p>\n
Let’s look at some obvious, however not very elegant, solutions.<\/p>\n
Approach #1: Temporary event detach<\/h3>\n
One of those simple solution is the temporary detachment<\/strong> of the problematic event. For example if you don’t want to react on the TextChanged<\/code> event when the TextBox.Text<\/code> property is set programmatically, you could detach your event handler from TextChanged<\/code> before setting the Text<\/code> and afterwards attach it again. This approach is shown in the following  example code:<\/p>\n
public partial class SomeControl : UserControl\r\n{\r\n    \/\/ ...\r\n\r\n    private ViewData _viewData;\r\n    public ViewData ViewData\r\n    {\r\n        get { return _viewData; }\r\n        set\r\n        {\r\n            _viewData = value;\r\n            if (value != null)\r\n            {\r\n                _someTextBox.TextChanged -= OnSomeTextBoxTextChanged;\r\n                _someTextBox.Text = value.SomeValue;\r\n                _someTextBox.TextChanged += OnSomeTextBoxTextChanged;\r\n\r\n                \/\/ other operations\r\n            }\r\n        }\r\n    }\r\n\r\n    private void OnSomeTextBoxTextChanged(object sender, EventArgs e)\r\n    {\r\n        \/\/ perform data\/view update operations\r\n    }\r\n}<\/pre>\n
While this is working, it’s not a recommendable solution, because there are several shortcomings<\/strong>. First the manual event handling is not very intuitive and doesn’t explicitly reveal the intent<\/em> of the programmer with this manual process. Thus your code is more difficult to read for others (and after some months for you as well). Moreover, you get undefined states<\/em> when exceptions are thrown and caught in an outer component (and you miss a finally<\/code> which attaches the event again). Then the event handler could be detached further on and the UI isn’t working properly afterwards. The whole event detach\/attach process is getting very messy if you have complex views<\/em> with many such problematic events. Last but not least this manual event handling process binds your code tightly<\/em> to the view and you get trouble if you want to refactor several parts out.<\/p>\n
Approach #2: Boolean flags<\/h3>\n
A similarly simple approach comes with boolean flags<\/em> which indicate that a value is currently set  programmatically and thus that Changed<\/em> events should not be handled. The following code shows an example how this could solve our initial problem:<\/p>\n
public partial class SomeControl : UserControl\r\n{\r\n    \/\/ ...\r\n\r\n    private bool _isTextSetByProgram = false;\r\n\r\n    private ViewData _viewData;\r\n    public ViewData ViewData\r\n    {\r\n        get { return _viewData; }\r\n        set\r\n        {\r\n            _viewData = value;\r\n            if (value != null)\r\n            {\r\n                _isTextSetByProgram = true;\r\n                _someTextBox.Text = value.SomeValue;\r\n                _isTextSetByProgram = false;\r\n\r\n                \/\/ other operations\r\n            }\r\n        }\r\n    }\r\n\r\n    private void OnSomeTextBoxTextChanged(object sender, EventArgs e)\r\n    {\r\n        if (!_isTextSetByProgram)\r\n        {\r\n            \/\/ perform data\/view update operations\r\n        }\r\n    }\r\n}<\/pre>\n
I think this is the most common solution<\/strong> that I’ve seen for the problem. For myself I must admit that I’ve mostly used this approach. But it has the same disadvantages<\/strong> like the event detach\/attach solution (except the tight view coupling). Boolean variables don’t explicitly show the intent behind them and get likewise messy if used in complex situations where you could have dozens of those variables scattered around a view.<\/p>\n
So while those solutions are very widespread and work they just don’t feel right<\/em> and clean<\/strong>. But what’s the alternative? An interesting little one I will show you in the next post<\/a> which comes shortly.<\/p>\n
\"kick<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
This blog post is all about a common UI-related programming problem. Ever since my first UI-based application I’ve come across with this problem and never found a satisfying way to resolve it (until now \ud83d\ude09 ). This first blog post is about describing the problem and my former solution approaches. In the next blog post … A common UI problem<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[266,181,265],"class_list":["post-963","post","type-post","status-publish","format-standard","hentry","category-design-patterns","tag-boolean-flags","tag-events","tag-ui-problem"],"_links":{"self":[{"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/posts\/963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/comments?post=963"}],"version-history":[{"count":18,"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/posts\/963\/revisions"}],"predecessor-version":[{"id":979,"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/posts\/963\/revisions\/979"}],"wp:attachment":[{"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/media?parent=963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/categories?post=963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/tags?post=963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}