The largest Interview Solution Library on the web


« Previous | 1 | 2 | 3 | Next »

GWT - BASIC WIDGETS


Every user interface considers the following three main aspects:
  • UI elements : These are the core visual elements the user eventually sees and interacts with. GWT provides a huge list of widely used and common elements varying from basic to complex, which we will cover in this tutorial.
  • Layouts: They define how UI elements should be organized on the screen and provide a final look and feel of the GUI (Graphical User Interface). This part will be covered in Layout chapter.
  • Behavior: These are events which occur when the user interacts with UI elements. This part will be covered in Event Handling chapter.
GWT UI Elements

The GWT library provides classes in a well-defined class hierarchy to create complex web-based user interfaces. All classes in this component hierarchy has been derived from the UIObject base class as shown below:

Every Basic UI widget inherits properties from a Widget class which in turn inherits properties from UIObject. Tree and Menu will be covered in “Complex widgets” tutorial later.
S.N.Widget & Description
1GWT UIObject Class
This widget contains text, not interpreted as HTML using a<div>element, causing it to be displayed with block layout.
2GWT Widget Class This widget can contain HTML text and displays the html content using a <div> element, causing it to be displayed with block layout.
GWT – UIObject Class

Introduction

The class UIObject is the superclass for all user-interface objects. It simply wraps a DOM element, and cannot receive events. It provides direct child classes like Widget, MenuItem, MenuItemSeparator, TreeItem.
  • All UIObject objects can be styled using CSS.
  • Every UIObject has a primary style name that identifies the key CSS style rule that should always be applied to it.
  • More complex styling behaviour can be achieved by manipulating an object's secondary style names.
Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.UIObject class:

public abstract class UIObject
extends java.lang.Object

Field

Following are the fields for com.google.gwt.user.client.ui.UIObject class:
  • public static final java.lang.String DEBUG_ID_PREFIX -- The element ID that you specify will be prefixed by the static string DEBUG_ID_PREFIX.
Class Constructors
S.N.Constructor & Description
1UIObject()
This creates a UIObject for the child classes.
Class Methods
S.N.Method & Description
1void addStyleDependentName(java.lang.String styleSuffix) Adds a dependent style name by specifying the style name's suffix.
2void addStyleName(java.lang.String style) Adds a secondary or dependent style name to this object.
3static void ensureDebugId(Element elem, java.lang.String id) Ensure that elem has an ID property set, which allows it to integrate with third-party libraries and test tools.
4protected static void ensureDebugId(Element elem, java.lang.String baseID, java.lang.String id) Set the debug id of a specific element.
5ensureDebugId(java.lang.String id) Ensure that the main Element for this UIObject has an ID property set, which allows it to integrate with third-party libraries and test tools.
6int getAbsoluteLeft() Gets the object's absolute left position in pixels, as measured from the browser window's client area.
7int getAbsoluteTop() Gets the object's absolute top position in pixels, as measured from the browser window's client area.
8Element getElement() Gets a handle to the object's underlying DOM element.
9int getOffsetHeight() Gets the object's offset height in pixels.
10int getOffsetWidth() Gets the object's offset width in pixels.
11protected Element getStyleElement() Template method that returns the element to which style names will be applied.
12java.lang.String getStyleName() Gets all of the object's style names, as a space-separated list.
13protected static java.lang.String getStyleName(Element elem) Gets all of the element's style names, as a space-separated list.
14java.lang.String getStylePrimaryName() Gets the primary style name associated with the object.
15protected static java.lang.String getStylePrimaryName(Element elem) Gets the element's primary style name.
16java.lang.String getTitle() Gets the title associated with this object.
17boolean isVisible() Determines whether or not this object is visible.
18static boolean isVisible(Element elem) Determines whether element is visible or not.
19protected void onEnsureDebugId(java.lang.String baseID) Called when the user sets the id using the ensureDebugId(String) method.
20void removeStyleDependentName(java.lang.String styleSuffix) Removes a dependent style name by specifying the style name's suffix.
21void removeStyleName(java.lang.String style) Removes a style name.
22protected void setElement(Element elem) Sets this object's browser element.
23protected void setElement(Element elem) Sets this object's browser element.
24void setHeight(java.lang.String height) Sets the object's height.
25void setPixelSize(int width, int height) Sets the object's size, in pixels, not including decorations such as border, margin, and padding.
26void setSize(java.lang.String width, java.lang.String height) Sets the object's size.
27protected static void setStyleName(Element elem, java.lang.String styleName) Clears all of the element's style names and sets it to the given style.
28protected static void setStyleName(Element elem, java.lang.String style, boolean add) This convenience method adds or removes a style name for a given element.
29void setStyleName(java.lang.String style) Clears all of the object's style names and sets it to the given style.
30protected static void setStylePrimaryName(Element elem, java.lang.String style) Sets the element's primary style name and updates all dependent style names.
31void setStylePrimaryName(java.lang.String style) Sets the object's primary style name and updates all dependent style names.
32void setTitle(java.lang.String title) Sets the title associated with this object.
33void setVisible(boolean visible) Sets whether this object is visible.
34static void setVisible(Element elem, boolean visible) Sets whether this element is visible
35void setWidth(java.lang.String width) Sets the object's width.
36java.lang.String toString() This method is overridden so that any object can be viewed in the debugger as an HTML snippet.
37void unsinkEvents(int eventBitsToRemove) Removes a set of events from this object's event list.
Methods Inherited

