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());
}
}

I've been trying to develop a paging widget that will be used according to my needs. Paging is very important as this can organize and more importantly, minimize the amount of the fetch into blocks of 10,15, and so on depending on your situation.

In this sample, there are 3 java classes, PagingListener.java, PagingListenerCollection.java and the Paging Widget itself, pagingWidget.java.

The PagingListener.java is the listener which you need to implement in your application.
The PagingListenerCollection is the helper class that fires the event.

In this implementation, every time you recieve paging events, update the paging widget total number of inquiries by using the method, setTotalPage. This will make sure that the Total number of records will be uptodate everytime theuser clicks on a new page.

here's the code.

PagingListener.java
/*
* PagingListener.java
*
* Created on January 8, 2007, 1:12 PM
*
* To change this template, choose Tools | Template Manager
* and open the template in the editor.
*/

package shells.client.ui.customwidgets;

import com.google.gwt.user.client.ui.Widget;
import java.util.EventListener;

/**
*
* @author mbaricuatro
*/
public interface PagingListener extends EventListener{

/** Creates a new instance of PagingListener */
void onPageClicked(int page);
}

PagingListenerCollection.java

/*
* PagingListenerCollection.java
*
* Created on January 8, 2007, 1:18 PM
*
* To change this template, choose Tools | Template Manager
* and open the template in the editor.
*/

package shells.client.ui.customwidgets;

import java.util.Vector;
import java.util.Iterator;

import shells.client.ui.customwidgets.PagingListener;
/**
*
* @author mbaricuatro
*/
public class PagingListenerCollection extends Vector{

public void firePageClicked(int page)
{
for (Iterator it = iterator(); it.hasNext();)
{
PagingListener listener = (PagingListener) it.next();
listener.onPageClicked(page);
}
}
}

PagingWidget.java

/*
* PagingWidget.java
*
* Created on January 8, 2007, 10:17 AM
*
* To change this template, choose Tools | Template Manager
* and open the template in the editor.
*/

package shells.client.ui.customwidgets;

import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.Window;

import shells.client.ui.customwidgets.PagingListenerCollection;
import shells.client.ui.customwidgets.PagingListener;

import shells.client.ui.services.ProductService;

/**
*
* @author mbaricuatro
*/
public class PagingWidget extends HorizontalPanel
{
private int TOTALMESSAGE = -1;
private int CURRENTPAGE = 1;
private int FETCHSIZE = 5;

private Label currentPageNumberHolder = new Label("");
private Label prevPageNumberHolder = new Label("");
private Label nextPageNumberHolder = new Label("");

private Button prev = new Button("<");
private Button next = new Button(">");
private Button first = new Button("<<");
private Button last = new Button(">>");

private PagingListenerCollection pageListener;

/** Creates a new instance of PagingWidget */
public PagingWidget()
{
setStyleName("pagingWidget");
initWidgetsToPanel();
addListeners();
setVisible(false);

currentPageNumberHolder.setStyleName("currentSelectedPage");
}

public PagingWidget(int total, int fetchsize)
{

TOTALMESSAGE = total;
FETCHSIZE = fetchsize;

if (TOTALMESSAGE<=0)
setVisible(false);
else
setVisible(true);

currentPageNumberHolder.setText(""+CURRENTPAGE);
initWidgetsToPanel();
addListeners();

setPages(-1 , CURRENTPAGE , CURRENTPAGE+1);
}

public Button getPrev()
{
return prev;
}
public Button getFirst()
{
return first;
}
public Button getNext()
{
return next;
}
public Button getLast()
{
return last;
}



private void initWidgetsToPanel()
{
add(first);
add(prev);
add(prevPageNumberHolder);
add(currentPageNumberHolder );
add(nextPageNumberHolder);
add(next);
add(last);
}

private void setPages(int first, int current, int next)
{
//punan cgro nig 2 sa next, nya duha pud sa prev...
if (!(first<1))
prevPageNumberHolder.setText(""+first);
else
prevPageNumberHolder.setText(" ");

currentPageNumberHolder.setText(""+current);

int temp = 0;
if (TOTALMESSAGE%FETCHSIZE==0)
temp = 1;
if (!(next>TOTALMESSAGE/FETCHSIZE+1-temp) )
nextPageNumberHolder.setText(""+next);
else
nextPageNumberHolder.setText(" ");
}

private void addListeners()
{
currentPageNumberHolder.addClickListener(new ClickListener()
{
public void onClick(Widget sender)
{
String temp = currentPageNumberHolder.getText();
if (temp.trim().length()!=0)
{
CURRENTPAGE = Integer.parseInt(temp);
pageListener.firePageClicked(Integer.parseInt(temp));
}
}
});
prevPageNumberHolder.addClickListener(new ClickListener()
{
public void onClick(Widget sender)
{
String temp = prevPageNumberHolder.getText();

if (temp.trim().length()!=0)
{
CURRENTPAGE = Integer.parseInt(temp);
pageListener.firePageClicked(Integer.parseInt(temp));
}

}
});
nextPageNumberHolder.addClickListener(new ClickListener()
{
public void onClick(Widget sender)
{
String temp = nextPageNumberHolder.getText();
if (temp.trim().length()!=0)
{
CURRENTPAGE = Integer.parseInt(temp);
pageListener.firePageClicked(Integer.parseInt(temp));
}
}
});

first.addClickListener(new ClickListener()
{
public void onClick(Widget sender)
{
//setPages(-1 , 1 , CURRENTPAGE+1);
CURRENTPAGE = 1;
pageListener.firePageClicked(CURRENTPAGE );
}
});
prev.addClickListener(new ClickListener()
{
public void onClick(Widget sender)
{
if (CURRENTPAGE > 1 )
{
CURRENTPAGE = CURRENTPAGE-1;
pageListener.firePageClicked(CURRENTPAGE );

}
}
});
next.addClickListener(new ClickListener()
{
public void onClick(Widget sender)
{
int temp = 0;
if (TOTALMESSAGE%FETCHSIZE!=0)
temp = 1;
if (CURRENTPAGE < TOTALMESSAGE/FETCHSIZE + temp)
{
CURRENTPAGE = CURRENTPAGE+1;
pageListener.firePageClicked(CURRENTPAGE );
}
}
});
last.addClickListener(new ClickListener()
{
public void onClick(Widget sender)
{
CURRENTPAGE = TOTALMESSAGE/FETCHSIZE+1;

if (TOTALMESSAGE%FETCHSIZE==0)
CURRENTPAGE = CURRENTPAGE -1;

pageListener.firePageClicked(CURRENTPAGE );
}
});
}

public int getTotalPage()
{
return TOTALMESSAGE;
}
public void setTotalPage(int x)
{
TOTALMESSAGE = x;
if (TOTALMESSAGE > FETCHSIZE)
{
setVisible(true);
setPages(CURRENTPAGE-1 , CURRENTPAGE , CURRENTPAGE+1);
}
else
setVisible(false);
}
public int getCurrentPage()
{
return CURRENTPAGE;
}
public void setCurrentPage(int x)
{
CURRENTPAGE = x;
}
public void setFetchSize(int x)
{
FETCHSIZE = x;
}
public int getFetchSize()
{
return FETCHSIZE;
}

public void addPagingListener(PagingListener listener)
{
if (pageListener == null)
pageListener = new PagingListenerCollection();
pageListener.add(listener);
}

public void removePagingListener(PagingListener listener)
{
if (pageListener != null)
pageListener.remove(listener);
}
}