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

在定制 SWT 组件中实现 MVC

摘要: 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 方法
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline">


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));

} ... }

</td></tr></table>

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

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

getElements(Object parent)
getChildren(Object element)

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

清单 2. 创建定制的 ContentProvider
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline">


  public class ExampleViewContentprovide implements ITreeContentProvide {

</td></tr></table>

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

清单 3. 将 inputChanged 方法用于不同的查看器
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline">


/** * 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);

}

 }

</td></tr></table>

<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td>
</td></tr></table><table class="no-print" cellspacing="0" cellpadding="0" align="right"><tr align="right"><td>
<table border="0" cellpadding="0" cellspacing="0"><tr><td valign="middle">
</td><td valign="top" align="right"></td></tr></table></td></tr></table>

与 Eclipse SWT 结合使用 MVC

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

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

创建控件

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

清单 4. CreatePartControl 方法初始化布局
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline">


public void createPartControl(Composite parent) {

ExampleEditLayout _layout = new

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

        }

创建表单和布局

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

清单 5. 布局的 CreateControl 方法
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline">


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 类创建文本对象
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline">


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 中实现方法
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline">


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;

    }

</td></tr></table>

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

清单 8. 初始化布局并填充控件的表单
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline">


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 这样的简单而强大的开发平台的到来，程序员可以轻易地用更短的时间和最小的复杂程度，开发出更丰富的用户界面。

下载

<table width="100%" class="data-table-1" cellspacing="0" cellpadding="0" border="0"><tr><th>描述</th><th>名字</th><th align="right">大小</th><th>下载方法</th></tr><tr><td class="tb-row">Example code for this article</td><td nowrap="nowrap">wa-eclipsemvc_ExampleViewer.zip</td><td align="right" nowrap="nowrap">33KB</td><td nowrap="nowrap">HTTP</td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr valign="top"><td colspan="5"></td></tr><tr><td></td><td>关于下载方法的信息</td><td></td><td></td><td>Get Adobe® Reader®</td></tr></table>

参考资料 学习
您可以参阅本文在 developerWorks 全球站点上的英文原文。

请访问 Eclipse.org 获得关于 Eclipse 和如何使用它的全面信息。

请阅读 “Getting started with the Eclipse Platform”（developerWorks，2002 年 11 月），获得 Eclipse 的历史和概述，包括如何安装 Eclipse 和插件的细节。

请关注 developerWorks technical events and Webcasts。

请访问 developerWorks Java 技术专区扩展您的 Java 技能。

请访问 developerWorks Web 架构专区获得需要的 Web 开发解决方案。

获得产品和技术
请下载 WebSphere Application Server Version 6.0 的免费试用版。

请用 IBM 试用软件构建您的下一个开发项目，这些软件可以从 developerWorks 直接下载。

请在 The Linux Kernel Archives 上获得 Cogito 和 Linux 内核的源代码。

订购免费的 SEK for Linux，一套两张 DVD，包含 IBM 针对 Linux 的最新试用软件，包括 DB2、Lotus、Rational、Tivoli 和 WebSphere。

讨论
developerWorks blogs：加入 developerWorks 社区！

关于作者<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td colspan="3"></td></tr><tr align="left" valign="top"><td></td><td></td><td width="100%">
Tejas Parajia 是 IBM 印度软件实验室的软件工程师，从事 IBM Workplace Managed Client 消息应用程序的工作。过去三年间他一直从事基于 Eclipse 技术的工作；他有超过六年的基于 Web 和客户端技术的工作经验。
</td></tr></table>

↑返回目录
前一篇: 使用SWT开发WEB应用
后一篇: 将 ActiveX 控件集成到 SWT 应用程序