Click here to Skip to main content
Click here to Skip to main content
Go to top

Creating an outlook like side bar using the smart client software factory

, 26 Sep 2006
Rate this:
Please Sign up or sign in to vote.
This is basically a tutorial to use the smart client software factory to create an outlook like side bar using Matias Woloski's outlookbar workspace

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>



<ModuleInfo AssemblyFile="PeopleModule.dll" />



</Modules>

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;



using Matias.Infrastructure.Interface.Constants;
Implement ISmartPartInfoProvider interface by modifying the following line :
[SmartPart]


public partial class PeopleView : UserControl, 
IPeopleView,ISmartPartInfoProvider


{


.......


}

8. Rightclick “ISmartPartInfoProvider” and select “implement interface”, it will add code at the end
#region ISmartPartInfoProvider Members

public ISmartPartInfo GetSmartPartInfo(Type smartPartInfoType)

{


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


}
#endregion
9. Modify the function and add following code
#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
This will add People button to the outlookbarworkspace.

Whenever People Button gets clicked it will fire LoadPeopleModule event.

PeopleOutlookBarSmartPartInfo.EventTopicName = EventTopicNames.LoadPeopleModule;


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

11. Open ModuleController.cs in PeopleModule by double clicking it.
write using :
using Matias.Infrastructure.Interface.Constants;

Add code to the AddViews() function.
private void AddViews()


{


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


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



WorkItem.SmartParts.Remove(myPeopleView);


}

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;

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;


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


}

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

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;

using Microsoft.Practices.CompositeUI.EventBroker;

3. Add the code to declare the event handler, as shown in the following code.
[EventPublication(EventTopicNames.ChangeColor, PublicationScope.Global)]

public event EventHandler<EventArgs> ChangeColor;

4. Add the code to publish the event, as shown in the following code.
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));

}

}

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)

{

_presenter.ChangeViewColor();

}

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

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)

{
this.BackColor = color;

}

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;

using Microsoft.Practices.CompositeUI.EventBroker;

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

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

{

View.ChangeColor(e.Data);

}

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Arnab Choudhuri
Web Developer
India India
No Biography provided

Comments and Discussions

 
Generaloutlookbarworkspace PinmemberMember 259927524-Aug-08 22:17 
GeneralSource code in VB PinmemberMember 259927524-Aug-08 21:43 
Questioncommunicate between views PinmemberMember 431735511-May-08 20:11 
GeneralREAD THIS: OUTLOOKBAR WORKSPACE DOWNLOAD Pinmembermwdev2-Oct-07 4:51 
GeneralOutlook bar workspace Pinmembernatasha sharma23-Jul-07 10:50 
GeneralRe: Outlook bar workspace PinmemberMember 187228419-Feb-08 19:45 
NewsOutlook Bar moved to codeplex project [modified] Pinmembermwdev29-Apr-07 9:50 
GeneralRe: Outlook Bar moved to codeplex project PinmemberArnab Choudhuri30-Apr-07 21:12 
QuestionCan we initialize the OutlookBar from a ModuleController? Pinmember10e15-Mar-07 10:00 
QuestionMDIs in the right side PinmemberDominic_roberts123-Feb-07 1:37 
QuestionError trying to use Outlook bar Pinmemberbeaubienr21-Feb-07 15:54 
AnswerRe: Error trying to use Outlook bar Pinmemberreasmei17-Nov-09 11:23 
QuestionSouthworks.net web site is down Pinmembercsraul19-Dec-06 6:48 
AnswerRe: Southworks.net web site is down PinmemberRoyVes31-Dec-06 19:36 
GeneralColor Scheme of the Outlook bar Pinmemberhmyhmy14-Nov-06 23:12 
QuestionWhy do you remove a View from SmartParts after you call Show method of the WorkSpace? PinmemberJose Flores7-Nov-06 11:03 
AnswerRe: Why do you remove a View from SmartParts after you call Show method of the WorkSpace? Pinmemberjamescooke_tx14-Dec-06 8:49 
GeneralRe: Why do you remove a View from SmartParts after you call Show method of the WorkSpace? Pinmemberjamescooke_tx14-Dec-06 10:47 
Yes it stays in memory.
Locate the view in the WorkItem.SmartParts collection to see if it exists. If it exists, simply show() it, otherwise AddNew() and Show() it. Do not remove it once added.
This is my code, same concept but different module and view names. Thanks to Aaron Anderson for help with this.
 
public void OnLoadPayablesModule(object sender, EventArgs e)
{
ICollection startupViews = WorkItem.SmartParts.FindByType();
Startup startupView = null;
foreach (Startup item in startupViews)
{
startupView = item;
break;
}
 
if (startupView == null) startupView = WorkItem.SmartParts.AddNew("Startup");
 
WorkItem.Workspaces[WorkspaceNames.RightWorkspace].Show(startupView);
 
}

GeneralRe: Why do you remove a View from SmartParts after you call Show method of the WorkSpace? Pinmemberjamescooke_tx14-Dec-06 10:48 
GeneralView status Pinmemberslusa26-Oct-06 6:35 
GeneralRe: View status Pinmemberjamescooke_tx14-Dec-06 10:48 
GeneralThank Pinmemberlucasontivero9-Oct-06 8:28 
GeneralThanks! Pinmembertparker5-Oct-06 13:18 
GeneralRe: Thanks! PinmemberAlan Yost27-Mar-07 13:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 26 Sep 2006
Article Copyright 2006 by Arnab Choudhuri
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid