Using Ajax to Improve uPortal User Experience

Using Ajax to Improve uPortal User Experience

Jen BoureyYale University

Jennifer.bourey@yale.edu

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