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文件之后   在新建一个

想研究下拖拽的效果.

 

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

目录
相关文章
|
SpringCloudAlibaba Java 应用服务中间件
信创迁移适配实战-SpringCloudAlibaba服务以war包部署后无法注册到Nacos
信创迁移适配实战-SpringCloudAlibaba服务以war包部署后无法注册到Nacos
878 0
|
3月前
|
数据采集 监控 前端开发
如何开发生产小工单中的数字化看板(附架构图+流程图+代码参考)
本文介绍了如何通过数字化看板优化生产小工单管理。内容涵盖生产小工单的概念、数字化看板的功能模块(如生产监控、执行统计、数据统计、员工工资统计)、业务流程设计、技术架构与开发技巧,并提供代码示例,助力企业实现高效、可视化的生产管理。
|
Java Spring
如何通过配置文件给 @Scheduled(fixedRate= )传值
【4月更文挑战第18天】如何通过配置文件给 @Scheduled(fixedRate= )传值
1252 3
|
3月前
|
网络协议 API PHP
域名WHOIS信息查询免费API使用指南
本文介绍接口盒子提供的免费域名WHOIS查询API,支持获取域名注册信息、到期时间、DNS服务器等数据。开发者可通过GET或POST请求调用,需使用用户ID和通讯秘钥认证,适用于.com、.net等顶级域名。提供PHP和Python调用示例及注意事项。
|
4月前
|
分布式计算 运维 监控
Fusion 引擎赋能:流利说如何用阿里云 Serverless Spark 实现数仓计算加速
本文介绍了流利说与阿里云合作,利用EMR Serverless Spark优化数据处理的全过程。流利说是科技驱动的教育公司,通过AI技术提升用户英语水平。原有架构存在资源管理、成本和性能等痛点,采用EMR Serverless Spark后,实现弹性资源管理、按需计费及性能优化。方案涵盖数据采集、存储、计算到查询的完整能力,支持多种接入方式与高效调度。迁移后任务耗时减少40%,失败率降低80%,成本下降30%。未来将深化合作,探索更多行业解决方案。
242 1
|
5月前
|
存储 缓存 大数据
阿里云服务器实例规格怎么选?场景化选型指南参考
在阿里云选购云服务器的过程中,阿里云服务器实例规格的选择是许多用户面临的一大挑战。阿里云拥有多种不同的实例规格,为了简化用户的选择过程,阿里云官方在云服务器购买页面新增了场景化选型推荐功能。用户可以根据自己的上云场景,结合场景化选型中的业务场景和细分场景,来选择最适合自己的阿里云服务器实例规格。
176 10
|
SQL 关系型数据库 MySQL
如何确认SQL用了索引:详细技巧与方法
在数据库管理中,索引是提高SQL查询性能的重要手段
2073 5
|
9月前
|
编解码 安全 网络安全
指纹浏览器中HTTP代理IP的重要性及使用原因
随着数字化发展,网络安全和隐私保护成为核心需求,指纹浏览器应运而生。它通过客户端信息唯一标识用户身份。搭配HTTP代理IP可增强安全性,具体表现为:1. 保护用户地址;2. 提高信息安全;3. 防止指纹检测;4. 增强网络安全。HTTP代理以其稳定性、安全性,在网络营销等领域发挥重要作用,二者结合为用户提供更强的隐私和安全保护。
303 34
|
9月前
|
人工智能 运维 自动驾驶
回顾与展望,SOMA年终工作会议暨Meet Up圆满举办!
委员们齐聚复旦复盘联盟工作,展望规划联盟发展。