1 / 40

Using Ajax to Improve uPortal User Experience

Learn how to improve user experience in uPortal by leveraging Ajax technology. Explore code changes, customization, and user testing. Discover the future of UI enhancements.

aron
Download Presentation

Using Ajax to Improve uPortal User Experience

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related