Create a GWT Interface for your Project Goal: create a web interface for your project using Google Web Toolkit
List of steps: 1. Create a new web application project sample G -‐> New Web Application Project: project name ‘PhoneBook_GWT’, package ‘pt.ist.phonebook’, using GWT default, NOT using GWT App Engine, Sample Code: generate project sample code 2. Test it out: PhoneBook_GWT.html -‐> run as Web Application use Chrome or Firefox (or other supported web browser with the GWT plugin installed) 3. Rename packages from: pt.ist.phonebook.client/server/shared to: pt.ist.phonebook.presentation.client/server/shared and update war/WEB-‐INF/web.xml with GreetingServiceImpl new package location and update src/phonebook/PhoneBook_GWT.gwt.xml entry-‐point class name to new package and on paths that refer folders add 'presentation/' 4. Rename PhoneBook_GWT.css -‐> PhoneBook.css and PhoneBook_GWT.html -‐> PhoneBook.html, and update CSS location in PhoneBook.html and welcome-‐file on web.xml and change HTML title and header to PhoneBook on PhoneBook.html 5. Rename presentation.client.GreetingService -‐> presentation.client.PhoneBookServlet (eclipse automatically updates client.PhoneBookServletAsync and server.PhoneBookServletImpl, and web.xml)
6. Rename servlet name on servlet and servlet mapping on web.xml and update url-‐pattern on web.xml -‐> phonebook/services and script src on PhoneBook.html -‐> phonebook/phonebook.nocache.js and module rename-‐to='phonebook' on PhoneBook_GWT.gwt.xml and rename @RemoteServiceRelativePath("services") on client.SoNetService.java 7. To make the overall interaction faster and easier, report the different situation on label instead of dialog box (pop-‐up). To highlight it create three styles of of label (info, error, done) in CSS and use it in related situations. 8. To experiment the overall communication model, add a PasswordTextBox to the design on html (or directly on code on onModuleLoad) To create a login-‐like method, change the client interface and the async interface of the Servlet, and the server implementation to accept two strings: ‘username’ and ‘password‘ (instead of one String with ‘input’)
Create a GWT Interface for your Project 0. Starting point: PhoneBook with JUnit tests @ SVN/ESSD/phoneBook/tags/R_5
Create a GWT Interface for your Project 1. Create a separated new GWT project G -‐> New Web Application Project project name: PhoneBook_GWT package name: pt.ist.phonebook [v] using GWT default [_] NOT using GWT App Engine [v] Sample Code: generate project sample code
Create a GWT Interface for your Project 2. Test it out: PhoneBook_GWT.html -> run as Web Application
Create a GWT Interface for your Project 3. Rename packages from: pt.ist.phonebook.client/server/shared to: pt.ist.phonebook.presentation.client/server/shared and update war/WEB-‐INF/web.xml with GreetingServiceImpl new package location src/phonebook/PhoneBook_GWT.gwt.xml entry-‐point class name to new package on paths that refer folders add 'presentation/'
Create a GWT Interface for your Project 4. Rename PhoneBook_GWT.css and .html Rename PhoneBook_GWT.css -‐> PhoneBook.css and PhoneBook_GWT.html -‐> PhoneBook.html, and update CSS location in PhoneBook.html and welcome-‐file on web.xml and change HTML title and header to PhoneBook on PhoneBook.html
Create a GWT Interface for your Project 5. Rename presentation.client.GreetingService -> presentation.client.PhoneBookServlet Eclipse automatically updates client.PhoneBookServletAsync and server.PhoneBookServletImpl, and web.xml
Create a GWT Interface for your Project 6. Rename servlet name and update servlet mapping on web.xml url-‐pattern on web.xml -‐> phonebook/services script src on PhoneBook.html -‐> phonebook/phonebook.nocache.js module rename-‐to='phonebook' on PhoneBook_GWT.gwt.xml and rename @RemoteServiceRelativePath("services") on client.SoNetService.java
Create a GWT Interface for your Project 7. Replace the Dialog Box with Label to make interaction faster and easier report the different situation on label instead of dialog box (pop-‐up) 1. Rename the errorLabel to resultLabel and remove the DialogBox related code (errors need fixing -‐> next...)
Create a GWT Interface for your Project 7. Replace the Dialog Box with Label to make interaction faster and easier 2. report the different situation on label instead of dialog box (pop-‐up) and to highlight it create three styles of of label (info, error, done) in CSS and use it in related situations
Create a GWT Interface for your Project 8. To experiment the overall communication model, add a PasswordTextBox and create a login-‐like method to answer it (next...)
Create a GWT Interface for your Project 8. To experiment the overall communication model, add a PasswordTextBox and create a login-‐like method: change the client interface the async interface of the Servlet and the server implementation to accept two strings: ‘username’ and ‘password’