使用智能客户端软件工厂创建类似 Outlook 的侧边栏

• 下载源文件 - 1478 Kb
• 下载演示项目 - 351 Kb

目录

引言
示例应用程序
安装 SCSF 及其先决条件
安装 Outlookbarworkspace
在示例应用程序中查看类似 Outlook 的侧边栏
            创建新的智能客户端解决方案
            修改解决方案以添加 OutlookBarWorkspace
           向 outlookbarworkspace 添加项目及其在左侧和右侧的相应视图。
                      ; 向智能客户端解决方案添加业务模块
                      ; 实现用户界面-添加新视图（带演示者）
           添加代码以在 outlookbarworkspace 中显示项目
           添加代码以处理 outlookbarworkspace 的单击事件。
           左右视图之间的通信
摘要

引言

我一直在阅读 codeproject 一段时间，并且一直在使用提供的代码。我看到有很多关于 Outlook 侧边栏的文章。然后，在 Google 上搜索相同内容时，我发现了 Matias Woloski 的博客和他创建的一个（复合 UI 应用程序块(CAB) 工作区）outlookbarworkspace，它创建了一个漂亮的类似 Outlook 的侧边栏。然后，我开始研究 Microsoft Smart client software factory，并决定在我的下一个项目中使用这两者。几天前，我决定写一篇关于我在此过程中学到的所有知识的文章，主要是使用智能客户端软件工厂来获得一个 Outlook 栏。

这是我的第一篇文章，我很想知道您是否觉得它有用。所以请提供反馈。

示例应用程序

我们将创建一个示例应用程序，该应用程序将有一个类似 Outlook 的侧边栏，带有几个按钮。我们还将创建相应的视图，其中只包含一个按钮。我们还将创建事件，以便在单击这些按钮时，应用程序的右侧会发生一些更改。屏幕截图显示了示例应用程序。

安装 SCSF 及其先决条件。

如果要使用智能客户端软件工厂中的所有资产，则必须安装 Composite UI Application Block、Enterprise Library for .NET Framework 2.0、Guidance Automation Extensions 和 Guidance Automation Toolkit。

注意：仅当您要自定义智能客户端开发指南包时，才需要 Guidance Automation Toolkit。由于我们在这里不这样做，您可以选择不安装它，否则请在安装 Guidance Automation Extensions 之后、安装智能客户端软件工厂之前安装它。

下载并安装智能客户端软件工厂后，您将获得 SmartClientBaseLineArchitectureToolkit.chm 文件。它有一个部分详细介绍了安装其先决条件的整个过程。

我还可以建议您下载实践操作实验室以学习基础知识。

安装 Outlookbarworkspace

下载并构建 outlookbarworkspace。构建时可能需要为 SCSF 中的相关库提供引用。

在示例应用程序中查看类似 Outlook 的侧边栏

步骤 1：创建新的智能客户端解决方案。

（相同步骤的详细信息请参见智能客户端软件工厂的 HandsOnLabsAug04（Lab01 创建智能客户端软件工厂））


1. 将解决方案命名为 **SmartClientMatias**，并将 **Matias** 作为根命名空间的值。您可以根据您的应用程序使用任何其他名称。此值出现在生成解决方案的每个命名空间的第一部分。例如，**Shell** 项目中的类存在于 **Matias.Infrastructure.Shell** 命名空间中。

2. 取消选择选项 **“创建单独的模块来定义 Shell 的布局”**。

注意：使用此选项指示配方应创建单独的模块来定义 Shell 的布局。如果选择此选项，配方将创建一个仅包含 DeckWorkspace 的 Shell。配方会创建一个单独的模块项目，其中包含一个视图和一个演示者，您可以使用它们来定义布局。在此 Lab 中，您将不使用单独的模块来定义 Shell 的布局。相反，您将在 Shell 项目中的视图中定义布局。

步骤 2：修改解决方案以添加 OutlookBarWorkspace。

1. 从 Shell 项目打开 ShellForm.cs。

2. 选择 _leftworkspace（它是 DeckWorkspace）并删除该工作区。我们将使用 outlookbarworkspace 替代 DeckWorkspace。

3. 打开工具箱，右键单击并选择 **“选择项…”**。在“选择工具箱项”窗口中，从 outlookbarworkspace 的 bin 文件夹中选择程序集 **“CompositeUIExtensions.Winforms”**。这将添加 **Outlookbarworkspace、headerstrip 和 outlookbarsmartpartinfo**。

4. 将 outlookbarworkspace 拖到 Panel1 区域（从您删除 _leftworkspace 的位置）。

5. 选择 **outlookbarworkspace1** 并将其名称更改为 **_leftWorkspace**，

6. 为 _leftWorkspace 选择 **Dock = “Left”**

