GWT Responsive Web Application: Problem Solution Approach (Intro Edition)

GWT Responsive Web Application
____________________________________________________________________________
1
Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 1

____________________________________________________________________________
Content
Author ........................................................................................................................ 4
Learner....................................................................................................................... 5
Source code .............................................................................................................. 6
Chapter 1: Introduction...................................................................................... 8
Chapter 2: Responsive CSS Grid Layout .................................................. 35
Chapter 3: Responsive HorizontalPanel and VerticalPanel ............ 60
Appendix: Installation Guide ........................................................................ 88
Appendix: Import Project into Eclipse ...................................................104

____________________________________________________________________________
GWT Responsive Web Application:
Problem Solution Approach (Intro
Edition)
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
MilionStrengthKnowledge.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: February 2019
https://millionstrengthknowledge.com
Unique Number: 18790-01-63328-7(Intro)

____________________________________________________________________________
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
Programmer, 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
responsive 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
 GWT programming of UiBinder and cell widget
Learner can learn these skills from the book:

 Basic technique for developing responsive web application
 How to create CSS Grid Layout in GWT
 How to enable responsiveness for GWT HorizontalPanel and
VerticalPanel
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
Please goto this page to download the source code:
https://MillionStrengthKnowledge.com/#path-
r=ebook/gwtresponsive/content.html&m=gwtrmenu.html
There is no space character in the URL.

____________________________________________________________________________
(This page is intentionally leave blank)

____________________________________________________________________________
CHAPTER 1: INTRODUCTION

____________________________________________________________________________
Introduction
Responsive web application is the web application that is
executable in multiple types of device. These devices can have
different size in their display screen. The example of these devices
are smartphone, tablet, laptop, and desktop computer.
Develop application that can works these devices is a challenging
task because the user interface of the application must have
dynamic layout that can adapt different type of screen. Some
application designs develop different version of application for
each device. However, this solution is not feasible because the
market has a lot of brand of devices, with each brand have their
own dimension of screen. Develop different version of application
for each device is not cost effective, and the development process
for that purpose is a time consuming process.
Most of the web application chooses to use responsive
programming to develop application that can works on multiple
type of devices. In web application, most of the responsive
programming is based on HTML and CSS. In order to control the
HTML and CSS programmatically, JavaScript is the most popular
programming language for that purpose.
In this book, GWT is used to program the HTML and CSS to enable
the responsiveness of the web application. GWT allows developer
to develop the web application using Java programming language,
and compile the web application from Java to JavaScript.

____________________________________________________________________________
The introduction chapter will introduce some basic CSS
techniques and other concept that will be used in this book. These
technique and concept can help learner to learn the responsive
programming knowledge. However, if learner has already knew
the basic CSS technique and other concept, then learner can skip
this section.
Browser compatibility
All the application created in this book are tested on these
browsers:
 Chrome 69 for Computer
 Mozilla Firefox 62 for Computer
 Microsoft Edge 42 for Computer
 Chrome 68 for Android
 Mozilla Firefox 61 for Android
 Microsoft Edge 42 for Android
All the application supports the use of mouse click, touch, and
keyboard for input.

____________________________________________________________________________
HTML element
HTML element consists of start tag and end tag, and zero or more
nested element. The example of nested elements are text, and
HTML element. HTML element has this structure:
<start tag>
Nested element
</end tag>
HTML element can contain other HTML element. When HTML

element contains other HTML element, the tag that is used to
contain other HTML element is the container.
Example:
In this HTML element, <div> element is the container for

“description”. <div> is the start tag, “description” is the nested
element, </div> is the end tag.
The nested element can have text, HTML element, or both of them.

____________________________________________________________________________
Example: HTML element with multiple nested elements
In this example, the top most <div> element is the container. All
the contained elements are nested elements.
Example: HTML element with single nested element

(1)
(2)

____________________________________________________________________________
(3)
In third example, the top level <div> element has only one nested
element. The nested element is different from previous example
because the nested element contains other nested element. The
name for this type of structure is multilevel nested element.
However, from the perspective of top level <div> element, it
contains only one single nested element.
Example: HTML element with no nested element
CSS style
CSS style consists of CSS selector, CSS property and its value:

____________________________________________________________________________
Figure: CSS style
In this book, the CSS selector is used to name the CSS style. For
example, “dataPanel CSS style” is referring to the CSS style shown
above.
Box model
Box model is the model that describes the HTML element. In the
perspective of logical view, HTML element forms a rectangular
shape. This rectangle is the box that is described in box model.
The components of a box are margin, border, padding, and
content:

____________________________________________________________________________
There are four types of box in a HTML element:
- margin-box
- border-box
- padding-box
- content-box
Box-sizing CSS property

Box-sizing is one of the CSS property that affects the width and
height calculation of HTML element. The box-sizing CSS property
can have either “content-box” or “border-box” only. The default is
“content-box”. For example, this CSS style defines box-sizing for
<div> element:
div{
box-sizing: border-box;
}
When the element uses “box-sizing:border-box”, the width and
height CSS properties refers to the size of border-box, which
include border, padding, and content, but no margin. If content-
box is used, then the width and height CSS properties refers to the
content-box only.
Example 1:
div{
box-sizing: border-box;
width: 120px;
height: 50px;

____________________________________________________________________________
margin: 8px;
border: 5px solid #000;
padding: 2px;
}
<div>Content</div>
With this CSS style, the width and height of <div> element are
120px and 50px respectively, which includes border, padding and
context, but no margin.
In the perspective of margin-box, the <div> element has 136px
width and 66px height:
136px = 120px + 8px(margin-left) + 8px(margin-right)
66px = 50px + 8px(margin-top) +8px(margin-bottom)
In the perspective of border-box, the <div> element has 120px

