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/#pathr=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 


tag 

Figure 8 tag 

Logical module name 

Figure 9 Logical module name 


ename-to attribute 

Figure 10 rename-to attribute 

tag 

Figure 11 tag 


tag 

Figure 12 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() 


tag 

Figure 18 tag 


Create Host HTML Page 








tag 

Figure 19 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 


ename-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 


orderWidth 

Figure 74 borderWidth 

spacing 

Figure 75 spacing 


horizontalAlignment 

Figure 76 horizontalAlignment 


verticalAlignment 

Figure 77 verticalAlignment 



orderWidth 

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 

tag .................................................................. 35 

Logical module name ................................................... 35 

rename-to attribute ...................................................... 36 

tag .................................................................. 36 

tag .................................................................... 37 

Standard XML tag .......................................................... 38 

GwtProgram.java ........................................................... 44 

Multiple source paths .................................................. 46 

EntryPoint class ............................................................. 47 

onModuleLoad() ............................................................ 47 

tag .......................................................... 48 

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 

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 

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

GWT 2.8.2 Declarative User Interface WebApp Development

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?