Lots of Drag/Drop, SectionStack issues with 3.0

[amcculley]

SmartGwtEE 3.0 Eval from 11/10/2011

Have 2 VLayouts side by side. The left VLayout has a SectionStack with draggable widgets (the code for these are below). The right VLayout is just a simple VLayout for now where I would like to eventually drop items dragged over from the left VLayout's SectionStack.

Issue #1:
Despite following the examples and the docs, I can't get any DropHandlers to fire except for the DropOverHandler. I've tried setting my DraggablePieces to canDragReposition(true) and canDrag(true) and the result is the same for both.

Issue #2:
FIXED by setting Cursor on all members in Draggable Layout.
The drag cursor does not work for my DraggablePieces. The drag cursor shows correctly only if the mouse pointer is EXACTLY on the border of the DraggablePiece. I suspect it has something to do with the Img and Label inside of the Piece taking up all the internal space and their cursors not being set correctly. The bigger problem, however, is that if I use canDragReposition instead of canDrag, the cursor only shows up on the border until the piece is actually dragged anywhere and then it doesn't even show up on the border any more. If set to canDrag instead of canDragReposition, it always shows up but only on the border - even when moved. *EDIT* Setting cursor on the Img and Label fixes the one problem but the cursor still ceases to function correctly on the border... even when I set the cursor to Cursor.MOVE on the entire DraggablePiece (which extends HLayout).

Issue #3:
DraggablePieces moved from the SectionStack cause the SectionStack to no longer function correctly. The sections that my DraggablePieces are in will no longer fully collapse because the DraggablePiece that was moved is always visible.

Issue #4:
My SectionStack isn't animating when sections expand/collapse. Tried on IE and Firefox. Tried both visibility modes.

rightVLayout code

		final VLayout rightVLayout = new VLayout();
		rightVLayout.setSize("66%", "100%");
		rightVLayout.setShowEdges(true);
		rightVLayout.setCanAcceptDrop(true);
		rightVLayout.setCanDropComponents(false);
		
		rightVLayout.addDropOverHandler(new DropOverHandler() {  
            public void onDropOver(DropOverEvent event) {  
//                if (willAcceptDrop())  
                    rightVLayout.setBackgroundColor("#ffff80");  
            }  
        });  
        
		rightVLayout.addDropOutHandler(new DropOutHandler() {  
            public void onDropOut(DropOutEvent event) {  
                rightVLayout.setBackgroundColor("#ffffff");  
            }  
        });  
       
		rightVLayout.addDropHandler(new DropHandler() {  
            public void onDrop(DropEvent event) {
            	SC.say("Dropped a " + ((DraggableProgramPiece) EventHandler.getDragTarget()).getName());  
            }  
        });

DraggableProgramPiece code

public class DraggableProgramPiece extends HLayout {
	private String name;
	
	public DraggableProgramPiece(String imgSrc, String pieceName, int height) {
		super();
		
		name = pieceName;
		
		Img img = new Img();
		img.setSrc(imgSrc);
		img.setSize(height + "px", height + "px");
		
		Label label = new Label(pieceName);
		label.setSize("*", height +"px");
		label.setStyleName("DraggablePieceLabel");

		this.setSize("100%", height +"px");
		this.setStyleName("DraggablePiece");
		this.addMember(img);
		this.addMember(label);
//		this.setCanDragReposition(true);
		this.setCanDrag(true);
        this.setCanDrop(true);
        this.setDragAppearance(DragAppearance.TARGET);
        this.setDragOpacity(60);
	}
	
	public String getName() {
		return name;
	}
}

leftVLayout and SectionStack code

		VLayout leftVLayout = new VLayout();
		leftVLayout.setSize("34%", "100%");
