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 https://orchestrator_server:8280/vco/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.