CAB Demos series - Part I

Introductory Composite UI Application Block demos

This document explains how to run simple introductory demos of CAB. To run these demos you will need:

- Visual Studio 2005

- The Composite UI Application Block (including los QuickStarts)

Demo 1 – CAB Basics: Shell, Modules

A CAB solution is typically made up of a number of modules which are loaded at runtime into a shell. Modules are the most basic unit of deployment that when loaded will interact with the shell to add new common UI elements like menus, buttons, etc, and will also display instances of views and business logic components.

A shell is the top level visual container where the views of an application will be shown. These views in CAB terminology are known as SmartParts.

The Shell provides common services to all modules.

In this demo, a sample shell will be run without any modules and then a new module will be deployed, showing how new functionality is added and presented in the Shell.

Steps:

- Open the ProfileCatalog.xml file and comment the two nodes named ModuleInfo:

<?xml version="1.0" encoding="utf-8" ?>

<SolutionProfile xmlns="https://schemas.microsoft.com/pag/cab-profile" >

<Modules>

<!--<ModuleInfo AssemblyFile="BankTellerModule.dll" />

<ModuleInfo AssemblyFile="CustomerMapExtensionModule.dll" />-->

</Modules>

</SolutionProfile>

- Run the application

- An empty shell should appear with nothing in it except basic, application agnostic elements: an empty menu, a notification tool strip at the bottom of the window and an empty canvas divided into two sections divided by a splitter. Each of these 2 regions is a “Workspace”. (You might need to hover the mouse over the surface to find the splitter as it is not drawn initially)

- The shell is empty because no modules have yet been deployed.

- Close the shell

- Uncomment the first ModuleInfo node from ProfileCatalog.xml file and run again. Now you should see new elements added to the screen: menu items, a left side listbox.

- Press the “Accept Customer” button 2 times. 2 new customers will be added to the list box under the button. Select one of the customer in the list, and now the panel on the right will show a more complex set of widgets.

- Change the selection of the customer and the right panel will reflect the changes, showing the specific customer information

- Also, note that the menu now contains new items and each time a customer is selected from the list the notification tool strip changes too.

Demo 2 – Module initialization & interaction with Shell

Every module contains a ModuleInit class to perform module wide initialization specific tasks. Modules interact with the shell through well known CAB infrastructure entry points.

In this demo, the BankTellerModuleInit class will be explored and explained.

Steps:

- Open the BankTellerModuleInit class under BankTellerModule project.

- Show that the class derives from ModuleInit

public class BankTellerModuleInit : ModuleInit

- Show the contructor for the class. Note the [InjectionConstructor] attribute. This attribute tells CAB that when this class is loaded it should provide a WorkItem for it. (In this example it will be the root WorkItem). This is the CAB Dependency Injection mechanism in action (provided by Object Builder)

- Go to the Load method, which is actually an overrided method called for Module specific initialization.

- Go to the AddCustomerMenuItem method. Show how UIExtensioSites are used to add a new MenuItems

Demo 3 – Shell & Modules

Modules can be developed to be re-used in multiple shells. Different shells may promote different user experiences.

In this demo, the Shell will be changed to use a different presentation strategy for the customer details pane (the right pane).

Steps:

- Open the BankShellForm.Designer.cs

- Go to the InitializeComponent Method

- Locate the following line of code:

this.contentWorkspace = new Microsoft.Practices.CompositeUI.WinForms.DeckWorkspace();

- Change it to:

this.contentWorkspace = new Microsoft.Practices.CompositeUI.WinForms.TabWorkspace();

- Go to the end of the file

- Change the following member:

public Microsoft.Practices.CompositeUI.WinForms.DeckWorkspace contentWorkspace;

to:

public Microsoft.Practices.CompositeUI.WinForms.TabWorkspace contentWorkspace;

- Compile and run the application

- Press the “Accept Customers” button 2 times and select one and the other on the list box

- Note that now the pane has tabs:

- This change has not been done on the Modules, but on the shell.

- Explain the SmartPartInfo role at this time and why there are no titles on the tab pages