当前页面: 开发资料首页 → JSP 专题 → 在定制Eclipse SWT组件中实现MVC

在定制Eclipse SWT组件中实现MVC

摘要: Eclipse SWT（标准部件工具包）提供了丰富的 API 集来实现定制部件（widget）。在这篇文章中，作者简要介绍了 MVC（模型-视图-控制器）架构，以结构化查看器的形式解释了 MVC 的当前实现，并介绍了一种使用定制 SWT 部件的实现。

Eclipse SWT（标准部件工具包）提供了丰富的 API 集来实现定制部件（widget）。在这篇文章中，作者简要介绍了 MVC（模型-视图-控制器）架构，以结构化查看器的形式解释了 MVC 的当前实现，并介绍了一种使用定制 SWT 部件的实现。

　　什么是 MVC？

　　MVC 架构（或设计模式）是图形用户界面（GUI）的设计样式，由三部分构成：模型、视图和控制器。MVC 把表示层从数据解耦出来，也把表示从数据的操作解耦出来。

　　实现 MVC 架构与其他类型的应用程序有所不同。主要的区别来自如何放置和实现业务逻辑或查看呈现逻辑。与典型的 Web 应用程序不同，在这类程序中，程序员必须设计和实现所有 MVC 组件，而 Eclipse 提供的 API 可以替您做大部分控制或呈现工作。所以，不能严格地把 Eclipse 的 MVC 实现与 Web 或其他应用程序类型的 MVC 进行比较。

　　Eclipse JFace

　　Eclipse JFace 用内容提供者和标签提供者实现 MVC 架构。JFace API 包装了标准（并非不重要的）部件，例如表和树，并实现了结构化内容提供者和标签提供者。可以根据部件类型实现不同的内容提供者。面向列表的查看器会实现结构化查看器，而内容则以结构化（列表的）方式映射到部件条目上。

　　基类叫做 Viewer，它是结构化查看器的一个扩展。查看器充当部件容器。内容提供者以结构化的方式得到数据；类似地，标签提供者获得对应的标签。JFace 查看器实现检索该数据，设置对应的关联，并用数据集更新用户界面（UI）组件。它还执行选择、过滤和排序。

　　如何实现 JFace

　　Eclipse View 和 Viewer 负责执行大部分 JFace 控制功能。Viewer 或者说 MVC 的视图部分，也充当部件容器；这是表示组件。

　　Eclipse View 实例化 Viewer、内容提供者和标签提供者，并充当模型，容纳值对象，并在 Viewer 中把它们设置为 inputElement。

　　要创建 View，请用 createPartControl() 方法实例化 Viewer。清单 1 实例化一个默认的树查看器；您也可以定制树，并用树对象作为参数，用构造函数实例化树查看器。

　　清单 1. ExampleView 的 CreatePartControl 方法

 

public class ExampleView extends ViewPart  

{ ... public void createPartControl(Composite parent)  

{ // define a grid layout  

GridLayout layout = new GridLayout();  

layout.numColumns = 1;  

layout.marginHeight = 0;  

layout.marginWidth = 0; l 

ayout.horizontalSpacing = 0;  

layout.verticalSpacing = 1;  

parent.setLayout(layout);  

// create widgets createActionBar(parent); 

 createTree(parent);  

// add context menu and listeners 

viewer.addDoubleClickListener(this); viewer.addSelectionChangedListener(openAction); 

 // register viewer so actions respond to selection getSite().setSelectionProvider(viewer); 

 hookContextMenu();  

} 

private void createTree(Composite parent)  

{  

viewer = new TreeViewer(parent, SWT.SINGLE | SWT.H_SCROLL | SWT.V_SCROLL | SWT.BORDER); 

viewer.setContentProvider(new ExampleViewContentProvider()); viewer.setLabelProvider 

(new ExampleViewLabelProvider());  

viewer.setSorter(new ViewerSorter());  

viewer.setInput(ModelManager.getExampleModel());  

viewer.getControl().setLayoutData(new GridData(GridData.FILL_BOTH));  

} ... }

