Collapsible Panel

[curiousgally]

Isomorphic,

I have a requirement where I need to have a collapsible panel that can collapse in the horizontal direction as shown in the attached images.

Can you give me some ideas implementing this.


Thanks.

[albu77]

Hi
You can have a HLayout including your collapsible panel and your collapse button as members.
In the clickHandler of the button you toggle the width of the collapsible panel.

Just a quick try:

public static void testCollapse(){
		VLayout container = new VLayout();
		container.setWidth(700);
		container.setShowEdges(true);
		final HLayout collapsiblePanel = new HLayout();
		collapsiblePanel.setShowEdges(true);
		collapsiblePanel.setWidth(450);
		final VLayout myPanel = new VLayout();
		IButton collapseButton = new IButton();
		collapseButton.setWidth(15);
		
		collapseButton.addClickHandler(new com.smartgwt.client.widgets.events.ClickHandler() {
			
			@Override
			public void onClick(com.smartgwt.client.widgets.events.ClickEvent event) {
			
				if(collapsiblePanel.getWidth() == 450){
					collapsiblePanel.setWidth(25);
				}else{
					collapsiblePanel.setWidth(450);
				}
				
			}
		});
		myPanel.setWidth("100%");
		DynamicForm f = new DynamicForm();
		//f.setWidth("*");
		TextItem name = new TextItem();
		name.setTitle("Name");
		
		f.setItems(name);
		myPanel.addMember(f);
		collapsiblePanel.addMember(myPanel);
		collapsiblePanel.addMember(collapseButton);
		container.addMember(collapsiblePanel);
		RootPanel.get("container").add(container);			
		
	}

Regards

[curiousgally]

Hi,

Thanks for the help. In the sample code you have provided the panel cannot be collapsed beyond a point. The reason being the content. But in my case I need to have the whole content collapse.

I feel the way to achieve such behavior is to use the animateResize function available on Canvas to move in and move out, very similary to how a window component gets minimized in smartgwt.

Is it possible to change the edge images of a canvas at run time (which create the clickable button and the title).??

Thanks.

[curiousgally]

Any thoughts on this.

Thanks.

[harsha.galla]

Isomorphic,

Any ideas on how to achieve this. I want to achieve collapse effect by clicking on the arrow on the top of the window in the images attached in the previous post. I tried achieving it by adding images to window header and changing it on click and animate resizing which looks like the images attached. But the bottom edge is something I need to change on collapse.

Thanks.

[Isomorphic]

You're going in the right general direction, but in the images you first posted, the header is sideways when collapsed. You'll want to create that sideways header as a separate component from the window, probably a StretchImg, which will need it's own rotated image files to reproduce the effect you want. Then the Window as such and collapsed header will need to be inside a container (probably just a Canvas) that you shrink to collapse, similarly to how you're currently doing.

[harsha.galla]

Isomorphic,

I was thinking on the same lines :) . How would I capture the click event on the Grip present on the Resize bar so that I show the collapsed version of the window.

Thanks.

[harsha.galla]

I just checked the event handler on the canvas to which resizebar is present: VisibilityChangedHandler. Can we rely on this event to achieve the functionality.

Thanks.

[Isomorphic]

You probably want to create a specialized resize bar as part of this component itself rather than rely on auto-generated resizeBars from the Layout, because you want something different from the standard behavior (which is to hide completely) and you may want to collapse to the sideways appearance if the user tries to drag-resize beyond the collapsed size of the widget.