//		vl2.setShowEdges(true);
//		vl2.setPadding(8);
//		vl2.setMembersMargin(8);
		
		SectionStack signalSectionStack = new SectionStack();
		signalSectionStack.setAnimateSections(true);
		signalSectionStack.setItemStartIndent(8);
		signalSectionStack.setItemEndIndent(8);
		signalSectionStack.setMembersMargin(8);
		signalSectionStack.setCanReorderSections(false);
		signalSectionStack.setCanResizeSections(false);
		signalSectionStack.setSize("100%", "100%");

		DraggableProgramPiece msg1 = new DraggableProgramPiece("64/sms.png", "SMS", 48);
		DraggableProgramPiece msg2 = new DraggableProgramPiece("64/mail.png", "Email", 48);
		DraggableProgramPiece msg3 = new DraggableProgramPiece("64/heart.png", "Favorite", 48);
		DraggableProgramPiece msg4 = new DraggableProgramPiece("64/link.png", "Portal", 48);

		leftVLayout.addMember(signalSectionStack);
		
		page4Layout.addMember(leftVLayout);
		page4Layout.addMember(rightVLayout);

I have 3 Sections in the SectionStack (with 1 of them being shown above) and other DraggableProgramPieces but I can't show the code for those because the names would give some stuff away that I can't share. They are exactly the same except for the names and images are different.

[amcculley]

FollowUp:
The onDropHandler works if the layout is set to canDropComponents(true). This handler does not work if canDropComponents(false) is set.

[Isomorphic]

1. sound like you've figured out

2. you do need to set drag and drop settings directly on the components that the mouse is over. Otherwise only the parent is draggable wherever it is visible, which is an intentional effect (eg, a draggable window should not cause components within it to be draggable).

3. the Layout.canDropComponents behavior means these are being added as Layout members, effectively, outside of any section. You would have to implement your own DropHandler if you want to add them to the current section (this is however a good idea for the future default behavior of SectionStack)

4. animation is currently only enabled when visibilityMode is "multiple"

[amcculley]

#1. This isn't figured out. The documentation/API states:

If you want to completely suppress the builtin drag and drop logic, but still receive drag and drop events for your own custom implementation, set canAcceptDrop to true and canDropComponents to false on your Layout.

However, when canAcceptDrop(true) and canDropComponents(false), none of the drop callbacks get called.

#2. That makes sense. We have this working now by setting the cursor to the "drag cursor" for every member in the draggable layout's canvas.

#3. I'll have to play with this more. As soon as I click and drag a piece, it messes up the SectionStack ... whether or not it is dropped anywhere legal or not. It "snaps" back to the SectionStack just fine so I would assume it would also not mess the SectionStack up but it seems like we'll have to code that in.

#4. Setting the visibility mode doesn't change anything for animations - it fails to animate with either visibility mode.

[amcculley]

So - does Drag and Drop even work for anything other than classes that are Img or extend Img?

I've spent several days trying to do something that I would think is kind of easy - only to find out that I don't think it is possible.

I have a class that extends HLayout with 2 Img's in it and a Label. The entire class is set to canDrag, canDrop, and so forth. I've tried combinations of canDragReposition as well. When I drag the widget, everything in the layout moves with it as I would expect.

However, there seem to be a bunch of errors.

Issue #1:
If dropArea.setCanDropComponents(false) is set, then the onDrop(DropEvent) callback is never called when anything is dropped in dropArea. If it is set to true or not called at all, the onDrop(DropEvent) callback is fired.

Issue #2:
StackSections containing anything with setCanDragReposition(true) and using DragAppearance.TARGET causes the StackSection's layout to get all messed up. Unless the dragged widget is dropped successfully somewhere, the StackSection will never close completely and always show the dragged widget under its section even when the section is collapsed. If DragAppearance is TRACKER or OUTLINE or if setCanDrag(true) is set instead of setCanDragReposition being set, the StackSection's layout doesn't get messed up.

Issue #3:
If you drag a widget with DragAppearance TRACKER or OUTLINE over and see the dropLine but then move the widget back and release the mouse anywhere outside the boundaries of the original widget, the dropLine will stay in the dropArea. But, if you release it on top of the original widget, the dropLine disappears. If DragApperance is set to TARGET, move the widget over to drop area and see the dropLine show up and then move the widget anywhere on the screen outside of the drop area, the dropLine will always remain until some other widget is dropped successfully in that drop area.

Issue #4:
Due to the issues above, I cannot get the tweaked versions of the Drag Create or Drag Tracker showcase examples to work for me. I'm not sure if it has to do with using widgets that extend HLayout instead of Img or if it has to do with trying to drag widgets from one nested containing layout to another. I'm going to try and create a new test project from scratch and see what happens. If the same problems persist, I'll post the code.

