Table of contents

Introduction

GWT VerticalSplitPanel Class Declaration

GWT VerticalSplitPanel Widget Nested Classes

GWT VerticalSplitPanel Constructor

GWT VerticalSplitPanel Methods

GWT VerticalSplitPanel Example

Frequently Asked Questions

7.1.

What is GWT VerticalSplitPanel Widget?

7.2.

What are the advantages of GWT?

7.3.

What advantages does GWT offer?

7.4.

How advantageous is learning GWT?

7.5.

Does Google use still GWT?

Conclusion

Last Updated: Mar 27, 2024

Medium

GWT VerticalSplitPanel

Author Shiva

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

In this article, we’ve covered everything you need to know about GWT VerticalSplitPanel Widget. The VerticalSplitPanel widget simulates a panel with two widgets arranged in a single vertical column, and it lets the user alter the proportion of the height allotted to each widget on the fly. When required, scrollbars will be automatically added to widgets placed within a VerticalSplitterPanel.

GWT VerticalSplitPanel Widget is deprecated. Instead, use SplitLayoutPanel but be aware that it does not completely replace this class. It needs standards mode and works best with a RootLayoutPanel rather than a RootPanel.

GWT VerticalSplitPanel Class Declaration

Let's look at the declaration of com.google.gwt.user.client.ui.VerticalSplitPane.

@Deprecated 
public final class VerticalSplitPanel extends Panel

Here’s a diagram that shows the levels of inheritance and all the classes from which VerticalSplitPanel is inherited:

GWT VerticalSplitPanel Widget Nested Classes

It is a specific implementation of HTMLTable.CellFormatter.

static interface VerticalSplitPanel.Resources

GWT VerticalSplitPanel Constructor

All of the constructor methods listed below are deprecated:

VerticalSplitPanel()
VerticalSplitPanel(VerticalSplitPanel.Resources resources)
VerticalSplitPanel(VerticalSplitPanelImages images) is replaced by
VerticalSplitPanel(Resources).

GWT VerticalSplitPanel Methods

Modifier and Type	Method	Description
Widget	getBottomWidget()	Obtains the widget from the panel's bottom.
Widget	getTopWidget()	obtains the widget from the panel's top.
protected void	onEnsureDebugId(java.lang.String baseID)	Affected Elements: -splitter, -top, -bottom
protected void	onLoad()	The moment a widget is attached to the browser's document, this method is called.
(package private) void	onSplitterResize(int x, int y)	called each time the user drags the splitter with the mouse.
(package private) void	onSplitterResizeStarted(int x, int y)	When the user begins dragging the splitter, the call is made.
protected void	onUnload()	A widget is disconnected from the browser's content just before this function is called.
void	setBottomWidget(Widget w)	Sets the widget in the bottom of the panel.
void	setHeight(java.lang.String height)	Sets the object's height.
void	setSplitPosition(java.lang.String pos)	Moves the position of the splitter.
void	setTopWidget(Widget w)	Sets the widget in the top of the panel.

GWT VerticalSplitPanel Example

This example will walk you through some basic GWT VerticalSplitPanel Widget usage procedures.

Step 1: Create a project with the name HelloWorld under your package(com.your_email_id)

Step 2: Create files HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.java

Step 3: Here is what the changed module descriptor contains( src/com.example/HelloWorld.gwt.xml.) :

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
<!-- Inheriting core Web Toolkit stuff and default GWT style sheet. →
<inherits name = 'com.google.gwt.user.User'/>
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify entry point class of the app                       →
<entry-point class = 'com.example.client.HelloWorld'/>
<!-- Specify the paths for translatable code                   →
<source path = 'client'/>
<source path = 'shared'/>
</module>

Step 4: The changed Style Sheet file HelloWorld.css content is listed below:

body {
	text-align: center;
	font-family: Georgia, serif;
}
h1 {
	font-size: 3rem;
	font-weight: normal;
	color: #2C3639;
	margin: 50px 0px;
	text-align: center;
}

Step 5: The changed HTML host file HelloWorld.html's content is as follows.

<html>
<head>
<title>Hello World</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js" />
</head>
<body>
	<h1>GWT VerticalSplitPanel Widget </h1>
	<div id = "gwtContainer"></div>
</body>
</html>

Step 6: Let's look at the Java file src/com.example/HelloWorld.java with the following contents to see how to use the GWT VerticalSplitPanel widget.

package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.VerticalSplitPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
	public void onModuleLoad() {
		// Create a Vertical Split Panel
		VerticalSplitPanel verticalSplitPanel = new VerticalSplitPanel();
		verticalSplitPanel.setSize("250px", "250px");
		verticalSplitPanel.setSplitPosition("20%");
		String randomText = "GWT VerticalSplitpanel Widget";
		randomText+=randomText;
		verticalSplitPanel.setBottomWidget(new HTML(randomText));
		verticalSplitPanel.setTopWidget(new HTML(randomText));
		DecoratorPanel decoratorPanel = new DecoratorPanel();
		decoratorPanel.add(verticalSplitPanel);
		// Add the widgets to the root panel.
		RootPanel.get().add(decoratorPanel);
	}
}

Output:

Frequently Asked Questions

What is GWT VerticalSplitPanel Widget?

The VerticalSplitPanel widget simulates a panel with two widgets arranged in a single vertical column, and it lets the user alter the proportion of the height allotted to each widget on the fly.

What are the advantages of GWT?

An open-source Java software development platform; Google Web Toolkit (GWT) makes it simple to create AJAX apps. You can use the Java development tools to create and debug AJAX apps with GWT.

What advantages does GWT offer?

If you are a Java programmer with knowledge of Swing or AWT, selecting GWT should be simple. Even if you lack experience in Java GUI development, the years spent working on server-side Java will be helpful when creating GWT applications.

How advantageous is learning GWT?

Many Google projects, both internal and external, are based on GWT, therefore Google will need to sustain the technology as long as they need to keep improving the front-end.

Does Google use still GWT?

Some of Google's products, including Blogger, AdWords, Flights, Wallet, Offers, Groups, and Inbox, are GWT-based.

Conclusion

In this article, we have discussed everything you need to know about GWT VerticalSplitPanel Widget. Here are more articles to the rescue:

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.
Do upvote our blog to help other ninjas grow.
Happy Learning!