Create a StarOffice-Like Explorer

If you have used StarOffice, you are probably familiar with the technique used on its Options dialog box. Otherwise, it consists of a tree view on the left section and a right section that changes according to the item selected on the left, almost like Windows Explorer. Although it would look difficult at first, Borland Delphi makes this application ridiculously easy. Usually, only the design would take you longer, thanks to the Rapid Application Development available on your compiler.

We will first create the tree's items

  1. If you didn't yet, start Borland Delphi with the default form. To create the left tree, on the Component Palette, click the Win32 tab.
  2. Double-click the TreeView button to add a TreeView control
  3. Set the properties of the tree view as follows: AutoExpand = True; Height = 337; Left = 8; Top = 8; Width = 121
  4. Double-click the TreeView1 control on the form to create the list of items associated with the tree.
  5. Click the New Item button and type Office
  6. Press Enter and type Business
  7. Press Enter and type Internet
  8. Click Office to select it. Click the New SubItem button and type Main User
  9. Press Enter and type Default Options
  10. Click Business to select it
  11. Click the New SubItem button and type Registration
  12. Press Enter and type Contacts
  13. Click Internet and click New SubItem
  14. Type Web Resources:
     
  15. Click OK

Now will create the target items

  1. Click an empty area on the form to make sure nothing is selected
  2. On the Component Palette, click Standard. Double-click the Panel button .
  3. On the Object Inspector, delete the content of the Caption field. Change the name of the Panel control to pnlNoSelection
  4. Set the properties of the Panel control as follows: Height = 289; Left = 136; Top = 8; Width = 409.
  5. Click inside of the panel to make sure it is selected (and not one of its properties). On the main menu, click Edit -> Copy.
  6. With the panel still selected, add a label to the panel. On the Object Inspector, click Caption and type Rockville Technologies
  7. With the new label still selected, on the Object Inspector, double-click the right field of the Font property. Change the font to Garamond, Bold, 36, Blue. Click OK
  8. Click an empty area on the form to make sure that nothing is selected (if you cannot see the form, click the TreeView control and press Esc).
  9. On the main menu, click Edit -> Paste
  10. The newly pasted panel should be selected (otherwise select it). Empty its Caption property and change its name to pnlMainUser
  11. Set its properties as follows: Left = 136; Top = 8.
  12. Add a few controls to the selected panel
  13. Click and empty area on the form.
  14. On the main menu, click Edit -> Paste.
  15. Set the properties to Left = 136; Top = 8; Name = pnlDefaultInfo
  16. Set its properties as follows: Left = 136; Top = 8.
  17. Add a few controls to the selected panel

Now we will implement the behavior of the form

  1. Click the TreeView control on the form.
  2. On the Object Inspector, click the Events tab.
  3. Double-click the right field of the OnChange event. Implement it as follows:
      
    procedure TForm1.FormCreate(Sender: TObject);
begin
     pnlNoSelection.BringToFront;
end;

procedure TForm1.TreeView1Change(Sender: TObject; Node: TTreeNode);
begin
     if Node.Text = 'Default Options' then
        pnlDefaultInfo.BringToFront
     else if Node.Text = 'Registration' then
          pnlMainUser.BringToFront
     else
         pnlNoSelection.BringToFront;
end;
  4. Test your program
Copyright © 2001 FunctionX