Selection Tray Widget lets you select objects and collect them in a tray. The widget is based on Prototype javascript library.
- Has two modes of interaction--thumbnail and list
- Customizable look and feel
Add this code to the head section of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css" title="currentStyle" media="screen">
@import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>";
</style>
<script src='/dekohportal/dwr/engine.js'>
</script>
<script src='/dekohportal/dwr/util.js'>
</script>
<script type='text/javascript' src='<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>'>
</script>
<script type='text/javascript' src='<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","selectionTray","selectionTray.js")%>'>
</script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "widget","dialog","dialog.js")%>">
</script>
Add the following code where you want to invoke the Selection Tray on the page:
<table>
<tr>
<td>
<div id='dekoh_selectedObjectTray'></div>
</td>
<td>
<div id='dekoh_viewObjectTray'>
<!—setting the list header- -- >
<div id='dekoh_viewObjectTray_ListHeader' style="display:none;">
<table>
<tr>
<th width="40"> </th>
<th width="200"> Title</th>
<th> Description</th>
</tr>
</table>
</div>
<div class='dekoh_selectableObjects' id="OBJECT_ID_">
<!—setting the thumbnail section- -- >
<div class='dekoh_OL_ObjthumbnailView' style="display:none;" id="coll_thumb_OBJECT_ID_">
<!—put ur html code here to show thumbnail?
<div style="width:100px;height:100px;background:#eee;border:1px #000 solid;"></div>
</div>
<!—setting the list section- -- >
<div class='dekoh_OL_ObjListView' style="display:none;"id="coll_list__OBJECT_ID_">
<!—put ur html code here to show list?
<table>
<tr>
<td width="40"> </td>
<td width="200"> Title of OBJECT_ID </td>
<td> Description of OBJECT_ID </td>
</tr>
</table>
</div>
</div>
</div>
</td>
</tr>
</table>
The JavaScript to initialize the widget is:
<script type="text/javascript">
//<![CDATA[
// create the unselected object array
unselectedObjArray[unselectedObjArray.length] = new selTrayObj('OBJECT_ID_', true, 'OBJECT_URL_", OBJECT_NAME_"', 'OBJECT_CLICK_URL_', 'OBJECT_TYPE_(collection or simple object)');
//initialize the selection tray where the objects are going to get collected
var selTray = new SelectionTray('selTray', {selectMode:'dnd',actionMode:'edit', showSelectedItemUrl:'URL_TOSHOW_COLLECTED_OBJECT'});
//initialize the object tray
var objTray = new ObjectsTray('objTray', {selectionMode:'dnd',actionMode:'edit', showItemsOnPage:'TOTAL_ITEMS_TOSHOW',currentItemsPage:'CURRENT_PAGE',totalItems:'TOTAL_ITEMS',droppableSection:'dekoh_SelectedObjTrayDiv', showMode:'thumbnail', nextPageUrl:'NEXT_PAGE_URL_',prevPageUrl:'PREV_PAGE_URL'});
//]]>
</script>
Note: Place the JavaScript code after the div element in the page so that the element is registered in the DOM.
| Options | Since | Description | Default |
|---|
| id | V1.0 | Id of the selection tray initialized | |
|---|
| Options | Since | Description | Default |
|---|
| selectionMode | V1.0 | Set the value as ‘dnd’ or ‘click’ | ‘dnd’ |
| showSelectedItemUrl | V1.0 | Set the view url if user need to go to some other page | null |
| showMode | V1.0 | Set the value as ‘list’ or ‘thumbnail’ | thumbnail |
| showClicktoSelectAction | V1.0 | Show or hide the click to select mode | true |
| getItemsLabel | V1.0 | Label for bring all | ‘bring all’ | |
| Function | Parameters | Description |
|---|
| changeSelectionMode | - | Change the mode of the selection from dnd to click and vice versa |
| selectAllObjects | - | Selects all the objects on the object tray |
| removeSelectedObject | id | Remove the selected object |
| getSelectedDioIDs | id | Get the dioId of the selected object |
| getSelectionTrayItems | - | Returns all the selection tray objects |
| showRemoveEffect | - | The effect shown when the object is removed |
| addMessageInTray | - | Add the message in the tray when there are no objects in the tray |
| removeMessageInTray | - | Remove the message from the tray |
| removeAllSelectionObject | - | Remove all the selection object in the tray |
| processSelectedObject | - | After the object is selected, this method does processing |
| selectObject | objEleId |
isCollection
objSrc
objName
objUrl
objType|
objEle- Object Div element
objSrc- the image source to be shown
objName- object name|Show the object information on mouse-over
| removeObjInfo | objEle | Remove the object information on mouse-out |
| toggleView | - | Collapse or expand the selection tray |
| Options | Since | Description | Default |
|---|
| id | V1.0 | Id of the object tray initialized | |
|---|
| Options | Since | Description | Default |
|---|
| totalItems | V1.0 | Total number of items | null |
| showMode | V1.0 | Set the value as ‘list’ or ‘thumbnail’ | thumbnail |
| showItemsOnPage | V1.0 | Number of items to be shown on the page | null |
| currentItemsPage | V1.0 | Current items on the page | null |
| droppableSection | V1.0 | Droppable section where the objects will be dropped | null |
| actionMode | V1.0 | Set the value as ‘view’ or ‘edit’ | view |
| selectionMode | V1.0 | Set the value as ‘dnd’ or ‘click’ | ‘dnd’ |
| prevPageUrl | V1.0 | Previous page url | Null |
| nextPageUrl | V1.0 | Next page url | Null |
| customActions | V1.0 | Set the custom code in html format | null |
| showToolbar | V1.0 | Set the toolbar to show up or not | true | |
| Function | Parameters | Description |
|---|
| handleMouseDownSelectedObj | Element-object element e-event | Handle the mouse down event on the focused object |
| handleMouseUpSelectedObj | - | Handle the mouse up event on the focused object |
| handleMouseOverOnObj | objEle | Handle the mouse over event on the focused object |
| handleMouseOutOnObj | objEle | Handle the mouse out event on the focused object |
| changeSelectionMode | - | Change the selection mode ‘dnd’ or ‘click’ |
| loadAllUnselectedObjects | - | Load all the unselected objects |
| toggleThumbnailObjView | mode | Change to the thumbnail view |
| toggleListObjView | mode | Change to list view |
| makeObjDraggable | id | Make the object draggable when in the drag and drop mode |
| makeObjUnDraggable | id | Remove the draggability from the object |
| showObjectView | View persist | Show the objects in a specific view |
| getObjectTrayItems | - | Get all the object tray objects |
| persistView | view | Persist the view of either the list or thumbnail | |
The DWR method mapping XML is included in web.xml
<init-param>
<param-name>config-selectionTray</param-name>
<param-value>widgets/selectionTray/dwr-selectionTray.xml</param-value>
</init-param>
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="selectionTray">
<param name="class" value="dekoh.portal.widget.selectionTray.SelectionTrayUtil"/>
<include method="addToSelectionTray"/>
<include method="getSelectedSelectionTrayObject"/>
<include method="getSelectedSelectionTrayObjectOfMedia"/>
<include method="deleteFromSelectionTray"/>
<include method="deleteAllFromSelectionTray"/>
<include method="setUserViewPreference"/>
</create>
<convert converter="bean" match="dekoh.portal.widget.selectionTray.SelectionTrayObject"/>
</allow>
</dwr>
We need to ensure that all the parameters can be converted. Many of the types provided by the JDK are enabled for you, but you need to give DWR permission to convert your own bean. Generally this means that JavaBean parameters will need a <convert ...> entry.
| Convert-class | dekoh.portal.widget.selectionTray.SelectionTrayObject | |
| Description | JavaBean to holding the information about the digitalObject in selection tray. |
Each class on which we execute methods, needs a <create ...> entry. There are several types of creator. The most common ones use either the 'new' keyword or the Spring framework. For more information, see the Creator documentation.
| ClassName | dekoh.portal.widget.selectionTray.SelectionTrayObject |
| Description | Class will provide the functionality to cache the given digital object metadata and serve when requested. Created selection object are cached in ServletContext with attribute name “slectionObjectListParameter'. |
| Method name | Functionality |
|---|
| addToSelectionTray | Creates the selectionTrayObject from the given details and caches under the current accessing user. |
| getSelectedSelectionTrayObject | Get the list of all selectionTrayObjects of the current accessing user. |
| getSelectedSelectionTrayObjectOfMedia | Get the list of all selectionTrayObjects of the current accessing user of given media type. |
| deleteFromSelectionTray | Deletes the given digital Object selection tray object from cache. |
| deleteAllFromSelectionTray | Clears the selection tray cache for the current accessing user. | |
Dekoh Portal Ver 0.4.2 or later.
