GWT 2.8.2 Declarative User Interface WebApp Development (FREE PREVIEW)

Contents
Author........................................................................................................................................................ 1
Learner...................................................................................................................................................... 2
Source code.............................................................................................................................................. 4
Chapter 1: Introduction ..................................................................................................................... 6
Development Tool.............................................................................................................................. 9
Widget, Panel, Event.......................................................................................................................10
Software used for the source code ...........................................................................................14
Source Code ........................................................................................................................................15
Reference.............................................................................................................................................18
Chapter 2: Create HTML Page using GWT ...............................................................................20
Generate GWT Application Project in Eclipse .....................................................................24
Create GWT Module Descriptor File........................................................................................29
Create GWT Application Entry Point.......................................................................................39

Create Host HTML Page.................................................................................................................49
Compile and Execute GWT Application..................................................................................58
Chapter 3: Horizontal Panel, Vertical Panel, Grid Panel....................................................69
Declarative User Interface............................................................................................................73
XML Namespace................................................................................................................................76
Horizontal Panel...............................................................................................................................78
Vertical Panel.....................................................................................................................................79
Grid Panel ............................................................................................................................................80
GwtPanel.java.....................................................................................................................................83
PanelEntryPoint.java......................................................................................................................96
Chapter 4: Data Entry Form........................................................................................................104
Label....................................................................................................................................................108
TextBox..............................................................................................................................................111
PasswordTextBox .........................................................................................................................113

RadioButton.....................................................................................................................................119
TextArea............................................................................................................................................121
Button.................................................................................................................................................123
HIdden................................................................................................................................................125
UIObject and FocusWidget Attribute ...................................................................................127
Theme Configuration in Module Descriptor .....................................................................137
Chapter 5: Adding Event to Data Entry Form, and Read the Data .............................144
Event...................................................................................................................................................148
Define Event on Widget..............................................................................................................151
Event Type........................................................................................................................................154
Read Data from the Widgets ....................................................................................................160
Drag and Drop Events.................................................................................................................175
Event Trace TextArea..................................................................................................................184
Appendix: Installation Guide ......................................................................................................190

Introduction.....................................................................................................................................192
JDK10 Installation.........................................................................................................................193
Eclipse 4.7 Installation................................................................................................................195
GWT 2.8.2 SDK and GWT Eclipse Plugin Version 3 Installation...............................197
Chrome Browser Installation...................................................................................................209
Configure Default Internet Browser in Eclipse................................................................210
Appendix: Import Project into Eclipse ...................................................................................215
Index......................................................................................................................................................227

GWT 2.8.2 Declarative User Interface WebApp Development
Copyright © 2018, by MillionStrengthKnowledge.com, All rights reserved.
The publication of the book and source code are protected by copyright, and permission must be
obtained from the MillionStrengthKnowledge.com prior to any prohibited reproduction, storage in a
retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying,
recording, or likewise.
Every effort has been made in the preparation of this book and source code to ensure the accuracy of
the information presented. However, the information contained in this book and source code are sold
without warranty and guarantee, either express or implied, as to the accuracy or completeness of or
results to be obtained from using the book and source code. Neither the
MillionStrengthKnowledge.com, author, nor its dealers and distributors will be held liable for any
damages caused or alleged to be caused directly or indirectly by this book and source code. Under no
circumstances shall MillionStrengthKnowledge.com, author, its dealers and distributors be liable for
any indirect, incidental, special, punitive, consequential or similar damages that result from the use of
or inability to use the book and source code, even if any of them has been advised of the possibility of

such damages. This limitation of liability shall apply to any claim or cause whatsoever whether such
claim or cause arises in contract, tort or otherwise.
First published: November 2018
https://millionstrengthknowledge.com
Unique Number: 18790-01-63328-7

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 1
AUTHOR
My name is Eric Fong. I started my career as a software developer since 2001. I have extensive
experience with developing web application using Java and JavaEE. I received a Master Degree in
Management Information System from Coventry University. I have these professional certificates:
Oracle Certified Expert JavaEE6 EJB3.1 Developer, Oracle Certified Professional JavaSE8 Developer,
Sun Certified Business Component Developer for J2EE, Sun Certified Web Component Developer for
J2EE, and Sun Certified Programmer for Java 2 Platform 1.4.
I am the founder of MillionStrengthKnowledge.com. I created the GWT 2.8.1 Declarative User Interface
Web Application Development Self Pace Training in year 2017. I am very interested in Java and GWT
related application development, I enjoy doing research and development in Java and GWT during my
spare time.

