Telerik blogs

Recently, Telerik released a new and improved version of the Telerik CAB Enabling Kit (TCEK). This latest version now provides support for using the RadDock control as a workspace in your Composite UI Application Block (CAB) applications. Previously, only the old DockingManager control had been supported. In this blog entry, I will show you how to begin using the RadDock as a workspace in your applications through the use of the newly updated RadDockableWorkspace.

In case you are new to CAB/SCSF or the TCEK - I highly recommend reading through my older series of blogs. You can access the introduction blog here. Also, there has been an update to the Smart Client Software Factory (SCSF) since my last series of blog entries. If you are using Visual Studio 2010, you will need to make sure to download the latest version of the SCSF. The latest version of the TCEK is available here.

Now that all that’s been said, lets take a look at how we can use the RadDockableWorkspace in our CAB applications. Please note that I’ll be starting from a newly created Smart Client Application.

Setting Up the RadDockableWorkspace

The first thing we’ll need to do is update the existing applications main ShellLayoutView to use the RadDock for WinForms. The following list of instructions describes what needs to be done.

  1. In the Infrastructure.Layout project, open the ShellLayoutView.cs file inside of the forms designer.
    1. Delete both of the existing workspace controls from the form.
      1. _leftWorkspace & _rightWorkspace
    2. Drag a RadDock control from the ToolBox into the form, and dock it to fill.
      1. Don’t add any tabs or toolwindows to the RadDock, we’ll be doing that later through a different means.
    3. In the Infrastructure.Layout project, View the source code for ShellLayoutView.cs.
      1. Comment out these two lines of code from the constructor. These set the names for the old work spaces we deleted, so we’ll no-longer need them.
        //_leftWorkspace.Name = WorkspaceNames.LeftWorkspace;
        //_rightWorkspace.Name = WorkspaceNames.RightWorkspace; 
      2. Add a property that exposes the RadDock.
        public RadDock MainDockWorkspace
        {
           get { return _mainDockWorkspace; } 
        }
      3. In the Infrastructure.Interface project, View the source code for WorkspaceNames.cs
        1. Remove the old _leftWorkspace and _rightWorkspace string constants.
        2. Add a new constant called MainWorkspace, which we will use as the name for the RadDockableWorkspace.
          public const string MainWorkspace = "MainWorkspace";
      4. In the Infrastructure.Layout project, View the source code for Module.cs.
        1. In the Load() method, create and initialize a RadDockableWorkspace, passing in the RadDock and ShellLayoutView as its parameters. Add the RadDockableWorkspace to the workspaces collection in the RootWorkItem.
          // Add the RadDock workspace 
          RadDockableWorkspace dockWorkspace = new RadDockableWorkspace(_shellLayout.MainDockWorkspace, _shellLayout); 
          _rootWorkItem.Workspaces.Add(dockWorkspace, WorkspaceNames.MainWorkspace);

Setting Up The Views

Now that we’ve successfully added a RadDockableWorkspace to our application. The next thing we’ll need to do is create a module and some views to show inside the RadDockableWorkspace. The following steps explain how this is accomplished.

  1. Right click the solution and select Smart Client Factory -> Add Business Module (C#)...
    1. Name the module TestModule, and don’t bother creating an interface for it since we won’t be needing one.
  2. Now that the module has been created, right click on its Views folder and select Smart Client Factory -> Add View (with presenter)...
    1. Name the new view FirstView and create a folder for it.
    2. Repeat the previous step to create two more views called SecondView, and ThirdView.
  3. Double click on FirstView.cs to open it in the designer.
    1. From the toolbox, drag a DockingSmartPartInfo component into the form.
      1. Note: A SmartPartInfo is responsible for telling the workspace how a view should be displayed inside of it.
      2. Set the following properties on the DockingSmartPartInfo
        1. TabbedDocument: False
          1. Setting this property to false will make this view show up in the RadDockableWorkspace as a ToolWindow.
        2. Title: First View
        3. Width: 200
      3. View the source code for FirstView.cs and add the ISmartPartProviderInfo interface to the class declaration.
  4. Double click on SecondView.cs to open it in the designer.
    1. From the toolbox, drag a DockingSmartPartInfo component into the form.
      1. Set the following properties on the DockingSmartPartInfo
        1. TabbedDocument: True
          1. Setting this property to true will make this view show up in the RadDockableWorkspace as a TabbedDocument.
        2. Title: First View
      2. View the source code for FirstView.cs and add the ISmartPartProviderInfo interface to the class declaration.
    2. Repeat one of the previous steps to make ThirdView.cs either a ToolWindow, or a TabbedDocument.
      1. View the source code for ModuleController.cs.
        1. Update the AddViews() method to add our newly created views to the RadDockableWorkspace.
          FirstView view1 = ShowViewInWorkspace<FirstView>(WorkspaceNames.MainWorkspace);
          SecondView view2 = ShowViewInWorkspace<SecondView>(WorkspaceNames.MainWorkspace);
          ThirdView view3 = ShowViewInWorkspace<ThirdView>(WorkspaceNames.MainWorkspace);

Conclusion

Now that you’ve completed all of the steps above, when you run the application, you should now have something similar to what is pictured below.

Finished Application

 

 Click here to download the code used in this post.


Comments

Comments are disabled in preview mode.