Visual Basic Concepts

Understanding the Page Designer Treeview

The designer window for your DHTML applications consists of two parts — the detail panel, on the right and the treeview panel, on the left. The detail panel shows the HTML page as it will appear in the browser and is the area you use to draw and manipulate your page's appearance. The treeview is used to show the elements that make up the HTML page and their relationship to the overall object model for the application. When you first begin a project for a DHTML application, the treeview contains three elements — the Document, the Body, and a paragraph, or <P>, tag.

After you reference an existing HTML page or begin creating your own in the page designer, the treeview displays a listing for each tag on the HTML page. This includes all visible elements on the page, such as buttons, text, images, check boxes, and options boxes, and a series of tags, such as text formatting tags for bold, italic, and underline, organizational tags such as DIV and SPAN, and other tags.

Although all elements on a page are displayed in the treeview, you can only write code for those elements that contain an ID attribute. The treeview displays in bold the elements with ID attributes. For each element, the page designer lists the ID, if one exists; the type of element; and in some cases the beginning of the content for that element. If an element does not have an ID, you can assign one to it in the Properties window.

The treeview provides three valuable shortcuts:

When you select an item in the treeview, Visual Basic highlights the appropriate item in the detail panel and in the Properties window. This can help you determine at a glance the correspondence between elements in the treeview and on the page. Note that this works in reverse as well: When you select an element on the detail panel or in the Properties window, Visual Basic highlights the corresponding element in the treeview and scrolls the treeview accordingly.
You can double-click an element in the treeview to open the Code Editor window for that element. The system selects the default event for the element.
For ActiveX controls that do not have a visible user interface at run time (such as the common dialog control), the treeview is the only way you can select and manipulate these elements after adding them to your page.

Note The treeview pane of the designer may not reflect the exact order of items as they appear in the design pane or when your page is run in the browser. The treeview shows the structural relationship of elements on the page in the order in which they appear in the HTML stream. The position of an element in the HTML stream does not always correspond to the position of an element on the displayed page, because you can change an element's position with attributes and inline styles. Your page will appear in Internet Explorer as it does in the design pane of the designer.

For More Information See "Making Elements Programmable" in this chapter for more information on how to work with element IDs.