This class inherits methods from the following classes:
  • java.lang.Object
GWT – Widget Class

Introduction

The class Widget is the base class for the majority of user-interface objects. Widget adds support for receiving events from the browser and being added directly to panels.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.Widget class:

public class Widget
extends UIObject
implements EventListener

Field

Following are the fields for com.google.gwt.user.client.ui.Widget class:
  • public static final java.lang.String DEBUG_ID_PREFIX -- The element ID that you specify will be prefixed by the static string DEBUG_ID_PREFIX.
Class Constructors
S.N.Constructor & Description
1Widget() This creates a Widget for the child classes.
Class Methods
S.N.Method & Description
1protected <H extends EventHandler> HandlerRegistration addDomHandler(H handler, DomEvent.Type<H> type) Adds a native event handler to the widget and sinks the corresponding native event.
2protected <H extends EventHandler> HandlerRegistration addHandler(H handler, GwtEvent.Type<H> type) Adds this handler to the widget.
3protected void delegateEvent(Widget target, GwtEvent<?> event) Fires an event on a child widget.
4protected void doAttachChildren() If a widget implements HasWidgets, it must override this method and call onAttach() for each of its child widgets.
5protected void doDetachChildren() If a widget implements HasWidgets, it must override this method and call onDetach() for each of its child widgets.
6void fireEvent(GwtEvent<?> event) Fires the given event to all the appropriate handlers.
7protected int getHandlerCount(GwtEvent.Type<?> type) Gets the number of handlers listening to the event type.
8Widget getParent() Gets this widget's parent panel.
9boolean 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).
10protected boolean isOrWasAttached() Has this widget ever been attached?
11void onBrowserEvent(Event event) Fired whenever a browser event is received.
12void onBrowserEvent(Event event) Fired whenever a browser event is received.
13protected void onLoad() Gets a handle to the object's underlying DOM element.
14protected void onLoad() Gets a handle to the object's underlying DOM element.
15protected void onUnload() This method is called immediately before a widget will be detached from the browser's document.
16void removeFromParent() Removes this widget from its parent widget.
17void sinkEvents(int eventBitsToAdd) Overridden to defer the call to super.sinkEvents until the first time this widget is attached to the dom, as a performance enhancement.
Methods Inherited

This class inherits methods from the following classes:
  • com.google.gwt.user.client.ui.UIObject
Basic Widgets

Following are few important Basic Widgets:
S.N.Widget & Description
1Label
This widget contains text, not interpreted as HTML using a <div>element, causing it to be displayed with block layout.
2HTML
This widget can contain HTML text and displays the html content using a <div> element, causing it to be displayed with block layout.
3Image
This widget displays an image at a given URL.
4Anchor
This widget represents a simple <a> element.
GWT – Label Widget

Introduction

The Label can contains only arbitrary text and it can not be interpreted as HTML. This widget uses a <div> element, causing it to be displayed with block layout.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.Label class:

public class Label
extends Widget
implements HasHorizontalAlignment, HasText, HasWordWrap,
HasDirection, HasClickHandlers, SourcesClickEvents,
SourcesMouseEvents, HasAllMouseHandlers