LEARNER
The audience of this book is the people who want to learn web application development using GWT.
This book uses GWT version 2.8.2. The learner is required to have these pre-requisite knowledge:
 Java 7/8
 HTML, CSS
Learner can learn these skills from the book:
 Develop GWT application using Declarative User Interface.
 Learn various tags for widgets.
 Develop method to process event, controls the widget and data.
 Develop single page web application.
 Styles the GWT application with GSS.
 Use tactful coding technique to manage RPC concurrency and Data Race.
When explaining the content of the book, author uses the term ‘learner” to refer to the reader of the
book.

Please refer to “Appendix: Installation Guide” and “Appendix: Import Projects into Eclipse” to learn
more about the software that are required to execute the source code, and how to import the source
code into Eclipse.

SOURCE CODE
The source code for preview can be downloaded in
https://millionstrengthknowledge.com/ebook/gwt282/gwt282.html
When the webpage is opened, search for “Ebook preview” section, then click on the “Preview source
code” to download the source code in zip file format.

Download URL for
preview source code

CHAPTER 1: INTRODUCTION

Development Tool

Widget, Panel, Event
Widget
Figure 1 Widget

panel
Figure 2 Panel

Event
Figure 3 Event

Software used for the source code

Source Code

Reference

CHAPTER 2: CREATE HTML PAGE
USING GWT

Generate GWT Application Project in Eclipse

Classpath
Figure 4 Classpath
Project root package
Figure 5 Project root package

Create GWT Module Descriptor File

GWT module descriptor file
Figure 6 GWT module descriptor file
Project root package
Figure 7 Project root package

<module> tag
Figure 8 <module> tag
Logical module name
Figure 9 Logical module name

rename-to attribute
Figure 10 rename-to attribute
<inherits> tag
Figure 11 <inherits> tag

<source> tag
Figure 12 <source> tag

Standard XML tag
Figure 13 Standard XML tag

Create GWT Application Entry Point

GwtProgram.java
Figure 14 GwtProgram.java

Multiple source paths
Figure 15 Multiple source paths

EntryPoint class
Figure 16 EntryPoint class
onModuleLoad()
Figure 17 onModuleLoad()

<entry-point> tag
Figure 18 <entry-point> tag

Create Host HTML Page

WEB-INF folder
Figure 21 WEB-INF folder

Compile and Execute GWT Application
Super development mode
Figure 22 Super development mode

Refresh
Figure 23 Refresh

Stop the code server
Figure 24 Stop the code server

rename-to attribute
Figure 25 rename-to attribute

Super development mode
Figure 26 Super development mode

CHAPTER 3: HORIZONTAL PANEL,
VERTICAL PANEL, GRID PANEL

Declarative User Interface
Declarative user interface
Figure 27 Declarative User Interface
programmatic method
Figure 28 Programmatic method

Owner class
1 Owner class
ui.xml
2 ui.xml

XML Namespace

Horizontal Panel
Single horizontal row
Figure 29 Single horizontal row

Vertical Panel
Single Vertical Column
Figure 30 Single Vertical Column
3 Single Vertical Column

Grid Panel
Tabular format
Figure 31 Tabular format

HTMLPanel
Figure 32 HTMLPanel
4 HTMLPanel

GwtPanel.java
Owner class
Figure 33 Owner class
@UiTemplate annotation
Figure 34 @UiTemplate annotation

Deferred binding
Figure 35 Deferred binding

Factory static class
Figure 36 Factory static class

CreateAndBindUi
Figure 37 CreateAndBindUi
@UiField
Figure 38 @UiField

initWidget()
Figure 39 initWidget()

java.util.logging.Logger
Figure 40 java.util.logging.Logger

PanelEntryPoint.java
Entry point
Figure 41 Entry point

UiBinder Creation Wizard
Figure 42 UiBinder Creation Wizard

CHAPTER 4: DATA ENTRY FORM

Label
Label
Figure 43 Label

horizontalAlignment
Figure 44 horizontalAlignment
directionEstimator
Figure 45 directionEstimator

wordWrap
Figure 46 wordWrap

TextBox
TextBox
Figure 47 TextBox