　　在另一个独立类中实现 ContentProvider，它是一个对象，用适合查看器类型的接口向视图提供数据。例如，您可以实现 IStructuredContentProvider 或 ITreeContentProvider 查看器。

　　请在 ContentProvider 代码中实现以下一个方法，把 ContentProvider 与 Viewer 相关联：

getElements(Object parent)
getChildren(Object element)

　　注意：JFace 框架将调用这些方法。

　　清单 2. 创建定制的 ContentProvider

 

  public class ExampleViewContentprovide implements ITreeContentProvide {

　　MVC 架构通常包含多个视图和一个数据源。目前在 Eclipse 平台上，只能把一个视图与一个模型相关联。但是，也可以创建多个视图，用适配器视图访问同一数据。只要把 inputChanged() 方法包含在 ContentProvider 类中即可。只要 Viewer 有新的输入集，就会使用 inputChanged() 方法通知 ContentProvider。inputChanged() 方法接受 Viewer 作为输入参数，所以多个视图可以使用一个 ContentProvider。

　　清单 3. 将 inputChanged 方法用于不同的查看器

 

/** * Register content provider with model. */ 

 public void inputChanged(Viewer viewer, Object oldInput, Object newInput) 

 { 

 if (newInput != null) 

    {  

this.viewer = viewer; 

this.model = (ExampleDelegate)newInput; this.model.addModelListener(this);  

} 

 }

　　与 Eclipse SWT 结合使用 MVC

　　在多数常见 GUI 应用程序中，创建布局来显示请求的数据，或完成表单（例如用户界面）来添加或修改数据。图 1 的示例应用程序演示了如何在定制表单中，用只读和可编写模式显示来自 XML 存储的数据。它还解释了每个组件相对于 MVC 架构的角色。

　　图 1. 示例应用程序

图 2 显示了应用程序的类图，有助于更好地理解整体架构。

　　图 2. 示例应用程序的类图

　　创建控件

　　ExampleView 充当整个应用程序的容器。它将在 createPartControl 方法中初始化应用程序。

　　清单 4. CreatePartControl 方法初始化布局

 

public void createPartControl(Composite parent) { 

ExampleEditLayout _layout = new  

    ExampleEditLayout(parent,SWT.NONE,FieldMode.Read,new ExampleViewContentProvider()); 

}

　　创建表单和布局

　　基本布局类定义了不同的表单应用程序使用的全局方法和声明。有些充当回调机制的容器事件，也注册到了这里。

　　清单 5. 布局的 CreateControl 方法

 

public void createControls(int style) { 

GridData    gridData; 

Text                textFld, subjectFld; 

Control            toLabel, ccLabel, bccLabel; 

Control            fromDateTime; 

Control            control; 

Button durationText; 

Button submit; 

GridLayout layout = new GridLayout(2, false); 

layout.marginWidth = 0; 

layout.marginHeight = 4; 

setLayout(layout); 

//Label 

gridData = new GridData(GridData.HORIZONTAL_ALIGN_FILL 

| GridData.VERTICAL_ALIGN_CENTER); 

gridData.horizontalIndent = 10; 

LabelFactory.create(this,  

  Messages.getString("ExampleEditLayout.Title"), gridData); //$NON-NLS-1$ 

gridData = new GridData(GridData.HORIZONTAL_ALIGN_FILL 

| GridData.VERTICAL_ALIGN_CENTER); 

gridData.horizontalIndent = 40; 

LabelFactory.create(this, "", gridData); 

//Text 

gridData = new GridData(GridData.HORIZONTAL_ALIGN_FILL 

| GridData.VERTICAL_ALIGN_CENTER); 

gridData.horizontalIndent = 10; 

control = LabelFactory.create(this,  

  Messages.getString("ExampleEditLayout.Email"), gridData); //$NON-NLS-1$ 

gridData = new GridData(GridData.HORIZONTAL_ALIGN_BEGINNING 

| GridData.VERTICAL_ALIGN_CENTER); 

gridData.horizontalIndent = 10; 

control = TextFactory.create(this, 

  SWT.BORDER | SWT.V_SCROLL | SWT.WRAP, gridData, FieldMode.Edit); //$NON-NLS-1$ 

addField(new TextField(control, ExampleViewContentProvider.FIRST_INDEX)); 

//Combo 

gridData = new GridData(GridData.HORIZONTAL_ALIGN_FILL 

| GridData.VERTICAL_ALIGN_CENTER); 

gridData.horizontalIndent = 10; 

LabelFactory.create(this,  

  Messages.getString("ExampleEditLayout.Group"), gridData); //$NON-NLS-1$ 

gridData = new GridData(GridData.HORIZONTAL_ALIGN_BEGINNING 

| GridData.VERTICAL_ALIGN_CENTER); 

gridData.horizontalIndent = 40; 

control = ComboFactory.create(this,  

  FieldMode.Edit, false, gridData); //$NON-NLS-1$ 

addField(new ComboField(control, 

ExampleViewContentProvider.SECOND_INDEX)); 

...}

　　创建字段（视图）

　　Field 是一个抽象类，它定义了包含各种用户界面控件的方法，还有全局地识别这些控件的相关 ID。每个用户界面控件都是 Field 的子类，并向内容提供者提供了读写能力。清单 6 用工厂模式，在 Layout 类中创建了 Field。

　　清单 6. 用 Field 类创建文本对象

 

public class TextField extends Field { 

    /** 

    * @param control 

    * @param id 

    */ 

    public TextField(Control control, int id) { 

        super(control, id); 

    } 

    /* Based on the ID of the widget, values retrieved from  

     * the content provider are set. 

     */ 

    public  void readFromContent(IExampleContentProvider content) { 

        String newText = (String )content.getElement(getId()); 

        if (newText != null) 

            ((Text )_control).setText(newText); 

    } 

    /* Based on the ID of the widget, values retrieved from widget are  

     * sent back to the content provider. 

     */ 

    public void writeToContent(IExampleContentProvider content) { 

        String newText = ((Text )_control).getText(); 

        content.setElement(getId(), newText); 

    } 

}

　　简化内容提供者（模型）

　　ExampleViewContentProvider 充当模型侦听器，后者扩展自 IStructuredContentProvider。它是 Eclipse API 的简单实现，提供了用于检索数据的回调。每个请求数据的条目都基于视图创建时在布局中为条目定义的惟一 ID。

　　方法调用会返回与每个定义的全局 ID 关联的数据。在清单 7 所示的内容提供者中，可以使用适配器从 XML 文件或数据库检索数据。

　　清单 7. 在定制的 ContentProvider 中实现方法

 

public Object getElement(int iIndex) { 

        switch (iIndex) { 

        case FIRST_INDEX: return "developer@ibm.com"; 

        case SECOND_INDEX : return new Integer(1); 

        case FOURTH_INDEX : return new Boolean(true); 

        case THIRD_INDEX: return new Boolean(false); 

        case FIFTH_INDEX: return new Boolean(false); 

        } 

        return null; 

    }

　　创建了控件并初始化布局之后，表单会用控件 ID 要求内容提供者用数据填充表单控件。

　　清单 8. 初始化布局并填充控件的表单

 

public Form (Composite parent, int style, FieldMode mode, ExampleViewContentProvider content) { 

            super(parent, style); 

            _content = content; 

            _style = style; 

            setMode(mode); 

            init(style); 

    } 

  

    private void init(int style) { 

            createControls(style); 

        controlsCreated(); 

    } 

protected void controlsCreated() { 

            readFromContent(); 

    }

　　结束语

　　Web 应用程序是 MVC 架构样式的早期实现者。但是，随着像 Eclipse 这样的简单而强大的开发平台的到来，程序员可以轻易地用更短的时间和最小的复杂程度，开发出更丰富的用户界面。

↑返回目录
前一篇: Eclipse Forms设计漂亮UI之高级组件
后一篇: Struts应用系统案例设计之需求分析