GWT 拖拽做象棋 (1). dnd 学习.
想研究下拖拽的效果.
http://code.google.com/p/gwt-dnd/downloads/list
这个是GWT拖拽的库.就一个jar文件
对应的GWT1.7进行拖拽学习.当然下载的也是1.7的jar.
GWT 1.7.0 对应 gwt-dnd-2.6.5.jar
然后放到工程里面.
下载了jar文件之后
在新建一个eclipse工程.
在module文件里面加入模块的插入.
<inherits name = 'com.allen_sauer.gwt.dnd.gwt-dnd' />
然后启动才可以编译通过.
接下来到官方网站找个列子改改..有写东西不是太明白.
public void onModuleLoad() {
// set uncaught exception handler
GWT.setUncaughtExceptionHandler(new GWT.UncaughtExceptionHandler() {
public void onUncaughtException(Throwable throwable) {
String text = "Uncaught exception: ";
while (throwable != null) {
StackTraceElement[] stackTraceElements = throwable
.getStackTrace();
text += throwable.toString() + "\n";
for (int i = 0; i < stackTraceElements.length; i++) {
text += " at " + stackTraceElements[i] + "\n";
}
throwable = throwable.getCause();
if (throwable != null) {
text += "Caused by: ";
}
}
DialogBox dialogBox = new DialogBox(true);
DOM.setStyleAttribute(dialogBox.getElement(),
"backgroundColor", "#ABCDEF");
System.err.print(text);
text = text.replaceAll(" ", " ");
dialogBox.setHTML("<pre>" + text + "</pre>");
dialogBox.center();
}
});
// use a deferred command so that the handler catches onModuleLoad2()
// exceptions
DeferredCommand.addCommand(new Command() {
public void execute() {
onModuleLoad2();
}
});
}
在GWT的组件初始化了之前做了点操作..
找到了官方网站的一个有表格拖拽的例子.
进行修改了下.PuzzleExample这个类.
然后
private static final int ROWS = 10;
private static final int COLUMNS = 9;
private static final String CSS_DEMO_PUZZLE_CELL = "demo-PuzzleExample-cell";
private static final String CSS_DEMO_PUZZLE_EXAMPLE = "demo-PuzzleExample";
private static final String CSS_DEMO_PUZZLE_TABLE = "demo-PuzzleExample-table";
private static final int IMAGE_HEIGHT = 58;
private static final int IMAGE_WIDTH = 65;
private PickupDragController dragController;
public PuzzleExample() {
addStyleName(CSS_DEMO_PUZZLE_EXAMPLE);
// use the boundary panel as this composite's widget
AbsolutePanel boundaryPanel = new AbsolutePanel();
boundaryPanel.setPixelSize(800, 900);
setWidget(boundaryPanel);
// initialize our flex table
FlexTable flexTable = new FlexTable();
flexTable.setStyleName(CSS_DEMO_PUZZLE_TABLE);/*显示flexTable的背景颜色添加一个红色的边框.*/
boundaryPanel.add(flexTable, 50, 20);
flexTable.setBorderWidth(0);
flexTable.setCellPadding(0);
flexTable.setCellSpacing(0);
// initialize our drag controller
dragController = new PickupDragController(boundaryPanel, false);
// dragController.addDragHandler(demoDragHandler);
dragController.setBehaviorMultipleSelection(false);
// create our grid
String[] strRow_1 = {"车","马","相","士","将","士","相","马","车"};
for (int i = 0; i < ROWS ; i++) {
for (int j = 0; j < COLUMNS; j++) {
// create a simple panel drop target for the current cell
SimplePanel simplePanel = new SimplePanel();
simplePanel.setPixelSize(IMAGE_WIDTH, IMAGE_HEIGHT);
flexTable.setWidget(i, j, simplePanel);
//flexTable.getCellFormatter().setStyleName(i, j,
// CSS_DEMO_PUZZLE_CELL);
// place a pumpkin in each panel in the cells in the first
// column
if (i == 0) {
simplePanel.setWidget(createBlackButton(strRow_1[j]));
}
if(i == 2 && ( j == 1 || j == 7))
{
simplePanel.setWidget(createBlackButton("炮"));
}
if(i == 3 && ( j == 0 || j == 2 || j == 4 || j == 6 || j == 8))
{
simplePanel.setWidget(createBlackButton("兵"));
}
if(i == 6 && ( j == 0 || j == 2 || j == 4 || j == 6 || j == 8))
{
simplePanel.setWidget(createRedButton("兵"));
}
if(i == 7 && ( j == 1 || j == 7))
{
simplePanel.setWidget(createRedButton("炮"));
}
if (i == 9) {
simplePanel.setWidget(createRedButton(strRow_1[j]));
}
// instantiate a drop controller of the panel in the current
// cell
SetWidgetDropController dropController = new SetWidgetDropController(
simplePanel);
dragController.registerDropController(dropController);
}
}
}
protected Widget createRedButton(String name) {
Button button = new Button(name);
button.setWidth("63px");
button.setHeight("56px");
button.setStyleName("button-with-red");
dragController.makeDraggable(button);
return button;
}
protected Widget createBlackButton(String name) {
Button button = new Button(name);
button.setWidth("63px");
button.setHeight("56px");
button.setStyleName("button-with-black");
dragController.makeDraggable(button);
return button;
}
将棋子进行初始化.我用的是button当棋子..其中分红方和黑方两个..
.demo-PuzzleExample-table {
border: 1px solid red;
background-image: url("table-bk-border.bmp");
}
.button-with-red {
background-image: url("button.GIF");
border: 0px;
font: bold ;
color: red;
}
.button-with-black {
background-image: url("button.GIF");
border: 0px;
font: bold ;
color: black;
}
DIV.dragdrop-dropTarget-engage {
background: #BCDEFF; /* lighter blue */
}
/* ------------ Main Boundary Panel ------------ */
DIV.demo-main-boundary-panel {
background: #F8F8F8; /* light gray */
border: 1px solid blue;
}
添加几个样式.java代码里面还是用样式的名字比较好.然后在页面单独添加样式.
有关问题就是表格的边框.
棋子是在表格的横线上面的.而边框是套在表格里面的.
我先将表格做为一个图片.给一个border=1
截一个图.然后将这个图往下,往右移动半个格.这样看背景图片一放上去.就像是棋子在表格的边框上面了.
然后在修改 楚河 汉界. 添加 炮和兵放的 位置..
这样棋盘就有了.画的不怎么好看..还需要在修改下.
画 的棋盘...
页面初始化的样子..
棋子移动的样子.
现在棋子刚刚可以移动.并且棋子不可以重叠..
还没有实现 马走日 象走田的 步数限制.而且还不能记录走的步数..
只是刚刚把棋盘画好..
哈.有兴趣的可以一起研究下..下一步记录象棋的步子..让两个人在浏览器里面下象棋.
附件是代码.
先传到GOOGLE的服务器上面跑跑.
欢迎访问:
http://webchinesechess.appspot.com/
貌似在IE里面 左面的棋盘有点下移.