To run the sample, you must import the sample into your workspace, configure it, and then start the sample.

Follow these steps:

To import the sample:

Select File > Import.

From the Import Wizard, select General and then select Existing Projects into Workspace. Click Next.

Select the Archive file radio button.

Enter the name of the sample jar file, rcpbrowserdom.jar, or browse to the com.ibm.rcp.tools.samplegallery2 plug-in directory and select the jar file from the archive directory.

The dialog shows the projects present in the archive jar file. Select Finish to install the projects into your workspace.

To configure and run the sample:

Select Run > Run Configurations... from the main menu.

Select Client Services and click New.

Type a unique name for your configuration, such as RCP Browser with DOM Access Sample.

Select the Plug-ins tab and verify that the com.ibm.rcp.samples.browser.rcp.dom plug-in is selected.

Select the Arguments tab and verify that –console is in the Program Arguments field.

Click Apply and then Run.

Once Expeditor is launched, complete the Login panel if it appears.

This sample contributes an item to the application launcher:

Select Open > Browser Samples > RCP Browser with DOM Access Sample.

A perspective will open containing a single view – the left side of the view provides some control windows, while the right side contains a browser object.

In the DOM Controls tab, specify a location for the browser and press Enter to change the contents of the browser. For that particular page, options are provided to change the background color, or insert new elements into the DOM. The entire DOM tree can be retrieved and will be populated into the tree view. From the DOM Tree control, specific nodes can be removed.

At the bottom of the left hand side, the Node Properties tables will show the properties for any node on the tree. By selecting nodes in the DOM Tree, you can view the node attributes in the table. In addition, by selecting the Monitor mouseover Event, the Node Properties will be updated as the mouse moves over elements on a browser page.

In the DOM Queries tab, you can perform queries against the content of the DOM. Query results are displayed in the Elements list. Selecting lines in the elements list will also update the node properties at the bottom left of the view.

The Node Properties displays the properties of various objects in the DOM. The value field for each of the properties is editable, so you can modify the DOM contents using this table. You cannot add or remove properties from a node using this sample. Changes to the property values are immediately reflected on the browser page.