CAB Outlook Style

Topics: CAB & Smart Client Software Factory
Apr 21, 2006 at 3:31 AM
originally posted by: cpearson

Hi

I've watched the webcasts, completed the hands-on-labs, but I'm still unclear on which is the best workspace I should use to develop an Outlook like UI in CAB.

In Outlook, the left hand panels or Navigation pane (Mail, Calender, Contacts, Tasks) when clicked show a different view. For example, I click Mail and a tree like view appears of mail folders, followed by the listing of mail items in the selected folder, then if I select a mail item, the message is displayed.

I thought this would be like a ZoneWorkspace, if anyone would have an example or thoughts on how to implement something like this I would be most greatful.

Craig
Apr 21, 2006 at 8:29 AM
originally posted by: ChrisHolmes

If you want, you can send me an e-mail and I can go over some details about how I implemented this functionality:

http://www.chrisholmesonline.com/images/CAB_Outlook.jpg

It's more complicated than I can probably accurately describe in this post, and there may be a better way to do it than how I am doing it.

What I basically did was use a SplitContainer to split the view into the navigation portion on the left and the main view on the right. Then I wrote a UserControl (SmartPart) that I called OutlookBar. I wrote a UIAdapter, UIAdapterFactory, ItemCollection and ItemCommandAdapter for it so that I could use it like a ToolStrip or MenuStrip in the CAB infrastructure. With those classes my modules can create an OutlookBarButton (subclass of a standard Button) and via the UIExtensionSite they can add their button (complete with an Icon) to the OutlookBar, and also register a CommandHandler. In this way the OutlookBar never has to know anything about the modules that are adding buttons to it, just like a ToolStrip or MenuStrip.

The OutlookBar also contains a DeckWorkspace that is exposed through a property. It is that DeckWorkspace that gets registered with the RootWorkItem. WorkItems in my Modules are then able to create their own SmartParts and display them in that DeckWorkspace when they are activated. From the image you can see, I am using a ListView on the left with icons for male/female employees and their names. When I switch to a different WorkItem in a different module, it adds its own SmartPart to that DeckWorkspace. So every WorkItem can use that OutlookBar space to display any specialized lists or trees that it needs.

My OutlookBar is not 100% replica of the real OutlookBar. As you can see from the image, I don't have the blue, horizontal grabber bar implemented so I don't have the drag/hide button functionality. You can't hide those large buttons like in Outlook and have their icons moved to a bottom panel strip. But that's something we don't need right this second so I was waiting until I had free time to implement it.
Apr 22, 2006 at 8:36 AM
originally posted by: ChrisHolmes

Blogged this for anyone else interested, source code available:

http://www.chrisholmesonline.com/2006/04/21/cab-outlookbar/
Apr 24, 2006 at 1:59 PM
originally posted by: ChrisRussi

Chris ... nice job ... I have learned quite a few things from your sample code. Well done.

Chris
May 2, 2006 at 4:50 AM
originally posted by: matiaswoloski

Hi guys,

Based on Chris Holmes idea 1 and code taken from Reference Implementation 2 of SCSF 2, I wrote the "Outlook Bar Workspace"

http://staff.southworks.net/blogs/matiaswoloski/archive/2006/05/01/OutlookBar.aspx

Features:
- Add any smartpart or control and use the OutlookSmartPartInfo to tell the workspace the icon and the text of the button
- Stack strip, Overflow strip and the splitter that will move items from the stack to the overflow area and viceversa
- The OutlookSmartPartInfo has an EventTopicName property. If it is filled, an event will be fired with the EventBroker API on button (stack or overflow) click.
- Office look n feel. The code uses ProffesionalColorTable. That means that in Windows 2003 it will look gray and in XP it will look blue (or the color of the theme applied)
- Source code provided!

1http://www.chrisholmesonline.com/2006/04/21/cab-outlookbar/
2http://www.gotdotnet.com/codegallery/codegallery.aspx?id=941d2228-3bb5-42fd-8004-c08595821170