Kuali Days :: Chicago May 13-14, 2008

Kuali Student User Interface Overview

Session ObjectivesKuali Student User Interface Overview

• User Centered Design • Google Web Toolkit (GWT)• Questions and Knowledge Sharing

User Centered DesignKuali Student User Interface Overview

Partnershipso Kuali Student 'U' Teamso Fluid Project & Berkeley

User Centered DesignKuali Student User Interface Overview

User Centered Design is a product development methodology based on actual user needs, abilities and perceptions.

UCD focuses on understanding:o Who are the users?o What are their goals?o What are their pain points?o What are their motivations?

Kuali Days :: Chicago May 13-14

User Centered DesignKuali Student User Interface Overview

Methodology1. User Research2. User Modeling3. Requirements Definition4. UI Framework Definition 5. UI Design 6. Development Support

User Centered DesignKuali Student User Interface Overview

Toolso Wiki and Axure RP Pro 5o Google Web ToolKit

Google Web ToolkitKuali Student User Interface Overview

Why Google Web Toolkit (GWT) Selection Process Selection Criteria

Google Web ToolkitKuali Student User Interface Overview

GWT BenefitsRich InterfaceCross browserInternationalization supportAccessibleScalable

–Development–Deployment

Ease of use

Google Web ToolkitKuali Student User Interface Overview

Simple GWT Examplepublic class HelloGwt implements EntryPoint { public void onModuleLoad() { final Panel panel = new HorizontalPanel(); final TextBox text = new TextBox(); final Button button = new Button("Click Me", new ClickListener() { public void onClick(Widget arg0) { text.setText("Hello GWT!"); } });

panel.add(text); panel.add(button);

RootPanel.get().add(panel); }}

Google Web ToolkitKuali Student User Interface Overview

GWT Service Examplepublic interface HelloService extends RemoteService { public static final String SERVICE_URI = "/HelloService"; // Generated helper class public static class Util { public static HelloServiceAsync getInstance() { // generated code omitted } }

// service interface definition public String sayHello(String name);}

public interface HelloServiceAsync { public void sayHello(String name, AsyncCallback callback);}

Google Web ToolkitKuali Student User Interface Overview

GWT Service Examplepublic class HelloServiceImpl extends RemoteServiceServlet implements HelloService {

public String sayHello(String name) { return "Hello, " + name; }}

Google Web ToolkitKuali Student User Interface Overview

GWT Service Examplepublic class HelloGwt implements EntryPoint { public void onModuleLoad() { final TextBox text = new TextBox(); String name = "Joe Smith";

HelloService.Util.getInstance().sayHello(name, new AsyncCallback() { public void onFailure(Throwable arg0) { text.setText(arg0.getMessage()); } public void onSuccess(Object arg0) { text.setText((String) arg0); } });

RootPanel.get().add(text); }}

Questions and Knowledge SharingKuali Student User Interface Overview

Contact Information

Cindy Nahm <cindy.nahm@ubc.ca>Wil Johnson <wilj@fsu.edu>Tim Heidinger <timh@berkeley.edu>Rachel Hollowgrass <rachel@media.berkeley.edu>