Using Ajax to Improve uPortal User Experience
Using Ajax to Improve uPortal User Experience
Jen BoureyYale University
OutlineOutline
Short demoTechnical overview
Code changesCustomizing for your portal
Implications for our portalUser testingDojo channels
The future!
Short demoTechnical overview
Code changesCustomizing for your portal
Implications for our portalUser testingDojo channels
The future!
Old User PreferencesOld User Preferences
Old User PreferencesOld User Preferences
GoalsGoals
More intuitive interfaceSimplify preference optionsUse current conventions from other
portalsEasier and faster to . . .
Find and add new contentRearrange layout elements
More intuitive interfaceSimplify preference optionsUse current conventions from other
portalsEasier and faster to . . .
Find and add new contentRearrange layout elements
UI OverviewUI Overview
Current StatusCurrent 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.
Channel EditingChannel Editing
MoveDeleteMin/max
MoveDeleteMin/max
Channel EditingChannel Editing
Adding ChannelsAdding Channels
Browse channels by categorySearch channelsUse channel without adding to
layout
Browse channels by categorySearch channelsUse channel without adding to
layout
Browsing ChannelsBrowsing Channels
Searching ChannelsSearching Channels
Adding a Channel from Focus Mode
Adding a Channel from Focus Mode
Editing TabsEditing Tabs
Page LayoutPage Layout
Technical DetailsTechnical Details
Java ResourcesJava Resources
ServletsRetrieveChannelListServletUpdatePreferencesServlet
Theme Param InjectorsAjaxThemeParamInjector
ServletsRetrieveChannelListServletUpdatePreferencesServlet
Theme Param InjectorsAjaxThemeParamInjector
Javascript ResourcesJavascript Resources
Dojo!Portal dojo classes
PortletDragObject.jsPortletDragSource.jsPortletDropTarget.js
ajax-preferences.js
Dojo!Portal dojo classes
PortletDragObject.jsPortletDragSource.jsPortletDropTarget.js
ajax-preferences.js
DojoDojo
IO librariesProvide data (ex. Channel registry)Handle asynchronous requestsReturn relevant information
WidgetsPopup-style menustabs
IO librariesProvide data (ex. Channel registry)Handle asynchronous requestsReturn relevant information
WidgetsPopup-style menustabs
Theme ChangesTheme Changes
Lots and lots of element IDsOnclick() eventsHidden preference menu widgetsGenerate drag objects based on
layout information
Lots and lots of element IDsOnclick() eventsHidden preference menu widgetsGenerate drag objects based on
layout information
Interaction OverviewInteraction Overview
User action
JavaScript
UpdatePreferencesServlet Update UI
Stored layout
Example: adding tabsExample: adding tabs
User clicks
JavaScript
Insert new tab in layout Insert new tab in UI
Store preferences
Add tab: Java codeAdd tab: Java code
Create new tab nodeSave layout and get new tab’s
nodeIdCreate new column and add it to
the tabSave layoutReturn new tab nodeId
Create new tab nodeSave layout and get new tab’s
nodeIdCreate new column and add it to
the tabSave layoutReturn new tab nodeId
Add tab: JavaScript codeAdd 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
Example: adding channelsExample: adding channels
User clicks
JavaScript
Get channel registry XML Display channel
adding menu
User choosesa channelPreferences
servlet
Reload page
Skin ResourcesSkin Resources
{$skin}_preferences.cssOverride dojo defaults
Extra icons (left and right arrows)
{$skin}_preferences.cssOverride dojo defaults
Extra icons (left and right arrows)
CustomizingCustomizing
Other skinsCreate and link new ${skin}_ajax.js
Other themesAdd element IDsCreate javascript
Other layout managers?
Other skinsCreate and link new ${skin}_ajax.js
Other themesAdd element IDsCreate javascript
Other layout managers?
Back to the PortalBack to the Portal
Refining our UIRefining our UI
Terminology choicesPositioning of menu itemsToo many features?
Ex. Moving columns
Suddenly a lot of channels look clunkyLinks channelSearchMulti-RSS feed with pull-down menu
Terminology choicesPositioning of menu itemsToo many features?
Ex. Moving columns
Suddenly a lot of channels look clunkyLinks channelSearchMulti-RSS feed with pull-down menu
Using Dojo in ChannelsUsing Dojo in Channels
io libraryGet data from XML, JSON, etc.Interactive, asynchronous requests
WidgetsTabs in channelstooltips
io libraryGet data from XML, JSON, etc.Interactive, asynchronous requests
WidgetsTabs in channelstooltips
Google MapsGoogle MapsCWebProxy + AJAX + XML
Google SearchGoogle Search
Dining MenuDining Menu
Yale Events CalendarYale Events CalendarCWebProxy + AJAX + custom xCal
CSyndFeedCSyndFeedDojo tooltip widget
Weather PortletWeather PortletCustom RSS feed -> local JSON
Sports ScoresSports ScoresScriptSrcTransport + JSON
Missing PiecesMissing Pieces
Resetting a layoutSetting the active tabMoving columnsMoving channels to a new tabDLM restrictions
Resetting a layoutSetting the active tabMoving columnsMoving channels to a new tabDLM restrictions
Future DevelopmentFuture Development
Improved tab editing UIDrag channels to another tabReset layout and/or fragmentIncreased user feedbackAccessibility
Improved tab editing UIDrag channels to another tabReset layout and/or fragmentIncreased user feedbackAccessibility
ResourcesResources
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 [email protected]
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 [email protected]