Kuali Student User Interface Overview

1. Kuali Student User Interface Overview Kuali Days :: Chicago May 13-14, 2008

2. Session ObjectivesKuali Student User Interface Overview User Centered Design Google Web Toolkit (GWT) Questions and Knowledge Sharing

3. User Centered DesignKuali Student User Interface Overview Partnerships Kuali Student 'U' Teams Fluid Project & Berkeley

4. User Centered DesignKuali Student User Interface Overview User Centered Designis aproduct development methodologybased on actual userneeds, abilitiesandperceptions. UCD focuses on understanding: Who are the users? What are their goals? What are their pain points? What are their motivations?

5. User Centered DesignKuali Student User Interface Overview Methodology • User Research • User Modeling • Requirements Definition • UI Framework Definition • UI Design • Development Support

6. User Centered DesignKuali Student User Interface Overview Tools Wiki and Axure RP Pro 5 Google Web ToolKit

7. Google Web ToolkitKuali Student User Interface Overview Why Google Web Toolkit (GWT) Selection Process Selection Criteria

8. Google Web ToolkitKuali Student User Interface Overview GWT Benefits Rich Interface Cross browser Internationalization support Accessible Scalable Development Deployment Ease of use

9. Google Web ToolkitKuali Student User Interface Overview publicclass HelloGwt implements EntryPoint { publicvoid onModuleLoad() { final Panel panel = new HorizontalPanel(); final TextBox text = new TextBox(); final Button button = new Button("Click Me", new ClickListener() { publicvoid onClick(Widget arg0) { text.setText("Hello GWT!"); } }); panel.add(text); panel.add(button); RootPanel.get().add(panel); } } Simple GWT Example

10. Google Web ToolkitKuali Student User Interface Overview publicinterface HelloService extends RemoteService { publicstaticfinal String SERVICE_URI = "/HelloService"; // Generated helper class publicstaticclass Util { publicstatic HelloServiceAsync getInstance() { // generated code omitted } } // service interface definition public String sayHello(String name); } GWT Service Example publicinterface HelloServiceAsync { publicvoid sayHello(String name, AsyncCallback callback); }

11. Google Web ToolkitKuali Student User Interface Overview publicclass HelloServiceImpl extends RemoteServiceServlet implements HelloService { public String sayHello(String name) { return"Hello, " + name; } } GWT Service Example

12. Google Web ToolkitKuali Student User Interface Overview publicclass HelloGwt implements EntryPoint { publicvoid onModuleLoad() { final TextBox text = new TextBox(); String name = "Joe Smith"; HelloService.Util.getInstance().sayHello(name, new AsyncCallback() { publicvoid onFailure(Throwable arg0) { text.setText(arg0.getMessage()); } publicvoid onSuccess(Object arg0) { text.setText((String) arg0); } }); RootPanel.get().add(text); } } GWT Service Example

13. Questions and Knowledge SharingKuali Student User Interface Overview Contact InformationCindy Nahm <cindy.nahm@ubc.ca>Wil Johnson <wilj@fsu.edu>Tim Heidinger <timh@berkeley.edu>Rachel Hollowgrass <rachel@media.berkeley.edu>