GWT - Composite Widget

Quiz

Introduction

The Composite widget is a type of widget that can wrap another widget, hiding the wrapped widget's methods. When added to a panel, a composite behaves exactly as if the widget it wraps had been added. The composite is useful for creating a single widget out of an aggregate of multiple other widgets contained in a single panel.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.Composite class −

public abstract class Composite
   extends Widget

Class Constructors

Sr.No.	Constructor & Description
1	Composite()

Class Methods

Sr.No.	Function name & Description
1	protected Widget getWidget() Provides subclasses access to the topmost widget that defines this composite.
2	protected void initWidget(Widget widget) Sets the widget to be wrapped by the composite.
3	boolean isAttached() Determines whether this widget is currently attached to the browser's document (i.e., there is an unbroken chain of widgets between this widget and the underlying browser document).
4	protected void onAttach() This method is called when a widget is attached to the browser's document.
5	void onBrowserEvent(Event event) Fired whenever a browser event is received.
6	protected void onDetach() This method is called when a widget is detached from the browser's document.
7	protected void setWidget(Widget widget) Deprecated. Use initWidget(Widget) instead

Methods Inherited

This class inherits methods from the following classes −

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
java.lang.Object

Composite Widget Example

This example will take you through simple steps to show usage of a Composite 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 HelloWorld.java 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 = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- 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'/>

</module>

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.

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

   <body>
      <h1>Composite Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   /**
   * A composite of a TextBox and a CheckBox that optionally enables it.
   */
   private static class OptionalTextBox extends Composite implements
   ClickHandler {

      private TextBox textBox = new TextBox();
      private CheckBox checkBox = new CheckBox();

      /**
      * Constructs an OptionalTextBox with the given caption 
      * on the check.
      * @param caption the caption to be displayed with the check box
      */
      public OptionalTextBox(String caption) {
         // Place the check above the text box using a vertical panel.
         VerticalPanel panel = new VerticalPanel();
         // panel.setBorderWidth(1);
         panel.setSpacing(10);
         panel.add(checkBox);
         panel.add(textBox);

         textBox.setWidth("200");
         // Set the check box's caption, and check it by default.
         checkBox.setText(caption);
         checkBox.setValue(true);
         checkBox.addClickHandler(this);

         DecoratorPanel decoratorPanel = new DecoratorPanel();

         decoratorPanel.add(panel);
         // All composites must call initWidget() in their constructors.
         initWidget(decoratorPanel);
      }

      public void onClick(ClickEvent event) {
         if (event.getSource() == checkBox) {
            // When the check box is clicked,
            //update the text box's enabled state.
            textBox.setEnabled(checkBox.getValue());
         }
      }
   }

   public void onModuleLoad() {
      // Create an optional text box and add it to the root panel.
      OptionalTextBox otb = new OptionalTextBox("Check this to enable me");
      RootPanel.get().add(otb);
   }    
}

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_layout_panels.htm

Print Page