7. 选择 **SplitCcontainer1** 并 **将其属性 FixedPanel 设置为 Panel1**

8. 运行项目，它将显示以下屏幕，其中 outlookbarWorkspace 中没有任何项目。

这样，我们就将 Outlookbarworkspace 添加到了解决方案中，现在我们需要修改解决方案以向其中添加项目。

步骤 3：向 outlookbarworkspace 添加项目及其在左侧和右侧的相应视图。

步骤 3a：向智能客户端解决方案添加业务模块
（**步骤 3a 的文档来自智能客户端软件工厂的 HandsOnLabsAug04（Lab02 创建发货模块）**）

1. 要向 outlookbarworkspace 添加项目，我们将创建新的业务模块。

2. 在解决方案资源管理器中，右键单击“Source”解决方案文件夹，指向“Smart Client Software Factory”，然后单击 **“Add Business Module”**。此时会显示“Add New Project”对话框，并选中“Add Business Module”模板。

3. 输入 **PeopleModule** 作为名称，并将位置设置为解决方案的 Source 文件夹。

4. 单击“OK”。

指南包将显示 **Create Business Module** 向导。此向导显示模块命名空间以及创建模块接口库的选项。如果选择此选项，配方将创建一个附加项目来包含提供程序集公共接口的元素。

5. **取消选择“为该模块创建接口库”** 选项。

6. 单击“Finish”。

项目的根文件夹包含两个类：**Module** 和 **ModuleController**。Module 类派生自 Composite UI Application Block 类 ModuleInit。**Composite UI Application Block 在启动时调用此类的 Load 方法**。**Load 方法** 包含用于**创建和运行新的 ControlledWorkItem** 的代码。

**ModuleController** 类包含您可以修改以自定义模块启动时行为的方法。例如，您可以添加服务或显示用户界面项。（在下一步中，您将修改其中一些方法。）

配方还将此模块的以下 XML 条目添加到应用程序的配置文件目录中。这意味着 Composite UI Application Block 将在应用程序初始化时加载模块。

<Modules>



<ModuleInfo AssemblyFile="PeopleModule.dll" />



</Modules>

步骤 3b：实现用户界面 - 添加新视图（带演示者）
（**步骤 3b 的文档来自智能客户端软件工厂的 HandsOnLabsAug04（Lab03 创建 Ship New Order 视图）**）

在这里，您将使用名为 **Add View (with presenter)** 的配方来创建实现 Model-View-Presenter 模式的类。

1. 在解决方案资源管理器中，右键单击 **PeopleModule** 项目的 **Views** 文件夹，指向 **Smart Client Software Factory**，然后单击 **Add View (with presenter)**。

2. **Add View (with presenter)** 配方会启动一个向导。在“View Name”字段中输入 **PeopleView**，并选择 **“Create a folder for the view”** 复选框。

如果选择了“Create a folder for the view”，则配方会创建一个文件夹并将新项放入该文件夹；否则，新项将放置在解决方案资源管理器中选定的文件夹中。

**单击“Finish”**。配方会生成文件夹、类和实现接口。

配方生成以下项：

· **视图接口类**。这是一个空的视图接口定义。您将修改此接口来定义视图的公共接口。（演示者类使用此接口与视图通信。）

· **视图实现用户控件**。此类派生自 **UserControl** 并具有 **[SmartPart]** 属性。这是支持控制反转功能所必需的，该功能将自动关联服务依赖项、控制器等。用户控件还实现视图接口并包含对其演示者的引用。您将修改此类以调用演示者来执行影响其他视图或业务逻辑的用户界面操作。

· **视图的演示者类**。此类扩展了 Infrastructure.Interface 项目中定义的 **Presenter 基类**，并包含视图的业务逻辑。您将修改此类以根据业务逻辑更新视图。

同样，向 **PeopleModule** **添加另外两个视图**，并将它们命名为 **PeopleViewLeft**、**PeopleViewRight**。

PeopleView 将向 outlookbarworkspace 添加一个项目，然后在单击 OutlookBarWorkspace 的 People 项目时将 PeopleViewLeft 加载到 _leftWorkspace 中，将 PeopleViewRight 加载到 _RightWorkspace 中。

步骤 4：添加代码以在 outlookbarworkspace 中显示 people 项目。

1. 双击 **PeopleViewLeft.cs** 打开设计器窗口。

2. 打开工具箱，将一个 Label 控件拖到设计图面的左上角。打开标签的属性窗口，并将以下属性值设置为：

 Text = “PeopleViewLeft”

3. 双击 **PeopleViewRight.cs** 打开设计器窗口。

