|
DevGuideHostPage
A host page is an HTML document that includes a GWT module.
HTML Host PagesGWT modules are stored on a web server as a set of JavaScript and related files. In order run the module, it must be loaded from a web page of some sort. Any HTML page can include a GWT application via a SCRIPT tag. This HTML page is referred to as a host page from the GWT application's point of view. A typical HTML host page for an application written with GWT from scratch might not include any visible HTML body content at all. The example below shows how to embed a GWT application that will use the entire browser window. <html>
<head>
<!-- Properties can be specified to influence deferred binding -->
<meta name='gwt:property' content='locale=en_UK'>
<!-- Stylesheets are optional, but useful -->
<link rel="stylesheet" href="Calendar.css">
<!-- Titles are optional, but useful -->
<title>Calendar App</title>
</head>
<body>
<!-- The fully-qualified module name, followed by 'nocache.js' -->
<script language="javascript" src="com.example.cal.Calendar.nocache.js"></script>
<!-- Include a history iframe to enable full GWT history support -->
<!-- (the id must be exactly as shown) -->
<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
</body>
</html>Note that the body of the page contains only a SCRIPT tag and an IFRAME tag. It is left to the GWT application to then fill in all the visual content. But GWT was designed to make it easy to add GWT functionality to existing web applications with only minor changes. It is possible to allow the GWT module to selectively insert widgets into specific places in an HTML page. To accomplish this, use the id attribute in your HTML tags to specify a unique identifier that your GWT code will use to attach widgets to that HTML element. For example, the sample application generated by applicationCreator creates an HTML body with a table in it: <body>
<!-- ... other sample HTML omitted -->
<table align=center>
<tr>
<td id="slot1"></td>
<td id="slot2"></td>
</tr>
</table>
</body>Notice that the td tags include an id attribute associated with them. This attribute is accessible through the DOM class. You can easily attach widgets using the method RootPanel.get(). For an example, see the code generated by applicationCreator: final Button button = new Button("Click me");
final Label label = new Label();
...
RootPanel.get("slot1").add(button);
RootPanel.get("slot2").add(label);In this manner, GWT functionality can be added as just a part of an existing page, and changing the application layout can be done in plain HTML. The DynaTable sample code is another example that uses this approach. |
Sign in to add a comment