Create a GWT Interface for your Project

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...
0 downloads 2 Views 2MB Size
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’