Table of Contents Presentation of GWT � Hello World Application � Advanced Web Technology Widgets � 5) Google Web Toolkits - Hello World GWT, Client Side Event Handling � Applying Style Sheets � Emmanuel Benoist Deployment � Spring Term 2020 Internationalization � Static String i18n Remote Procedure Code � JSON � Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 1 2 Motivation What is GWT? A development environment in pure Java for rich web Presentation of GWT applications Provides Java for programming both client and server sides Advantages of GWT Homogenous environment Testing of a web application (using JUnit) Not integrated in JSF Concurent system developed by google Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 3 4
Principle Write Java code Use Java on Server Side But also on a Client Side Hello World Application Communication is handeled conveniently Tests in a JVM Testing is done using JUnit Plugin in the browser Tests are conducted inside one JVM (based on Java Code) Compile into Javascript Creates different versions for different 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) Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 5 6 Hello World Application Directories created Source files: /src/ Download the GWT From Google Code Web site Package for client side application : http://code.google.com /src/ch/bfh/awt/client Server side classes : /src/ch/bfh/awt/server Create an application The file /src/ch/bfh/awt/Hello.gwt.xml contains the Execute configurations for the GWT application ./webAppCreator -out /home/bie1/test/ ch.bfh.awt.Hello Web Application: /war/ A default application is created Includes ant and Eclipse project files Contains html, css, javascript, gifs, and the like Contains the WEB-INF/ directory (where the server classes are Test the Application automatically compiled Go to the directory The directory /war/ will receive the JavaScript files compiled execute ant devmode from the client application Install the plugin in your browser At the end the content of this directory is copied to the server Test the application Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 7 8
Widgets Hello World Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 9 10 Hello World HTML FIle <!doctype html> Hello.html: contains a real HTML <html> <head> Containing layout, <meta http − equiv="content − type" content="text/html;␣charset=UTF ց References to images, JavaScript, CSS → − 8"> Reference to the script loading the files <link type="text/css" rel="stylesheet" href="Hello.css"> <title>Web Application Starter Project</title> <script type="text/javascript" language="javascript" src=" ց <script type="text/javascript" language="javascript" src="hello/hello. ց → hello/hello.nocache.js"></script> → nocache.js"></script> </head> And it contains place-holders that will be manipulated <body> ... from “Java”. <h1>Web Application Starter Project</h1> <div id="nameFieldContainer"></div> <div id="sendButtonContainer"></div> Please enter your name: <div id="nameFieldContainer"></div> <div style="color:blue;" id="responseContainer" ց <div id="sendButtonContainer"></div> → ></div> <div style="color:blue;" id="responseContainer"></div> </body> </html> Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 11 12
Java File Hello.java package ch.bfh.awt.client; import .......... / ∗∗ Entry point classes define <code>onModuleLoad()</code>. ց Contains the definition of the user interface → ∗ / Definition of the Widgets used, public class Hello implements EntryPoint { Panels, public void onModuleLoad() { Text fields, buttons final Button sendButton = new Button("Send"); final TextBox nameField = new TextBox(); Extends the EntryPoint class final Label responseLabel = new Label(); Defines the onModuleLoad() function. RootPanel.get("nameFieldContainer").add(nameField); RootPanel.get("sendButtonContainer").add(sendButton); Defines the Event Handling RootPanel.get("responseContainer").add(responseLabel); Defines functions to be executed when an Event is fired. nameField.setFocus(true); ... // Event Handling } } Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 13 14 Example: StockWatcher 1 Widgets An interface to watch stock values Presentation (when deployed on localhost) List of default widgets localhost:8080/stockWatcherGWT Buttons: Button , PushButton , RadioButton , CheckBox ,,, User Interface: One page Calendar: DatePicker One page Lists : ListBox , CellList , A list containing the stocks Trees: MenuBar , Tree with CellTree , A field to type the stock into Panels: PopoupPanel , StackPanel , HorizontalPanel , A button to add a new stock VerticalPanel , Back-office http://code.google.com/intl/fr-FR/webtoolkit/doc/ No back-office today latest/RefWidgetGallery.html Communications with the servers are seen in the next course Possibility to write your own widgets: Communication available: http://code.google.com/intl/en/webtoolkit/doc/ ◮ Remote Procedure Call (RPC) in Java ◮ Call to JSON data on the same server (PHP for instance) latest/DevGuideUiCustomWidgets.html ◮ Call to JSON data on another server (against the same origin Composite components (composition of existing components) policy). or from scratch in Java code 1 Source: http: //code.google.com/intl/fr-FR/webtoolkit/doc/latest/tutorial/ Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 15 16
The HTML Page 2 Java Files 3 Contains Widgets mainPanel a vertical panel containing components <body> addPanel an horizontal panel containing a textbox and a <img src="images/bfh.jpg" /> button <h1>Stock Watcher testing project</h1> stocksFlexTable a fexible table containing lines and columns <div id="stockList"></div> <iframe src="javascript:’’" id="__gwt_historyFrame" tabIndex=’ ց newSymbolTextBox a text box to enter text into → − 1’ style="position:absolute;width:0;height:0;border:0"></iframe> addStockButton a button that generates an event when <noscript> clicked on <div style="width:␣22em;␣position:␣absolute;␣left:␣50%;␣margin − left ց lastUpdatedLabel a label contains a text → :␣ − 11em;␣color:␣red;␣background − color:␣white;␣border:␣1px␣solid␣ ց → red;␣padding:␣4px;␣font − family:␣sans − serif"> private VerticalPanel mainPanel = new VerticalPanel(); Your web browser must have JavaScript enabled private FlexTable stocksFlexTable = new FlexTable(); in order for this application to display correctly. </div> private HorizontalPanel addPanel = new HorizontalPanel(); </noscript> private TextBox newSymbolTextBox = new TextBox(); </body> private Button addStockButton = new Button("Add"); private Label lastUpdatedLabel = new Label(); 2 /war/StockWatcher.html 3 /src/ch/bfh/awt/client/StockWatcher.java Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 17 18 The Java File public void onModuleLoad() { // Create table for stock data. stocksFlexTable.setText(0, 0, "Symbol"); stocksFlexTable.setText(0, 1, "Price"); stocksFlexTable.setText(0, 2, "Change"); Event Handling 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); } Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute école spécialisée bernoise | Berne University of Applied Sciences 19 20
Recommend
More recommend
