Applying Drag-and-Drop
to XTabbedpane
By the end of this section, you will be able to create an XUI page with
<xtabbedpane>
components along with its drag and drop capability.
Skills Needed:
- Know how to create an XUI page
- Know how to use xscript element
- Know how to create xtabbedpane component
- Understand JavaScript method call
Overview
The xtabbedpane component is capable of dragging and dropping
any tab within a single tabbepane. Often this is used when reorganizing
or customizing a tabbedpane for a particular user. In order to create
the drag and drop effect, several “drag” attributes in the
xtabbedpane along with XUI JavaScript API functions and “ui-persistence”
will complete the desired functionality. Currently, tabs can only be dragged
and dropped within a single tabbedpane. In other words, tabs cannot be
exchanged between differing tabbedpanes.
In the example below, an xtabbedpane was created with several tabbedpanes.
All the tabs can be dragged and dropped to reorder the tabs and customize
them for a particular user’s environment. The example has enabled
“ui-persistence” which maintains the state of the tabbedpane
including all the tab positions as well as maintaining a selected or unselected
tab. These values are saved into client side cookies, so all browsers
will need to accept cookies.
The following is an example code of how to apply drag-and-drop to the
<xtabbedpane> component.
<%@ taglib uri="http://www.jway.com/xui" prefix="xui"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<xui:view validation="true">
<xframe>
<properties>
<title>xtabbedpane Example</title>
</properties>
<xcontentpane>
<xscript>
function initDragXTPSource(dragEvent)
{
// the mousedown function which identifies the source item and
// puts it into the Transfer Object
var transferObject = dragEvent.getSource().innerHTML;
dragEvent.setTransferObject(transferObject);
dragEvent.startDrag("hand");
}
function dragXTPExit ()
{
// only used if there is a specific action necessary when the source item is dragged
// outside of it?s source component. Because there is no dragging outside of a single
// tabbedpane, this function is left empty
}
function dragXTPEnter (dragEvent)
{
// retrieves the target component that was entered
var _transferObject = dragEvent.getSource();
}
function dragXTPOver ()
{
// in case of the hover over the target. Intentionally left blank
}
function dragXTPDrop (dragEvent)
{
// completion and transfer of the data to the target
// initially set the source and target values, then move the tab (node)
var _transferObject = dragEvent.getTransferObject();
var _target = dragEvent.getTarget();
var _source = dragEvent.getSource();
//remove the old selected node
// put the old selected node to new position (moveTab())
// Please refer to the XUI JavaScript APIs for more information.
if (_source.getType() == "XTabbedPane")
{
_target.moveTab(_source.selectedTab, _source.id, _target.highlightedIndex);
}
}
</xscript>
<xtabbedpane tab-position="top"
height="200px"
width="275px"
drag-enter="dragXTPEnter"
drag-over="dragXTPOver"
drag-exit="dragXTPExit"
drag-drop="dragXTPDrop"
drag-begin="initDragXTPSource"
ui-persistence="true">
<tab>
<xlabel text="Tab 1"/>
<xpanel/>
</tab>
<tab>
<xlabel text="Tab 2"/>
<xpanel/>
</tab>
<tab>
<xlabel text="Tab 3"/>
<xpanel/>
</tab>
</xtabbedpane>
</xcontentpane>
</xframe>
</xui:view>
The code above will produce the following screen:
Back to: Application Guide | 