How-To: Class Explorer Docking

Creating a docking window like Class Explorer

Creating a Class Explorer style dockable window

  1. Start a new application
  2. From the Standard page of the Component Palette, double-click the Panel control.
  3. Set the Align property of the new Panel to alLeft. Set the BevelOuter property to bvLowered. Also set the DockSite property to true.
  4. While Panel1 is still selected, from the Standard page, double-click the Panel control. Set the Align property to alClient. Set the DragKind to dkDock and the DragMode to dmAutomatic. Optionally set the BevelOuter to bvNone and its Caption to Window Floater
  5. While the Panel2 control is still selected, from the Win32 page, double-click the TreeView control. Set its Align property to alClient.
  6. Double-click the selected TreeView1 control and create a basic tree view that would serve for illustration.
  7. To test it, press F9. At this time, the TreeView1 control is dockable but there is a problem. When the application starts, the tree view doesn't appear the way we want it, even though we can drag it away and bring it back. Close the form.
  8. Double-click an empty area on the form to access the form's OnCreate event. Implement it as follows:
     
    //---------------------------------------------------------------------------
    void __fastcall TForm1::FormCreate(TObject *Sender)
    {
        TRect Recto(Left, Top, Left + Panel1->Width, Top + ClientHeight);
        Panel2->ManualFloat( Recto);
        Panel2->ManualDock(Panel1, Panel1, alClient);
    }
    //---------------------------------------------------------------------------
  9. To test the program again, press F9.
  10. Remember that, at this time, if the user closes the docking or floating window, it disappears completely. To recover from that, you can provide a menu or a button that would easily toggle the appearance or disappearance of the docking window.
    Image you have a button on the form for that purpose. The OnClick event of that button can be implemented as follows (remember that, in our example, Panel2 is the real docking window while Panel1 is just the host of the floating window):
     
    //---------------------------------------------------------------------------
    void __fastcall TForm1::Button1Click(TObject *Sender)
    {
        Panel2->Visible = !Panel2->Visible;
    }
    //---------------------------------------------------------------------------
  11. Do that and test the program.

 

 


Copyright 2003-2007 FunctionX, Inc.