width and 50px height, in which the width and height value are
provided by CSS style.
In the perspective of padding-box, the <div> element has 110px

____________________________________________________________________________
110px = 120px - 5px(border-left) - 5px(border-right)
40px = 50px - 5px(border-top) - 5px(border-bottom)
In the perspective of content-box, the <div> element has 106px

106px = 120px - 5px(border-left) - 5px(border-right) -
2px(padding-left) - 2px(padding-right)
36px = 50px - 5px(border-top) - 5px(border-bottom) -
2px(padding-top) - 2px(padding-bottom)

____________________________________________________________________________
Example 2:
div{
box-sizing: content-box;
width: 120px;
height: 50px;
margin: 8px;
border: 5px solid #000;
padding: 2px;
}
<div>Content</div>
With this CSS style, the width and height of <div> element are
120px and 50px respectively, but does not include border,
padding, and margin.
In the perspective of margin-box, the <div> element has 150px
150px = 120px + 8px(margin-left) + 8px(margin-right) +
5px(border-left) + 5px(border-right) + 2px(padding-left) +
2px(padding-right)

____________________________________________________________________________
80px = 50px + 8px(margin-top) +8px(margin-bottom) +
5px(border-top) + 5px(border-bottom) + 2px(padding-top) +
2px(padding-bottom)
In the perspective of border-box, the <div> element has 134px

134px = 120px + 5px(border-left) + 5px(border-right) +
2px(padding-left) + 2px(padding-right)
64px = 50px + 5px(border-top) + 5px(border-bottom) +
2px(padding-top) + 2px(padding-bottom)
In the perspective of padding-box, the <div> element has 124px

124px = 120px + 2px(padding-left) + 2px(padding-right)
54px = 50px + 2px(padding-top) + 2px(padding-bottom)
In the perspective of content-box, the <div> element has 120px

width and 50px height, in which the width and height value are
provided by CSS style.

____________________________________________________________________________
100% width and height
Width and height are very common CSS properties. They are used
for specifying the size of the HTML element. These CSS properties
can accept value in percentage, for example, “width:100%”. The
examples shown in this section are based on “box-sizing:
border-box”.
Example:
When percentage is used, that means the width and height of

border-box of nested element follows the width and height of
context-box of container.
The width of context-box of container:
= 180px - 3px -3px - 10px - 10px
= 154px
The height of context-box of container:

= 120px - 3px - 3px -10px -10px
= 94px

____________________________________________________________________________
Therefore, the width and height of border box of nested element
are 154px and 94px respectively.
However, the width and height does not include “margin:6px”. But
in the screen (when the browser shows the HTML elements on
the browser screen), the context-box of container includes the
margin-box of nested element. The diagram below demonstrates
the HTML element in the example:

____________________________________________________________________________
The 6px is the value of margin for nested element. It is overlapped
with the “padding:10px” of container because border-box of
nested element does not include the margin.
If nested element has no “margin:6px” CSS property, then the

screen result will be similar to the diagram below:
However, the width and height of border-box of nested element

stays 154px and 94px respectively because border-box does not
include margin. Therefore, removing margin CSS property does
not affect the width and height calculation of border-box.

____________________________________________________________________________
Auto in width and height
When the CSS style does not define width and height, these CSS
properties are defaulted to auto. The example compares the use of
auto and percentage value:
The <div> nested element uses

“width:100%” and “height:100%”.
The value causes the nested element
follows the width and height of
container, which is “width:250px” and
“height:250px”.
When the <div> nested element uses

“width:auto” and “height:auto”,
observed that the width of <div>
nested element occupies the full width
of its container, which is 250px. While
the height of <div> nested element
follows the height of content, which is the “Web application” text.

____________________________________________________________________________
Therefore, the width and height with “auto” value has different
behavior compared to the use of percentage value. Use
“width:auto” when the nested element wants to follow the full
width of its container.
Use “height:auto” when the nested element wants to follow the
height of content that has only text. If the content has another
html element, for example, <div> element, then “height:auto”
means to follow the height of border-box of the <div> nested
element (when “box-sizing:border-box” is used).
Figure: The use of <div> element to contain the text
Observed that the height of second <div> element follows the

height of third <div> element. However, the width of second
<div> element constantly follows the full width of its container.
Please be caution that the <div> uses “display:block” in the
example. If the <div> element uses different display value, then
the width and height can have different behavior.

____________________________________________________________________________
“vw” and “vh” CSS Unit
“vw” is another CSS unit for measuring size of HTML element. For
example, <div style=”width:100vw”></div>, means the width of
<div> element follows 100% of viewport width.
“vw” CSS unit is used when the HTML element wants to follow the
size of viewport rather than the size of its container. For example:
Suppose the viewport has width of 2000px. In this example, the

“width:100%” has 250px width, while “width:25vw” has 500px
width (2000px X 25%).
“vh” CSS unit is similar to “vw” CSS unit. However, “vh” CSS unit
applies to height.

____________________________________________________________________________
“em” CSS unit
“em” is another type of CSS unit. “em” is used for size calculation
based on the font size. For example:
In the example, all the nested elements inherit the container

element’s font size 16px. However, the nested elements have their
own font-size CSS property: 1em and 2em respectively. With the
CSS property, the font size for first nested element is 16px, which
is calculated by (16px X 1), where 1 is obtained from the “font-
size:1em” CSS property.
The font size for second nested element is 32px, which is
calculated by (16px X 2), where 2 is obtained from the “font-
size:2em” CSS property.

____________________________________________________________________________
CSS Selector
When declaring CSS style, observed that the syntax uses non-
alphanumeric character. For example:
 .dataPanel, uses “.” character
 .dataPanel img, uses “.” and ” “ character
