| |||||||
FRAMES NO FRAMES |
Use the webuijsf:dndContainer
tag to create a drag,
drop or drag-and drop container. Drag container will make all
contained elements draggable. Drop container will allow draggable
elements to be dropped in. Drag-and-drop has qualities of the both.
Elements within container can be selected for single and multiple selections
Elements can be dropped within the same container ( rearranged) or into other dndContainers provided that the drop containers accepts drops of this particular dragType.
For the purpose of dragging all elements are identified with
dragType
–
aimed to facilitate the acceptance check at the drop site. All
elements inherit the same type set from the container ( in this
case type set is associated with the container, and propagated down
to elements)
dragData
–
payload. The data is furnished to the drop container ( and
available to the user) when new element is created there.
When dragged, an avatar ( moving image) is created.
When dropped, the new element at
the destination is created: user can use default logic on creating
new nodes when element is dropped( deep node clone), or provide a
user's function onNodeCreateFunc
that takes care of
creating DOM elements based on the data supplied by each element (
see payload above).
User may supply a onDropFunc to add custom logic based to the drop process.
DndContainer component represents a "render-only" component and the JSF component tree will not reflect any changes performed on the client side.
The dndContainer component renders a set of nested XHTML <div>
or <span>
elements.
webuijsf:dndContainer
TagUse the dragTypes
attribute to associate any of the
nested components with a list of specified types, by setting the
attribute's value to a comma-separated list of types or an EL
expression that corresponds to a property of a backing bean. If
dragTypes is not specified, container will not behave as a source of
drag items.
Use the dropTypes
attribute to make container a drop
target and accept drops of specified types, by setting the
attribute's value to a comma-separated list of accepted types or an
EL expression that corresponds to a property of a backing bean. If
dropTypes is not specified, container will not behave as a target of
drag items.
None
When the component is rendered, a DOM object corresponding to the
component is created. To manipulate the component on the client side,
you may invoke functions on the DOM object. With reference to the DOM
id, to hide the component, invoke
document.getElementById(id).setProps({visible: false})
.
|
Use this function to get widget properties. Please see
|
|
Use this function to change any of the following supported properties:
|
This example creates a drag container that contains a draggable image within. Drag item will be associated with types “words” and “sentences”.
<webuijsf:dndContainer id="drag" dragTypes = "words, sentences" visible="true" style="position: absolute; top:125px; left: 10px; width: 200px; background: #eee repeat;" > <img src="pond.jpg" style="width:100px;"/> </webuijsf:dndContainer>
In addition to the previos example, this example will container draggable staticText component, html text, and textArea.
<webuijsf:dndContainer id="drag" dragTypes = "words, sentences" visible="true" style="position: absolute; top:125px; left: 10px; width: 200px; background: #eee repeat;" > <img src="pond.jpg" style="width:100px;"/> <webuijsf:staticText id = "t1" text = "and they say"/>
some text <webuijsf:textArea text = "content" columns="3" rows = "3" label ="Directions:"/> </webuijsf:dndContainer>
This example creates container that will accept drops of items with types “words” and “sentences”. Container will also display an image, but the image will not be draggable.
<webuijsf:dndContainer id="drag" dropTypes = "words, sentences" visible="true" style="position: absolute; top:125px; left: 10px; width: 200px; background: #eee repeat;" > <img src="pond.jpg" style="width:100px;"/> </webuijsf:dndContainer>
Tag Information | |
Tag Class | com.sun.webui.jsf.component.DndContainerTag |
TagExtraInfo Class | None |
Body Content | JSP |
Display Name | None |
Attributes | ||||
Name | Required | Request-time | Type | Description |
binding | false | false | java.lang.String | A ValueExpression that resolves to the UIComponent that corresponds to this tag. This attribute allows the Java bean that contains the UIComponent to manipulate the UIComponent, its properties, and its children. |
onDropFunc | false | false | java.lang.String | Function name to be executed after element is dropped into the container.
Specified function must have signature |
onNodeCreateFunc | false | false | java.lang.String | When item is inserted or dropped into a container, its data is used for creation of the new element within this container. Default implementation creates /span/ with innerHTML={supplied data}.
onNodeCreateFunc attribute specifies optional Javascript function name that
provides logic to create new drag item based on the data supplied.
It must create a DOM-node that will visually represent supplied data and
must have signature
Note that onNodeCreateFunc function is used in at least 2 cases:
|
dragTypes | false | false | java.lang.String | All items within a container will advertise their types. These types are used to check whether a drop container is accepting a drop of that type(s). The dragTypes attribute contains a comma-separated list of types that will be automatically associated with all direct children of the container. The default value for the attribute is null. |
styleClass | false | false | java.lang.String | CSS style class(es) to be applied to the outermost HTML element when this component is rendered. |
horizontalIndicator | false | false | java.lang.String | Flag indicating that the container items will be aligned horizontally,
and thereby insertion point should be displayed differently |
dropTypes | false | false | java.lang.String | The dropTypes attribute contains a comma-separated list of types that will be accepted for drop at this container. The list is empty by default. |
visible | false | false | java.lang.String | Use the visible attribute to indicate whether the component should be viewable by the user in the rendered HTML page. |
style | false | false | java.lang.String | CSS style(s) to be applied to the outermost HTML element when this component is rendered. |
copyOnly | false | false | java.lang.String | Flag indicating that only copies of the items will be made when item is dragged outside of this container.The default value of false will allow user to decide whether items are moved ( regular drag) or copied ( Ctrl-drag) The value of true will always copy items ( regular drag or Ctrl-drag). |
rendered | false | false | java.lang.String | No Description |
id | false | true | java.lang.String | No Description |
Variables | No Variables Defined. |
| |||||||
FRAMES NO FRAMES |