You create the home page of the Virtual Machine Manager Web view in the default.html file. The default.html file must be at the root of the working directory.

Prerequisites
■

Import the default Web view template to Orchestrator to create the Virtual Machine Manager Web view

■

Export the contents of the Virtual Machine Manager Web view to a working directory

■

Configure Orchestrator in Web view development mode

Procedure
1

Go to the root of your working directory.

2

Open the default.html file in an HTML editor.

The default.html page uses the MyBorder component to render itself. It contains little code, as the following code sample shows.

<vco jwcid="@layout/MyBorder" section="literal: home" title="Home">
	<!--  Content of the homepage -->
		<h2 style="margin-left: 16px; margin-top: 0px; padding-top:18px;">
    Welcome to Default Webview Template
  </h2>
		<p style="margin-left: 16px;">
    This webview is a base for your own webview development.
  </p>
</vco>

The vco tag initializes a Tapestry component by setting the jwcid attribute to point to the MyBorder component, which you renamed to VMMBorder.

3

Change the jwcid attribute to refer to VMMBorder instead of MyBorder.

<vco jwcid="@layout/VMMBorder" section="literal: home" title="Virtual Machine Manager">
4

Change the title attribute to Virtual Machine Manager.

<vco jwcid="@layout/VMMBorder" section="literal: home" title="Virtual Machine Manager">
5

Delete the default <h2> heading from the default.html file.

This heading is unnecessary for the simple Web view that this example demonstrates. Delete the following code line.

<h2 style="margin-left: 16px; margin-top: 0px; padding-top:18px;">
Welcome to Default Webview Template
</h2>
6

Change the paragraph text from This webview is a base for your own webview development to the following text:

<p style="margin-left: 16px; margin-top: 0px; padding-top:18px;">
Click one of the virtual machines in your inventory to display its
information.</p>
7

Go to http://orchestrator_server:8280/vmo/ in a browser to check the appearance of the Web view.

8

Make any necessary adjustments to the HTML code to improve the appearance of the Web view.

For example, change the spacing of the text by adjusting the margins of the <p> tag and add a hard return line under the text.

<p style="margin-left: 16px; margin-top: 5px; margin-bottom: 5px;">
Click one of the virtual machines in your inventory to display its information.
</p>
<hr />
What to do next

Add a function to the default.html page by referring to a Web view component.

Previous topic: Configure the Server for Web View Development
Next topic: Add a vco:ListPane Component to the Web View Home Page