webuijsf
Tag dndContainer


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.

DndContainer component represents a "render-only" component and the JSF component tree will not reflect any changes performed on the client side.

HTML Elements and Layout

The dndContainer component renders a set of nested XHTML <div> or <span> elements.

Configuring the webuijsf:dndContainer Tag

Use 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.

Facets

Client Side Javascript Functions

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}).

getProps()

Use this function to get widget properties. Please see setProps() function for a list of supported properties.

setProps(props)

Use this function to change any of the following supported properties:

  • style

  • visible



Examples

Example 1: Create draggable image

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>

Example 2: Create draggable image

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>

Example 3: Create drop container

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 Classcom.sun.webui.jsf.component.DndContainerTag
TagExtraInfo ClassNone
Body ContentJSP
Display NameNone

Attributes
NameRequiredRequest-timeTypeDescription
bindingfalsefalsejava.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.
onDropFuncfalsefalsejava.lang.String

Function name to be executed after element is dropped into the container. Specified function must have signature function(source, nodes, copy) and its return is ignored. .

onNodeCreateFuncfalsefalsejava.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 function(data, hint) and return the following map: return { node: createdNode, data: /data that will be associated with the drag node /, typeArray: /array of types represented by this drag node /};

Note that onNodeCreateFunc function is used in at least 2 cases:

  1. creation of the new node when data is dropped into THIS container
  2. creation of the node within avatar ( moving draggable image) that will eventually be removed upon completion of the drag process. In this case hint=="avatar"
dragTypesfalsefalsejava.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.
styleClassfalsefalsejava.lang.String

CSS style class(es) to be applied to the outermost HTML element when this component is rendered.

horizontalIndicatorfalsefalsejava.lang.String

Flag indicating that the container items will be aligned horizontally, and thereby insertion point should be displayed differently
Default is false, i.e. vertical allocation will be expected

dropTypesfalsefalsejava.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.

visiblefalsefalsejava.lang.String

Use the visible attribute to indicate whether the component should be viewable by the user in the rendered HTML page.

stylefalsefalsejava.lang.String

CSS style(s) to be applied to the outermost HTML element when this component is rendered.

copyOnlyfalsefalsejava.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).

renderedfalsefalsejava.lang.StringNo Description
idfalsetruejava.lang.StringNo Description

Variables
No Variables Defined.


Output Generated by Tag Library Documentation Generator. Java, JSP, and JavaServer Pages are trademarks or registered trademarks of Sun Microsystems, Inc. in the US and other countries. Copyright 2002-4 Sun Microsystems, Inc. 4150 Network Circle Santa Clara, CA 95054, U.S.A. All Rights Reserved.