[amcculley]

Started over from scratch. Cleared cache.

Having same issues. Here is all the code:

The "DragWidget" which is a Layout with 2 images and a label.

package com.smartgwt.test.client;

import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.Cursor;
import com.smartgwt.client.types.DragAppearance;
import com.smartgwt.client.util.EventHandler;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.layout.HLayout;

public class DragWidget extends HLayout {
	String myImgSource;
	String myName;
	int myHeight;
	
	public DragWidget(String imgSrc, String widgetName, int widgetHeight) {
		myImgSource = imgSrc;
		myName = widgetName;
		myHeight = widgetHeight;
		
		Img dragImg = new Img();
		dragImg.setSrc("drag.png");
		dragImg.setSize(myHeight / 2 + "px", myHeight / 2 + "px");
		dragImg.setLayoutAlign(Alignment.CENTER);
		dragImg.setCursor(Cursor.MOVE);
		dragImg.setOpacity(35);
		
		Img iconImg = new Img();
		iconImg.setSrc(imgSrc);
		iconImg.setSize(myHeight + "px", myHeight + "px");
		iconImg.setCursor(Cursor.MOVE);
		
		Label label = new Label(myName);
		label.setSize("*", myHeight +"px");
		label.setStyleName("DraggablePieceLabel");
		label.setCursor(Cursor.MOVE);
		
		this.setSize("100%", "1px");
		this.setStyleName("DraggablePiece");
		this.setPadding(4);
		this.setMembersMargin(8);
		this.addMember(dragImg);
		this.addMember(iconImg);
		this.addMember(label);
		this.setCanDrop(true);
		this.setCanDrag(true);
//		this.setCanDragReposition(true);
		this.setDragType("DragExtHLayout");
//        this.setDragAppearance(DragAppearance.TARGET);
        this.setDragAppearance(DragAppearance.TRACKER);
        this.setDragOpacity(75);
        this.setCursor(Cursor.MOVE);
	}
	
	@Override
	protected boolean setDragTracker() {
		EventHandler.setDragTracker(Canvas.imgHTML(myImgSource, myHeight, myHeight));
		return false;
	}

	public String getMyName() {
		return myName;
	}
	
	public String getMySource() {
		return myImgSource;
	}
	
	public int getMyHeight() {
		return myHeight;
	}
}

Here is my EntryPoint containing the DropArea and SectionStack holding the DragWidgets.

package com.smartgwt.test.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.VisibilityMode;
import com.smartgwt.client.util.EventHandler;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.widgets.events.DropEvent;
import com.smartgwt.client.widgets.events.DropHandler;
import com.smartgwt.client.widgets.events.DropOutEvent;
import com.smartgwt.client.widgets.events.DropOutHandler;
import com.smartgwt.client.widgets.events.DropOverEvent;
import com.smartgwt.client.widgets.events.DropOverHandler;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.SectionStackSection;
import com.smartgwt.client.widgets.layout.VLayout;

public class AppEntryPoint implements EntryPoint {
	HLayout rootLayout;
	
