FREE GWT EBOOK PREVIEW-GWT 2.8.2 Declarative User Interface WebApp Development

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
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.
Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 1

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/#path-
r=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

<script> tag
Figure 19 <script> tag
Selection script
Figure 20 Selection script

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

FREE GWT EBOOK PREVIEW-GWT 2.8.2 Declarative User Interface WebApp Development

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FREE GWT EBOOK PREVIEW-GWT 2.8.2 Declarative User Interface WebApp Development

Uploaded by

Copyright:

Available Formats

Contents

First published: November 2018

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 1

Learner can learn these skills from the book:

 Develop GWT application using Declarative User Interface.

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 2

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 3

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 4

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 5

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 6

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 9

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 10

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 11

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 12

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 14

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 15

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 18

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 20

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 24

Project root package

Figure 5 Project root package

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 28

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 29

Figure 6 GWT module descriptor file

Project root package

Figure 7 Project root package

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 34

Figure 8 <module> tag

Logical module name

Figure 9 Logical module name

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 35

Figure 10 rename-to attribute

Figure 11 <inherits> tag

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 36

Figure 12 <source> tag

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 37

Figure 13 Standard XML tag

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 38

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 39

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 44

Figure 15 Multiple source paths

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 46

Figure 16 EntryPoint class

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 47

Figure 18 <entry-point> tag

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 48

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 49

Figure 19 <script> tag

Figure 20 Selection script

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 56

Figure 21 WEB-INF folder

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 57

Figure 22 Super development mode

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 58

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 63

Figure 24 Stop the code server

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 64

Figure 25 rename-to attribute

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 65

Figure 26 Super development mode

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 66

Copyright © 2018 by MillionStrengthKnowledge.com, All rights reserved. 69

Declarative user interface

Figure 27 Declarative User Interface