gwt

GWT HTMLPanel Example

In this tutorial, we will learn ins and out of the Google Web Toolkit (GWT) HTML Panel. In our previous tutorial GWT Tutorial for Beginners, we explained how to create a GWT Web Application project using eclipse and we have seen the basic steps to develop user interface using widgets. In this tutorial, we will focus on GWT HTML panel and it’s usage to develop user interface.

Here we are using GWT 2.7 integrated with Eclipse Mars 4.5.

1. Introduction

Panels in a GWT Web Application are used to set the layout of the Application. GWT Panels use HTML element such as DIV and TABLE to layout their child Widgets. Panels may contain Widgets and other Panels. They are used to define the layout of the user interface in the browser. An HTMLPanel rendered with the specified HTML contents. Child widgets can be added into identified elements within that HTML contents.

2. Class Declaration

HTMLPanel:java

public class HTMLPanel extends ComplexPanel {
   ......
}

Here ComplexPanel is an abstract base class for HTMLPanel that can contain multiple child widgets. ComplexPanel extends Panel which is abstract base class for all panels.

3. Constructors

3.1 HTMLPanel(String html)

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

SampleWebApplication:java

	/**
	 * This is the entry point method.
	 * 
	 */
	public void onModuleLoad(){
		
		// Creating HTML String.
		String htmlString ="Example shows HTML Panel constructed through HTML String<br><br>"
				+ "<table width='100%'border='1'>"
				+ "<tr>"
				+ "<th>FirstName</th><th>LastName</th><th>Age</th>"
				+ "</tr>"
				+ "<tr>"
				+ "<td>Bob</td><td>Sen</td><td>68</td>"
				+ "</tr>"
				+ "</table>";
		HTMLPanel htmlPanel = new HTMLPanel(htmlString);

		// Add the HTML Panel to the root panel.
		RootPanel.get().add(htmlPanel);
	}

Output:

HTMP Panel: HTMLPanel(String html)
HTMP Panel: HTMLPanel(String html)

3.2 HTMLPanel(SafeHtml safeHtml)

Initializes the panel’s HTML from a given SafeHtml object. Similar to HTMLPanel(String).

SampleWebApplication:java

	
        /**
	 * This is the entry point method.
	 * 
	 */
	public void onModuleLoad(){
		
		// Creating HTML String.
		String safeHtml= SafeHtmlUtils.fromSafeConstant(
                          "Example shows HTML Panel constructed through Safe HTML.<br><br>"
			+ "<table width='100%'border='1'>"
			+ "<tr>"
			+ "<th>FirstName</th><th>LastName</th><th>Age</th>"
			+ "</tr>"
			+ "<tr>"
			+ "<td>Bob</td><td>Sen</td><td>68</td>"
			+ "</tr>"
			+ "</table>");
		HTMLPanel htmlPanel = new HTMLPanel(safeHtml);

		// Add the HTML Panel to the root panel.
		RootPanel.get().add(htmlPanel);
	}

Output:

HTMP Panel: HTMLPanel(SafeHtml safeHtml)
HTMP Panel: HTMLPanel(SafeHtml safeHtml)

3.3 HTMLPanel(String tag, String html)

Creates an HTMLPanel whose root element has the given tag, and with the specified HTML contents. The arguments passed inside the constructor are Tag of the root element and the panel’s HTML content.

SampleWebApplication:java

	/**
	 * This is the entry point method.
	 * 
	 */
	public void onModuleLoad(){
		
		// Create HTML Panel with given tag and its HTML value.
		HTMLPanel htmlPanelH1 = new HTMLPanel("h1", "Heading using HTML tag: h1");
		HTMLPanel htmlPanelH2 = new HTMLPanel("h2", "Heading using HTML tag: h2");
		HTMLPanel htmlPanelH3 = new HTMLPanel("h3", "Heading using HTML tag: h3");

		VerticalPanel vp = new VerticalPanel();
		vp.setSize("100%", "100%");vp.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
		vp.add(htmlPanelH1);
		vp.add(htmlPanelH2);
		vp.add(htmlPanelH3);
		// Add the HTML Panel to the root 	panel.
		RootPanel.get().add(vp);
	}

Output:

HTMLPanel: HTMLPanel(String tag, String html)
HTMLPanel: HTMLPanel(String tag, String html)

4. Method Summary

Method SignatureDescription
public void add(Widget widget)Adds a child widget to the panel.
public void add(Widget widget, String id)Adds a child widget to the panel, contained within the HTML element specified by a given id.
public void add(Widget widget, Element elem)Adds a child widget to the panel, contained within an HTML element.
public final void addAndReplaceElement(Widget widget, Element toReplace)Adds a child widget to the panel, replacing the HTML element.
public void addAndReplaceElement(Widget widget, String id)Adds a child widget to the panel, replacing the HTML element specified by a given id.
public Element getElementById(String id)Finds an Element within this panel by its id.

5. Examples

5.1 Login Page using HTMLPanel

Here we designed the login page using HTMLPanel. User enters Username/Password and validations can be performed on click of submit button.

SampleWebApplication:java

	
        /**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		
		String html = 
			    "<div id='LoginPage' name='LoginPage'>" +
			      "<p id='uname' >" +
			        "<label>UserName<br/>" +
			      "</p>" +
			      "<p id='password'>" +
			        "<label>Password<br/>" +
			      "</p>" +
			      "<p id='submit' class='submit'>" +
			      "</p>" +
			    "</div>";
		
		HTMLPanel htmlPanel = new HTMLPanel(html);

		// The username field
		TextBox user = new TextBox();
		user.getElement().setId("user_name");
		htmlPanel.add(user, "uname");

		// The password field
		TextBox password = new PasswordTextBox();
		password.getElement().setId("user_password");
		htmlPanel.add(password, "password");

		// The log in button
		Button submit = new Button("Submit");
		submit.getElement().setId("submit");
		htmlPanel.add(submit, "submit");

		submit.addClickHandler(new ClickHandler() {
			
            	   @Override
		   public void onClick(ClickEvent event) {
	             // Perform Validations
                     error("<table style='width:100%', border='1'><tr><th>"
                      + "ErrorType</th><th>Error "
		      + "Description</th></tr><tr><td>Fatal</td><td>"
                      + "Incorrect Password</td></tr></table>");
		    }
		});
		/*
		 * Add panel to the page
		 */
		RootPanel.get().add(htmlPanel);
	}

Output:

Example1 HTMLPanel
Example1 HTMLPanel

5.2 Error Dialog Page using HTMLPanel

Error Dialog Page is using HTMLPanel and capable to display error message. The error message can be customized using HTML tags. This example is an extension of Login page example where Error Dialog Page pops up on click of submit button.

SampleWebApplication:java

	
        /**
	 * Custom Error Dialog Page. 
	 * @param err error message text
	 */
	public void error(String err) {
	    final DialogBox dialog = new DialogBox();dialog.center();
	    dialog.setSize("80%", "80%");dialog.setText("Error");

	    VerticalPanel panel = new VerticalPanel();panel.setSize("100%", "100%");
	    HTMLPanel html = new HTMLPanel(err);html.setSize("100%", "100%");
	    panel.add(html);

	    Button ok = new Button("OK");
	    VerticalPanel buttonPanel = new VerticalPanel(); buttonPanel.setSpacing(3);
	    buttonPanel.add(ok);
	    panel.add(buttonPanel);

	    dialog.setWidget(panel);

	    ok.addClickHandler(new ClickHandler() {

	        public void onClick(ClickEvent arg0) {
	            dialog.hide();
	        }

	    });
	    dialog.show();
	} 

Output

Example2 HTMLPanel
Example2 HTMLPanel

6. References

• GWT UIPanels
• GWT API Reference

7. Download Eclipse Project

Download
You can download the full source code of this example here: GWT HTMLPanel Example

Abhishek Gupta

Abhishek Kumar Gupta with an engineering degree in Computer Science and Engineering from Harcourt Butler Technological Institute India. During the tenure of 7.5 years, Abhishek has been involved with a large number of projects ranging from programming, architecture designing and requirement analysis. He is currently working as Technical Lead with one of the biggest product based company - Ciena The Network Specialist with extensive work experience with JAVA/J2EE technologies with Telecom domain.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
Back to top button