Yale Dojo-driven Drag and Drop

Owned by Andrew Petro
Last updated: Jun 15, 2007 by Jen BoureyVersion comment
2 min read

Current status

You can demo these features in Yale's production uPortal instance: https://portal.yale.edu/
or https://portal.yale.edu/Login?userName=demo&password=demo to log in as the demo user.

Screenshots are also linked from the bottom of the page.

Brower compatibility: IE6, IE7, Firefox, Safari.

Working features

Channels

screenshots: browsing channels, searching channels, moving channels

Adding channels is currently performed by a popup-type menu. Users may browse channels by category or use a search menu. Once a channel is selected, the channel title and description is displayed below the choose area. Users may either click the "use it now" button, which opens the channel in focus mode in a new window, or add it permanently to their current page.

From focus mode, if the focused channel is not in the user's layout, s/he will not be presented with an "Add to layout" link. This link opens a popup-style menu that allows the user to choose which tab the channel should be added to.

Moving channels: Drag and drop. When channels are successfully dropped in a new location, an AJAX call is made to the preferences servlet to persist the new location.

Deleting channels: Performed by clicking the delete button in the channel's title bar. Instead of reloading the page, javascript code removes the channel element from the DOM and sends an AJAX request to the preferences servlet.

Tabs

screenshots: editing active tabs

Clicking an active tab transforms the tab into an editing box. Users may rename the tab, move it left or right, or delete the tab.

Columns

screenshots: editing page layout

A popup-type editing menu allows users to change the number of columns on the page and their respective widths.

Column number editing is done via a radio button menu that offers 1, 2, or 3 columns. (Higher column numbers can be offered by simply adding another radio button to the theme transform.) If the user selects a fewer number of columns than the current setting, the channels in the rightmost extra column(s) will be appended to the bottom of the new rightmost column. Any new columns will be added to the rightmost side of the page and will initially be empty.

Column widths may be adjusted by dragging a slider between the representations of the columns in the edit menu.

Unimplemented features

  • skin selection
  • resetting a layout
  • setting the active tab
  • moving columns
  • moving channels to a new tab

Technical details

Java classes

The added Java resources include two servlets and one DLM theme parameter. All resources are in the package org.jasig.portal.layout.dlm.remoting.

UpdatePreferences: Performs all preferences editing callback target actions and returns new node Ids when necessary.

RetrieveChannelListServlet: Exposes the channel registry for the session user.

AjaxPreferencesThemeParamInjector: Turns on ajax functionality.

Javascript resources

The new javascript resources are in the common directory on the media path. Eventually we might want to have a separate script path for these resources.

Dojo!

ajax-preferences.js

Other resources

An additional CSS stylesheet called {$skin}_preferences.css has been added to each of the skins. This file controls the look and feel of all the ajax menus.

Screenshots