联系电话:020-28187900

UI界面设计模板化

发表时间:2012-09-28 阅读: 2315

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

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

1、创建一个User Control,在其上放一个Label(label1) 表示要选择的列表名称,一个ListView表示列表,一个确定按钮,一个取消按钮。在这个新的组合控件上,所有的内容都为空(例如,Label 的Text属性,ListView的Items属性,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、编写一个模板驱动机。这个驱动机的作用在于从后台获取数据,将其Populate到UI界面上,一旦用户做出了动作或决定,这个驱动机会通过订阅模板事件把用户数据收集起来(例如通过UIEventArgs),送往后台。模板驱动机通过IUI接口操纵模板。

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

这个设计的特点:

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

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

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

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

参考资料:博客园


相关文章 【更多】

唯众网络