	@Override
	public void onModuleLoad() {
		Page.setAppImgDir("[APP]/images/");
		
		final VLayout rightVLayout = new VLayout();
		rightVLayout.setSize("66%", "100%");
		rightVLayout.setMembersMargin(16);

		final VLayout dropArea = new VLayout();
		dropArea.setSize("100%", "75%");
		dropArea.setShowEdges(true);
		dropArea.setCanAcceptDrop(true);
//		dropArea.setCanDropComponents(false);
		dropArea.setDropTypes("DragExtHLayout");
		dropArea.setPadding(8);
		dropArea.setMembersMargin(8);

		rightVLayout.addMember(dropArea);

		dropArea.addDropOverHandler(new DropOverHandler() {
			public void onDropOver(DropOverEvent event) {
				dropArea.setBackgroundColor("#fceeaf");
			}
		});

		dropArea.addDropOutHandler(new DropOutHandler() {
			public void onDropOut(DropOutEvent event) {
				dropArea.setBackgroundColor("#ffffff");
			}
		});

		dropArea.addDropHandler(new DropHandler() {
			public void onDrop(DropEvent event) {
				String name = ((DragWidget) EventHandler.getDragTarget()).getMyName();
				String src = ((DragWidget) EventHandler.getDragTarget()).getMySource();
				int height = ((DragWidget) EventHandler.getDragTarget()).getMyHeight();
				
				dropArea.addMember(new DragWidget(src, name, height));
			}
		});

		VLayout leftVLayout = new VLayout();
		leftVLayout.setSize("34%", "100%");

		SectionStack signalSectionStack = new SectionStack();
		signalSectionStack.setVisibilityMode(VisibilityMode.MULTIPLE);
		signalSectionStack.setOverflow(Overflow.AUTO);
		signalSectionStack.setAnimateSections(true);
		signalSectionStack.setItemStartIndent(8);
		signalSectionStack.setItemEndIndent(8);
		signalSectionStack.setMembersMargin(8);
		signalSectionStack.setCanReorderSections(false);
		signalSectionStack.setCanResizeSections(false);
		signalSectionStack.setSize("100%", "75%");

		leftVLayout.addMember(signalSectionStack);

		DragWidget msg1 = new DragWidget("64/mobile_phone.png", "SMS", 36);
		DragWidget msg2 = new DragWidget("64/mail.png","Mail", 36);
		DragWidget msg8 = new DragWidget("64/email.png","Email", 36);
		DragWidget msg3 = new DragWidget("64/heart.png","Favorite", 36);
		DragWidget msg4 = new DragWidget("64/www.png", "Portal", 36);
		DragWidget msg5 = new DragWidget("64/facebook.png", "Facebook", 36);
		DragWidget msg6 = new DragWidget("64/twitter.png", "Twitter", 36);
		DragWidget blk = new DragWidget("64/calendar.png", "New Program Segment", 36);

		SectionStackSection pricingSection = new SectionStackSection();
		pricingSection.setTitle("Section 1");
		pricingSection.addItem(msg1);
		pricingSection.addItem(msg2);
		pricingSection.addItem(msg3);

		SectionStackSection loadControlSection = new SectionStackSection();
		loadControlSection.setTitle("Section 2");
		loadControlSection.addItem(msg4);
		loadControlSection.addItem(msg5);

		SectionStackSection messagingSection = new SectionStackSection();
		messagingSection.setTitle("Section 3");
		messagingSection.addItem(msg6);
		messagingSection.addItem(msg8);
		messagingSection.addItem(blk);

		signalSectionStack.setSections(pricingSection, loadControlSection, messagingSection);

		rootLayout = new HLayout();
		rootLayout.setSize("100%", "100%");
		rootLayout.addMember(leftVLayout);
		rootLayout.addMember(rightVLayout);
		rootLayout.draw();
	}

}

I cannot get the showcase examples to work as they are written nor can I get them to work trying all sorts of combinations of setCanDrag, setCanDragReposition, setCanDropComponents, etc.

In the show case examples, everything is set to setCanDrag(true) and setCanDrop(true). setCanDragReposition isn't even mentioned in the source.

On the drop area, it is simply setCanAcceptDrop(true) and there is no mention of setCanDropComponents.

