![Sample Image - smartclientoutlookbar.jpg]()
Contents
Introduction
Example Application
Installing SCSF and its prerequisites
Installing Outlookbarworkspace
Viewing an outlook like side bar in a sample application
Create New Smart Client Solution
Modify the solution to add OutlookBarWorkspace
Adding items to outlookbarworkspace and their corresponding
views in the left
and right.
; Adding Business Module to Smart Client Solution
; Implementing the User Interface-Add a new view (with presenter)
Add code to display item in outlookbarworkspace
Add code to handle click of outlookbarworkspace.
Communication between left and right Views
Summary
Introduction
I have been reading codeproject for some time and have been using the codes
provided. I saw that there were quite a few articles on outlook side bar. Then
while searching for the same in google I found
Matias
Woloski’s blog and his
creation (a
Composite UI Application Block(CAB) workspace)
outlookbarworkspace
which created a beautiful outlook like side bar. Then I went on to study
Microsoft Smart client software factory and decided to use both
these in my next
project. A few days back I decided to write an article on whatever I learnt in
the process and basically using the smart client software factory to get an
outlook bar.
As this is my first article I will be very anxious to know if you found it to be
useful. So please do provide feedback.
Example application
We will create an example application which will have a outlook like side bar
with a few buttons. We will also create their corresponding view which will
contain just a button. We will also create events such that when those buttons
are clicked some changes occur in the right side of the application. The
screenshot shows the example application.
Installing SCSF and its prerequisites.
If you want to use all the assets in the Smart Client Software Factory, you
must
install the
Composite UI Application Block,
Enterprise Library for .NET
Framework 2.0,
Guidance Automation Extensions and
Guidance Automation Toolkit.
Note: The Guidance Automation Toolkit is required only if you want to customize
the Smart Client Development guidance package. As we will not be doing this
here, you may decide to not install it, else do install it after the guidance
automation extensions and before you install the smart client software factory.
Once you download and install the smart client software factory, u will get the
SmartClientBaseLineArchitectureToolkit.chm file. It has a section detailing the
entire process of installation of its prerequisites.
I would also advise you to download the hands on labs to learn the basics.
Installing Outlookbarworkspace
Download and build the
outlookbarworkspace. You may
have to provide references
to the relevant libraries in SCSF while building.
Viewing an outlook like side bar in a sample application
Step 1: Create New Smart Client Solution.
(The steps for doing the same are detailed in the HandsOnLabsAug04 of Smart
Client Software Factory (Lab01 Creating Smart Client Software Factory))
1. State the solution name to
SmartClientMatias and
Matias as the value for the
Root namespace. You could use any other name as per your application. This value
appears as the first part of every namespace in the generated solution. For
example, the classes in the
Shell project exist in the namespace
Matias.Infrastructure.Shell.
2. Unselect the option
Create a separate module to define the layout for the
shell.
Note:Use this option to indicate that the recipe should create a separate module
to define the layout for the shell. If you select this option, the recipe
creates a shell with only a DeckWorkspace. The recipe creates a separate module
project that contains a view and presenter that you can use to define the
layout. In this Lab, you will not use a separate module to define the layout for
the shell. Instead, you will define the layout in a view within the Shell
project.
Step 2 : Modify the solution to add OutlookBarWorkspace.
1.Open ShellForm.cs from Shell project.
2.Select
_leftworkspace which is DeckWorkspace and delete that workspace. In
place of DeckWorkspace we are going to use outlookbarworkspace.
3. Open toolbox, right click and select
“Choose items…”. From Choose Toolbox
Items Window, select the assembly
“CompositeUIExtensions.Winforms” from the bin
folder of outlookbarworkspace. This will add
Outlookbarworkspace, headerstrip
and outlookbarsmartpartinfo.
4. Drag outlookbarworkspace in area Panel1 ( from where u have deleted _leftworkspace).
5. select the
outlookbarworkspace1 and change name to
_leftWorkspace,
6. select
Dock = “Left” for _leftWorkspace.
7. Select
SplitCcontainer1 and
Change it’s property FixedPanel = Panel1
8. Run the Project it will display following screen, the outlookbarWorkspace
without any items in it.
Thus we have added Outlookbarworkspace to the solution, now we have to modify
the solution to add item’s to it
Step 3: Adding items to outlookbarworkspace and their corresponding views in the
left and right.
Step 3a : Adding Business Module to Smart Client Solution
(
Step 3a documentation is taken from HandsOnLabsAug04 of Smart Client Software
Factory (Lab02 Creating a Shipping Module))
1. To add items to outlookbarworkspace, we will create new Business module.
2. In Solution Explorer, right-click the Source solution folder, point to Smart
Client Software Factory, and then click
Add Business Module. The Add New Project
dialog box appears with the Add Business Module template selected.
3. Enter
PeopleModule as the Name and set the Location to the Source folder of
the solution.
4. Click OK.
The guidance package displays the
Create Business Module wizard. This wizard
displays the module namespace and an option to create an interface library for
the module. If you select this option, the recipe will create an additional
project to contain the elements that provide the public interface to the
assembly.
5.
Deselect the option Create an interface library for this module.
6. Click Finish.
The root folder of the project contains two classes,
Module and
ModuleController.
The Module class derives from the Composite UI Application Block class
ModuleInit. The
Composite UI Application Block calls the Load method of this
class on startup. The
Load method contains code to
create and run a new ControlledWorkItem.
The
ModuleController class contains methods that you can modify to customize the
behavior of the module on startup. For example, you can add services or display
user-interface items. (In the next Step you will modify some of these methods.)
The recipe also adds the following XML entry for the module to the profile
catalog of the application. This means that the Composite UI Application Block
will load the module at application initialization time.
<Modules><br />
<br />
<ModuleInfo AssemblyFile="PeopleModule.dll" /><br />
<br />
</Modules><br />
Step 3b: Implementing the User Interface- Add a new view (with presenter)
(Step 3b documentation is taken from HandsOnLabsAug04 of Smart Client Software
Factory (Lab03 Creating a Ship New Order View))
Here you will use recipe named
Add View (with presenter) to create classes that
implement the Model-View-Presenter pattern.
1. In Solution Explorer, right-click the
Views folder of the
PeopleModule
project, point to
Smart Client Software Factory, and then click
Add View (with
presenter).
2. The
Add View (with presenter) recipe launches a wizard. Enter
PeopleView in
the View Name field and select the
Create a folder for the view checkbox.
If Create a folder for the view is selected, the recipe will create a folder and
place the new items in this folder; otherwise, the new items are placed in the
selected folder in solution explorer.
Click Finish. The recipe generates the folder, classes and interface for the
implementation.
The recipe generates the following items:
·
A view interface class. This is an empty interface definition for the view.
You will modify this interface to define the public interface to the view. (The
presenter class uses this interface to communicate with the view.)
·
A view implementation user control. This class derives from
UserControl and
has the
[SmartPart] attribute. This is required to support the inversion of
control functionality, which will automatically associate service dependencies,
controllers, and so on. The user control also implements the view interface and
contains a reference to its presenter. You will modify this class to call the
presenter for user-interface actions that affect other views or business logic.
·
A presenter class for the view. This class extends the
Presenter base class
defined in Infrastructure.Interface project and contains the business logic for
the view. You will modify this class to update the view for your business logic.
Similarly
Add two more views to the
PeopleModule, name them as
PeopleViewLeft,
PeopleViewRight.
PeopleView will add a item to the outlookbarworkspace and then load the
PeopleViewLeft in _leftWorkspace and PeopleViewRight in _RightWorkspace on click
of People Item of OutlookBarWorkspace.
Step 4 : Add code to display people item in outlookbarworkspace.
1. Double click in
PeopleViewLeft.cs to open the designer window.
2. Open the Toolbox and drag a Label control onto the upper-left corner of the
design surface. Open the Properties window for the label and set the following
property values:
Text = “PeopleViewLeft”
3. Double click in
PeopleViewRight.cs to open the designer window.
4. Open the Toolbox and drag a
Label control onto the upper-left corner of the
design surface. Open the
Properties window for the label and set the following
property values:
Text = “PeopleViewRight”
5. Now we will write code to add
People Button to
outlookbarworkspace when
PeopleModule gets loaded.
6. To add a button to the outlookbarworkspace that smartpart has to implement
ISmartPartInfoProvider interface.
7. Add reference to
CompositeUIExtensions.Winforms.dll (This is the assembly for
Outlookbarworkspace) in
PeopleModule.
Right click
PeopleView.cs in Solution Explorer, select View Code
Add :
using CompositeUIExtensions.Winforms;<br />
<br />
using Matias.Infrastructure.Interface.Constants;<br />
Implement
ISmartPartInfoProvider interface by modifying the following line :
[SmartPart]<br />
<br />public partial class PeopleView : UserControl,
IPeopleView,ISmartPartInfoProvider<br /><br />
{<br /><br />
.......<br /><br />
}<br />
8. Rightclick “
ISmartPartInfoProvider” and select
“implement interface”, it
will add code at the end
#region ISmartPartInfoProvider Members<br />
public ISmartPartInfo GetSmartPartInfo(Type smartPartInfoType)<br />
{<br /><br />
throw new Exception("The method or operation is not implemented.");<br /><br />
}<br />#endregion<br />
9. Modify the function and add following code
#region ISmartPartInfoProvider Members<br /><br />
public ISmartPartInfo GetSmartPartInfo(Type smartPartInfoType)<br />
{<br /><br />
OutlookBarSmartPartInfo PeopleOutlookBarSmartPartInfo = new
OutlookBarSmartPartInfo();<br /><br />
PeopleOutlookBarSmartPartInfo.Title = "People";<br />
<br />PeopleOutlookBarSmartPartInfo.EventTopicName = EventTopicNames.LoadPeopleModule;<br /><br />
PeopleOutlookBarSmartPartInfo.Icon = Properties.Resources.Contacts;<br /><br />
return PeopleOutlookBarSmartPartInfo;<br /><br />
}<br />
#endregion<br />
This will add
People button to the
outlookbarworkspace.
Whenever People Button gets clicked it will fire
LoadPeopleModule event.
PeopleOutlookBarSmartPartInfo.EventTopicName = EventTopicNames.LoadPeopleModule;
<br />
The above line
publishes an event with eventname
LoadPeopleModule.
10. Open
EventTopicNames.cs from Constant folder of
Infrastructure.Interface
project.
Add following line in
EventTopicNames class
public const string LoadPeopleModule = "LoadPeopleModule";<br />
11. Open
ModuleController.cs in
PeopleModule by double clicking it.
write using :
using Matias.Infrastructure.Interface.Constants;<br />
Add code to the
AddViews() function.
private void AddViews()<br /><br />
{<br /><br />
PeopleView myPeopleView = WorkItem.SmartParts.AddNew<PeopleView>();<br /><br />
WorkItem.Workspaces[WorkspaceNames.LeftWorkspace].Show(myPeopleView);<br />
<br />
WorkItem.SmartParts.Remove(myPeopleView);<br /><br />
}<br />
Line1 will create an object of
PeopleView smart part, and add it to the
collection of workitems.
Line 2 displays the
smartpart in
outlookbarworkspace(_leftworkspace).
12. Run the solution it will only show u People Button in Outlookbar workspace.
Clicking on PeopleModule does not do anything, we still have to add code to open
PeopleViewLeft in space above the button, and PeopleViewRight in _rightWorkspace.
Step 5 : Add code to handle click of outlookbarworkspace.
1. As we have published an event in
PeopleView.cs in Line :
PeopleOutlookBarSmartPartInfo.EventTopicName = EventTopicNames.LoadPeopleModule;<br />
Now we will
subscribe to an event in PeopleViewPresenter.
Open
PeopleViewPresenter.cs by double clicking it in solution explorer and Add following lines.
using Matias.Infrastructure.Interface.Constants;<br /><br />
using Microsoft.Practices.CompositeUI.EventBroker;<br />
<br />
[EventSubscription(EventTopicNames.LoadPeopleModule, Thread =
ThreadOption.UserInterface)]<br /><br />
public void OnLoadPeopleModule(object sender, EventArgs e)<br />
<br />
{<br />
<br />PeopleViewLeft ObjPeopleLeftView = <br />
<br />WorkItem.SmartParts.AddNew<PeopleViewLeft>();<br />
<br />
WorkItem.Workspaces[WorkspaceNames.LeftWorkspace].Show(ObjPeopleLeftView);<br />
<br />
WorkItem.SmartParts.Remove(ObjPeopleLeftView);<br />
PeopleViewRight ObjPeopleRightView = <br />
<br />WorkItem.SmartParts.AddNew<PeopleViewRight>();<br />
<br />
WorkItem.Workspaces[WorkspaceNames.RightWorkspace].Show(ObjPeopleRightView);<br />
<br />
WorkItem.SmartParts.Remove(ObjPeopleRightView);<br /><br />
}<br />
It will display
PeopleViewLeft smartpart in left and PeopleViewRight smartpart
in right of outlookbarworkspace whenever
People Item in Outlookbar workspace
gets clicked.
Step 6 : Communication between left and right Views
These steps are taken from SmartClientBaseLineArchitectureToolkit (How to:
Communicate Between Views)
To implement the communication between views add the code that performs the
following:
1. Define the
event topic.
2.
Publish the event from the presenter for the
PeopleViewLeft view.
3.
Capture a button click in the view
PeopleViewLeft.
4. Refresh the view
PeopleViewRight.
5.
Subscribe to the event in the
presenter for the PeopleViewRight view.
To define an event topic
1. Open the file
EventTopicNames.cs that is located in the
Constants folder of
the
Infrastructure.Interface project.
2. Add the constant definition, as shown in the following code.
public const string ChangeColor = "ChangeColor";<br />
To create the code to publish the event
1. Open the file
PeopleViewLeftPresenter.cs.
2. Add the following using statements.
using Matias.Infrastructure.Interface.Constants;<br />
using Microsoft.Practices.CompositeUI.EventBroker;<br />
3. Add the code to declare the event handler, as shown in the following code.
[EventPublication(EventTopicNames.ChangeColor, PublicationScope.Global)]<br />
public event EventHandler<EventArgs> ChangeColor;<br />
4. Add the code to publish the event, as shown in the following code.
public void ChangeViewColor()<br />
{<br />
Random random = new Random();<br /><br />
int r = random.Next(256);<br />
int g = random.Next(256);<br />
int b = random.Next(256);<br />
<br />System.Drawing.Color color = System.Drawing.Color.FromArgb(r,g,b);<br />
<br />if (ChangeColor != null)<br />
{<br />ChangeColor(this, new EventArgs<System.Drawing.Color>(color));<br />
}<br />
}<br />
To capture the button click and call the presenter
1. In Solution Explorer, right-click the file
PeopleViewLeft.cs, and then click
View Designer.
2. Drag a button from the Visual Studio Toolbox onto the
PeopleViewLeft
view.
Change the name of the button to
changeColorButton and Text to
“Change Color”.
3. Double-click the changeColorButton button. Visual Studio creates the method
changeColorButton_Click.
4. Implement the
changeColorButton_Click method, as shown in the following code.
private void changeColorButton_Click(object sender, System.EventArgs e)<br />
{<br />
_presenter.ChangeViewColor();<br />
}<br />
To create the code to update the right view
1. In Solution Explorer, right-click the file
IPeopleViewRight.cs, and then
click View Code.
2. Add the method, as shown in the following code.
void ChangeColor(System.Drawing.Color color);<br />
3. In Solution Explorer, right-click the file
PeopleViewRight.cs, and then click
View Code.
4. Add a method that changes the background color of the view, as shown in the
following code.
public void ChangeColor(System.Drawing.Color color)<br />
{<br />this.BackColor = color;<br />
}<br />
To create the code to subscribe to the event
1. Open the file
PeopleViewRightPresenter.cs.
2. Add the following using statements.
using Matias.Infrastructure.Interface.Constants;<br />
using Microsoft.Practices.CompositeUI.EventBroker;<br />
1. Add the code to subscribe to the event and notify the view, as shown in the
following code.
[EventSubscription(EventTopicNames.ChangeColor, Thread =
ThreadOption.UserInterface)]<br />
public void ChangeColorHandler(object sender, EventArgs<System.Drawing.Color> e)<br />
{<br />
View.ChangeColor(e.Data);<br />
}<br />
Continue the steps from Step 3 once again to create as many items as you want in
your outlookbar.
Summary
Till now what we did :
Created one smart client solution
Added outlookbarworkspace
Added business module
Add views to the business module
Added code to display people item in outlookbarworkspace.
Used events for loading views on click of People item in outlookbarworkspace.
Communicated between left and right views.
So, when the application starts, the People Module gets loaded and it adds
People button to the OutlookBarWorkspace.
When People button gets clicked it will displays PeopleViewLeft in _leftWorkspace
and PeopleViewRight in _rightWorkspace.
Credits
I would like to thank Matias Woloski as there would have been no outlookbarworkspace tutorial if he did not create the very
nice workspace.
I would like to thank Swati Tambe for helping me create this document.