4. 打开工具箱，将一个 **Label** 控件拖到设计图面的左上角。打开标签的 **属性** 窗口，并将以下属性值设置为：

 Text = “PeopleViewRight”

5. 现在，我们将编写代码，在 **PeopleModule** 加载时向 **outlookbarworkspace** 添加 **People 按钮**。

6. 要向 outlookbarworkspace 添加按钮，smartpart 必须实现 **ISmartPartInfoProvider** 接口。

7. 在 **PeopleModule** 中添加对 **CompositeUIExtensions.Winforms.dll**（这是 Outlookbarworkspace 的程序集）的引用。

在解决方案资源管理器中右键单击 **PeopleView.cs**，选择“View Code”

添加

using CompositeUIExtensions.Winforms;



using Matias.Infrastructure.Interface.Constants;

通过修改以下行来**实现 ISmartPartInfoProvider 接口**

[SmartPart]


public partial class PeopleView : UserControl, 
IPeopleView,ISmartPartInfoProvider


{


.......


}

8. 右键单击“**ISmartPartInfoProvider**”并选择“**implement interface**”，它将在末尾添加代码。

#region ISmartPartInfoProvider Members

public ISmartPartInfo GetSmartPartInfo(Type smartPartInfoType)

{


throw new Exception("The method or operation is not implemented.");


}
#endregion

9. 修改函数并添加以下代码：

#region ISmartPartInfoProvider Members


public ISmartPartInfo GetSmartPartInfo(Type smartPartInfoType)

{

//throw new Exception("The method or operation is not implemented.");


OutlookBarSmartPartInfo PeopleOutlookBarSmartPartInfo = new 
OutlookBarSmartPartInfo();


PeopleOutlookBarSmartPartInfo.Title = "People";


PeopleOutlookBarSmartPartInfo.EventTopicName = EventTopicNames.LoadPeopleModule;


// add an image Contacts.gif as a resource to your people module


PeopleOutlookBarSmartPartInfo.Icon = Properties.Resources.Contacts;


return PeopleOutlookBarSmartPartInfo;


}

#endregion

这将向 **outlookbarworkspace** 添加 **People** 按钮。

每当单击 People 按钮时，它将触发 **LoadPeopleModule 事件**。

PeopleOutlookBarSmartPartInfo.EventTopicName = EventTopicNames.LoadPeopleModule;
上述行 **发布一个名为 LoadPeopleModule 的事件**。

10. 打开 **Infrastructure.Interface** 项目的 Constant 文件夹中的 **EventTopicNames.cs**。

在 **EventTopicNames** 类中添加以下行：

public const string LoadPeopleModule = "LoadPeopleModule";

11. 通过双击打开 **PeopleModule** 中的 **ModuleController.cs**。
写入 using

using Matias.Infrastructure.Interface.Constants;

向 AddViews() 函数添加代码。

private void AddViews()


{


PeopleView myPeopleView = WorkItem.SmartParts.AddNew<PeopleView>();


WorkItem.Workspaces[WorkspaceNames.LeftWorkspace].Show(myPeopleView);



WorkItem.SmartParts.Remove(myPeopleView);


}

第 1 行将创建 **PeopleView 智能部件**的对象，并将其添加到**工作项集合**中。

第 2 行将**智能部件**显示在 **outlookbarworkspace(_leftworkspace)** 中。

12. 运行解决方案，它只会显示 Outlookbar 工作区中的 People 按钮。

单击 PeopleModule 没有反应，我们仍然需要添加代码来在按钮上方的空间中打开 PeopleViewLeft，并在 _rightWorkspace 中打开 PeopleViewRight。

步骤 5：添加代码以处理 outlookbarworkspace 的单击事件。

1. 正如我们在第 [行](...)[PeopleView.cs](...) 中发布了事件

PeopleOutlookBarSmartPartInfo.EventTopicName = EventTopicNames.LoadPeopleModule;

现在我们将在 **PeopleViewPresenter** 中**订阅事件**。

在解决方案资源管理器中双击打开 **PeopleViewPresenter.cs** 并添加以下行。

using Matias.Infrastructure.Interface.Constants;


using Microsoft.Practices.CompositeUI.EventBroker;



[EventSubscription(EventTopicNames.LoadPeopleModule, Thread = 
ThreadOption.UserInterface)]


public void OnLoadPeopleModule(object sender, EventArgs e)



{


PeopleViewLeft ObjPeopleLeftView = 


WorkItem.SmartParts.AddNew<PeopleViewLeft>();



WorkItem.Workspaces[WorkspaceNames.LeftWorkspace].Show(ObjPeopleLeftView);



WorkItem.SmartParts.Remove(ObjPeopleLeftView);

PeopleViewRight ObjPeopleRightView = 


WorkItem.SmartParts.AddNew<PeopleViewRight>();



WorkItem.Workspaces[WorkspaceNames.RightWorkspace].Show(ObjPeopleRightView);



WorkItem.SmartParts.Remove(ObjPeopleRightView);


}