When I do it as shown in the showcase, my original DragWidget always disappears from my SectionStack and I get two of them in the drop area (because I'm creating a new one on drop). Even without creating a new one, the big problem is I cannot prevent the original DragWidget from being moved/destroyed/etc from my SectionStack.

[amcculley]

I was able to work my way around some of these issues for those interested. I'll post the code at the bottom. There are still 2 issues remaining:

Issue #1:
SectionStack layouts getting messed up.
If DragWidget is set to DragAppearance(TARGET), whenever the drag widget is moved, it will cause the StackSection's layout to get messed up and not be able to collapse correctly. If I set the DragAppearance to OUTLINE or TRACKER, this doesn't happen.

Issue #2:
DropLines staying in the drop area despite the widget not being dropped in the drop area.
If you move a drag widget over a drop area and then change your mind and move it back, the dropLine stays in the drop area. I got around this by giving the drag widget's access to the drop area and implementing onDragRepositionStop and calling dropArea.hideDropLine() explicitly.

Issue #3:
Not really a fault of the api, but wish this were a bit easier to figure out. I was trying to get the drag widget's to be added to the dropArea but not disappear from the section stack's they were coming from. This way, I could add multiples of a drag Widget to the drop area. I accomplished this by implementing the onDrop callback for the drop area. In there, I immediately call event.cancel(), create a new member and add it, and then explicitly call hideDropLine() on the drop area.

Here is my test code for anyone interested along with a screenshot as to what it all looks like.

EntryPoint class

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.widgets.layout.HLayout;

public class AppEntryPoint implements EntryPoint {
	HLayout rootLayout;
	DropArea dropArea;
	DragWidgetSectionStack widgetStack;
	
	@Override
	public void onModuleLoad() {
		Page.setAppImgDir("[APP]/images/");
		
		rootLayout = new HLayout();
		rootLayout.setSize("50%", "50%");
		rootLayout.setPadding(16);
		rootLayout.setMembersMargin(16);

		dropArea = new DropArea();
		widgetStack = new DragWidgetSectionStack(dropArea);
				
		rootLayout.addMember(widgetStack);
		rootLayout.addMember(dropArea);
		
		rootLayout.draw();
	}
}

DragWidget

import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.Cursor;
import com.smartgwt.client.types.DragAppearance;
import com.smartgwt.client.util.EventHandler;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.events.DragRepositionStartEvent;
import com.smartgwt.client.widgets.events.DragRepositionStartHandler;
import com.smartgwt.client.widgets.events.DragRepositionStopEvent;
import com.smartgwt.client.widgets.events.DragRepositionStopHandler;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.Layout;

public class DragWidget extends HLayout {
	String myImgSource;
	String myName;
	int myHeight;
	
	Img dragImg;
	Img icon;
	Label label;
	
	Layout myDropArea;
	
	public DragWidget(String imgSrc, String widgetName, int widgetHeight, Layout dropArea) {
		myImgSource = imgSrc;
		myName = widgetName;
		myHeight = widgetHeight;
		myDropArea = dropArea;
		
		dragImg = new Img();
		dragImg.setSrc("drag.png");
		dragImg.setSize(myHeight / 2 + "px", myHeight / 2 + "px");
		dragImg.setLayoutAlign(Alignment.CENTER);
		dragImg.setCursor(Cursor.MOVE);
		dragImg.setOpacity(35);
		
		Img icon = new Img();
		icon.setSrc(imgSrc);
		icon.setSize(myHeight + "px", myHeight + "px");
		icon.setCursor(Cursor.MOVE);
		
		label = new Label(myName);
		label.setSize("*", myHeight +"px");
		label.setStyleName("DraggablePieceLabel");
		label.setCursor(Cursor.MOVE);
		
		this.setSize("100%", "1px");
		this.setStyleName("DraggablePiece");
		this.setPadding(4);
		this.setMembersMargin(8);
		
		this.setDragAppearance(DragAppearance.OUTLINE);
        this.setDragOpacity(75);
        this.setShowDragShadow(true);
        this.setCursor(Cursor.MOVE);
        
//		this.setCanDrag(true);
		this.setCanDragReposition(true);
		this.setCanDrop(true);
		
		this.addMember(dragImg);
		this.addMember(icon);
		this.addMember(label);

        this.addDragRepositionStartHandler(new DragRepositionStartHandler() {
			@Override
			public void onDragRepositionStart(DragRepositionStartEvent event) {
//				setStyleName("DraggablePieceDragging");
			}
        });
        
        this.addDragRepositionStopHandler(new DragRepositionStopHandler() {
			@Override
			public void onDragRepositionStop(DragRepositionStopEvent event) {
//				setStyleName("DraggablePiece");
				myDropArea.hideDropLine();
			}
        });
	}
	
	public String getMyName() {
		return myName;
	}
	
	public String getMySource() {
		return myImgSource;
	}
	
	public int getMyHeight() {
		return myHeight;
	}
	
	@Override
	protected boolean setDragTracker() {
		EventHandler.setDragTracker(Canvas.imgHTML(myImgSource, myHeight, myHeight));
		return false;
	}
}

DropArea

import com.smartgwt.client.util.EventHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.events.DropEvent;
import com.smartgwt.client.widgets.events.DropHandler;
import com.smartgwt.client.widgets.events.DropOutEvent;
import com.smartgwt.client.widgets.events.DropOutHandler;
import com.smartgwt.client.widgets.events.DropOverEvent;
import com.smartgwt.client.widgets.events.DropOverHandler;
import com.smartgwt.client.widgets.layout.VLayout;

public class DropArea extends VLayout {
	public DropArea() {
		setSize("50%", "100%");
		setPadding(8);
		setMembersMargin(8);
		setAnimateMembers(true);
		setShowEdges(true);
		
		setCanAcceptDrop(true);
//		setCanDropComponents(true);
//		setCanDropComponents(false);
		
		addDropOverHandler(new DropOverHandler() {
			public void onDropOver(DropOverEvent event) {
				setBackgroundColor("#fceeaf");
			}
		});

		addDropOutHandler(new DropOutHandler() {
			public void onDropOut(DropOutEvent event) {
				setBackgroundColor("#ffffff");
			}
		});

		addDropHandler(new DropHandler() {
			public void onDrop(DropEvent event) {
				event.cancel();
				
				String name = ((DragWidget) EventHandler.getDragTarget()).getMyName();
				String src = ((DragWidget) EventHandler.getDragTarget()).getMySource();
				int height = ((DragWidget) EventHandler.getDragTarget()).getMyHeight();
				
				SC.say("onDrop(DropEvent) called for " + name);
				addMember(new DropWidget(src, name, height), getDropPosition());
				hideDropLine();
			}
		});
	}
}

DragWidgetSectionStack

import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.VisibilityMode;
import com.smartgwt.client.widgets.layout.Layout;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.SectionStackSection;

public class DragWidgetSectionStack extends SectionStack {
	public DragWidgetSectionStack(Layout dropArea) {
		setSize("50%", "100%");
		setShowEdges(true);
		setVisibilityMode(VisibilityMode.MULTIPLE);
		setOverflow(Overflow.AUTO);
		setAnimateSections(true);
		setAnimateMembers(true);
		setShowDragPlaceHolder(true);
		setItemStartIndent(8);
		setItemEndIndent(8);
		setMembersMargin(8);
		setCanReorderSections(false);
		setCanResizeSections(false);
		
		DragWidget msg1 = new DragWidget("64/mobile_phone.png", "SMS", 36, dropArea);
		DragWidget msg2 = new DragWidget("64/mail.png","Mail", 36, dropArea);
		DragWidget msg8 = new DragWidget("64/email.png","Email", 36, dropArea);
		DragWidget msg3 = new DragWidget("64/heart.png","Favorite", 36, dropArea);
		DragWidget msg4 = new DragWidget("64/www.png", "Portal", 36, dropArea);
		DragWidget msg5 = new DragWidget("64/facebook.png", "Facebook", 36, dropArea);
		DragWidget msg6 = new DragWidget("64/twitter.png", "Twitter", 36, dropArea);
		DragWidget blk = new DragWidget("64/calendar.png", "New Program Segment", 36, dropArea);
		
		SectionStackSection pricingSection = new SectionStackSection();
		pricingSection.setTitle("Section 1");
		pricingSection.addItem(msg1);
		pricingSection.addItem(msg2);
		pricingSection.addItem(msg3);

		SectionStackSection loadControlSection = new SectionStackSection();
		loadControlSection.setTitle("Section 2");
		loadControlSection.addItem(msg4);
		loadControlSection.addItem(msg5);

		SectionStackSection messagingSection = new SectionStackSection();
		messagingSection.setTitle("Section 3");
		messagingSection.addItem(msg6);
		messagingSection.addItem(msg8);
		messagingSection.addItem(blk);

		setSections(pricingSection, loadControlSection, messagingSection);
	}
}

[kwtalley]

has issue #4 been solved for VisibilityMode.MUTEX ?

http://code.google.com/p/smartgwt/issues/detail?id=289