Using the System Tree

The System Tree is an active resource for page development, providing an organized framework for developing your targets, pages, and components. Its four tab pages let you browse items available to your Web pages.

You can view the properties for any item in the System Tree by right-clicking the item and selecting Properties from the pop-up menu. On the Language, Components, and Page tab pages, you can view, but not change, properties.

**Table 2-3: System Tree tab pages**
System Tree tab page	Displays this content
Workspace	Workspace contents — including targets, folders, files, and libraries
Language	HTML tags, client- and server-side object models (listing object properties, methods, and events), and scripting language elements (including JavaScript and VBScript syntax elements)
Components	ActiveX controls, plug-ins, Java applets, JavaBeans, EAServer components, and custom tag libraries available to your target
Page	The page components of the active page open in the HTML editor

You can drag and drop HTML elements, scripting resources, and other components from a System Tree tab page onto Web pages open in the HTML editor.

Workspace tab

The Workspace tab lets you manage your targets. From it you change target properties, add, remove, and rename files and folders, migrate JSP targets created in PowerBuildes 9, and build, deploy, and run targets. The pop-up menu for a Web target gives you access to these features:

**Table 2-4: Workspace tab pop-up menu selections for Web targets**
Web target pop-up menu item	Feature
New	Displays PowerBuilder New dialog box
New Folder	Creates a new folder in the target
Import Files	Allows you to select files to import to the target
Import Folder	Allows you to select a folder to import to the target
Incremental Build	Builds only files in the Web target that have changed since the previous build
Full Build	Builds all files in the Web target
Migrate JSP Target	Migrates a JSP target created in PowerBuilder 9 to PowerBuilder 10
Deploy	Deploys the target according to the deployment configurations selected in the Target Properties dialog box
Deploy To EP	Deploys a JSP target to Sybase Enterprise Portal (EP) rather than a JSP server
Run	Starts a browser that opens to the page you specify in the Start Page field in the Run tab page of the Target Properties dialog box
Remove Target	Deletes the target from the workspace
Show	Toggles display of items in the System Tree
Properties	Opens the Target Properties dialog box

Page tab

The Page tab shows the hierarchy of objects on the current page in the HTML editor. The page tab also lists properties, methods, and events for:

Predefined Microsoft Internet Explorer page objects
Predefined HTML objects
Predefined JavaScript objects
User-defined controls
Server-side EAServer components placed on a 4GL Web page

You can create script to refer to the object or its methods, properties, and events by dragging it from the Page tab to the Source view of the HTML editor, or to the integrated Script editor.

Language tab

The language tab provides quick access to:

HTML elements and attributes The most commonly used HTML elements appear in this list. The elements are organized alphabetically as well as by category to make browsing easy. Elements appear in categories such as format, headers, image, and multimedia. Attributes appear alphabetically under elements.

You can drag an HTML element or attribute from the Language tab to the Page view or the Source view in the HTML editor, or to the Script editor.
Script language syntax The syntax elements for JavaScript and VBScript.

You can drag a script syntax element from the Language tab to the Source view in the HTML editor, or to the Script editor.
Object models The objects, and their methods, properties, and events, for the Microsoft and Netscape client-side object models. Methods, properties, and events are also listed for the Web Target and Active Server Pages server-side object models, as well as for JSP implicit objects.

You can drag an object model from the Language tab to the Source view in the HTML editor, or to the Script editor.

Components tab

The Components tab of the System Tree lists client-side and server-side ActiveX controls, plug-ins, Java applets, and JavaBeans installed on your system, and EAServer components accessible from your system.

Information about installed components A Web target gets information about installed components from the Windows registry, browser plug-in directories, MIME extensions recognized by your primary browser, and user-specific folder lists. It relies on the Java classpath, if set on your system, to find Java applets and JavaBeans.

Custom tag libraries for JSP targets must be listed (or contained in directories that are listed) on the JSP page of the System Options dialog box. You must then make sure the classes for the custom tag libraries are available to your JSP target.

The list of servers on the Components tab is populated from the EAServer profiles configured for PowerBuilder. A profile must be configured for a server for it to appear on the Components tab. The server must be running for you to see the components available in its repository.

To give a page access to a component listed on the Components tab, drag the component from the Components tab to the Page view or Source view in the HTML editor.

Drag and drop

You can drag files, HTML tags, objects, and methods from the System Tree into the HTML or Script editors, or you can copy from the System Tree and paste into an editor window. The result depends on the item you drag or copy, on the System Tree tab, and on the editor view:

**Table 2-5: Drag-and-drop elements from the System Tree**
From	To	Item	Result
Workspace tab	Page view or Source view	Text file (such as HTM, JS, ASP, JSP)	Creates a hyperlink to a file from the current page. If the HTML editor is not already open, opens the item dragged or copied in the appropriate editor.
	Page view or Source view	Image file (such as GIF, JPG, and so on)	Creates image element <IMG> with link to image file in its SRC attribute.
Page tab	Source view or integrated Script editor	Object method, event, or property available on current page	Inserts the appropriate dot notation to fully qualify the object method, event, or property name.
Language tab	Page view or Source view	HTML element (tag) that does not have an associated Web Target property sheet	If no text is selected in the HTML editor, the element is inserted, but you must be in or switch to Source view to put the cursor between the start and end tags and add content. In Page view, the editor formats selected text according to the element you dragged.
	Page view or Source view	HTML element (tag) that has a Web Target property sheet	Web Target property sheet displays. You can fill in property sheet fields before the element (control) is added to the open page in the editor.
	Page view, Source view, or Script editor	Object model method, event, or property	Inserts the appropriate dot notation with text in brackets that you must replace to fully qualify the method, event, or property.
	Page view, Source view, or Script editor	Scripting language function, keyword, operator, or escape sequence	Inserts the appropriate dot notation to fully qualify the scripting language syntax.
Component tab	4GL page in Source view	EAServer component	Opens the Page properties dialog box to the EAServer page on which the control is associated with the page.
	Script editors	EAServer component	Inserts the appropriate dot notation to fully qualify the component.
	Page view or Source view	Custom Tag Library (JSP target), Plug-in, or ActiveX,	Opens the Web Target property sheet associated with object. (To add a custom tag library class, you must first add the tag library to the page.)
	Script editors	Applet or JavaBean method, Plug-in, or ActiveX	Inserts the object name or identifier.

Copying items

You can also copy items from the System Tree and paste them to the Page view or Source view.

To copy items from the System Tree:

Right-click the item you want to copy and select Copy from the pop-up menu.
Right-click in the Page view or Source view, and select Paste from the pop-up menu.

Migrating JSP targets

If you open an existing workspace created in an earlier version of PowerBuilder using File>Open Workspace or File>Recent Workspace, the new workspace could contain JSP targets created in the earlier version. To migrate a JSP target to PowerBuilder 10.5, right-click the JSP target, select Migrate Web from the pop-up menu, and click OK.

After the JSP target migration is complete, the JSPs in the target use the HTMLGenerator105 component, class IDs for design-time controls are changed to the new version, the original JSP files are saved to files with UTF-8 encoding, and the original page directive character set is changed to UTF-8 for each JSP in the target.