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里面 左面的棋盘有点下移.