.NET Practice  
 

UI界面设计模板化

For Windows Form Applications

 UI界面的作用有二,一是把数据呈现给用户,二是从用户处得到数据。这里所说的数据是广义的,即所有文字、状态和图像等都是数据。具体来说,UI界面用于把数据表格、文字框、状态选择和按钮等呈现给用户,供用户输入、编辑、选择和做决定。例如,在一个UI界面上,我们列出一个公司列表,供用户选择其中一个。在另一个UI界面上,我们提供了好几个文字框,供用户输入个人信息。依赖UI背后的Business Logic所处的领域不同,这样的UI界面是千差万别的,但是针对同一领域,同一类型的应用,这样的UI界面是有规律可循的。

由于Business Logic本身的复杂性,只用一个UI界面来解决问题是不现实的。这里给出一种将UI界面设计模板化的解决方案,我将使用一个简单的示例来说明。假设在我们的Business Logic中,我们有多种表格要呈现给用户,例如,有公司列表,产品列表,用户列表,每一种列表都要让用户选择。我的设计方案是:

1、创建一个User Control,在其上放一个Label(label1) 表示要选择的列表名称,一个ListView表示列表,一个确定按钮,一个取消按钮。在这个新的组合控件上,所有的内容都为空(例如,Label Text属性,ListViewItems属性,Button们的Text属性),整个控件就像一个容器,或者模板。所有的模板组合在一起,就构成了一系列模板,这些模板可以用一个容器管理起来。

2、创建一个模板内容描述类,示例如下(为简单期间,直接用了public)

public class TempDescription

{

      
public string labelText;   // for Label population

      
public Color labelForeColor;

      
public bool labelVisible;

      
public DataSet items;    // for ListView population

      … …

}



模板内容类的Instance,可以来自数据库,配置文件等。

3、编写模板内容Populate子程序,示例如下:

 

public void Populate(TempDescription description)

{

      
if(description != null)

      
{

                  
this.label1.ForeColor = description.labelForeColor;

                  
this.label1.Text = description.labelText;

                  
this.label1.Visible = description.labelVisible;

                  
// populate ListView, Buttons etc.

                  … …

      }


}
 

 Populate之前,可以用一个子程序把模板恢复到初始状态(空)。

4、编写模板事件子程序,当用户点击UI时,例如,选择一个表项,点击一个按钮等,Raise 事件。实现方法参看我的前一篇Blog

5、实际上,为了UI界面的一致性,模板最好从一个基类继承,而基类则从User Control和一个接口得来。示例如下:

 

 

public delegate void UIPressedEventHandler(object sender, UIEventArgs e);

 

public interface IUI

{

      
protected void Initialization (); //for initialization

      
public void Populate (TempDescription description); // populate data

     
public event UIPressedEventHandler UIEventRaised); // collecting data 

}
 

 

public class TemplateBase: UserControl, IUI

{

      … …

}


 

6、编写一个模板驱动机。这个驱动机的作用在于从后台获取数据,将其PopulateUI界面上,一旦用户做出了动作或决定,这个驱动机会通过订阅模板事件把用户数据收集起来(例如通过UIEventArgs),送往后台。模板驱动机通过IUI接口操纵模板。

7、模板驱动机将被一个工作流驱动机驱动(模板驱动机的后台),决定这个UI界面可以合法走到哪些其它的UI界面。工作流驱动机通过驱动一个可以描述配置的工作流来决定UI的走向。

这个设计的特点:

1、界面一致性好,做到了UI界面的“重用”。我们可能有10UI模板,但是可以有30UI界面。例如,前述的所有的列表(公司列表,产品列表,用户列表)都用同一个UI模板来显示。对于每个UI模板,还可以把模板上各个子控件的Visible属性等变为可以描述的,这样就增加了一个UI模板的可应用范围。

2、可配置性高,结合工作流驱动机,整个模板驱动机可以由描述数据驱动,这些描述数据可以有多种来源。

3、可扩充性好,模板的Instantiation可以由配置决定。

4、结合工作流驱动机,可以比较灵活地应对Business Logic的变化。

posted on 2007-01-03 03:01  Chester  阅读(5996)  评论(6编辑  收藏  举报