GWT, Tree widget - Naukri Code 360

Introduction

This blog will help you to understand what GWT tree widget is and how we can implement it in our code. Also this blog also shows you the different constructors and methods that we can utilise into our program for more features.

But before that lets have a brief understanding of GWT.

Google development toolkit also known as GWT enables programmers to create internet or web applications. For typical web-app chores like bookmarking, UI abstraction, cross-browser compatibility, etc., GWT insists on reusable techniques. It offers characteristics like:

Because GWT solves browser incompatibilities through various bindings, developers do not need to be experts in this area.
The client and server code bases for GWT are the same.
Java was the platform of choice for GWT because it offers features like code navigation and refactoring that make development more efficient.
GWT MVP (Model View Presenter) enables collaborative working and more rapid JUnit testing. By adding events to the event bus, the client side programme can make several modifications.
It enables the integration of numerous Java technologies, including hibernate via gilead.

Now let's look into the information that will help you to understand the the GWT tree widget

Tree widget

A typical hierarchical tree widget is represented by the Tree widget. The user can open, close, and choose TreeItems in the tree's hierarchy.

You can imagine a tree widget as the file system in a computer. In every computer there is a main file or root file that might contain more subfiles in it and those subfiles might have more files or data in them. This shows the hierarchical structure of the tree widget.

A department having sub departments or employees under them can also be taken as an example for the tree widget.

Now let’s see how we can declare the tree widget into our code.

Class declaration

com.google.gwt.user.client.ui.Tree is the class that we need to import into our code in order to implement tree widget. Below is the class declaration of it.

public class Tree
   extends Widget
      implements HasWidgets, SourcesTreeEvents, HasFocus,
         HasAnimation, HasAllKeyHandlers, HasAllFocusHandlers, 
            HasSelectionHandlers<TreeItem>, HasOpenHandlers<TreeItem>, 
               HasCloseHandlers<TreeItem>, SourcesMouseEvents, HasAllMouseHandlers

You can also try this code with Online Java Compiler

Run Code

Constructors for Tree class

Sr.no	Constructors and Description
1	Tree() This constructor represents the empty tree.
2	Tree(TreeImages images) In order to use some specified bundle of images for images we use this constructor
3	Tree(TreeImages images, boolean useLeafImages) In order to use some specified bundle of images for images we use this constructor with a boolean argument.

Methods for Tree widget

Sr.no	Methods and Description
1	void add(Widget widget) The widget is included as a root tree item.
2	void addFocusListener(FocusListener listener) includes an interface for a listener to receive mouse events.
3	TreeItem addItem(java.lang.String itemText) adds a straightforward tree item with the provided text.
4	void addItem(TreeItem item) adds a new item to the tree's root level.
5	TreeItem addItem(Widget widget) creates a new tree item that contains the chosen widget.
6	void addKeyboardListener(KeyboardListener listener) adds an interface for a listener to take keyboard events.
7	void addMouseListener(MouseListener listener) adds an interface for a listener to take mouse events.
8	void addTreeListener(TreeListener listener) adds a listener interface for catching events from trees.
9	void clear() removes every tree item from the active tree.
10	protected void doAttachChildren() A widget must override this method and call onAttach() for each of its children if it implements HasWidgets.
11	protected void doDetachChildren() A widget must override this process and request onDetach() for each of those child widgets if it implements HasWidgets.
12	void ensureSelectedItemVisible() opens its parents and scrolls the tree as necessary to make sure the currently-selected item is displayed.
13	java.lang.String getImageBase() Deprecated. Use Tree(TreeImages) to deliver a series of photos to be utilised within a tree as it offers a more efficient and controllable way to do so.
14	TreeItem getItem(int index) Retrieves the top-level tree item starting at the given index.
15	int getItemCount() Obtains the number of elements that are present at the tree's root.

CSS style rules

All Tree widgets will have the default CSS Style rules applied. In accordance with your needs, you can override it.

.gwt-Tree {}

.gwt-TreeItem {}

.gwt-TreeItem-selected {}

Implementation

The following is the content of the war/Treewidget.html modified HTML host file.

