Current status
A demo is available at: https://portaldev.its.yale.edu/YaleInfo2dotoh/
or https://portaldev.its.yale.edu/YaleInfo2dotoh/Login?userName=demo&password=demo to log in as the demo user.
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
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
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.
Screenshots
| There are no images attached to this page. |
Technical details
At Yale, we've been working to integrate some Ajax-style interface features into uPortal 2.5 (DLM + Rutger's xhtml theme). I'd initially used Scriptaculous for the proof of concept, but I think in the long run dojo is a better choice.
I've download the code (Pete Boysen) posted and integrated the drag and drop portlets part into our version. We currently have mostly-working features to add new channels, add/remove columns, sort columns, and add and rename tabs.
We're currently using two servlets for ajax calls. The first is a preferences servlet that persists all the additions/moves/etc. It accepts the same parameters the built-in preferences page uses. For operations that create a new node, the servlet sends back the ID of the new node.� The second retrieves the list of available channels for the add channel menu.