Java与EXT相结合

tntxia

浏览: 1506633 次
性别:
来自: 深圳

最近访客更多访客>>

wyx065747

u012363178

buptyutao

songhait

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB编程

EXT Java CSS JavaScript json

EXT是里面的例子是用PHP，但在我们工程中，大多数是用Java的，在这篇博客里面，我主要要讲一些用Java来开发EXT程序的例子，而且我们争取是用Java转化为JS的形式来做EXT，这样的话，我们可以更加方便的去调试，因为Java的调试要比Javascript的调试容易得多。

这里，我们要引用一个JSON的框架 - SimpleJSON，SimpleJSON的框架下载方式与使用方法，请参见http://tntxia.iteye.com/blog/755752。

首先，我们模仿Swing做一个Component的组件。

package com.tntxia.extjava.tag;

public interface Component {
	
	public String draw();

}

这个类是一个简单的接口类，只包含了一个draw方法。用来让所有的组件都继承于它。

接下来，我们定义更有意义的东西。一个Button组件。

package com.tntxia.extjava.tag;

import org.json.simple.JSONObject;

public class Button implements Component {
	private String id;
	private String text;
	private boolean pressed;
	private int width;
	private int height;
	private String renderTo;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public boolean isPressed() {
		return pressed;
	}
	public void setPressed(boolean pressed) {
		this.pressed = pressed;
	}
	public int getWidth() {
		return width;
	}
	public void setWidth(int width) {
		this.width = width;
	}
	public int getHeight() {
		return height;
	}
	public void setHeight(int height) {
		this.height = height;
	}
	public String getRenderTo() {
		return renderTo;
	}
	public void setRenderTo(String renderTo) {
		this.renderTo = renderTo;
	}
	public String draw() {
		JSONObject param = new JSONObject();
		if(text!=null)
			param.put("text", text);
		param.put("pressed", Boolean.valueOf(true));
		if(height!=0)
			param.put("height", Integer.valueOf(height));
		if(renderTo!=null)
			param.put("renderTo", renderTo);
		return "var "+id+" = new Ext.Button("+param+");";
	}
}

这里我们实现了Component的draw方法，让Button可以在页面上显示出来。

我们最终的目的，是可以在页面上看到EXT的显示结果，所以我们接下来就写一个JSP页面来实现显示。

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<%@page import="com.tntxia.extjava.tag.Button"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>这是用Java实现的一个EXT按钮</title>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ext/resources/css/xtheme-access.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript">
function hello(){
	alert("hello");
}
Ext.onReady(function(){
<%
Button button = new Button();
button.setId("button1");
button.setText("按钮2");
button.setRenderTo("button");
out.println(button.draw());
%>
});
</script>
</head>
<body>
<div id="button"></div>
</body>
</html>

最终实现的效果比下：

分享到：

HTMLParser Java HTML 解析框架 | 数据库笔试题

2010-10-02 08:51
浏览 5246
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Java与EXT相结合

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Java与EXT相结合

评论

发表评论

相关推荐

AJAX

Webpack入门配置

解决Jetty做Web容器时，修改JS或HTML出错的问题

用JQuery做的一个分页效果

Vue自已写的日历插件

无刷新上传文件的方法

zrender学习点滴

原创程序- Web版数据库管理

Vue学习点滴

Eclipse创建Web项目

HTML5 新增功能收集

Bootstrap学习记录点滴

关于地图显示的一些知识

CSS知识记录点滴

用JS制作3D效果布局

tntxiawebmvc 做国家管理的系统

jtopo学习记录

Html 5 Canvas 学习记录

jquery杂记

自已写的jquery ui框架

最近访客更多访客>>