maxLength
Figure 48 maxLength
visibleLength
Figure 49 visibleLength
textAlignment
Figure 50 textAlignment

PasswordTextBox
PasswordTextBox
Figure 51 PasswordTextBox

CheckBox
Figure 52 CheckBox

formValue
Figure 53 formValue

ListBox
Figure 54 ListBox

multiSelect
Figure 55 multiSelect
visibleItemCount
Figure 56 visibleItemCount

RadioButton
Radio button
Figure 57 Radio button

group
Figure 58 group

TextArea
TextArea
Figure 59 TextArea

visibleLines
Figure 60 visibleLines
textAlignment
Figure 61 textAlignment
readOnly
Figure 62 readOnly

Button
Button
Figure 63 Button

HIdden
Hidden
Figure 64 Hidden
Invisible component
Figure 65 Invisible component

defaultValue
Figure 66 defaultValue

UIObject and FocusWidget Attribute
UIObject
Figure 67 UIObject
FocusWidget
Figure 68 FocusWidget

Width, height, visible, title
Figure 69 Width, height, visible, title

tabIndex, enable
Figure 70 tabIndex, enable

Grid panel
Figure 71 Grid panel

VerticalPanel
Figure 72 VerticalPanel
HorizontalPanel
Figure 73 HorizontalPanel

borderWidth
Figure 74 borderWidth
spacing
Figure 75 spacing

horizontalAlignment
Figure 76 horizontalAlignment

verticalAlignment
Figure 77 verticalAlignment

borderWidth
Figure 78 borderWidth
cellSpacing
Figure 79 cellSpacing
cellPadding
Figure 80 cellPadding

Theme Configuration in Module Descriptor
Theme
Figure 81 Theme

Clean Style
Figure 82 Clean Style

Dark Style
Figure 83 Dark Style

Standard Style
Figure 84 Standard Style

Chrome Style
Figure 85 Chrome Style

CHAPTER 5: ADDING EVENT TO
DATA ENTRY FORM, AND READ THE
DATA

Event

Define Event on Widget

The steps to declare ClickEvent
Figure 86 The steps to declare ClickEvent

Multiple events
Figure 87 Multiple events

Event Type
ClickEvent, ChangeEvent, FocusEvent, BlurEvent
Figure 88 ClickEvent, ChangeEvent, FocusEvent, BlurEvent

ValueChangeEvent, DragStartEvent, DragEndEvent, DropEvent
Figure 89 ValueChangeEvent, DragStartEvent, DragEndEvent, DropEvent

Read Data from the Widgets

ui:field attribute
Figure 90 ui:field attribute
@UiField annotation
Figure 91 @UiField annotation

getValue() method
Figure 92 getValue() method

Specific method to read value
Figure 93 Specific method to read value

getItemCount(), isItemSelected()
Figure 94 getItemCount(), isItemSelected()

getSource() method
Figure 95 getSource() method

Drag and Drop Events

Implement drag-and-drop event
Figure 96 Implement drag-and-drop event

Data transfer storage
Figure 97 Data transfer storage
preventDefault() method
Figure 98 preventDefault() method

Event Trace TextArea

APPENDIX: INSTALLATION GUIDE

Introduction
major steps for the installation
Figure 99 major steps for the installation

JDK10 Installation

Eclipse 4.7 Installation
Download Eclipse
Figure 100 Download Eclipse

Install Eclipse
Figure 101 Install Eclipse

GWT 2.8.2 SDK and GWT Eclipse Plugin Version 3
Installation

Install GWT Eclipse Plugin Version 3
Figure 102 Install GWT Eclipse Plugin Version 3

Configure GWT 2.8.2 SDK in the Eclipse
Figure 103 Configure GWT 2.8.2 SDK in the Eclipse

Configure GWT Plugin Setting to Ignore Missing gwt-servlet.jar Error
Figure 104 Configure GWT Plugin Setting to Ignore Missing gwt-servlet.jar Error

Chrome Browser Installation

Configure Default Internet Browser in Eclipse

APPENDIX: IMPORT PROJECT INTO
ECLIPSE