Css Style Rulesles

Following default CSS Style rule will be applied to all the labels. You can override it as per your requirements.

.gwt-Label { }

Class Constructors
S.N.Constructor & Description
1Label() Creates an empty label.
2protected Label(Element element) This constructor may be used by subclasses to explicitly use an existing element.
3Label(java.lang.String text) Creates a label with the specified text.
4Label(java.lang.String text, boolean wordWrap) Creates a label with the specified text.
Class Methods
S.N.Method & Description
1void addClickListener(ClickListener listener) Adds a listener interface to receive click events.
2void addMouseListener(MouseListener listener) Adds a listener interface to receive mouse events.
3void addMouseWheelListener(MouseWheelListener listener) Gets this widget's parent panel.
4HasDirection.Direction getDirection() Gets the directionality of the widget.
5HasHorizontalAlignment.HorizontalAlignmentConstant getHorizontalAlignment() Gets the horizontal alignment.
6java.lang.String getText() Gets this object's text.
7boolean getWordWrap() Gets whether word-wrapping is enabled.
8void onBrowserEvent(Event event) Removes a previously added listener interface.
9void removeClickListener(ClickListener listener) This method is called immediately before a widget will be detached from the browser's document.
10void removeMouseListener(MouseListener listener) Removes a previously added listener interface.
11void removeMouseWheelListener(MouseWheelListener listener) Removes a previously added listener interface.
12void setDirection(HasDirection.Direction direction) Sets the directionality for a widget.
13void setHorizontalAlignment(HasHorizontalAlignment.HorizontalAlignmentConstant align) Sets the horizontal alignment.
14void setText(java.lang.String text) Sets this object's text.
15void setWordWrap(boolean wrap) Sets whether word-wrapping is enabled.
16static Label wrap(Element element) Creates a Label widget that wraps an existing
or element.
Methods Inherited

This class inherits methods from the following classes:
  • com.google.gwt.user.client.ui.UIObject
  • com.google.gwt.user.client.ui.Widget
Label Widget Example

This example shows the usage of Label Widget in GWT. You can use the following steps to update the GWT application we created in GWT - Create Application chapter:
StepDescription
1Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3Compile and run the application to verify the result of the implemented logic.
Following is the content of the modified module descriptorsrc/com.jtc/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.jtc.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;
}
.gwt-Label{
font-size: 150%;
font-weight: bold;
color:red;
padding:5px;
margin:5px;
}
.gwt-Green-Border{
border:1px solid green;
}
.gwt-Blue-Border{
border:1px solid blue;
}

Following is the content of the modified HTML host file war/HelloWorld.html to accommodate two buttons.

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

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

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
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 two Labels
Label label1 = new Label("This is first GWT Label");
Label label2 = new Label("This is second GWT Label");
// use UIObject methods to set label properties.
label1.setTitle("Title for first Lable");
label1.addStyleName("gwt-Green-Border");
label2.setTitle("Title for second Lable");
label2.addStyleName("gwt-Blue-Border");
// add labels to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.add(label1);
panel.add(label2);
RootPanel.get("gwtContainer").add(panel);
}
}

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 the following result:

GWT - HTML Widget

Introduction

The HTML widget can contain arbitrary HTML which can be interpreted as HTML. This widget uses a <div> element, causing it to be displayed with block layout.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.Label class:

public class HTML
extends Label
implements HasHTML

Css Style Rules

Following default CSS Style rule will be applied to all the HTML widget. You can override it as per your requirements.

.gwt-HTML { }

Class Constructors
S.N.Constructor & Description
1HTML() Creates an empty HTML.
2protected HTML(Element element) This constructor may be used by subclasses to explicitly use an existing element.
3HTML(java.lang.String html) Creates a HTML with the specified html contents.
4HTML(java.lang.String html, boolean wordWrap) Creates an HTML widget with the specified contents, optionally treating it as HTML, and optionally disabling word wrapping.
Class Methods
1java.lang.String getHTML()
Gets this object's contents as HTML.
2void setHTML(java.lang.String html)
Sets this object's contents via HTML.
3static HTML wrap(Element element)
Creates an HTML widget that wraps an existing
or element.
Methods Inherited

