UI Object Connector Implementation of Mediator Pattern

本文介绍了一种利用中介者模式简化用户界面(UI)与业务对象间复杂交互的方法。通过实现UI对象连接器,可以有效地处理设置业务对象值、从对象获取值及清理UI等任务。

When we consume business objects in UI, the logic can become pretty complex for activities like setting the business object value, getting the object value and setting the user interface from the object value. We can minimize the complexity of UI interaction with the business object using mediator pattern.
Download

  Download source code for UI Object Connector Implementation of Mediator Pattern

UI Object Connector Implementation of Mediator Pattern 

 

Table of Contents

Introduction 

When we consume business objects in UI, the logic can become pretty complex for activities like setting the business object value, getting the object value and setting the user interface from the object value. We can minimize the complexity of UI interaction with the business object using mediator pattern.

I have been writing and recording a lot of architecture related videos on design patterns, UML, FPA estimation, C# projects, etc. You can watch my videoshere.

The Problem

In almost all projects, we have the basic three tier architecture as shown in the below figure. So the UI creates the business object, sets the values or gets the values and flourishes the UI.

The three big things we need to do on the UI are stated below:

  1. Setting the business object values from the user interface: 

    public void setObjectFromUI(clsInvoice objInvoice){objInvoice.CustomerName = txtCustomerName.Text;objInvoice.CustomerAddress = txtCustomerAddress.Text;objInvoice.Amount = Convert.ToDouble(lblTotalAmountToBePaid.Text);objInvoice.PaidAmount = Convert.ToDouble(txtAmountPaid.Text);objInvoice.InvoiceDate = Convert.ToDateTime(txtInvoiceDate.Text);objInvoice.InvoiceComments = txtComments.Text;objInvoice.InvoiceReference = txtInvoiceNumber.Text;objInvoice.Quantity = Convert.ToInt16(TxtQuantity.Text);objInvoice.TaxAmount = Convert.ToDouble(txtTaxAmount.Text);}
  2. Getting the values from the objects and displaying the same in the UI:

    txtCustomerName.Text = objInvoice.CustomerName;txtCustomerAddress.Text = objInvoice.CustomerAddress;lblTotalAmountToBePaid.Text = objInvoice.Amount.ToString();txtAmountPaid.Text = objInvoice.PaidAmount.ToString();txtInvoiceDate.Text = objInvoice.InvoiceDate.ToString();txtComments.Text = objInvoice.InvoiceComments.ToString();txtInvoiceNumber.Text = objInvoice.InvoiceReference.ToString();TxtQuantity.Text = objInvoice.Quantity.ToString();txtTaxAmount.Text = objInvoice.TaxAmount.ToString();
  3. Clearing the UI values for fresh and new inputs: 

    public void clearText(){txtInvoiceNumber.Text = "";txtComments.Text = "";txtInvoiceDate.Text = "";TxtQuantity.Text = "";lblTotalAmountToBePaid.Text = "";txtTaxAmount.Text = "";txtAmountPaid.Text = "";txtCustomerName.Text = "";txtCustomerAddress.Text = "";}

All the above things can clutter your UI. The most important thing is that the UI is tied up with the business object for various reasons.

Solution

The answer to this is if we can make a mediator who takes care of which UI objects map which object property that will solve our problem. So what we need to do is implement a simple UI object connector which takes the values from UI and sets to the object. This can be easily implemented by using mediator pattern. In case you are not aware of it, you watch this video to understand the concept.

UI Object Connector Implementation

Below is our simple class which will be used in a simple UI:

public class clsSampleClass{private string strProperty1="Default1";private string strProperty2="Default2";public string Property1{set{strProperty1 = value;}get{return strProperty1;}}public string Property2{set{strProperty2 = value;}get{return strProperty2;}}}

For the mediator class, we will have two array lists - one which will have the text box and the other will have the property. Every item of the array, i.e. Text box will have a corresponding item of property where the value will be set: 

private ArrayList objtextboxes = new ArrayList();private ArrayList objPropertyInfo = new ArrayList();

The user interface, i.e. the ASPX page will be exposed a method ‘Add’ which will take the corresponding text box and the property to which this text box is tied up: 

public void Add(TextBox objtextBox, string strPropertyName){objtextboxes.Add(objtextBox);objPropertyInfo.Add(strPropertyName);}

To set the values from the object to the UI, we will use reflection. So get the text box and the corresponding property and set the same using reflection: 

public void setValuesToObject(clsSampleClass objSample){// get the object typeType objType = objSample.GetType();// browse through all the UI objects and set the object// from the UI to the corresponding propertyfor(int i=0;i<objtextboxes.Count;i++){// get the UI objectPropertyInfo objProperty = objType.GetProperty(objPropertyInfo[i].ToString());// set the object property from the UI objectobjProperty.SetValue(objSample,((TextBox)objtextboxes[i]).Text,null);}}

The same holds true when we set the values back to UI: 

public void setValuesToUI(clsSampleClass objSample){Type objType = objSample.GetType();for (int i = 0; i < objtextboxes.Count; i++){PropertyInfo objProperty = objType.GetProperty(objPropertyInfo[i].ToString());((TextBox)objtextboxes[i]).Text= objProperty.GetValue(objSample, null).ToString();}}

If you want to clear the text box, just call all the objects of text boxes in the array list and set the same to nothing: 

public void ClearTextBox(){Type objType = Type.GetType("clsSampleClass");for (int i = 0; i < objtextboxes.Count; i++){((TextBox)objtextboxes[i]).Text = "";}}

The Neat Client Code 

Now we have a one liner client code. If you want to set the values from the UI to the object, just call setValuesToObject:

objMediator.setValuesToObject(objSample);

If you want to set the values of object to the UI, just call setValuesToUI

objMediator.setValuesToUI(objSample);

If you want to clear all UI, call ClearTextBox:

objMediator.ClearTextBox();

转自:http://www.dotnetfunda.com/articles/article244.aspx

UI设计中,Mediator(中介者)通常指的是中介者模式在UI开发中的应用。中介者模式是一种行为型设计模式,旨在通过引入一个中介对象来封装多个对象的交互,减少各个对象之间的直接引用,从而降低系统的耦合度,并使得对象间的交互变得更加灵活和简洁[^3]。 在UI场景里,UI组件(如按钮、文本框、下拉框等)可以看作是“同事对象”,而中介者则负责协调这些组件之间的交互。当一个UI组件发生变化时,它不直接与其他组件进行交互,而是通知中介者,由中介者来决定如何与其他相关组件进行通信和协调。 以下是一个简单的Python示例,模拟UI组件通过中介者进行交互: ```python # 定义中介者接口 class Mediator: def notify(self, sender, event): pass # 定义UI组件基类 class UIComponent: def __init__(self, mediator): self.mediator = mediator def send(self, event): self.mediator.notify(self, event) def receive(self, event): print(f"{self.__class__.__name__} received: {event}") # 具体的UI组件类 class Button(UIComponent): def click(self): self.send("Button clicked") class TextBox(UIComponent): pass # 具体的中介者类 class UIMediator(Mediator): def __init__(self, button, textbox): self.button = button self.textbox = textbox def notify(self, sender, event): if sender == self.button and event == "Button clicked": self.textbox.receive("Button click event received") # 创建组件和中介者 button = Button(None) textbox = TextBox(None) mediator = UIMediator(button, textbox) button.mediator = mediator textbox.mediator = mediator # 模拟按钮点击 button.click() ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值