1. Using Ajax to Improve uPortal User Experience Jen Bourey Yale University Jennifer.bourey@yale.edu

2. Outline  Short demo  Technical overview  Code changes  Customizing for your portal  Implications for our portal  User testing  Dojo channels  The future!  Short demo  Technical overview  Code changes  Customizing for your portal  Implications for our portal  User testing  Dojo channels  The future!

3. Old User Preferences

5. Goals  More intuitive interface  Simplify preference options  Use current conventions from other portals  Easier and faster to...  Find and add new content  Rearrange layout elements  More intuitive interface  Simplify preference options  Use current conventions from other portals  Easier and faster to...  Find and add new content  Rearrange layout elements

6. UI Overview

7. Current Status  Most features copied from preferences channel.  Brower compatibility: IE6, IE7, Firefox, Safari.  Fails back if scripting is disabled.  Most features copied from preferences channel.  Brower compatibility: IE6, IE7, Firefox, Safari.  Fails back if scripting is disabled.

8. Channel Editing  Move  Delete  Min/max  Move  Delete  Min/max

9. Channel Editing

10. Adding Channels  Browse channels by category  Search channels  Use channel without adding to layout  Browse channels by category  Search channels  Use channel without adding to layout

11. Browsing Channels

12. Searching Channels

13. Adding a Channel from Focus Mode

14. Editing Tabs

15. Page Layout

16. Technical Details

17. Java Resources  Servlets  RetrieveChannelListServlet  UpdatePreferencesServlet  Theme Param Injectors  AjaxThemeParamInjector  Servlets  RetrieveChannelListServlet  UpdatePreferencesServlet  Theme Param Injectors  AjaxThemeParamInjector

18. Javascript Resources  Dojo!  Portal dojo classes  PortletDragObject.js  PortletDragSource.js  PortletDropTarget.js  ajax-preferences.js  Dojo!  Portal dojo classes  PortletDragObject.js  PortletDragSource.js  PortletDropTarget.js  ajax-preferences.js

19. Dojo  IO libraries  Provide data (ex. Channel registry)  Handle asynchronous requests  Return relevant information  Widgets  Popup-style menus  tabs  IO libraries  Provide data (ex. Channel registry)  Handle asynchronous requests  Return relevant information  Widgets  Popup-style menus  tabs

20. Theme Changes  Lots and lots of element IDs  Onclick() events  Hidden preference menu widgets  Generate drag objects based on layout information  Lots and lots of element IDs  Onclick() events  Hidden preference menu widgets  Generate drag objects based on layout information

21. Interaction Overview User action JavaScript UpdatePreferencesServletUpdate UI Stored layout

22. Example: adding tabs User clicks JavaScript Insert new tab in layoutInsert new tab in UI Store preferences

23. Add tab: Java code  Create new tab node  Save layout and get new tab’s nodeId  Create new column and add it to the tab  Save layout  Return new tab nodeId  Create new tab node  Save layout and get new tab’s nodeId  Create new column and add it to the tab  Save layout  Return new tab nodeId

24. Add tab: JavaScript code  AJAX request to preferences servlet  Create new tab and append it to the tab list  Assign tab the appropriate id  AJAX request to preferences servlet  Create new tab and append it to the tab list  Assign tab the appropriate id

25. Example: adding channels User clicks JavaScript Get channel registry XML Display channel adding menu User chooses a channel Preferences servlet Reload page

26. Skin Resources  {$skin}_preferences.css  Override dojo defaults  Extra icons (left and right arrows)  {$skin}_preferences.css  Override dojo defaults  Extra icons (left and right arrows)

27. Customizing  Other skins  Create and link new ${skin}_ajax.js  Other themes  Add element IDs  Create javascript  Other layout managers?  Other skins  Create and link new ${skin}_ajax.js  Other themes  Add element IDs  Create javascript  Other layout managers?

28. Back to the Portal

29. Refining our UI  Terminology choices  Positioning of menu items  Too many features?  Ex. Moving columns  Suddenly a lot of channels look clunky  Links channel  Search  Multi-RSS feed with pull-down menu  Terminology choices  Positioning of menu items  Too many features?  Ex. Moving columns  Suddenly a lot of channels look clunky  Links channel  Search  Multi-RSS feed with pull-down menu

30. Using Dojo in Channels  io library  Get data from XML, JSON, etc.  Interactive, asynchronous requests  Widgets  Tabs in channels  tooltips  io library  Get data from XML, JSON, etc.  Interactive, asynchronous requests  Widgets  Tabs in channels  tooltips

31. Google Maps CWebProxy + AJAX + XML

32. Google Search

33. Dining Menu

34. Yale Events Calendar CWebProxy + AJAX + custom xCal

35. CSyndFeed Dojo tooltip widget

36. Weather Portlet Custom RSS feed -> local JSON

37. Sports Scores ScriptSrcTransport + JSON

38. Missing Pieces  Resetting a layout  Setting the active tab  Moving columns  Moving channels to a new tab  DLM restrictions  Resetting a layout  Setting the active tab  Moving columns  Moving channels to a new tab  DLM restrictions

39. Future Development  Improved tab editing UI  Drag channels to another tab  Reset layout and/or fragment  Increased user feedback  Accessibility  Improved tab editing UI  Drag channels to another tab  Reset layout and/or fragment  Increased user feedback  Accessibility

40. Resources  JA-SIG wiki  http://www.ja-sig.org/wiki/display/UPC/Yale+Dojo- driven+Drag+and+Drop  JA-SIG subversion repository  https://www.ja-sig.org/svn/up2  Yale portal  https://portal.yale.edu/Login?userName=demo&password=demo  Contact info  jennifer.bourey@yale.edu  JA-SIG wiki  http://www.ja-sig.org/wiki/display/UPC/Yale+Dojo- driven+Drag+and+Drop  JA-SIG subversion repository  https://www.ja-sig.org/svn/up2  Yale portal  https://portal.yale.edu/Login?userName=demo&password=demo  Contact info  jennifer.bourey@yale.edu