每当**单击 Outlookbar 工作区中的 People 项目**时，它将**在 outlookbarworkspace 的左侧显示 PeopleViewLeft 智能部件，在右侧显示 PeopleViewRight 智能部件**。

步骤 6：左右视图之间的通信

这些步骤取自 SmartClientBaseLineArchitectureToolkit（如何：视图之间的通信）


要实现视图之间的通信，请添加执行以下操作的代码：

1. 定义**事件主题**。

2. **从 PeopleView Left 视图的演示者发布事件**。

3. **捕获 PeopleViewLeft 视图中按钮的单击事件**。

4. 刷新 PeopleViewRight 视图。

5. **在 PeopleViewRight 视图的演示者中订阅事件**。

定义事件主题

1. 打开位于 **Infrastructure.Interface** 项目 **Constants 文件夹**中的 **EventTopicNames.cs** 文件。

2. 添加常量定义，如下面的代码所示。

 public const string ChangeColor = "ChangeColor";

创建发布事件的代码

1. 打开 **PeopleViewLeftPresenter.cs** 文件。

2. 添加以下 using 语句。

using Matias.Infrastructure.Interface.Constants;

using Microsoft.Practices.CompositeUI.EventBroker;

3. 添加声明事件处理程序，如下面的代码所示。

[EventPublication(EventTopicNames.ChangeColor, PublicationScope.Global)]

public event EventHandler<EventArgs> ChangeColor;

4. 添加发布事件的代码，如下面的代码所示。

public void ChangeViewColor()

{

Random random = new Random();


int r = random.Next(256);

int g = random.Next(256);

int b = random.Next(256);


System.Drawing.Color color = System.Drawing.Color.FromArgb(r,g,b);


if (ChangeColor != null)

{
ChangeColor(this, new EventArgs<System.Drawing.Color>(color));

}

}

捕获按钮单击并调用演示者

1. 在解决方案资源管理器中，右键单击 **PeopleViewLeft.cs** 文件，然后单击 **View Designer**。

2. 从 Visual Studio 工具箱将一个按钮拖到 **PeopleViewLeft** 视图上。将按钮的名称更改为 **changeColorButton**，将 Text 更改为 **“Change Color”**。

3. 双击 changeColorButton 按钮。Visual Studio 会创建 changeColorButton_Click 方法。

实现 **changeColorButton_Click** 方法，如下面的代码所示。

private void changeColorButton_Click(object sender, System.EventArgs e)

{

_presenter.ChangeViewColor();

}

创建更新右视图的代码

1. 在解决方案资源管理器中，右键单击 **IPeopleViewRight.cs** 文件，然后单击 View Code。

2. 添加方法，如下面的代码所示。

void ChangeColor(System.Drawing.Color color);

3. 在解决方案资源管理器中，右键单击 **PeopleViewRight.cs** 文件，然后单击 View Code。

4. 添加更改视图背景颜色的方法，如下面的代码所示。

public void ChangeColor(System.Drawing.Color color)

{
this.BackColor = color;

}

创建订阅事件的代码

1. 打开 **PeopleViewRightPresenter.cs** 文件。

2. 添加以下 using 语句。

using Matias.Infrastructure.Interface.Constants;

using Microsoft.Practices.CompositeUI.EventBroker;

1. 添加订阅事件并通知视图的代码，如下面的代码所示。

[EventSubscription(EventTopicNames.ChangeColor, Thread = 
ThreadOption.UserInterface)]

public void ChangeColorHandler(object sender, EventArgs<System.Drawing.Color> e)

{

View.ChangeColor(e.Data);

}

再次从步骤 3 开始继续操作，以在 outlookbar 中创建所需的任意数量的项目。

摘要

到目前为止我们做了什么
创建了一个智能客户端解决方案
添加了 outlookbarworkspace
添加了业务模块
向业务模块添加了视图
添加了在 outlookbarworkspace 中显示 people 项目的代码。
使用事件在单击 People 项目时加载 outlookbarworkspace 中的视图。
实现了左右视图之间的通信。
因此，当应用程序启动时，People Module 会被加载，并向 OutlookBarWorkspace 添加 People 按钮。
当单击 People 按钮时，它会在 _leftWorkspace 中显示 PeopleViewLeft，在 _rightWorkspace 中显示 PeopleViewRight。

致谢

我想感谢 Matias Woloski，如果他没有创建非常出色的 workspace，就不会有 outlookbarworkspace 的教程。
我想感谢 Swati Tambe 协助我创建本文档。