The name for this syntax is CSS selector. CSS selector is the
query language that selects certain HTML element based on
selector criteria. “.” is the CSS selector character, which is used
to select HTML element based on the class attribute of HTML
element. For Example:
In this example, the <div> element with “data1” text will have
font-size of 18px because the <div> element has declaration of
class attribute value of dataPanel. Therefore, dataPanel CSS style
applies to that <div> element.
“ “ space character is also a CSS selector character. The space

character is used in this CSS style: “.dataPanel img”. The space
character between “.dataPanel” and “img” is the space CSS
selector. This selector selects all the HTML elements that are
enclosed within left operand HTML element. “.dataPanel” is the
left operand in the expression, therefore the expression selects all

____________________________________________________________________________
the <img> HTML element within HTML element with “dataPanel”
class attribute:
In this example, only the <img> element from <div> element with
“pictureBorder” class attribute will be selected for applying the
CSS style.

____________________________________________________________________________
Another example:
In this HTML structure, “.pictureBorder img” will select all the

<img> elements that are highlighted. Observed that even the
inner <img> element is selected because it is within
.pictureBorder <div> element.
To prevent selecting all the <img> elements but only the first
<img> element, the CSS style can use “>” CSS character. For
example:

____________________________________________________________________________
With the “.pictureBorder > img” syntax, the CSS now selects only
the first <img> element because “>” CSS selector is the selector
that selects only the immediate nested HTML element.
CSS selector is a very important technique when designing the
CSS style. There are more CSS selectors that uses different
character: “[ ]” square character, “#” sharp character, “+” plus
character, and others, which will be explained in later chapters
whenever applicable.

____________________________________________________________________________
Compilation option for JsInterop
Some of the application in this book uses JsInterop. JsInterop
allows GWT application to invoke JavaScript function from GWT
Java program, or invoke GWT Java program method from
JavaScript. To compile JsInterop, the run configuration requires
one additional parameter:
-generateJsInteropExports
Use these steps to add this parameter:

(1) Right click on project name in the Eclipse.

____________________________________________________________________________
(2) The right click will show the context menu. Select “Run as”,
then “Run configuration”:

____________________________________________________________________________
(3) Eclipse will show “Run configuration” wizard. Select
“Arguments” tab, adds “- generateJsInteropExports” parameter at
the beginning of program arguments (highlighted by orange
rectangle):
(4) Click Run button to execute the application. After this, Eclipse
will store the configuration, and the next compile will reuse the
parameter without further configuration.

____________________________________________________________________________
Lambda expression
Java version 8 and above, and GWT 2.8.2 all support the use of
lambda expression. This book uses Java 10. However, all the Java
programs shown in this book does not use lambda expression.
The lambda expression is not used because the book attempts to
explain the code in an easily understandable manner for learning.
The lambda expression uses more concise syntax that hides many
coding, and can cause the learning process takes extra time.
Therefore this book does not use lambda expression.
However, the program is workable, and should not have problem
when learner converts the program into lambda expression for
production project.

____________________________________________________________________________
CHAPTER 2: RESPONSIVE CSS GRID

LAYOUT

____________________________________________________________________________
Problem
Develop a new responsive webpage using CSS Grid Layout.
Solution
The solution for this problem is created in Eclipse project named
“GwtResponsiveCssGrid”.
This is the screen result when the application is executed in

different devices:
Figure: Computer device view

____________________________________________________________________________
Figure: Tablet device view

____________________________________________________________________________
Figure: Mobile phone device view
Viewport meta tag in host HTML page.

Add this meta tag to the host HTML page.
Figure: Viewport meta tag
The host HTML page for this application is gwtcssgrid.html. The

viewport meta tag instructs Internet browser to interpret the
media query in the CSS file. If the host HTML page does not define
this tag, the browser will ignore the media query.
”width=device-width” specifies that the width of webpage is
equivalent to device-width. The “device-width” is the browser
____________________________________________________________________________
visible area that displays the webpage. This is important
parameter because different device has different viewport size.
For example, iPhone X has screen pixel size of 1125 X 2436, and
viewport size of 375 X 812. With the viewport meta tag
“width=device-width”, the web application that is viewed on
iPhone X browser has exactly 375 X 812 viewport size.
“initial-scale=1” instructs browser to scale the webpage at 100
percent of the viewport when the page is displayed on the
browser for the first time. Value of 1 means 1 CSS pixel equals to 1
viewport pixel. This parameter eases developer to define the
width and height in CSS style because the viewport pixel
synchronizes with the CSS pixel.
Create media query for three types of devices in GSS.

In this application, the screen.gss is the GSS file that specifies all
the CSS styles for the application. The screen.gss supports three
types of devices:
 One media queries for tablet device: @media screen and
(max-width: 768px) and (min-width:401px)
 One media queries for computer device: @media screen
(min-width:769px)
The media query uses “px” unit for its measurement. The “px” unit
is the CSS unit, which means pixel. Therefore 769px means map to
viewport size of 769px, this is because the viewport meta tag
specifies “initial-scale=1”, which means 1 CSS pixel equals to 1
viewport pixel.
The GSS also supports the mobile phone device but screen.gss
does not define media query for mobile phone device. This is
because mobile phone device uses Default CSS Style.

____________________________________________________________________________
Default CSS style
Default CSS style are the CSS styles that are not defined in any
media query. In screen.gss, this is the code for default CSS style:
In this solution, the default CSS style is created for mobile phone
device view.

____________________________________________________________________________
The diagram below shows the mobile phone view for the solution:
Browser always applies the Default CSS Style to the webpage, and
then applies the CSS style defined in the media query if there is a
match of the media query.
Default CSS Style is also used when:
(1) In older browser, which does not support the use of media
query. In this case, the media query is ignored because older
browser does not know how to interpret the media query.
(2) Media query does not define viewport size for all possible
devices. For example, if the application defines only these media
queries:

____________________________________________________________________________
When the viewport size is less than 401px or more than 992px,
then the browser will apply Default CSS Style. Therefore, Default
CSS Style should be the style that can works on any type of device.
However, this application only supports mobile phone device,
tablet device and computer device. Mobile phone device view is
chosen to be the default CSS Style.
Media query
Media query for tablet device (the CSS style is omitted for
simplified view):
The max-width and min-width specified that the media query

applies only when viewport width is in the range of 401px and
768px.
Media query for computer device:
The media query specified that the CSS style applies only for
screen, and when the viewport width is equivalent to 769px and
above.

____________________________________________________________________________
The media query always starts with @media annotation. The
“screen” keyword specifies that the media query applies for
screen. Screen means the standard view using the web browser,
but not in print preview, or screenreader.
The application can define CSS styles within the media query.
Therefore, when the device’s viewport width is in this range,
browser applies the CSS style defined in the media query for the
webpage.
Another name for this media query viewport range is media
query breakpoint, or simply breakpoint.
CSS Grid Layout

The solution uses CSS Grid to create the layout of webpage. To use
CSS Grid Layout, the webpage must define a grid container, and its
grid item. The diagram below shows a HTML structure for CSS
grid layout. The container is the grid container, and each of the
nested elements is grid item:
To create the similar structure using GWT, uses HTMLPanel;

<gwt:HTMLPanel>
<gwt:HTMLPanel>GWT</gwt:HTMLPanel>
____________________________________________________________________________
<gwt:HTMLPanel>Java</gwt:HTMLPanel>
</gwt:HTMLPanel>
The HTMLPanel will be converted into <div> element after

compile. In order to implement CSS grid layout, the container
must define CSS style that enables the CSS Grid Layout. The next
section explains the CSS style used for computer device, which
demonstrates on how to use the CSS Grid Layout.
Computer device media query

CSS Grid Layout uses grid structure to organize HTML elements
into rows and columns. In computer device media query, this is
the CSS style for dataContainer:
Figure: dataContainer CSS style for computer device
To enable CSS Grid Layout, uses ‘grid’ value for ‘display’ property,
and uses “grid-template-columns” to configure the column, and
“grid-template-rows” for row.
grid-template-columns: 20% 35% 35% 10%; specifies that the
grid layout will have four columns, which each column’s width
equivalents to 20%, 35%, 35%, and 10%.

____________________________________________________________________________
grid-template-rows: auto auto; specifies that the grid layout
will have two rows, which each row’s height equivalent to height
of content.
HTML structure for dataContainer:
Figure: dataContainer in ui.xml

____________________________________________________________________________
Figure: dataContainer screen result when shown in computer

device
Grid line is used to define the grid-column and grid-row property.

Grid line is the line that exists between columns and rows. Based
on the dataContainer CSS style, the grid will have 4 columns and 2
rows:
Figure: CSS Grid Layout with 4 columns and 2 rows.
The grid layout contains 5 column lines, which is in orange color,

and 3 row lines, which is in purple color. These column line and
row line are the grid line.

____________________________________________________________________________
The grid layout will be changed into this layout for dataContainer:
In order to achieve this, the application use grid-column and

grid-row CSS property. Author grid item occupies two rows and
one column. To enable this structure, uses this CSS style:
CSS style specifies “grid-row: 1/3”, which means author row

spans from 1st row line to 3rd row line.
CSS style specifies “grid-column: 1”, which means author column
takes the 1st column. When no “/” is used, the single number is the
column position in the grid.

____________________________________________________________________________
CSS style for social grid item:
“grid-column: 4”, which means social column takes the 4th

column. “grid-row: 1/3”, which means social row spans from 1st
row line to 3rd row line.
CSS style for content1 grid item:
“grid-column: 2”, which means content1 column takes the 2nd

column. “grid-row: 1”, which means content1 row takes the 1st
row.

____________________________________________________________________________
CSS style for content2 grid item:
“grid-column: 3”, which means content2 column takes the 3rd

column. “grid-row: 1”, which means content2 row takes the 1st
row.
CSS style for content3 grid item;
“grid-column: 2/4”, which means content3 column spans from

2nd column line to 4th column line. “grid-row: 2”, which means
content3 row takes the 2nd row.

____________________________________________________________________________
After defining the column and row for each grid-item, the
application also requires to define the height for the grid-item. If
the height is not defined in computer device view, then the grid-
item will inherit the value from default CSS style, which is not
desired.
CSS style for content1, content2 and content3:
CSS style for author and social:
The height uses “unset”. Author and social are the grid items.
Because the height of grid container is determined by the total

____________________________________________________________________________
height of content1, content2 and content3. The author and social
wants to follow the total height. Therefore the unset prevents the
author and social uses the height value from default CSS style.
Why the author and social can follow the total height of that three
contents? This is because content1, content2, content3, author,
and social are grid items of the same grid container, the grid item
will follow the height of highest grid item in grid container (this is
the default behavior of CSS grid layout). Therefore, the height of
author and social can follow the same height with the three
contents.
Computer device viewport layout for article

CSS style for articleContainer:
Figure: articleContainer CSS style and its screen result

____________________________________________________________________________
Tablet device media query
In tablet device media query, these are the property values for
title, other, and dataContainer:
This is the screen result of using the dataContainer CSS style in

tablet device:

____________________________________________________________________________
The dataContainer has the different layout structure with the
computer device viewport. This is because dataContainer uses
different set of CSS style:
Figure: tablet device CSS style

____________________________________________________________________________
The CSS style changes the grid from 2 columns and 4 rows
(above) to another structure (bottom):

____________________________________________________________________________
CSS style for articleContainer:
Figure: Screen result for applying articleContainer CSS style

____________________________________________________________________________
Other important CSS styles in screen.gss
There are some important CSS styles that should be given
attention:
Figure: HTML document body element CSS style
This CSS style removes the side gap from the webpage. This is the
comparison of webpage that uses the CSS style:
Figure: Webpage that uses the application defined body CSS style,
no side gap.

____________________________________________________________________________
Figure: Webpage that does not use the application defined body
CSS style, contains side gap.
General guideline for responsive design

These are general guidelines for designing user interface for
responsive application:
 Always start design for the smallest device.
 Ensure the width of layout equivalents to 100vw.
 Ensure the total height of layout equivalents to 100vh or
more than 100vh.
 Keep the layout design simple
Always start design for the smallest device

When designing responsive webpage, always start the design for
the smallest device. This guideline can prevent developer from
putting too much content on the screen.
The smallest device does not mean only for mobile phone view.
The smallest device should be the smallest device for each media
____________________________________________________________________________
query. Observed that the CSS style defines min-height property in
all types of media query. This is a crucial property that prevents
the HTML element from over-resize, and keeps the preferable
height that is for displaying the content in possible smallest
device screen in each type of media query.
Ensure the width of user interface layout equivalents to

100vw
Default CSS style uses <div> element’s default display value. By
default, <div> element has display property with ‘block’ value,
and “width:auto”. Therefore, all the HTML elements in mobile
phone view occupies the full width of the screen. This is
considered a good design because it prevents width of content
wider than the viewport. When the layout wider than the width of
the viewport, this causes the application uses horizontal scrollbar
to display the content, which reduces the ease of using the
application. For example, hard to read the content because some
content is hidden at right side. Therefore, ensure the width of
user interface layout equivalents to 100vw.
Ensure the total height of user interface layout equivalents to

100vh or more than 100vh
This guideline ensures the user interface of the application
utilizes the height of entire device screen for displaying content.
The CSS style defines height property in “vh” CSS unit. This height
property ensures the HTML element creates its height based on
viewport height.

____________________________________________________________________________
The diagram below shows the mobile phone view for the solution:
The total height in vh is 168vh, which is more than 100vh. When

the total height equivalents to or more than 100vh, the web
application can utilize the full height of screen for displaying
content.
Keep the layout design simple

The total height of 168vh may cause the application hard to use
because the height is excessively high, and requires vertical
scrollbar to view entire content. The layout design should be
simple. To simplify the layout design, the application can hide
some of the HTML element and makes the HTML element
available via the use of widget, for example, menu. However, the
purpose of this solution is to learn on how to create layout using
CSS grid. The later chapter will show on how to create responsive
widget to hide HTML element.

____________________________________________________________________________
CHAPTER 3: RESPONSIVE
HORIZONTALPANEL AND
VERTICALPANEL

____________________________________________________________________________
Problem
There is existing GWT application uses HorizontalPanel and
VerticalPanel to implement the webpage layout. HorizontalPanel
and VerticalPanel uses HTML <table> element that is not
responsive. Therefore, the application requires to re-implement
the webpage to make the webpage responsive.
Figure: Computer device view for existing GWT application

____________________________________________________________________________
Figure: Tablet device

view for existing GWT
application
Figure: Mobile phone

device view for existing
GWT application

____________________________________________________________________________
Solution
The solution for this problem is created in Eclipse project named
“GwtResponsivePanel”.
The existing application uses ui.xml to create the webpage layout.
The solution will not modify the ui.xml, but reuse the ui.xml, and
re-implement the CSS style for the webpage.
‘viewport’ META tag in host HTML page.

Add this META tag to the host HTML page.
Figure: Viewport meta tag
The host HTML page for this application is gwtpanellayout.html.
The solution supports three types of devices: mobile phone,

tablet, and computer. For computer device view, the media query
uses this viewport range: (min-width: 769px).
For tablet device view, the media query uses this viewport range:
(min-width:401px) and (max-width:768px)
For mobile phone device view, the solution uses Default CSS style,
which applies when the viewport has width less than 401px.

____________________________________________________________________________
HTML structure of HorizontalPanel and VerticalPanel
The existing application uses HorizontalPanel and VerticalPanel
to create the layout of the web application. They are the panel
components that are provided by GWT SDK in
com.google.gwt.user.client.ui package. These panels will be
converted into HTML <table> element after compile. Example of
ui.xml and HTML structure of HorizontalPanel that contains four
HTMLPanel:
The HorizontalPanel will be compiled into HTML table with one

row and four columns, in which each column contains the widget.
The <div> element is the HTMLPanel after compile.

____________________________________________________________________________
Example of VerticalPanel that contains two HTMLPanel:
The VerticalPanel will be compiled into HTML table with one

column and two rows, in which each row contains the widget.
By default, HTML <table> elements have these display CSS

properties:
Figure: CSS Style for HTML <table> elements
The CSS style is not suitable for responsive webpage because the
style is not responsive when the viewport changes.

____________________________________________________________________________
Mapping strategy from HTML table to CSS grid
This is the HTML structure for CSS grid layout, which contains one
grid container and multiple grid items:
The solution wants to enable the responsiveness of

HorizontalPanel, so the solution changes the HTML structure of
HorizontalPanel to use CSS grid. The diagram below shows the
mapping strategy:
The <tr> element will be the grid container, and <td> elements
are grid item. Grid container uses “display:grid”, and grid item
uses “display:block”. <table> and <tbody> tag are changed to
“display:block”.

____________________________________________________________________________
Mapping strategy for VerticalPanel:
The <tbody> element will be the grid container, and <tr>

elements are grid item. Grid container uses “display:grid”, and
grid item uses “display:block”. <table> and <td> tag are changed
to “display:block”.
Since most of the table and its nested elements will use block
display, therefore this CSS style is defined in default CSS style:
With this CSS style defined in default CSS style, all the <table>,
<tbody>, <tr>, and <td> element will apply block display in all
type of media query. However, this default behavior will be
changed in media query to adapt device type when necessary.

____________________________________________________________________________
GwtPanel.ui.xml
GwtPanel.ui.xml is the ui.xml that defines the HTML structure of
the application. The ui.xml consists of four major containers:
titlePanel, dataPanel, articlePanel, and otherPanel.
Figure: GwtPanel.ui.xml (content are omitted for simplified view),

and its screen result.
Mobile phone device, tablet device, and computer device use the
same ui.xml and its structure. The solution will only re-implement
the CSS styles, which are defined in media query.

____________________________________________________________________________
The solution will change the dataPanel and articlePanel into CSS
grid layout. Ui.xml structure for dataPanel:
Figure: dataPanel structure (content are omitted for simplified

view), and its screen result
The HorizontalPanel with “styleName=’{screen.dataPanel}’” will

be compiled into this HTML structure:
The styleName attribute will be converted into class attribute.

The application will use the value of class attribute to define CSS

____________________________________________________________________________
style. Therefore it is crucial to know about this HTML structure
because the solution will apply the mapping strategy that maps
HTML structure from HorizontalPanel’s <table> element to CSS
grid. By knowing this structure, learner can then know how to
start to define the CSS style for CSS grid.
Computer device CSS style for dataPanel

CSS styles for dataPanel:
Figure: CSS grid layout for dataContainer.
dataPanel is the top container for authorContainer,

verticalContentPanel, and shareContainer. dataPanel uses GWT
HorizontalPanel.

____________________________________________________________________________
To change the HorizontalPanel into Grid Layout, transform
<table> element, and its <tbody>, and <td> element to
“display:block”. Default CSS style has already defined the CSS style
for this purpose:
The CSS style uses “display:grid” on “dataPanel > tbody> tr”. This
property changes the <tr> element of dataPanel to grid container:
Therefore, the screen result of dataPanel is similar to the diagram

shown in the last figure. The grid-template-rows CSS property
uses “auto” value. The “auto” means the height of grid container
(dataPanel) will follow the height of grid item.
The authorContainer, and verticalContentPanel will use block
display to convert its HTML table structure. The shareContainer is
a <div> element, the shareContainer’s display CSS property will
have no changes.

____________________________________________________________________________
Computer device CSS style for verticalContentPanel
dataPanel will use the height of verticalContentPanel to
determine the height of grid container, so that the
authorContainer, and shareContainer will follow the same height
with the verticalContentPanel.
Ui.xml for verticalContentPanel:
The verticalContentPanel is also a GWT VerticalPanel. However,

verticalContentPanel will not use the mapping strategy for
VerticalPanel, instead, the panel will use block display only. CSS
style for verticalContentPanel, and its screen result:

____________________________________________________________________________
Because the dataPanel wants to use the height of

verticalContentPanel to determine the height of grid container,
therefore the application defines the height of each nested
element of verticalContentPanel using “vh” CSS unit. The
authorContainer and shareContainer define its height using
“height:100%” because these containers follows the height of
verticalContentPanel.
The <tr> element contains <td> and its nested <div> element. In
this solution, the height of <td> and <div> element wants to
follow the height of <tr> element. To achieve this purpose, this
CSS style is used:
The CSS style applies 100% height to all its element that includes
<td> and <div> element. With 100% height, the <td> and <div>
element can follow the height of <tr> element.
nth-child CSS selector

The nth-child CSS selector is used to select the nth nested element,
where the “n” can be specified in the parameter. For example:
____________________________________________________________________________
In this HTML structure, “.container div:nth-child(1)” selects the

<div> element that are highlighted only. They are selected
because it is the first nested <div> element in container.
Another example:
In this HTML structure, “.container div:nth-child(1)” will select all

the <div> elements that are highlighted, which is shown above.
Observed that even the inner <div> element is selected because it
is within .container element, and also the first nested <div>
element for <div> element with “test” text. Therefore, if
application wants to select only the first <div> element, then the
CSS style should specify “.container > div”.

____________________________________________________________________________
Computer device CSS style for authorContainer
Ui.xml for authorContainer and its screen result:

____________________________________________________________________________
CSS style for authorContainer:

____________________________________________________________________________
The CSS style uses “min-height:unset” for <div> element to
prevent the <div> element follows the value of min-height CSS
property from default CSS style.
The <td> and <div> element will follow the height of <tr>
element. The <td> and <div> element will use “height:100%” for
that purpose, and this CSS property is configured via:

____________________________________________________________________________
Computer device CSS style for shareContainer
Ui.xml for shareContainer:
CSS style for shareContainer:

____________________________________________________________________________
Computer device CSS style for articlePanel
The articlePanel is a GWT HorizontalPanel. articlePanel uses the
mapping strategy for HorizontalPanel. CSS style for articlePanel,
and its screen result:
The CSS style transforms the <tr> element (“articleContainer >

tbody > tr”) into grid container:

____________________________________________________________________________
The CSS style also specifies the height and min-height CSS
property for <div> element:
Tablet device CSS style for dataPanel

In tablet device view, the dataPanel is changed to use block
display and create the structure with one column and three rows.
Figure: Computer
device view
(above), and
tablet device view
(below) for
dataPanel

____________________________________________________________________________
There is no CSS style defined for dataPanel in tablet device media
query because the tablet device view uses the “display:block” CSS
property from default CSS style.

____________________________________________________________________________
Tablet device CSS style for authorContainer
In tablet device view, the authorContainer is a grid container with
two columns two rows.
Figure: Computer device view (left), and tablet device view (right)
for authorContainer

____________________________________________________________________________
CSS style for authorContainer in tablet device view:
authorContainer is a GWT VerticalPanel, so this container will use

the mapping strategy for VerticalPanel. For mapping the
VerticalPanel, defines grid container on the <tbody> element:

____________________________________________________________________________
CSS style for author:
CSS style for authorDescr and authorData:
Tablet device CSS style for verticalContentPanel and

shareContainer
In tablet device view, there is no CSS style for
verticalContentPanel and shareContainer. They uses default CSS
style, which uses “display:block”. Therefore, verticalContentPanel
and shareContainer are arranged row by row:
____________________________________________________________________________
Tablet device CSS style for articlePanel

In tablet device view, the articlePanel changes from grid container
with one row four columns into grid container with two columns
two rows.
Figure: Computer device view (above), and tablet device view

(below) for articlePanel.

____________________________________________________________________________
CSS style for articlePanel in tablet device view:
Default CSS style

Mobile phone device view uses Default CSS Style. Default CSS
Style uses block display:
Default CSS styles changes all the <table> element and its nested
elements to use block display. That means all the elements are

____________________________________________________________________________
now occupies full width of the viewport, and arranged row by
row. Screen result for Default CSS Style:
Figure: Mobile phone device view

____________________________________________________________________________
APPENDIX: INSTALLATION GUIDE

____________________________________________________________________________
Introduction
The installation guide describes how to install the software
required for executing the source code in the book. However,
most of the software contains its own installation guide, which is
already explained in very details and available in Internet.
Therefore, this guideline may just provide the URL to access that
installation website.
This book uses JDK 10, Eclipse 4.7, GWT 2.8.2, GWT Eclipse Plugin
Version 3 and latest Chrome Internet Browser. All the software
are installed in Windows Operating System. This book uses
Windows 8.1.
These are major steps for the installation:
(1) Install Java Development Kit
(2) Install Eclipse
(3) Install GWT SDK
(4) Install Chrome browser
JDK10 installation
Please use this URL to access the installation file:
http://www.oracle.com/technetwork/java/javase/downloads/jd
k10-downloads-4416644.html

____________________________________________________________________________
From the website, select the JDK installation file based on the
operating system.
All the software required for the source code uses Windows
Operating System. Choose the Windows version for the
installation. JDK 10.0.1 is also acceptable.
After installation file is downloaded completely, then double click
the exe file to start the installation. Please follow the guideline
provided by the installation file.

____________________________________________________________________________
Eclipse 4.7 Installation
Uses these steps to install Eclipse Oxygen (version 4.7):
(1) Download Eclipse
(2) Install Eclipse
Download Eclipse
Please goto one of these website to download Eclipse Oxygen:
Windows 32bit:
http://www.eclipse.org/downloads/download.php?file=/technol
ogy/epp/downloads/release/oxygen/3a/eclipse-java-oxygen-3a-
win32.zip
Windows 64bit:
http://www.eclipse.org/downloads/download.php?file=/technol
ogy/epp/downloads/release/oxygen/3a/eclipse-java-oxygen-3a-
win32-x86_64.zip

____________________________________________________________________________
Install Eclipse
After the download is completed, please unzip the file into user
directory. For example, if the operating system username is
“user001”, then the user directory is “c:\users\user001”. The user
directory is always started with “c:\users”.

____________________________________________________________________________
GWT 2.8.2 installation
Please goto this URL to download GWT 2.8.2 SDK zip file:
http://www.gwtproject.org/download.html
In the webpage, click the “Download GWT SDK” button to start
the download. The file is a zip file.
After download complete, please unzip the file into user directory.
After unzip, the installation of GWT 2.8.2 SDK is completed.

____________________________________________________________________________
At this step, the installation should complete for Eclipse, and GWT
2.8.2 SDK. The diagram shows the installation directory, and its
content:

____________________________________________________________________________
Install GWT Eclipse Plugin Version 3
Goto this website to download the plugin:
https://gwt-plugins.github.io/documentation/gwt-eclipse-
plugin/Download.html
The website contains the step by step guideline on how to install

the plugin. There is a youtube video for this purpose.
After the plugin installation is complete, the installation should
create a GWT Plugin toolbar in the Eclipse.

____________________________________________________________________________
Configure to enable GWT 2.8.2 SDK in the Eclipse

After the plugin installation is complete, then configure to enable
the GWT 2.8.2 SDK in the Eclipse. From the menu, selects
“Window”, “Preferences”.

____________________________________________________________________________
Preferences wizard will be shown. From the wizard, selects
“GWT”, “GWT Settings”. Then click the “Add” button.
“Add GWT SDK” will appear. Click the “Browse” button.

____________________________________________________________________________
“Browse For Folder” will appear. Select the gwt-2.8.2 directory.
Then click the “Ok” button.
Click the “Ok” button in this window.

____________________________________________________________________________
gwt-2.8.2 is now added to the SDK list. Make sure gwt-2.8.2 is
selected. Then click “Apply and Close” button.
Re-start the Eclipse. After this, Eclipse can compile the project
using the GWT 2.8.2 SDK.

____________________________________________________________________________
Chrome Browser Installation
The book uses Chrome Browser for executing the source code
from Eclipse.. Please goto this website to download Chrome:
https://www.google.com/chrome/?brand=CHBD&gclid=EAIaIQo
bChMIiYzIgvjA3QIVlY2PCh1rxwpgEAAYASABEgI2n_D_BwE&gclsr
c=aw.ds&dclid=CImNsYX4wN0CFReEcAodEjoG4Q. The accepted
version is version 67 and above.
Configure Default Internet Browser in Eclipse

When executing the source code in Eclipse, the execution requires
a Internet browser. This topic shows about how to configure the
default Internet browser in Eclipse, so that the browser can be
used during super development mode.
In Eclipse, select “Window”, “Preferences”.

____________________________________________________________________________
Select “General”, “Web Browser”. Then, click on “New” button.
“Add External Web Browser” form will show. Click on “Browse”

button.

____________________________________________________________________________
Goto the Chrome browser installation directory, select
“chrome.exe”, and click on “Open” button.
Return to “Add External Web Browser” form, enter “Chrome” for

the Name. Then click “Ok” button.

____________________________________________________________________________
In Preferences, select “Use external web browser”. Select
“Chrome”, then, click “Apply and Close” button.
After that, Chrome is the default Internet browser when executing

GWT application.
At this stage, all the required software are installed and
configured. Learner can start using the source code and try to
execute the project for learning.

____________________________________________________________________________
APPENDIX: IMPORT PROJECT INTO

ECLIPSE

____________________________________________________________________________
Introduction
This appendix shows about how to import the source code into
Eclipse.
They are 2 Eclipse projects for the book(Intro Edition), and these
projects are stored in a zip file. Please unzip the zip file into user
directory. After unzip, this is the folder structure:
C:\Users\User001\responsivegwt-sourceCode\
The Eclipse requires a workspace to execute the source code. The

recommendation is to store the source code into two separate
folders:
C:\Users\User001\responsivegwt-sourceCode\: the folder for
unzip
C:\Users\User001\responsivegwt-workspace\: the folder for
storing the Eclipse project
Learner should import the source code from

“C:\Users\User001\responsivegwt-sourceCode\” into
“C:\Users\User001\responsivegwt-workspace\”.

____________________________________________________________________________
The appendix is going to show the steps for importing the project.
Please complete the installation according to “Appendix:
Installation Guide” before import the project.
Steps for importing the project:

Start the Eclipse. Eclipse will prompt for the workspace directory.
Enter any workspace name that is suitable. In this example,
‘responsivegwt-workspace’ is used. After that, click ‘Launch’
button.

____________________________________________________________________________
After the Eclipse is started, select File menu, then select ‘Import’.

____________________________________________________________________________
The Import wizard is shown. Select ‘Existing Projects into
Workspace’, then click ‘Next>’ button.

____________________________________________________________________________
In this Import wizard screen, uses the following guidelines:

____________________________________________________________________________
Eclipse starts importing the projects into workspace.

____________________________________________________________________________
After all the projects are imported, the Project Explorer will show
all the projects.
At this step, all the source codes are imported into the Eclipse
workspace. Next, enable GWT SDK for each of the project. This
SDK must be configured one-by-one for each project.
The appendix uses the GwtCssStyle project (which is one of the
project in Complete Edition) to demonstrate on how to enable the
GWT SDK.

____________________________________________________________________________
Right click on GwtCssStyle project. Select “GWT”, “Settings”.

____________________________________________________________________________
The Eclipse will show “Properties for GwtCssStyle”. Select “Use
GWT” and “Use default SDK”. Then, click “Apply and close”.
After that, the project is added GWT SDK, and enables the project
to be the GWT project.

____________________________________________________________________________
(This page is intentionally leave blank)

____________________________________________________________________________
Want to learn more techniques on responsive web

application using GWT?
 CSS technique for responsive layout, widget design, and
animation.
 How to enable responsiveness of GWT user interface

component (checkbox, radio button, text input, div based
widget, CellTable, tab layout panel, stack layout panel)
 How to customize the look-and-feel of GWT user interface

component (checkbox, radio button, text input, div based
widget, CellTable, tab layout panel, stack layout panel)
 GWT programming for processing CSS
 GSS
 Basic JsInterop technique for responsive web application
Please view the showcase and learn more on:

https://MillionStrengthKnowledge.com/#path-
r=ebook/gwtresponsive/content.html&m=gwtrmenu.html
There is no space character in the URL.

____________________________________________________________________________

GWT Responsive Web Application: Problem Solution Approach (Intro Edition)

Enviado por

Dados do documento

Direitos autorais

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

GWT Responsive Web Application: Problem Solution Approach (Intro Edition)

Enviado por

Direitos autorais:

GWT Responsive Web Application

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

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

The publication of the book and source code are protected by

First published: February 2019

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

I am the founder of MillionStrengthKnowledge.com. I created the

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

Learner can learn these skills from the book:

Please refer to “Appendix: Installation Guide” and “Appendix:

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

There is no space character in the URL.

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

(This page is intentionally leave blank)

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 7

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 8

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

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

HTML element can contain other HTML element. When HTML

In this HTML element, <div> element is the container for

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

Example: HTML element with single nested element

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

Example: HTML element with no nested element

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 13

Figure: CSS style

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

Box-sizing CSS property

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

In the perspective of border-box, the <div> element has 120px

In the perspective of padding-box, the <div> element has 110px

In the perspective of content-box, the <div> element has 106px

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 17

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

In the perspective of border-box, the <div> element has 134px

In the perspective of padding-box, the <div> element has 124px

In the perspective of content-box, the <div> element has 120px

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 19

When percentage is used, that means the width and height of

The height of context-box of container:

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

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 21

If nested element has no “margin:6px” CSS property, then the

However, the width and height of border-box of nested element

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 22

The <div> nested element uses

When the <div> nested element uses

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 23

Figure: The use of <div> element to contain the text

Observed that the height of second <div> element follows the

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

Suppose the viewport has width of 2000px. In this example, the

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 25

In the example, all the nested elements inherit the container

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 26

“ “ space character is also a CSS selector character. The space

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 27

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

In this HTML structure, “.pictureBorder img” will select all the

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

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 30

Use these steps to add this parameter:

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 31

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 32

Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 33

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

CHAPTER 2: RESPONSIVE CSS GRID