Download
using ajax to improve uportal user experience n.
Skip this Video
Loading SlideShow in 5 Seconds..
Using Ajax to Improve uPortal User Experience PowerPoint Presentation
Download Presentation
Using Ajax to Improve uPortal User Experience

Using Ajax to Improve uPortal User Experience

75 Vues Download Presentation
Télécharger la présentation

Using Ajax to Improve uPortal User Experience

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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!

  3. Old User Preferences

  4. 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

  6. UI Overview

  7. Current Status • 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

  9. Channel Editing

  10. Adding Channels • 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

  18. Javascript Resources • 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

  20. Theme Changes • 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 UpdatePreferencesServlet Update UI Stored layout

  22. Example: adding tabs User clicks JavaScript Insert new tab in layout Insert 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

  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

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

  26. Skin Resources • {$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?

  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

  30. Using Dojo in Channels • 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

  39. Future Development • 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