Example for gwt context menu.
here explains how to create a context menu in gwt .Using Cell list for context menu items. the below code listens the right click event of a panel and shows a pop-up-panel
private MenuCell contextMenuItem = new MenuCell();
private
CellListResource resource = GWT.create(CellListResource.class);
private
CellList<String> contextMenuItems =
new CellList<String>(contextMenuItem,
resource);
private PopupPanel
contextMenu; //using popupPanel as a context menu
private
SingleSelectionModel<String> contextMenuSelectionModel = new
SingleSelectionModel<String>();
private Panel
topContainer; // the container to be right clicked
public void
onModuleLoad(){
topContainer=new Panel();
List<String> menuItmes=new
ArrayList<String>()
menuItmes.add("menu
item 1");
menuItmes.add("menu item 2");
menuItmes.add("menu item 3");
menuItmes.add("menu item 4");
contextMenuItems.setSelectionModel(contextMenuSelectionModel);
contextMenuItems.setRowCount(menuItems.size(),
true);
contextMenuItems.setRowData(0, menuItems);
Panel p
= new VerticalPanel();
p.add(contextMenuItems);
contextMenu
= new PopupPanel(true);
contextMenu.setStyleName("contextMenu");
contextMenu.add(p);
contextMenu.hide();
topContainer.addHandler(new ContextMenuHandler() {
@Override
public void onContextMenu(ContextMenuEvent event) {
event.getNativeEvent().stopPropagation(); event.getNativeEvent().preventDefault();
contextMenu.setPopupPosition(event.getNativeEvent().getClientX(),
event.getNativeEvent().getClientY());
contextMenu.show();
}
},
ContextMenuEvent.getType());
contextMenuSelectionModel
.addSelectionChangeHandler(new
SelectionChangeEvent.Handler() {
@Override
public
void onSelectionChange(SelectionChangeEvent event) {
// changed the context menu selection
Window.alert("Selected item is" +
contextMenuSelectionModel.getSelectedObject());
}
});
RootPanel.get().add(topContainer);
}
|
Representation of a single cell
class MenuCell extends
AbstractCell<String> {
@Override
public void
render(com.google.gwt.cell.client.Cell.Context context,
String value, SafeHtmlBuilder sb) {
SafeHtml html = SafeHtmlUtils
.fromSafeConstant("<div
class='cell'> " + value
+ "</div>");
sb.append(html);
}
}
|
Customization of cell style
public interface CellListResource extends CellList.Resources
{
@Source({"myCellList.css"})
CellList.Style cellListStyle();
}
|
myCellList.css
|
.cellListWidget {
}
.cellListEvenItem {
cursor: pointer;
zoom: 1;
}
.cellListOddItem {
cursor: pointer;
zoom: 1;
}
.cellListKeyboardSelectedItem {
background:
white;
}
@sprite .cellListSelectedItem {
gwt-image:
'cellListSelectedBackground';
background-color: white;
color: white;
height: auto;
overflow: visible;
}
|
Basic style sheet (in war folder)
|
.cell:hover {
border-color:
#afd2fd;
border-style:
solid;
border-width:
1px;
background-color: #e1eefd;
color: black;
}
.cell{
border-color:
white;
border-style:
solid;
border-width:
1px;
/*padding: 3px 29px 3px 10px;*/
font-size: 11px;
padding: 3px 61px
3px 41px;
}
.contextMenu {
background-color:
white;
border-color:
#979797;
border-style:
solid;
border-width:
1px;
box-shadow:
2px 3px
5px -3px
black;
padding: 3px;
}
|
