? 一、簡單概念介紹

????? CAB提供一個開發環境能很好的隱藏復雜度和提高生產力，通過高度抽象和關注點的分離，開發人員能夠關注于業務邏輯提高基礎框架代碼的復用。Smart Part是整個CAB體系中重要的一部分，它可以將界面獨立于業務邏輯，讓界面和業務邏輯松散的耦合起來。Smart Part的應用中有幾個重要概念：

???? WorkSpace：作為一個容器，它可以統一的添加和顯示視圖。CAB中提供了一組控件作為視圖的容器，包括DeckWorkSpace，MDIWorkSpace，TabWorkSpace，WindowWorkSpace，ZoneWorkSpace。它們的作用有點類似普通Windows 控件Panel，MDI窗口，TAB控件，Window窗體。在程序中根據名稱可以通過WorkItem的WorkSpace集合索引到它們。

???? Smart Part: 也可以被稱作View,實際上是一個個自定義的控件。

???? 其他像WorkItem, State之類的概念我在前兩次的學習筆記中曾經介紹過了，這里就不再羅嗦了。

????? 我們利用CAB中WorkSpace和Smart Part到底可以做些什么呢？WorkSpace可以一致的顯示多個控件，Shell 開發人員創建定制的 workspaces 以提供控件周圍相似的框架和修飾，共享的布局和定位，眩目的界面切換。下面我們還是通過一個實例來逐步理解CAB之Smart Part應用給我們帶來的好處，特別是在多個數據來源，將多個界面塊組合成一個統一美觀的整體時的應用方便性。

?? 二、實例研究

1.應用場景

??? 我相信研究過CAB的朋友肯定知道微軟提及的一個應用案例，Dell的客服桌面應用。該應用就是為了提高克服人員的辦公效率，將在提供客戶服務過程中需要從多個軟件系統獲取的信息，統一的集成到一個界面上來。也許大家會為該應用卓越的表現力，而感到親切、人性化，其實類似這樣的應用我們通過CAB基礎件的應用，也可以達到類似的效果，而不需要在界面化太多的精力去處理業務和界面之間的交互。為了能夠說明問題，我在學習過程中也做了一個簡單的例子。

???? 大家可能都開發過網站或者用過Share point portal,那大家肯定都應該知道Web Part這個概念，在CAB中類似的有了Smart Part的概念。Web Part能將一個個的信息塊集成到一個統一的Portal,Smart Part也能將不同的信息塊集成到一個界面。我們不妨假設這樣一個應用場景：

????? 假設您是某百貨店的店長，希望每天能看到店里的銷售業績，能看到自己每天的郵件，能看到自己喜歡的Blog上的資源，能有軟件提示自己每天的行程安排，最重要的是這些信息需要在一個統一的界面上顯示出來。面對這樣的需求，CAB來開發界面大有用武之地，如果采用SOA的架構，更能使遺產系統的價值利用得更好。

2.需求分析

?? 具體來說該軟件有以下需求：

a.銷售業績的信息從店面現有的進銷存系統中獲得。

b.Blog信息通過RSS獲得

c.每天的日程安排情況從秘書給自己設定的OA系統中獲得。

d.電子郵件通過集團統一的電子郵件系統中獲得，該郵件系統支持Web Service。

e.軟件界面簡單統一，不能有過多的界面切換，最好能將所有概要信息顯示在一個界面之上。

f.軟件開發周期要短，盡量利用現有系統的數據和邏輯。

g.界面可能會擴展，以后可能需要集成更多的系統。

???? 面對這些需求，我們不難得出結論：用CAB基礎件開發界面，用Web Service集成遺產系統信息都是不錯的選擇。

3.開始建立應用

???? 由于本例我們主要是為了學習CAB，至于Web Service的應用不做闡述。為了模擬類似的效果，和SOA系統開發過程中共享契約的原則，我們通過數據集來代表契約（XSD文件），用實際的XML文件代表Web Service的返回結果。

?? ? 第一步：建立解決方案

????? a.啟動VS2005,新建windows application，命名為TestSmartPart在項目中引用以下組件：

