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>
最终实现的效果比下: