GWT - HTMLPanel Widget



The HTMLPanel widget represents a panel that contains HTML, and which can attach child widgets to identified elements within that HTML.

Class Declaration

Following is the declaration for class −

public class HTMLPanel
   extends ComplexPanel

Class Constructors

Sr.No. Constructor & Description

HTMLPanel(SafeHtml safeHtml)

Initializes the panel's HTML from a given SafeHtml object.


HTMLPanel(java.lang.String html)

Creates an HTML panel with the specified HTML contents inside a DIV element.


HTMLPanel(java.lang.String tag, java.lang.String html)

Creates an HTML panel whose root element has the given tag, and with the specified HTML contents.

Class Methods

Sr.No. Function name & Description

void add(Widget widget, Element elem)

Adds a child widget to the panel, contained within an HTML element.


void add(Widget widget, java.lang.String id)

Adds a child widget to the panel, contained within the HTML element specified by a given id.


void addAndReplaceElement(Widget widget, Element toReplace)

Adds a child widget to the panel, replacing the HTML element.


void addAndReplaceElement(Widget widget, java.lang.String id)

Adds a child widget to the panel, replacing the HTML element specified by a given id.


static java.lang.String createUniqueId()

A helper method for creating unique IDs for elements within dynamically- generated HTML.


Element getElementById(java.lang.String id)

Finds an element within this panel by its id.

Methods Inherited

This class inherits methods from the following classes −





  • java.lang.Object

HTMLPanel Widget Example

This example will take you through simple steps to show usage of a HTMLPanel Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter −

Step Description
1 Create a project with a name HelloWorld under a package com.tutorialspoint as explained in the GWT - Create Application chapter.
2 Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and as explained below. Keep rest of the files unchanged.
3 Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = ''/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = ''/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>


Following is the content of the modified Style Sheet file war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;

Following is the content of the modified HTML host file war/HelloWorld.html.

      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">

      <h1>HTMLPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>

Let us have following content of Java file src/com.tutorialspoint/ which will demonstrate use of HTMLPanel widget.

package com.tutorialspoint.client;


public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      String htmlString = "This is a <b>HTMLPanel</b> containing"
         +" html contents. "
         +" <i>By putting some fairly large contents in the middle"
         +" and setting its size explicitly, it becomes a scrollable area"
         +" within the page, but without requiring the use of an IFRAME.</i>"
         +" <u>Here's quite a bit more meaningless text that will serve"
         +" to make this thing scroll off the bottom of its visible area."
         +" Otherwise, you might have to make it really, really"
         +" small in order to see the nifty scroll bars!</u>";

      HTMLPanel htmlPanel = new HTMLPanel(htmlString);

      DecoratorPanel panel = new DecoratorPanel();

      // Add the widgets to the root panel.

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, this will produce following result −

GWT HTMLPanel Widget