• Microsoft.Practices.CompositeUI;
• Microsoft.Practices.CompositeUI.WinForms;
• Microsoft.Practices.ObjectBuilder

? 第二步：繪制主窗口

????? a.將系統默認產生的Form1窗體，命名為TestSmartPartForm。

????? b.通過菜單-->工具-->自定義工具箱，選擇瀏覽Microsoft.Practices.CompositeUI.WinForms.dll，這是工具箱中能出現DeckWorkSpace,MDIWorkSpace等控件。

???? c.打開TestSmartPartForm的設計視圖，調整窗體的高度和寬度，繪制5個DeckWorkSpace控件，分別命名為deckWS_Calendar，deckWS_Blogs，deckWS_Plan，deckWS_Task，deckWS_MainEmail。最終的界面效果如下圖：

第三步：定義數據實體（或者定義服務契約）

?? a.新建DataSources文件夾。

?? b.在DataSources文件夾中添加myBlogs,myEmail,myTasks,myPlans四個數據集。具體結構在文中不作描述，大家可以參考文后的源代碼。

?? c.根據數據集的結構，建立數據源。這里我們用Xml文件來代替數據庫中讀取的數據，分別添加myBlogs.xml,myEmail.xml,myTasks.xml,myPlans.xml。數據的內容我在此略過。將各個Xml文件內容錄入完成后，拷貝到運行目錄。 我不知道為什么設置文件的Copy To OutPut Dierctory屬性為always，VS.Net編譯項目的時候無法復制到輸出目錄，難道該屬性是在建立安裝程序才起作用? 后來我發現是生成的時候連同DataSource文件夾，一起輸出到了Bin目錄，因此讀取的時候也需要加上DataSource目錄。

第四步：建立視圖

??? a.建立BlogView、DailyPlan、DailyTask、Emails四個文件夾，這樣做的目的只是為了讓項目的結構更加清晰，同時以后要是對這些視圖進行擴展，也可以把子視圖都放到對應的文件夾里。

?? b.在項目根目錄下添加UserControl，命名為TitlePart.cs。給該用戶控件加上一個lable控件，并且加入以下代碼：

using ?System;
using ?System.Collections.Generic;
using ?System.ComponentModel;
using ?System.Drawing;
using ?System.Data;
using ?System.Text;
using ?System.Windows.Forms;
using ?Microsoft.Practices.CompositeUI.SmartParts;

namespace ?TestSmartPart
{
[SmartPart]
public ?partial? class ?TitlePart?:?UserControl
{

public ?TitlePart()
{
InitializeComponent();
}

/**/ /// ? <summary>
/// ?Text?that?will?show?in?the?title?label.
/// ? </summary>
public ? string ?Title
{
get
{
return ?lblTitle.Text;
}
set
{
lblTitle.Text? = ?value;
}
}

/**/ /// ? <summary>
/// ?Tooltip?for?the?smartpart.
/// ? </summary>
public ? string ?Description
{
get
{
return ?toolTip.GetToolTip(lblTitle);
}
set
{
toolTip.SetToolTip(lblTitle,?value);
}
}
}
}

?? c.建立BlogView視圖。在文件夾BlogView新建UserControl，命名為myBlogView.cs。將該類從TitlePart繼承，將標題設置為“我的博客".加入Grid控件和數據集myBlogs進行綁定。最終效果如下圖：

?? d.建立dailyPlanView視圖。在文件夾DailyPlan中新建用戶控件，命名為myPlan.cs。將該類從TitlePart繼承，將標題設置為“我的日程"。加入Grid控件和數據myPlans進行綁定。

??? e.建立myTaskView視圖。在文件夾DailyTask中新建一個UserControl，命名為myTask.cs,將該類從TitlePart繼承，將標題設置為“銷售報表"。進入myTask.cs的設計時加入控件reportView1，同時根據myTask數據集建立柱狀圖。最終界面如下圖：