INDEX
Chapter 1: Introduction
Widget................................................................................ 10
Panel.................................................................................... 11
Event................................................................................... 12
Chapter 2: Develop HTML Page Using GWT
Classpath........................................................................... 28
Project root package.................................................... 28
GWT module descriptor file ..................................... 34
Project root package.................................................... 34
<module> tag .................................................................. 35
Logical module name................................................... 35
rename-to attribute...................................................... 36
<inherits> tag.................................................................. 36
<source> tag .................................................................... 37
Standard XML tag.......................................................... 38
GwtProgram.java........................................................... 44
Multiple source paths.................................................. 46
EntryPoint class............................................................. 47
onModuleLoad()............................................................ 47
<entry-point> tag .......................................................... 48
<script> tag ...................................................................... 56
Selection script............................................................... 56
WEB-INF folder.............................................................. 57
Super development mode.......................................... 58
Refresh............................................................................... 63
Stop the code server..................................................... 64
rename-to attribute...................................................... 65
Super development mode.......................................... 66
Chapter 3: Horizontal Panel, Vertical Panel,
Grid Panel
Declarative User Interface......................................... 73
Programmatic method................................................ 73
Single horizontal row .................................................. 78
Single Vertical Column................................................ 79
Tabular format................................................................ 80
HTMLPanel....................................................................... 82
Owner class...................................................................... 83
@UiTemplate annotation........................................... 83
Deferred binding............................................................ 85
Factory static class........................................................ 87
CreateAndBindUi........................................................... 89
@UiField............................................................................ 89
initWidget() ..................................................................... 90
java.util.logging.Logger............................................... 91
Entry point ....................................................................... 96
UiBinder Creation Wizard ......................................... 98
Chapter 4: Data Entry Form
Label………………………………………………………………..
108
horizontalAlignment..................................................109
directionEstimator......................................................109
wordWrap.......................................................................110
TextBox............................................................................111
maxLength......................................................................112
visibleLength .................................................................112
textAlignment................................................................112
PasswordTextBox........................................................113
CheckBox.........................................................................114
formValue .......................................................................115
ListBox..............................................................................116
multiSelect......................................................................118
visibleItemCount..........................................................118
Radio button..................................................................119
group.................................................................................120
TextArea ..........................................................................121
visibleLines ....................................................................122
textAlignment................................................................122
readOnly..........................................................................122
Button...............................................................................123
Hidden..............................................................................125
Invisible component...................................................125
defaultValue...................................................................126
UIObject ...........................................................................127
FocusWidget..................................................................127
Width, height, visible, title.......................................128
tabIndex, enable...........................................................129
Grid panel........................................................................130
VerticalPanel .................................................................131
HorizontalPanel ...........................................................131
borderWidth..................................................................132
spacing..............................................................................132
horizontalAlignment..................................................133
verticalAlignment........................................................134
borderWidth..................................................................136

cellSpacing......................................................................136
cellPadding.....................................................................136
Theme...............................................................................137
Clean Style ......................................................................138
Dark Style........................................................................139
Standard Style...............................................................140
Chrome Style .................................................................141
Chapter 5: Adding Event to Data Entry
Form, and Read the Data
The steps to declare ClickEvent............................152
Multiple events.............................................................153
ClickEvent, ChangeEvent, FocusEvent, BlurEvent
..................................................................................154
ValueChangeEvent, DragStartEvent,
DragEndEvent, DropEvent ...........................155
ui:field attribute...........................................................161
@UiField annotation..................................................161
getValue() method......................................................164
Specific method to read value................................167
getItemCount(), isItemSelected() ........................168
getSource() method ...................................................172
Implement drag-and-drop event..........................179
Data transfer storage.................................................180
preventDefault() method.........................................180
Appendix: Installation Guide
major steps for the installation.............................192
Download Eclipse........................................................195
Install Eclipse................................................................196
Install GWT Eclipse Plugin Version 3 .................199
Configure GWT 2.8.2 SDK in the Eclipse ...........201
Configure GWT Plugin Setting to Ignore Missing
gwt-servlet.jar Error .......................................205

GWT 2.8.2 Declarative User Interface WebApp Development (FREE PREVIEW)

GWT 2.8.2 Declarative User Interface WebApp Development (FREE PREVIEW)

Recommended

Recommended

More Related Content

Similar to GWT 2.8.2 Declarative User Interface WebApp Development (FREE PREVIEW)

Similar to GWT 2.8.2 Declarative User Interface WebApp Development (FREE PREVIEW) (20)

Recently uploaded

Recently uploaded (20)

GWT 2.8.2 Declarative User Interface WebApp Development (FREE PREVIEW)