This class inherits methods from the following classes:
  • com.google.gwt.user.client.ui.Label
  • com.google.gwt.user.client.ui.UIObject
  • com.google.gwt.user.client.ui.Widget
  • com.google.gwt.user.client.ui.HasText
  • java.lang.Object
Html Widget Example

This example will take you through simple steps to show usage of a HTML Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:
StepDescription
1Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3Compile and run the application to verify the result of the implemented logic.
Following is the content of the modified module descriptor src/com.jtc/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.jtc.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;
}
.gwt-Green-Border{
border:1px solid green;
}
.gwt-Blue-Border{
border:1px solid blue;
}

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>HTML Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

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

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HTML;
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 two HTML widgets
HTML html1 =
new HTML("This is first GWT HTML widget using <b> tag of html.");
HTML html2 =
new HTML("This is second GWT HTML widget using <i> tag of html.");
// use UIObject methods to set HTML widget properties.
html1.addStyleName("gwt-Green-Border");
html2.addStyleName("gwt-Blue-Border");
// add widgets to the root panel. VerticalPanel panel = new VerticalPanel();
panel.setSpacing(10);
panel.add(html1);
panel.add(html2);
RootPanel.get("gwtContainer").add(panel);
}
}

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 – Image Widget

Introduction

The Image widget displays an image at a given URL. The image widget can be in 'unclipped' mode (the default mode) or 'clipped' mode. In clipped mode, a viewport is overlaid on top of the image so that a subset of the image will be displayed. In unclipped mode, there is no viewport - the entire image will be visible. Methods will operate differently depending on the mode that the image is in. These differences are detailed in the documentation for each method.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.Image class:

public class Image
extends Widget
implements SourcesLoadEvents, HasLoadHandlers,
HasErrorHandlers, SourcesClickEvents,
HasClickHandlers, HasAllMouseHandlers,
SourcesMouseEvents

CSS Style Rules

Following default CSS Style rule will be applied to all the Image widget. You can override it as per your requirements.

.gwt-Image { }

Class Constructors
S.N.Constructor & Description
1Image() Creates an empty image.
2protected Image(Element element) This constructor may be used by subclasses to explicitly use an existing element.
3Image(java.lang.String url) Creates an image with the specified url.
4Image(java.lang.String html, int left, int top, int width, int height) Creates a clipped image with a specified URL and visibility rectangle.
Class Methods
S.N.Function name & Description
1void addClickListener(ClickListener listener) Adds a listener interface to receive click events.
2void addLoadListener(LoadListener listener) Adds a listener interface to receive load events.
3void addMouseListener(MouseListener listener) Adds a listener interface to receive mouse events.
4void addMouseWheelListener(MouseWheelListener listener) Gets this widget's parent panel.
5int getHeight() Gets the height of the image.
6int getOriginLeft() Gets the horizontal co-ordinate of the upper-left vertex of the image's visibility rectangle.
7int getOriginTop() Gets the vertical co-ordinate of the upper-left vertex of the image's visibility rectangle.
8java.lang.String getUrl() Gets the URL of the image.
9int getWidth() Gets the width of the image.
10void onBrowserEvent(Event event) Removes a previously added listener interface.
11static void prefetch(java.lang.String url) Causes the browser to pre-fetch the image at a given URL.
12void removeClickListener(ClickListener listener) This method is called immediately before a widget will be detached from the browser's document.
13void removeLoadListener(LoadListener listener) Removes a previously added listener interface.
14void removeMouseListener(MouseListener listener) Removes a previously added listener interface.
15void removeMouseWheelListener(MouseWheelListener listener) Removes a previously added listener interface.
16void setUrl(java.lang.String url) Sets the URL of the image to be displayed.
17void setUrlAndVisibleRect(java.lang.String url, int left, int top, int width, int height) Sets the url and the visibility rectangle for the image at the same time.
18void setVisibleRect(int left, int top, int width, int height) Sets the visibility rectangle of an image.
19static Image wrap(Element element) Creates a Image widget that wraps an existing <img> element.
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
Image Widget Example

This example will take you through simple steps to show usage of an Image Widget in GWT.

