awt 12) google web toolkits1 gwt, client side · awt 12) google web toolkits1 gwt, client side...

AWT12) Google Web Toolkits1GWT, Client Side

Emmanuel BenoistFall Term 2016-17

Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 1

Table of Contents

� Presentation of GWT

� Hello World Application

� WidgetsHello World

� Event Handling

� Applying Style Sheets

� Deployment


Presentation of GWT


Motivation

What is GWT?A development environment in pure Java for rich webapplicationsProvides Java for programming both client and server sides

Advantages of GWTHomogenous environmentTesting of a web application (using JUnit)

Not integrated in JSFConcurent system developed by google


Principle

Write Java codeUse Java on Server SideBut also on a Client SideCommunication is handeled conveniently

Tests in a JVMTesting is done using JUnitPlugin in the browserTests are conducted inside one JVM (based on Java Code)

Compile into JavascriptCreates different versions for different browsersEach browser receives only the “right” versionCan be deployed on Java ServersOr any other server (if the server part is not Java)


Hello World Application


Hello World Application

Download the GWT

From Google Code Web sitehttp://code.google.com

Create an applicationExecute./webAppCreator -out /home/bie1/test/ ch.bfh.awt.Hello

A default application is createdIncludes ant and Eclipse project files

Test the ApplicationGo to the directoryexecute ant devmode

Install the plugin in your browserTest the application


http://code.google.com

Directories created

Source files: /src/

Package for client side application :/src/ch/bfh/awt/client

Server side classes : /src/ch/bfh/awt/server

The file /src/ch/bfh/awt/Hello.gwt.xml contains theconfigurations for the GWT application

Web Application: /war/

Contains html, css, javascript, gifs, and the likeContains the WEB-INF/ directory (where the server classes areautomatically compiledThe directory /war/ will receive the JavaScript files compiledfrom the client applicationAt the end the content of this directory is copied to the server


Widgets


Hello World


Hello World

Hello.html: contains a real HTMLContaining layout,References to images, JavaScript, CSS

Reference to the script loading the files

<script type=”text/javascript” language=”javascript” src=↘

→”hello/hello.nocache.js”></script>

And it contains place-holders that will be manipulatedfrom “Java”.

<div id=”nameFieldContainer”></div><div id=”sendButtonContainer”></div><div style=”color:blue;” id=”responseContainer”↘

→></div>


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>


Java File

Contains the definition of the user interfaceDefinition of the Widgets used,Panels,Text fields,buttons

Extends the EntryPoint classDefines the onModuleLoad() function.

Defines the Event HandlingDefines functions to be executed when an Event is fired.


Hello.javapackage ch.bfh.awt.client;import ........../∗∗ Entry point classes define <code>onModuleLoad()</code↘

→>. ∗/public class Hello implements EntryPoint {public void onModuleLoad() {

final Button sendButton = new Button(”Send”);final TextBox nameField = new TextBox();final Label responseLabel = new Label();RootPanel.get(”nameFieldContainer”).add(nameField);RootPanel.get(”sendButtonContainer”).add(sendButton);RootPanel.get(”responseContainer”).add(responseLabel);

nameField.setFocus(true);... // Event Handling}}


Widgets

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

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


http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/RefWidgetGallery.html

http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/RefWidgetGallery.html

http://code.google.com/intl/en/webtoolkit/doc/latest/DevGuideUiCustomWidgets.html

http://code.google.com/intl/en/webtoolkit/doc/latest/DevGuideUiCustomWidgets.html

Example: StockWatcher1

An interface to watch stock valuesPresentation (when deployed on localhost)localhost:8080/stockWatcherGWT

User Interface: One pageOne pageA list containing the stocksA field to type the stock intoA button to add a new stock

Back-officeNo back-office todayCommunications with the servers are seen in the next courseCommunication available:

I Remote Procedure Call (RPC) in JavaI Call to JSON data on the same server (PHP for instance)I Call to JSON data on another server (against the same origin

policy).1Source:http:

//code.google.com/intl/fr-FR/webtoolkit/doc/latest/tutorial/


localhost:8080/stockWatcherGWT

http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/tutorial/

http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/tutorial/

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 enabledin order for this application to display correctly.

</div></noscript>

</body>

2/war/StockWatcher.htmlBerner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 17

Java Files 3

Contains WidgetsmainPanel a vertical panel containing componentsaddPanel an horizontal panel containing a textbox and abuttonstocksFlexTable a fexible table containing lines and columnsnewSymbolTextBox a text box to enter text intoaddStockButton a button that generates an event whenclicked onlastUpdatedLabel 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.javaBerner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 18

The Java Filepublic void onModuleLoad() {

// 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);}


Event Handling


Event Handling

Events Handlers are attached to widgetsEvents in GWT use the event handler interface model similarto other user interface frameworks.To subscribe to an event, you pass a particular event handlerinterface to the appropriate widget.An event handler interface defines one or more methods thatthe widget then calls to announce (publish) an event.

Example: Hello WorldAdd an event handler for a click on the buttonAdd an event handler when a user types on the Enter key


Event Handlers for Hello World 4

class MyHandler implements ClickHandler, KeyUpHandler {public void onClick(ClickEvent event) {

copyName();}

public void onKeyUp(KeyUpEvent event) {if (event.getNativeKeyCode() == KeyCodes.KEY ENTER) {

copyName();}}

private void copyName() {String textToCopy = nameField.getText();responseLabel.setText(textToCopy);

}}

MyHandler handler = new MyHandler();sendButton.addClickHandler(handler);nameField.addKeyUpHandler(handler);

4Inside the definition of the class HelloBerner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 22

Event Handling by Stock Watcher

// Listen for mouse events on the Add button.addStockButton.addClickHandler(new ClickHandler() {

public void onClick(ClickEvent event) {addStock();}});// Listen for keyboard events in the input box.newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() {

public void onKeyPress(KeyPressEvent event) {if (event.getCharCode() == KeyCodes.KEY ENTER) {

addStock();}}});}

