split panel

The split panel is something that is lacking in the google web toolkit.
Although it is not included in the GWT package, one can easily make a split panel as all the necessary stuff are already there.

This split panel can be set to be vertical, or horizontal.
The two panels are extended using SimplePanel as to wrap your widget within a div element.

Use either vertical or horizontal.

Just apply some css to add some aesthetics.

Here's the code.

package GWTApplication.client;

import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.MouseListener;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.HorizontalPanel;

import com.google.gwt.user.client.DOM;
/**
*
* @author mbaricuatro
*/
public class SplitPanel extends SimplePanel implements MouseListener{

public static int VERTICAL = 1;
public static int HORIZONTAL = 2;

private static int ALIGNMENT;
private boolean isDragging = false;

private Widget mainPanel;

private SimplePanel panel1 = new SimplePanel();
private SimplePanel panel2 = new SimplePanel();

private Label divider = new Label(" ");

private int StartX, StartY;

/** Creates a new instance of SplitPanel */
public SplitPanel(int style)
{
ALIGNMENT = style;
if (style == 1)
{
mainPanel = new VerticalPanel();
VerticalPanel temp = (VerticalPanel) mainPanel;
temp.add(panel1);
temp.add(divider);
temp.add(panel2);

divider.setSize("100%","5px");
DOM.setStyleAttribute(divider.getElement(), "cursor","n-resize");
}
else if (style == 2)
{
mainPanel = new HorizontalPanel();
HorizontalPanel temp = (HorizontalPanel) mainPanel;
temp.add(panel1);
temp.add(divider);
temp.add(panel2);

divider.setSize("5px","100%");
DOM.setStyleAttribute(divider.getElement(), "cursor","e-resize");
}

setWidget(mainPanel);


DOM.setStyleAttribute(divider.getElement(), "backgroundColor","#000066");
divider.addMouseListener(this);

DOM.setStyleAttribute(panel1.getElement(), "overflow","hidden");
DOM.setStyleAttribute(panel2.getElement(), "overflow","hidden");
}

public void setFirstPanel(Widget x)
{
panel1.setWidget(x);
}

public void setSecondPanel(Widget x)
{
panel2.setWidget(x);
}

public void onMouseDown(Widget sender, int x, int y)
{
DOM.setCapture(divider.getElement());
isDragging = true;
StartX = x;
StartY = y;
}
public void onMouseEnter(Widget sender){}
public void onMouseLeave(Widget sender){}
public void onMouseMove(Widget sender, int x, int y)
{
if (isDragging)
{
if (ALIGNMENT == HORIZONTAL)
{
try
{
panel1.setWidth(panel1.getOffsetWidth()+ (StartX + x)+"px");
}
catch(Exception e){}
}
else if (ALIGNMENT == VERTICAL)
{
try
{
panel1.setHeight(panel1.getOffsetHeight()+ (StartY + y)+"px");
}
catch(Exception e){}
}
}
}

public void onMouseUp(Widget sender, int x, int y)
{
isDragging = false;
StartX = 0;
StartY = 0;
DOM.releaseCapture(divider.getElement());
}
}