? 一、簡單概念介紹

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

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

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

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

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

?? 二、實例研究

1.應(yīng)用場景

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

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

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

2.需求分析

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

a.銷售業(yè)績的信息從店面現(xiàn)有的進(jìn)銷存系統(tǒng)中獲得。

b.Blog信息通過RSS獲得

c.每天的日程安排情況從秘書給自己設(shè)定的OA系統(tǒng)中獲得。

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

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

f.軟件開發(fā)周期要短，盡量利用現(xiàn)有系統(tǒng)的數(shù)據(jù)和邏輯。

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

???? 面對這些需求，我們不難得出結(jié)論：用CAB基礎(chǔ)件開發(fā)界面，用Web Service集成遺產(chǎn)系統(tǒng)信息都是不錯的選擇。

3.開始建立應(yīng)用

???? 由于本例我們主要是為了學(xué)習(xí)CAB，至于Web Service的應(yīng)用不做闡述。為了模擬類似的效果，和SOA系統(tǒng)開發(fā)過程中共享契約的原則，我們通過數(shù)據(jù)集來代表契約（XSD文件），用實際的XML文件代表Web Service的返回結(jié)果。

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

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

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

? 第二步：繪制主窗口

????? a.將系統(tǒng)默認(rèn)產(chǎn)生的Form1窗體，命名為TestSmartPartForm。

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

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

第三步：定義數(shù)據(jù)實體（或者定義服務(wù)契約）

?? a.新建DataSources文件夾。

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

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

第四步：建立視圖

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

?? 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繼承，將標(biāo)題設(shè)置為“我的博客".加入Grid控件和數(shù)據(jù)集myBlogs進(jìn)行綁定。最終效果如下圖：

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

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

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

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

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

?? a.建立應(yīng)用入口類。新建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關(guān)聯(lián)。沒有沒有特定的WorkItem，采用默認(rèn)的“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的主要作用是提供顯示試圖的方法，將業(yè)務(wù)實體數(shù)據(jù)填充到數(shù)據(jù)集，并且讓數(shù)據(jù)集和控件綁定。

以顯示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);

}

}
}

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

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

??? 最后我們需要將視圖，在住窗體的deckWS_Blogs控件中顯示。在WorkItem中我們直接可以通過this.Workspace[]來索引住窗體上的Workspace，CAB已經(jīng)自動將在設(shè)計時添加的Workspace控件添加到了Workspaces列表。索引導(dǎo)特定的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,建立對應(yīng)的Controller。新建RootController.cs，將RootController類從Controller繼承，加入以下代碼，將其與WorkItem關(guān)聯(lián)。

private ?SmartRootWorkItem?rootWorkItem? = ? null ;

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

?? 同時為了將業(yè)務(wù)實體和WorkItem、View結(jié)合起來，我們將數(shù)據(jù)集通過State列表共享。如以下代碼：

?

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

?? RootController類中當(dāng)然還共享了其他如DailyPlan、DailyTask等業(yè)務(wù)數(shù)據(jù)，由于篇幅不再列出，在源代碼中可以查看。

第六步：修改視圖代碼，在視圖中顯示數(shù)據(jù)。

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

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中還必須顯示兩個子視圖。這樣就使數(shù)據(jù)的共享，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();
}

???? 我們發(fā)現(xiàn)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);
}

}

第八步：運行程序

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

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