??? f.建立EmailView視圖。為了表現WorkSpace能夠層層顯示子視圖，我們在EmailView視圖上，添加了兩個DeckworkSpace用來顯示郵件的列表視圖和詳細信息視圖。EmailView本身又是通過上一級WorkSpace顯示的。這里略去郵件列表視圖和郵件詳細信息視圖的建立過程，請參前面視圖建立過程和源代碼。

? 到此我們基本上完成各個視圖的建立，大家不難發現，他們之間是相對獨立的，和WorkSpace無關的。

第五步：編寫WorkItem和Controller,連接所有視圖

?? a.建立應用入口類。新建SmartPartApplication.cs，將類代碼修改成以下形式：

using ?System;
using ?System.Collections.Generic;
using ?System.Windows.Forms;
using ?Microsoft.Practices.CompositeUI;
using ?Microsoft.Practices.CompositeUI.WinForms;
using ?System.Data;

namespace ?TestSmartPart
{
// 注意這句程序，它能將窗體和特定的WorkItem關聯。沒有沒有特定的WorkItem，采用默認的“WorkItem”代替“SmartRootWorkItem”。
class ?SmartPartApplication?:?FormShellApplication < SmartRootWorkItem,?TestSmartPartForm >
{
/**/ /// ? <summary>
/// ?The?main?entry?point?for?the?application.
/// ? </summary>
[STAThread]
public ? static ? void ?Main()
{
new ?SmartPartApplication().Run();
}
protected ? override ? void ?BeforeShellCreated()
{
base .BeforeShellCreated();
}

?

b.建立根級別的WorkItem。在本例中WorkItem的主要作用是提供顯示試圖的方法，將業務實體數據填充到數據集，并且讓數據集和控件綁定。

以顯示BlogView為例，我們來說明WorkItem是如何將BlogView展示到特定的WorkSpace的。首先我們來看以下代碼：

using ?System;
using ?System.Collections.Generic;
using ?System.Text;
using ?Microsoft.Practices.CompositeUI;
using ?Microsoft.Practices.CompositeUI.SmartParts;
using ?Microsoft.Practices.ObjectBuilder;
using ?System.Data;

namespace ?TestSmartPart
{
public ? class ?SmartRootWorkItem?:?WorkItem
{

private ?TestSmartPart.BlogView.myBlogView?blogView;

public ? override ? void ?Run()
{?
ShowBlogView();

}


private ? void ?ShowBlogView()
{
this .State[ " BlogDataSet " ]? = ? new ?DataSet();
((DataSet) this .State[ " blogDataSet " ]).ReadXml( " myBlogs.xml " );

IWorkspace?blogWorkspace? = ? this .Workspaces[ " deckWS_Blogs " ];
blogView? = ? this .Items.AddNew < TestSmartPart.BlogView.myBlogView > ( " BlogView " );
blogWorkspace.Show(blogView);

}

}
}

???? 系統通過入口程序會自動調用SmartRootWorkItem的Run方法，然后調用ShowBlogView方法來顯示Blog視圖。我們需要重點關注的是ShowBlogView本身。在顯示視圖之前我們需要為視圖中用到的數據，創建實例并且將其載入WorkItem的State列表，以便在視圖和Controller中共享使用。如代碼：

this .State[ " BlogDataSet " ]? = ? new ?DataSet();
((DataSet) this .State[ " blogDataSet " ]).ReadXml( " myBlogs.xml " );

??? 最后我們需要將視圖，在住窗體的deckWS_Blogs控件中顯示。在WorkItem中我們直接可以通過this.Workspace[]來索引住窗體上的Workspace，CAB已經自動將在設計時添加的Workspace控件添加到了Workspaces列表。索引導特定的Workspace后，我們需要將要顯示的試圖添加到WorkItem的Items集合，最后通過Workspace.Show(view)來顯示視圖。代碼如下：
???

IWorkspace?blogWorkspace? = ? this .Workspaces[ " deckWS_Blogs " ];
blogView? = ? this .Items.AddNew < TestSmartPart.BlogView.myBlogView > ( " BlogView " );
blogWorkspace.Show(blogView);

?? 其他視圖的添加方法類似，我就不再做說明。
?? c.正對根級別的WorkItem,建立對應的Controller。新建RootController.cs，將RootController類從Controller繼承，加入以下代碼，將其與WorkItem關聯。

private ?SmartRootWorkItem?rootWorkItem? = ? null ;

[ServiceDependency(Type? = ? typeof (WorkItem))]
public ?SmartRootWorkItem?RootWorkItem
{
set
{
rootWorkItem? = ?value;
}
}

?? 同時為了將業務實體和WorkItem、View結合起來，我們將數據集通過State列表共享。如以下代碼：

?

[State( " BlogDataSet " )]
public ?DataSet?BlogDataSet
{
set
{
if ?(value? != ? null ? && ?State? != ? null )
{
State[ " BlogDataSet " ]? = ?value;
}
}
get
{
return ?(DataSet)State[ " BlogDataSet " ];
}
}

?? RootController類中當然還共享了其他如DailyPlan、DailyTask等業務數據，由于篇幅不再列出，在源代碼中可以查看。

第六步：修改視圖代碼，在視圖中顯示數據。

???? 我們還是以BlogView為例來說明，視圖是如何將數據顯示出來的，其他視圖都相似，請參考源代碼。在視圖中主要是通過私有變量和加有[State]修飾符的屬性和業務數據、Controller相關聯的。代碼如下：

private ?RootController?controller? = ? null ;

[CreateNew]
public ?RootController?Controller
{
set
{
controller? = ?value;
}
}

private ?DataSet?blogDataSet? = ? null ;

[State]
public ?DataSet?BlogDataSet
{
set
{
blogDataSet? = ?value;
}
}

第七步:特殊處理，視圖的嵌套。

??? EmailView視圖和其他視圖有些不一樣，EmailView視圖有DeckWorkspace，在DeckWorkspace中還必須顯示兩個子視圖。這樣就使數據的共享，WorkItem的訪問存在少許差異。我們不妨首先來看SamrtRootWorkItem中顯示EmailView的方法：

? private ? void ?ShowEmailView()
{
IWorkspace?workspace? = ? this .Workspaces[ " deckWS_MainEmail " ];
emailView? = ? this .Items.AddNew < TestSmartPart.Emails.EmailView > ( " EmailView " );
workspace.Show(emailView);

if ?(emailWorkItem? == ? null )
{
emailWorkItem? = ? this .Items.AddNew < TestSmartPart.Emails.EmailWorkItem > ( " EmailWorkItem " );
}
emailWorkItem.State[ " emailDataSet " ]? = ? new ?DataSet();
((DataSet)emailWorkItem.State[ " emailDataSet " ]).ReadXml( " myEmails.xml " );
emailWorkItem.Run();
}

???? 我們發現TestSmartPart.Emails.EmailWorkItem被加入SamrtRootWorkItem的Items集合，deckWS_MainEmail這個Workspace也被加入SamrtRootWorkItem的Items集合。因此訪問這些Workspace時，必須通過WorkItem.Parent.Workspaces[ ]來訪問。代碼如下：

public ? class ?EmailWorkItem?:?WorkItem
{
private ?EmailDetailView?emailDetailView;
private ?EmailTitleView?emailTitleView;

public ? override ? void ?Run()
{

emailDetailView? = ? this .Items.AddNew < EmailDetailView > ( " EmailDetailView " );
emailTitleView? = ? this .Items.AddNew < EmailTitleView > ( " EmailTitleView " );

IWorkspace?titleWorkspace? = ? this .Parent.Workspaces[ " deckWS_EmailTitle " ];
IWorkspace?detailWorkspace? = ? this .Parent.Workspaces[ " deckWS_EmailDetail " ];

titleWorkspace.Show(emailTitleView);
detailWorkspace.Show(emailDetailView);
}

}

第八步：運行程序

????? 經過一些修改后，我們可以運行我們的例程，大家看看下面這個界面是不是像一個Portal啊？

源代碼下載地址： /Files/hyphappy/TestSmartPart.rar