Easy Flex » drag and drop http://evtimmy.com Evtim on Flex SDK Thu, 03 Nov 2011 07:18:58 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Drag and Drop Skinning in Spark http://evtimmy.com/2010/01/drag-and-drop-skinning-in-spark/ http://evtimmy.com/2010/01/drag-and-drop-skinning-in-spark/#comments Tue, 19 Jan 2010 06:16:04 +0000 Evtim http://evtimmy.com/?p=198 dndlistskinning

Customize the ItemRenderer‘s “dragging” state.  The drag indicator is the image that the user sees when they select and item and drag it away from the source container. By default the Spark List creates a drag indicator by duplicating all the ItemRenderers for the items being dragged. Therefore a natural way to customize the drag indicator is by customizing the ItemRenderer skin. Spark makes that easy by introducing the  optional “dragging” state.
Customize the List‘s optional “dropIndicator” skin part.  The drop indicator is the image that the user sees as an indicator of where the dragged items are going to be inserted in the destination container.  By default, the Spark List displays a horizontal/vertical line along the gap between the at the insertion point.  Spark makes that easy by automatically managing the “dropIndicator” optional dynamic skin part.

Customize the Drag Indicator

I’ll set up a custom ItemRenderer and I’ll flesh out the optional “dragging” state.
CustomDraggingItemRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer focusEnabled="false" 
				xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark">
 
	<s:states>
		<s:State name="normal" />            
		<s:State name="hovered" />
		<s:State name="selected" />
		<s:State name="normalAndShowsCaret"/>
		<s:State name="hoveredAndShowsCaret"/>
		<s:State name="selectedAndShowsCaret"/>
		<s:State name="dragging"/>
	</s:states>
 
	<s:Rect left="0" right="0" top="0" bottom="-1" includeIn="dragging">
		<s:stroke>
			<s:SolidColorStroke color="0xDDBBCC" weight="1"/>
		</s:stroke>
		<s:fill>
			<s:SolidColor color="0x5010CC" alpha="0.3"/>
		</s:fill>
	</s:Rect>
	<s:Label id="labelDisplay" verticalCenter="0" 
			 left="3" right="3" top="6" bottom="4" 
			 fontWeight.dragging="bold"/>
 
</s:ItemRenderer>

When the Spark List creates the duplicate ItemRenderes for the drag indicator, it will set them to their “dragging” state. Note that at that point the List’s data item will be rendered by two ItemRender instances – one to display the item in the List itself and one to display the item in the drag indicator.

Customize the Drop Indicator

I’ll set up a custom List skin. I’ll replace the “dropIndicator” skin part. Note that since the part is a dynamic part (created only during drag-and-drop operation) it’s placed inside the <fx:Declarations/> tag.
CustomDropIndicatorListSkin.mxml:

 <fx:Declarations>
    <!--- 
          Defines the appearance of the the List's drop indicator.
          To customize the drop indicator appearance, create a custom ListSkin class.
          The List's layout takes care to size and position the dropIndicator.
          The size of the <code>dropIndicator</code> is typically set to the size of the 
          gaps between the items.
          The minimum and maximum settings are typically respected only in the direction
          along the major axis (the gap axis).  For example a VerticalLayout ignores the 
          <code>minWidth</code> and <code>maxWidth</code> settings, 
          but respect <code>minHeight</code> and <code>maxHeight</code>. 
 
          @copy spark.components.List#dropIndicator
    -->
    <fx:Component id="dropIndicator">
        <s:Group minWidth="3" minHeight="3" maxWidth="3" maxHeight="3">
			<s:Line width="20" left="3" verticalCenter="2">
				<s:stroke>
					<s:SolidColorStroke color="0xFF0000"/>
				</s:stroke>
			</s:Line>
 
			<s:Path left="50" verticalCenter="-2" scaleX="-1" 
					data="M 0 5 L 30 5 26 0 40 8 26 16 30 11 0 11 Z">
				<s:stroke>
					<s:LinearGradientStroke rotation="5" weight="1">
						<s:GradientEntry color="0xD8D8D8"/>
						<s:GradientEntry color="0x000000"/>
					</s:LinearGradientStroke>
				</s:stroke>
				<s:fill>
					<s:LinearGradient rotation="90">
						<s:GradientEntry color="0xD8D8D8" />
						<s:GradientEntry color="0x888888" />
					</s:LinearGradient>
				</s:fill>
			</s:Path>
        </s:Group>
    </fx:Component>
</fx:Declarations>

Click on the image at the top of the page to see the example in action. The sources are available here. The example was compiled with the Gumbo Flex SDK build 13553.

]]> http://evtimmy.com/2010/01/drag-and-drop-skinning-in-spark/feed/ 16