<html>
   <head>
      <title>Hello World</title>
      <link type="text/css" rel="stylesheet" href="Treewidget.css">
       <script type="text/javascript" language="javascript" src="treewidget/treewidget.nocache.js"></script
      </script>
   </head>

   <body>
      <h1>Tree Widget</h1>
      <h2> below is the example </h2>
      <div id = "gwtContainer"></div>
   </body>
</html>

The contents of the stylesheet file war/Treewidget.css that has been edited are listed below.

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;
}
.gwt-Label {
   font-weight: bold;
   color: maroon;
}

.gwt-Tree .gwt-TreeItem {
   padding: 1px 0px;
   margin: 0px;
   white-space: nowrap;
   cursor: hand;
   cursor: pointer;
}

.gwt-Tree .gwt-TreeItem-selected {
  background: #ebeff9;
}

Let's look at the contents of the Java file src/com.codingninjas/Treewidget.java, which shows how to use the Tree widget.

package com.codingninjas.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Tree;
import com.google.gwt.user.client.ui.TreeItem;
import com.google.gwt.user.client.ui.VerticalPanel;

public class Treewidget implements EntryPoint {
   public void onModuleLoad() {
      //create a label
      final Label labelMessage = new Label();
      labelMessage.setWidth("300");

      // Create a root tree item as department
      TreeItem department = new TreeItem();
      
      // create sub departments for the root department
      TreeItem salesdepartment = new TreeItem();
      TreeItem hr = new TreeItem();
      TreeItem finance = new TreeItem();
      
      // set text for each department
      department.setText("Departments");
      salesdepartment.setText("Sales");
      hr.setText("HR");
      finance.setText("Finance");
      
      //adding employee under each department
      salesdepartment.addTextItem("rishab");
      salesdepartment.addTextItem("sneha");
      
      hr.addTextItem("jack");
      hr.addTextItem("sam");
      hr.addTextItem("rohan");
      
      finance.addTextItem("dhruv");
      finance.addTextItem("harsh");
      finance.addTextItem("peter");
      
      // adding sub departments in root department
      department.addItem(hr);
      department.addItem(finance);
      department.addItem(salesdepartment);

      //create the tree
      Tree tree = new Tree();

      //add root item to the tree
      tree.addItem(department);    

      // Add text boxes to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.add(tree);
      panel.add(labelMessage);

      //add the tree to the root panel
      RootPanel.get("gwtContainer").add(panel);
   }
}

You can also try this code with Online Java Compiler

Run Code

Output

From the above we can see that given code has successfully implemented the tree widget as it is showing the hierarchical structure.

Root is Departments under which has sub departments and employees names that can be visible when we click on that + button.

Check out this problem - Duplicate Subtree In Binary Tree

Frequently asked questions

What is hierarchy?

An organisational structure known as a hierarchy is when things are ranked by importance. The majority of organisations, governments, and organised religions follow hierarchies.

What does a GWT *.nocache.js file do?

It includes the javascript code needed to retrieve a.cache.html file using a lookup table created by the GWT compiler and resolve deferred binding configurations (for example, browser detection.

What is the name of any GWT widget's default style?

Each component's class name by default is gwt-. For instance, the TextBox widget's default style is gwt-TextBox, while the Button widget's default style is gwt-Button.

What is the GWT ClientBundle?

The everything-else category's entries are transferred into the cache-forever category through the ClientBundle interface.

Can we modify css styling according to our need?

Yes you can modify css according to your need just by simply changing the css file given in the implementation part.

Conclusion

In this article, we learned about GWT and GWT Tree widget and how we can implement the GWT Tree class with the help of the methods available for this particular class. We have also learned about the basic css and html code in order to implement the Tree widget.

To learn more about the GWT article please refer to the following articles:

GWT Suggestbox

GWT vs JSF

GWT hidden widget

To learn more about DSA, competitive coding and many more knowledgeable topics, please look into the guided paths on Coding Ninjas Studio. Also, you can enroll in our courses and check out the mock test and problems available to you. Please check out our interview experiences and interview bundle for placement preparations.