Following are the steps to update a GWT application which we created in GWT - Create Application chapter:
StepDescription
1Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3Compile and run the application to verify the result of the implemented logic.
Following is the content of the modified module descriptorsrc/com.jtc/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.jtc.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>Image Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have the content of Java file src/com.jtc/HelloWorld.java which will demonstrate the use of Image widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Image;
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 Image widget
Image image = new Image();
//set image source
image.setUrl("http://www.jtc.com/images/gwt-mini.png");
// Add image to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.add(image);
RootPanel.get("gwtContainer").add(panel);
}
}

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 - Anchor Widget

Introduction

The Anchor widget that represents a simple <a> element.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.Anchor class:

public class Anchor
extends FocusWidget
implements HasHorizontalAlignment, HasName,
HasHTML, HasWordWrap, HasDirection

CSS Style Rules

Following default CSS Style rule will be applied to all the Image widget. You can override it as per your requirements.

.gwt-Anchor { }

Class Constructors
S.N.Constructor & Description
1Anchor() Creates an empty anchor.
2protected Anchor(Element element) This constructor may be used by subclasses to explicitly use an existing element.
3Anchor(java.lang.String text) Creates an anchor for scripting.
4Anchor(java.lang.String text, boolean asHtml) Creates an anchor for scripting.
5Anchor(java.lang.String text, boolean asHTML, java.lang.String href) Creates an anchor with its text and href (target URL) specified.
6Anchor(java.lang.String text, boolean asHtml, java.lang.String href, java.lang.String target) Creates a source anchor (link to URI).
7Anchor(java.lang.String text, java.lang.String href) Creates an anchor with its text and href (target URL) specified.
8Anchor(java.lang.String text, java.lang.String href, java.lang.String target) Creates a source anchor with a frame target.
Class Methods
S.N.Function name & Description
1HasDirection.Direction getDirection() Gets the directionality of the widget.
2HasHorizontalAlignment.HorizontalAlignmentConstant getHorizontalAlignment() Gets the horizontal alignment.
3java.lang.String getHref() Gets the anchor's href (the url to which it links).
4java.lang.String getHTML() Gets this object's contents as HTML.
5java.lang.String getName() Gets the widget's name.
6int getTabIndex() Gets the widget's position in the tab index.
7java.lang.String getTarget() Gets the anchor's target frame (the frame in which navigation will occur when the link is selected).
8java.lang.String getText() Gets this object's text.
9boolean getWordWrap() Gets whether word-wrapping is enabled.
10void setAccessKey(char key) Sets the widget's 'access key'.
11void setFocus(boolean focused) Explicitly focus/unfocus this widget.
12void setHorizontalAlignment(HasHorizontalAlignment.HorizontalAlignmentConstant align) Sets the horizontal alignment.
13void setHref(java.lang.String href) Sets the anchor's href (the url to which it links).
14void setHTML(java.lang.String html) Sets this object's contents via HTML.
15void setName(java.lang.String name) Sets the widget's name.
16void setTabIndex(int index) Sets the widget's position in the tab index.
17void setText(java.lang.String text) Sets this object's text.
18void setWordWrap(boolean wrap) Sets whether word-wrapping is enabled.
19static Anchor wrap(Element element) Creates an Anchor widget that wraps an existing <a> element.
Methods Inherited

This class inherits methods from the following classes:
  • com.google.gwt.user.client.ui.UIObject
  • com.google.gwt.user.client.ui.Widget
  • com.google.gwt.user.client.ui.FocusWidget
Anchor Widget Example

This example will take you through simple steps to show usage of an Anchor Widget in GWT. Following are the steps to update the GWT application which we created in GWT - Create Application chapter:
StepDescription
1Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3Compile and run the application to verify the result of the implemented logic.
Following is the content of the modified module descriptorsrc/com.jtc/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.jtc.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>Anchor Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

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

package com.jtc.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 HelloWorld implements EntryPoint {
public void onModuleLoad() {
// Create a Anchor widget,
// pass text as TutorialsPoint
// set asHtml as false,
// href as www.jtc.com,
// target as _blank
Anchor anchor = new Anchor("TutorialsPoint",
false,
"http://www.jtc.com",
"_blank");
// Add anchor to the root panel.
VerticalPanel panel = new VerticalPanel();
panel.add(anchor);
RootPanel.get("gwtContainer").add(panel);
}
}

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:
« Previous | 1 | 2 | 3 | Next »


copyright © 2014 - all rights riserved by javatechnologycenter.com