Professional Documents
Culture Documents
GWT Responsive Web Application: Problem Solution Approach (Intro Edition)
GWT Responsive Web Application: Problem Solution Approach (Intro Edition)
____________________________________________________________________________
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
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
Copyright © 2018 by MillionStrengthKnowledge.com. All rights reserved. 2
GWT Responsive Web Application
____________________________________________________________________________
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.
https://millionstrengthknowledge.com
Unique Number: 18790-01-63328-7(Intro)
When explaining the content of the book, author uses the term
‘learner” to refer to the reader of the book.
CHAPTER 1: INTRODUCTION
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.
In this example, the top most <div> element is the container. All
the contained elements are nested elements.
(2)
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.
CSS style
CSS style consists of CSS selector, CSS property and its value:
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:
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)
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
width and 80px height:
150px = 120px + 8px(margin-left) + 8px(margin-right) +
5px(border-left) + 5px(border-right) + 2px(padding-left) +
2px(padding-right)
“vh” CSS unit is similar to “vw” CSS unit. However, “vh” CSS unit
applies to height.
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.
In this example, only the <img> element from <div> element with
“pictureBorder” class attribute will be selected for applying the
CSS style.
To prevent selecting all the <img> elements but only the first
<img> element, the CSS style can use “>” CSS character. For
example:
(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.
Problem
Develop a new responsive webpage using CSS Grid Layout.
Solution
The solution for this problem is created in Eclipse project named
“GwtResponsiveCssGrid”.
In this solution, the default CSS style is created for mobile phone
device view.
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:
Media query
Media query for tablet device (the CSS style is omitted for
simplified view):
The media query specified that the CSS style applies only for
screen, and when the viewport width is equivalent to 769px and
above.
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%.
The height uses “unset”. Author and social are the grid items.
Because the height of grid container is determined by the total
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.
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.
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.
The CSS style is not suitable for responsive webpage because the
style is not responsive when the viewport changes.
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”.
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.
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 CSS style uses “display:grid” on “dataPanel > tbody> tr”. This
property changes the <tr> element of dataPanel to grid container:
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.
Figure: Computer
device view
(above), and
tablet device view
(below) for
dataPanel
Figure: Computer device view (left), and tablet device view (right)
for authorContainer
Default CSS styles changes all the <table> element and its nested
elements to use block display. That means all the elements are
JDK10 installation
Please use this URL to access the installation file:
http://www.oracle.com/technetwork/java/javase/downloads/jd
k10-downloads-4416644.html
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.
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
After download complete, please unzip the file into user directory.
After unzip, the installation of GWT 2.8.2 SDK is completed.
Re-start the Eclipse. After this, Eclipse can compile the project
using the GWT 2.8.2 SDK.
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\
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.
After that, the project is added GWT SDK, and enables the project
to be the GWT project.
GSS