Introduction
This blog will help you to understand the fundamentals of the GWT anchor widget. In fundamentals we will learn what different type of constructors we can apply in anchor class and we will see how many methods we can use in the anchor to make our program more Versatile.
But before we discuss all these information let’s have a brief on 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 program can make several modifications.
- It enables the integration of numerous Java technologies, including hibernate via gilead.
Anchor widget
If you have done html then you will surely be familiar with the anchor word here. For those who are not there is an anchor tag <a> in html whose functionality is to provide a link to a particular site or page on the internet. This is the work functionality anchor widget implements in GWT and we will learn how to do that.
Class declaration
In order to apply the anchor widget first we need to import com.google.gwt.user.client.ui.Anchor in our code. And its class declaration is:
public class Anchor
extends FocusWidget
implements HasHorizontalAlignment, HasName,
HasHTML, HasWordWrap, HasDirection
Constructors for Anchor class
Sr.no |
Constructors and Description |
1 |
Anchor()
Declares an empty anchor |
2 |
protected Anchor(Element element)
Subclasses can explicitly utilise an existing element with the help of this Constructor |
3 |
Anchor(java.lang.String t)
Creates a scriptable anchor. |
4 |
Anchor(java.lang.String t, boolean ashtml)
Creates a scriptable anchor. |
5 |
Anchor(java.lang.String t, boolean ashtml, java.lang.String href)
Enables the creation of an anchor with the text and target URL given. |
6 |
Anchor(java.lang.String t, boolean ashtml, java.lang.String href, java.lang.String target)
A source anchor is created (link to URI). |
7 |
Anchor(java.lang.String t, java.lang.String href)
Enables the creation of an anchor with the text and target URL given. |
8 |
Anchor(java.lang.String t, java.lang.String href, java.lang.String target)
Combines a frame target with a source anchor. |
Methods
Sr.no |
Methods and Description |
1 |
HasDirection.Direction getDirection()
obtains the widget's directionality. |
2 |
HasHorizontalAlignment.HorizontalAlignmentConstant getHorizontalAlignment()
the horizontal alignment is obtained. |
3 |
java.lang.String getHref()
gets the href of the anchor (the url to which it links). |
4 |
java.lang.String getHTML()
Obtains the HTML content of this item. |
5 |
java.lang.String getName()
gets the name of the widget. |
6 |
int getTabIndex()
retrieves the widget's tab index position. |
7 |
java.lang.String getTarget()
gets the target frame for the anchor (the frame in which navigation will occur when the link is selected). |
8 |
java.lang.String getText()
Get the text of this item. |
9 |
boolean getWordWrap()
determines whether word-wrapping is turned on. |
10 |
void setAccessKey(char key)
the access key for the widget is set. |
11 |
void setFocus(boolean focused)
Clearly focus or defocus this widget. |
12 |
void setHorizontalAlignment(HasHorizontalAlignment. HorizontalAlignmentConstant align)
aligns the horizontal axis |
Above are the methods that we can apply into our anchor widget according to our needs.
Now lets see the implementation of the Anchor widget in GWT
Implementation
The following is the content of the war/Anchorwidget.html modified HTML host file.
<html>
<head>
<title>Hello World</title>
<link type="text/css" rel="stylesheet" href="Anchorwidget.css">
<script type="text/javascript" language="javascript" src="anchorwidget/anchorwidget.nocache.js"></script>
</script>
</head>
<body>
<h1>Anchor Widget</h1>
<h2> below is the link </h2>
<div id = "gwtContainer"></div>
</body>
</html>
The contents of the stylesheet file war/Anchorwidget.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;
}
#gwtContainer
{
display: flex;
justify-content: center;
}
Let's look at the contents of the Java file src/com.codingninjas/Anchorwidget.java, which shows how to use the Anchor widget.
package com.codingninjas.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Anchor;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
public class Anchorwidget implements EntryPoint {
public void onModuleLoad() {
// Create an Anchor widget with the help of anchor constructor,
// pass text as codingninjas
// set asHtml as false,
// href as https://www.codingninjas.com/,
// target as _blank
Anchor anchor = new Anchor("Codingninjas",
false,
"https://www.codingninjas.com/",
"_blank");
// Add anchor to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.add(anchor);
RootPanel.get("gwtContainer").add(panel);
}
}Output
Here is the output of the above code. In the bottom left of the picture is the link of the coding ninjas this means that our widget is working. When we hover over that coding ninjas text it will take us to the official site of the coding ninjas.
23+ registered 