private void addStock() {// TODO Auto−generated method stub}


Manipulate the content of theWidgets

Java can generate an alert().

Window.alert(”’” + symbol + ”’ is not a valid symbol.”);

One can manipulate elements in a list

int removedIndex = stocks.indexOf(symbol);stocks.remove(removedIndex);stocksFlexTable.removeRow(removedIndex + 1);

Or change the text of a label or a text box

private void copyName() {// First, we validate the input.String textToCopy = nameField.getText();responseLabel.setText(textToCopy);}

or

// Display timestamp showing last refresh.lastUpdatedLabel.setText(”Last update : ”+ DateTimeFormat.getMediumDateTimeFormat().↘→format(new Date()));


Applying Style Sheets


Applying Style Sheets

Configure the standard themestandard.css : contains the GWT default styles (themes)In GWT config file : Hello.gwt.xml

Defines 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”/> −−>

Associate a CSS fileHello.css : contains the project specific classesLinked inside the Hello.html

<link type=”text/css” rel=”stylesheet” href=”Hello.css”>


Add Style to the elements

Suppose we have the following style:

/∗ stock list header row ∗/.watchListHeader {

background−color: #2062B8;color: white;font−style: italic;}/∗ stock list flex table ∗/.watchList {

border: 1px solid silver;padding: 2px;margin−bottom:6px;}


Add Style to the elements (Cont.)

We add style to the elements of the first row of the table

// Add styles to elements in the stock list table.stocksFlexTable.getRowFormatter().addStyleName(0, ”↘

→watchListHeader”);

Format all the elements of a table

stocksFlexTable.addStyleName(”watchList”);

Or format only one cell

stocksFlexTable.getCellFormatter().addStyleName(0, 1, ”↘

→watchListNumericColumn”);

Or even a panel

addPanel.addStyleName(”addPanel”);


Deployment


Deployment

Compile the application into JavaScriptUsing GWT Compile Project button in EclipseOr executing ant build

Compilation writes all the required files in the Wardirectory

Uses the definition files and all the existing files in the war/

(html, gif, images, css, . . . )

Copy the content of the directory

To a servlet engine if you use the server side functionalityTo any server if using only the client side


Conclusion

GWT: pure Java Web ApplicationClient and Server share one language

Testing made easyTesting of Web Application is often a nightmareJUnit testing is possibleDebugging inside one JVM : In Eclipse or in devmode

Security?What is executed where?What is transfered and can be manipulated?What is tested where?

Next courseI18NClient Server CommunicationRemote Procedure CallJSON


References

Tutorial by Google Codehttp://code.google.com/intl/fr-FR/webtoolkit/doc/

latest/tutorial/gettingstarted.html

Developer Guide by Google Codehttp://code.google.com/intl/fr-FR/webtoolkit/doc/

latest/DevGuide.html

Hello World Example

Obtained by executing the create application script.


http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/tutorial/gettingstarted.html

http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/tutorial/gettingstarted.html

http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuide.html

http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuide.html

awt 12) google web toolkits1 gwt, client side · awt 12) google web toolkits1 gwt, client side...

Documents