Creating an HTML host page

We created a GWT module and an entry-point class, which is associated with the module. To load the module and run the entry-point class, we need an HTML host page. The GWT compiler compiles a module into a JavaScript file nocache.js, also called the selection script, when we install the GWT project with Maven in a later section. The JavaScript file for the module is required to be included in an HTML host page in the <script/> tag. First, create an HTML page. Select File | New | Other, and in New, select Google Web Toolkit | HTML Page and click on Next, as shown in the following screenshot:

Creating an HTML host page

Select the gwt-jboss-ajax project and Path as war and specify File Name as CatalogForm.html. Select the CatalogForm module and click on Finish, as shown in the following screenshot:

Creating an HTML host page

A CatalogForm.html HTML page gets created in the war directory. The default <script/> tag generated has src=".nocache.js", which is not the JavaScript generated from the CatalogForm module. To accomplish this, use the following code:

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>CatalogForm</title>
    <script type="text/javascript" language="javascript" src=".nocache.js"></script>
  </head>
  <body>
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
  </body>
</html>

The following are the steps to create an HTML host page:

  1. Set the script tag as follows:
    <script type="text/javascript" language="javascript" src="org.jboss.gwt.CatalogForm/org.jboss.gwt.CatalogForm.nocache.js">
  2. Add a <table/> element below the <iframe/> element for a catalog entry. The <table/> element has <div/> elements for the GWT widgets created in the entry-point class. The <div/> elements have associated IDs, which are used in the entry-point class CatalogForm.java to add the widgets to a widget-specific root panel. Add the Label widgets and the corresponding TextBox widgets in the same row. The Label widget with the <div/> ID label7 is the widget to display a validation message. The CatalogForm.html HTML host page is listed in the following code:
    <!doctype html>
<html>
<head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
    <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
    <title>
      CatalogForm
    </title>
    <script type="text/javascript" language="javascript" src="org.jboss.gwt.CatalogForm/org.jboss.gwt.CatalogForm.nocache.js">
</script>
  </head>
  <body>
    <iframe src="javascript:''" id="__gwt_historyFrame" tabindex='-1' style="position: absolute; width: 0; height: 0; border: 0"></iframe>
    <h1>
      Catalog Form
    </h1>
    <table align="left">
      <tr>
        <td id="label1"></td>
        <td id="textBox1"></td>
      </tr>
      <tr>
        <td id="label2"></td>
        <td id="textBox2"></td>
      </tr>
      <tr>
        <td id="label3"></td>
        <td id="textBox3"></td>
      </tr>
      <tr>
        <td id="label4"></td>
        <td id="textBox4"></td>
      </tr>
      <tr>
        <td id="label5"></td>
        <td id="textBox5"></td>
      </tr>
      <tr>
        <td id="label6"></td>
        <td id="textBox6"></td>
      </tr>
      <tr>
        <td id="button"></td>
        <td id="label7"></td>
      </tr>
    </table>
  </body>
</html>
  3. The HTML host page is shown in the gwt-jboss-ajax GWT web project in Project Explorer, as shown in the following screenshot:
    Creating an HTML host page
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset