Advanced Web Technology 12) Google Web Toolkits 1 - GWT ...

unalaskaweepingInternet and Web Development

Jul 19, 2012 (5 years and 29 days ago)

246 views

Berner Fachhochschule,Technik und Informatik
Advanced Web Technology
12) Google Web Toolkits 1 - GWT,
Client Side
Dr.E.Benoist
Fall Semester 2011/2012
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
1
Table of Contents

Presentation of GWT

Hello World Application

Widgets
Hello World

Event Handling

Applying Style Sheets

Deployment
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
2
Motivation
I
What is GWT?
 A development environment in pure Java for rich web
applications
 Provides Java for programming both client and server sides
I
Advantages of GWT
 Homogenous environment
 Testing of a web application (using JUnit)
I
Not integrated in JSF
 Concurent system developed by google
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Presentation of GWT
3
Principle
I
Write Java code
 Use Java on Server Side
 But also on a Client Side
 Communication is handeled conveniently
I
Tests in a JVM
 Testing is done using JUnit
 Plugin in the browser
 Tests are conducted inside one JVM (based on Java Code)
I
Compile into Javascript
 Creates dierent versions for dierent browsers
 Each browser receives only the\right"version
 Can be deployed on Java Servers
 Or any other server (if the server part is not Java)
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Presentation of GWT
4
Hello World Application
I
Download the GWT
 From Google Code Web site
 http://code.google.com
I
Create an application
 Execute
./webAppCreator -out/home/bie1/test/ch.bfh.awt.Hello
 A default application is created
 Includes ant and Eclipse project les
I
Test the Application
 Go to the directory
 execute ant devmode
 Install the plugin in your browser
 Test the application
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Hello World Application
5
Directories created
I
Source les:/src/
 Package for client side application:
/src/ch/bfh/awt/client
 Server side classes:/src/ch/bfh/awt/server
 The le/src/ch/bfh/awt/Hello.gwt.xml contains the
congurations for the GWT application
I
Web Application:/war/
 Contains html,css,javascript,gifs,and the like
 Contains the WEB-INF/directory (where the server classes are
automatically compiled
 The directory/war/will receive the JavaScript les compiled
from the client application
 At the end the content of this directory is copied to the server
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Hello World Application
6
Hello World
I
Hello.html:contains a real HTML
 Containing layout,
 References to images,JavaScript,CSS
I
Reference to the script loading the les
<script type="text/javascript"language="javascript"src=&
!"hello/hello.nocache.js"></script>
I
And it contains place-holders that will be manipulated
from\Java".
<div id="nameFieldContainer"></div>
<div id="sendButtonContainer"></div>
<div style="color:blue;"id="responseContainer"&
!></div>
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Widgets:Hello World
7
HTML FIle
<!doctype html>
<html>
<head>
<meta httpequiv="contenttype"content="text/html;
charset=UTF&
!8">
<link type="text/css"rel="stylesheet"href="Hello.css">
<title>Web Application Starter Project</title>
<script type="text/javascript"language="javascript"src="hello/hello.&
!nocache.js"></script>
</head>
<body>
...
<h1>Web Application Starter Project</h1>
Please enter your name:
<div id="nameFieldContainer"></div>
<div id="sendButtonContainer"></div>
<div style="color:blue;"id="responseContainer"></div>
</body>
</html>
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Widgets:Hello World
8
Java File
I
Contains the denition of the user interface
 Denition of the Widgets used,
 Panels,
 Text elds,
 buttons

I
Extends the EntryPoint class
 Denes the onModuleLoad() function.
I
Denes the Event Handling
 Denes functions to be executed when an Event is red.
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Widgets:Hello World
9
Hello.java
package ch.bfh.awt.client;
import..........
/ Entry point classes dene <code>onModuleLoad()</code&
!>./
public class Hello implements EntryPoint f
public void onModuleLoad() f
nal Button sendButton = new Button("Send");
nal TextBox nameField = new TextBox();
nal Label responseLabel = new Label();
RootPanel.get("nameFieldContainer").add(nameField);
RootPanel.get("sendButtonContainer").add(sendButton);
RootPanel.get("responseContainer").add(responseLabel);
nameField.setFocus(true);
...//Event Handling
g
g
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Widgets:Hello World
10
Widgets
I
List of default widgets
 Buttons:Button,PushButton,RadioButton,CheckBox,,,
 Calendar:DatePicker
 Lists:ListBox,CellList,
 Trees:MenuBar,Tree with CellTree,
 Panels:PopoupPanel,StackPanel,HorizontalPanel,
VerticalPanel,
 http://code.google.com/intl/fr-FR/webtoolkit/doc/
latest/RefWidgetGallery.html
I
Possibility to write your own widgets:
 http://code.google.com/intl/en/webtoolkit/doc/
latest/DevGuideUiCustomWidgets.html
 Composite components (composition of existing components)
 or from scratch in Java code
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Widgets:Hello World
11
Example:StockWatcher
1
I
An interface to watch stock values
 Presentation (when deployed on localhost)
localhost:8080/stockWatcherGWT
I
User Interface:One page
 One page
 A list containing the stocks
 A eld to type the stock into
 A button to add a new stock
I
Back-oce
 No back-oce today
 Communications with the servers are seen in the next course
 Communication available:
I
Remote Procedure Call (RPC) in Java
I
Call to JSON data on the same server (PHP for instance)
I
Call to JSON data on another server (against the same origin
policy).
1
Source:http://code.google.com/intl/fr-FR/webtoolkit/doc/
latest/tutorial/
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Widgets:Hello World
12
The HTML Page
2
<body>
<img src="images/bfh.jpg"/>
<h1>Stock Watcher testing project</h1>
<div id="stockList"></div>
<iframe src="javascript:''"id="
gwt
historyFrame"tabIndex='1'&
!style="position:absolute;width:0;height:0;border:0"></iframe>
<noscript>
<div style="width:
22em;
position:
absolute;
left:
50%;
marginleft:&
!
11em;
color:
red;
backgroundcolor:
white;
border:
1px
solid
&
!red;
padding:
4px;
fontfamily:
sansserif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
2
/war/StockWatcher.html
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Widgets:Hello World
13
Java Files
3
I
Contains Widgets
 mainPanel a vertical panel containing components
 addPanel an horizontal panel containing a textbox and a
button
 stocksFlexTable a fexible table containing lines and columns
 newSymbolTextBox a text box to enter text into
 addStockButton a button that generates an event when
clicked on
 lastUpdatedLabel a label contains a text
private VerticalPanel mainPanel = new VerticalPanel();
private FlexTable stocksFlexTable = new FlexTable();
private HorizontalPanel addPanel = new HorizontalPanel();
private TextBox newSymbolTextBox = new TextBox();
private Button addStockButton = new Button("Add");
private Label lastUpdatedLabel = new Label();
3
/src/ch/bfh/awt/client/StockWatcher.java
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Widgets:Hello World
14
The Java File
public void onModuleLoad() f
//Create table for stock data.
stocksFlexTable.setText(0,0,"Symbol");
stocksFlexTable.setText(0,1,"Price");
stocksFlexTable.setText(0,2,"Change");
stocksFlexTable.setText(0,3,"Remove");
//Assemble Add Stock panel.
addPanel.add(newSymbolTextBox);
addPanel.add(addStockButton);
//Assemble Main panel.
mainPanel.add(stocksFlexTable);
mainPanel.add(addPanel);
mainPanel.add(lastUpdatedLabel);
//Associate the Main panel with the HTML host page.
RootPanel.get("stockList").add(mainPanel);
//Move cursor focus to the input box.
newSymbolTextBox.setFocus(true);
g
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Widgets:Hello World
15
Event Handling
I
Events Handlers are attached to widgets
 Events in GWT use the event handler interface model similar
to other user interface frameworks.
 To subscribe to an event,you pass a particular event handler
interface to the appropriate widget.
 An event handler interface denes one or more methods that
the widget then calls to announce (publish) an event.
I
Example:Hello World
 Add an event handler for a click on the button
 Add an event handler when a user types on the Enter key
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Event Handling
16
Event Handlers for Hello World
4
class MyHandler implements ClickHandler,KeyUpHandler f
public void onClick(ClickEvent event) f
copyName();
g
public void onKeyUp(KeyUpEvent event) f
if (event.getNativeKeyCode() == KeyCodes.KEY
ENTER) f
copyName();
g
g
private void copyName() f
String textToCopy = nameField.getText();
responseLabel.setText(textToCopy);
g
g
MyHandler handler = new MyHandler();
sendButton.addClickHandler(handler);
nameField.addKeyUpHandler(handler);
4
Inside the denition of the class Hello
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Event Handling
17
Event Handling by Stock Watcher
//Listen for mouse events on the Add button.
addStockButton.addClickHandler(new ClickHandler() f
public void onClick(ClickEvent event) f
addStock();
g
g);
//Listen for keyboard events in the input box.
newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() f
public void onKeyPress(KeyPressEvent event) f
if (event.getCharCode() == KeyCodes.KEY
ENTER) f
addStock();
g
g
g);
g
private void addStock() f
//TODO Autogenerated method stub
g
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Event Handling
18
Manipulate the content of the
Widgets
I
Java can generate an alert().
Window.alert("'"+ symbol +"'
is
not
a
valid
symbol.");
I
One can manipulate elements in a list
int removedIndex = stocks.indexOf(symbol);
stocks.remove(removedIndex);
stocksFlexTable.removeRow(removedIndex + 1);
I
Or change the text of a label or a text box
private void copyName() f
//First,we validate the input.
String textToCopy = nameField.getText();
responseLabel.setText(textToCopy);
g
or
//Display timestamp showing last refresh.
lastUpdatedLabel.setText("Last
update
:
"
+ DateTimeFormat.getMediumDateTimeFormat().&
!format(new Date()));
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Event Handling
19
Applying Style Sheets
I
Congure the standard theme
 standard.css:contains the GWT default styles (themes)
 In GWT cong le:Hello.gwt.xml
 Denes the theme:
<inherits name='com.google.gwt.user.theme.standard.&
!Standard'/>
<! <inherits name="com.google.gwt.user.theme.&
!chrome.Chrome"/> >
<! <inherits name="com.google.gwt.user.theme.dark.&
!Dark"/> >
I
Associate a CSS le
 Hello.css:contains the project specic classes
 Linked inside the Hello.html
<link type="text/css"rel="stylesheet"href="Hello.css">
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Applying Style Sheets
20
Add Style to the elements
I
Suppose we have the following style:
/ stock list header row /
.watchListHeader f
backgroundcolor:#2062B8;
color:white;
fontstyle:italic;
g
/ stock list ex table /
.watchList f
border:1px solid silver;
padding:2px;
marginbottom:6px;
g
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Applying Style Sheets
21
Add Style to the elements (Cont.)
I
We add style to the elements of the rst row of the table
//Add styles to elements in the stock list table.
stocksFlexTable.getRowFormatter().addStyleName(0,"&
!watchListHeader");
I
Format all the elements of a table
stocksFlexTable.addStyleName("watchList");
I
Or format only one cell
stocksFlexTable.getCellFormatter().addStyleName(0,1,"&
!watchListNumericColumn");
I
Or even a panel
addPanel.addStyleName("addPanel");
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Applying Style Sheets
22
Deployment
I
Compile the application into JavaScript
 Using GWT Compile Project button in Eclipse
 Or executing ant build
I
Compilation writes all the required les in the War
directory
 Uses the denition les and all the existing les in the war/
(html,gif,images,css,...)
I
Copy the content of the directory
 To a servlet engine if you use the server side functionality
 To any server if using only the client side
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Deployment
23
Conclusion
I
GWT:pure Java Web Application
 Client and Server share one language
I
Testing made easy
 Testing of Web Application is often a nightmare
 JUnit testing is possible
 Debugging inside one JVM:In Eclipse or in devmode
I
Security?
 What is executed where?
 What is transfered and can be manipulated?
 What is tested where?
I
Next course
 I18N
 Client Server Communication
 Remote Procedure Call
 JSON
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Deployment
24
References
I
Tutorial by Google Code
http://code.google.com/intl/fr-FR/webtoolkit/doc/
latest/tutorial/gettingstarted.html
I
Developer Guide by Google Code
http://code.google.com/intl/fr-FR/webtoolkit/doc/
latest/DevGuide.html
I
Hello World Example
 Obtained by executing the create application script.
Advanced Web Technology 12) Google Web Toolkits 1 - GWT,Client Side
Deployment
25