Gwt-Ext学习笔记之中级篇

一、 配置 Gwt-Ext开发环境

a.       请参照 Gwt-Ext学习笔记之基础篇

b.      此教程是在 基础篇 和 进级篇 的基础上做的扩展，具体细节请参照前面教程。

二、 在 gwtext项目上创建客户端模型文件

a.       创建模型文件 InfoList.java,内容如下


Java代码 复制代码

   1. public class InfoList implements EntryPoint {  
   2.  
   3.     public void onModuleLoad() {  
   4.  
   5.         ExtElement main = Ext.get("main");  
   6.  
   7.         Panel mainPanel = new Panel() {  
   8.             {  
   9.                 setTitle("测试");  
  10.                 setHeight(300);  
  11.                 setWidth(500);  
  12.                 setFrame(true);  
  13.                 setHtml("<p>如果看到这些信息，说明你的环境已经配置成功了！</p>");  
  14.                 setStyle("margin: 10px 0px 0px 10px;");  
  15.             }  
  16.         };  
  17.  
  18.         if (main != null) {  
  19.             mainPanel.setApplyTo(main.getDOM());  
  20.             mainPanel.render("");  
  21.         } else {  
  22.             RootPanel.get().add(mainPanel);  
  23.         }  
  24.     }  
  25.  
  26. } 

public class InfoList implements EntryPoint {

public void onModuleLoad() {

ExtElement main = Ext.get("main");

Panel mainPanel = new Panel() {
{
setTitle("测试");
setHeight(300);
setWidth(500);
setFrame(true);
setHtml("<p>如果看到这些信息，说明你的环境已经配置成功了！</p>");
setStyle("margin: 10px 0px 0px 10px;");
}
};

if (main != null) {
mainPanel.setApplyTo(main.getDOM());
mainPanel.render("");
} else {
RootPanel.get().add(mainPanel);
}
}

}



b.      修改 HTML宿主页面 InfoList.html文件

                                                               i.      在 InfoList.html文件中加入以下代码


Java代码 复制代码

   1. <link href="js/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>  
   2. <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>  
   3. <script type="text/javascript" src="js/ext-all.js"></script> 

<link href="js/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>



c.       在 InfoList.gwt.xml文件中加入以下代码
Java代码 复制代码

   1. <inherits name="com.gwtext.GwtExt"/> 

<inherits name="com.gwtext.GwtExt"/>



d.      测试环境是否配置成功 ,运行方式参考 Gwt-Ext学习笔记之基础篇 ,效果如下图

三、 定义服务

a.       在 gwtext项目上，创建名为 InfoListAction.java远程服务接口。

b.      把 PostgreSQL数据库的 JDBC包 postgresql-8.2-505.jdbc3.jar加入到项目中（其他数据库，加入相应的 JDBC包）。

c.       远程服务的实现类，在 InfoListActionImpl.java中加入如下代码：
Java代码 复制代码

   1. /** 
   2.  * @author 七月天 
   3.  * 
   4.  */ 
   5. public class InfoListActionImpl extends RemoteServiceServlet implements 
   6.         InfoListAction {  
   7.  
   8.     public String[][] queryData() {  
   9.         Connection conn = null;  
  10.         String[][] allInfo = null;  
  11.         try {  
  12.             Class.forName("org.postgresql.Driver");  
  13.             String connString = "jdbc:postgresql://127.0.0.1:5432/gwtext";  
  14. conn = DriverManager.getConnection(connString, "julycn", "julycn");  
  15. String sqlQuery = "select username,password,email,phone from person";  
  16.             Statement stmt = conn.createStatement(  
  17.                     ResultSet.TYPE_SCROLL_INSENSITIVE,  
  18.                     ResultSet.CONCUR_READ_ONLY);  
  19.             ResultSet rst = stmt.executeQuery(sqlQuery);  
  20.  
  21.             // 行数  
  22.             int rows = 0;  
  23.             if (rst.last()) {  
  24.                 rows = rst.getRow();  
  25.                 rst.beforeFirst();  
  26.             }  
  27.  
  28.             // 表的列数  
  29.             ResultSetMetaData rsm = rst.getMetaData();  
  30.             int columns = rsm.getColumnCount();  
  31.  
  32.             // 初始化输组  
  33.             allInfo = new String[rows][columns];  
  34.  
  35.             int i = 0;  
  36.             while (rst.next()) {  
  37.                 for (int j = 0; j < columns; j++) {  
  38.                     allInfo[i][j] = rst.getString(j + 1);  
  39.                 }  
  40.                 i++;  
  41.             }  
  42.         } catch (Exception e) {  
  43.             e.printStackTrace();  
  44.         } finally {  
  45.             if (conn != null) {  
  46.                 try {  
  47.                     conn.close();  
  48.                 } catch (SQLException e) {  
  49.                     e.printStackTrace();  
  50.                 }  
  51.             }  
  52.         }  
  53.  
  54.         return allInfo;  
  55.     }  
  56.  
  57. } 

/**
* @author 七月天
*
*/
public class InfoListActionImpl extends RemoteServiceServlet implements
InfoListAction {

public String[][] queryData() {
Connection conn = null;
String[][] allInfo = null;
try {
Class.forName("org.postgresql.Driver");
String connString = "jdbc:postgresql://127.0.0.1:5432/gwtext";
conn = DriverManager.getConnection(connString, "julycn", "julycn");
String sqlQuery = "select username,password,email,phone from person";
Statement stmt = conn.createStatement(
ResultSet.TYPE_SCROLL_INSENSITIVE,
ResultSet.CONCUR_READ_ONLY);
ResultSet rst = stmt.executeQuery(sqlQuery);

// 行数
int rows = 0;
if (rst.last()) {
rows = rst.getRow();
rst.beforeFirst();
}

// 表的列数
ResultSetMetaData rsm = rst.getMetaData();
int columns = rsm.getColumnCount();

// 初始化输组
allInfo = new String[rows][columns];

int i = 0;
while (rst.next()) {
for (int j = 0; j < columns; j++) {
allInfo[i][j] = rst.getString(j + 1);
}
i++;
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}

return allInfo;
}

}





四、 绑定代码

a.       定义一个远程接口类 InfoListAction.java,代码如下：


Java代码 复制代码

   1. /** 
   2.  * @author 七月天 
   3.  *  
   4.  */ 
   5. public interface InfoListAction extends RemoteService {  
   6.  
   7.     public static final String SERVICE_URI = "/InfoListAction";  
   8.  
   9.     public static class Util {  
  10.  
  11.         public static InfoListActionAsync getInstance() {  
  12.  
  13.             InfoListActionAsync instance = (InfoListActionAsync) GWT  
  14.                     .create(InfoListAction.class);  
  15.             ServiceDefTarget target = (ServiceDefTarget) instance;  
  16.             target.setServiceEntryPoint(GWT.getModuleBaseURL() + SERVICE_URI);  
  17.             return instance;  
  18.         }  
  19.     }  
  20.  
  21.     public String[][] queryData();  
  22. } 

/**
* @author 七月天
*
*/
public interface InfoListAction extends RemoteService {

public static final String SERVICE_URI = "/InfoListAction";

public static class Util {

public static InfoListActionAsync getInstance() {

InfoListActionAsync instance = (InfoListActionAsync) GWT
.create(InfoListAction.class);
ServiceDefTarget target = (ServiceDefTarget) instance;
target.setServiceEntryPoint(GWT.getModuleBaseURL() + SERVICE_URI);
return instance;
}
}

public String[][] queryData();
}



b.      定义远程异步接口类 InfoListActionAsync.java，代码如下：
Java代码 复制代码

   1. /** 
   2.  * @author 七月天 
   3.  *  
   4.  */ 
   5. public interface InfoListActionAsync {  
   6.  
   7.     public void queryData(AsyncCallback callback);  
   8. } 

/**
* @author 七月天
*
*/
public interface InfoListActionAsync {

public void queryData(AsyncCallback callback);
}





c.       注册服务器代码，将下面的一行加入到 InfoList.gwt.xml中

Java代码 复制代码

   1. <servlet class="com.gwtext.julycn.server.InfoListActionImpl" path="/InfoListAction" /> 

<servlet class="com.gwtext.julycn.server.InfoListActionImpl" path="/InfoListAction" />





五、 执行客户端调用

a.       修改模型文件 InfoList.java,代码如下：
Java代码 复制代码

   1. /** 
   2.  * @author 七月天 
   3.  * 
   4.  */ 
   5. public class InfoList implements EntryPoint {  
   6.  
   7.     public void onModuleLoad() {  
   8.         InfoListActionAsync action = InfoListAction.Util.getInstance();  
   9.         action.queryData(new AsyncCallback() {  
  10.  
  11.             public void onFailure(Throwable caught) {  
  12.                 // TODO Auto-generated method stub  
  13.  
  14.             }  
  15.  
  16.             public void onSuccess(Object result) {  
  17.                 Panel panel = new Panel();  
  18.                 panel.setBorder(false);  
  19.                 panel.setPaddings(15);  
  20.  
  21.                 RecordDef recordDef = new RecordDef(new FieldDef[] {  
  22.                         new StringFieldDef("username"),  
  23.                         new StringFieldDef("password"),  
  24.                         new StringFieldDef("email"),  
  25.                         new StringFieldDef("phone") });  
  26.  
  27.                 final GridPanel grid = new GridPanel();  
  28.  
  29.                 String[][] data = (String[][]) result;  
  30.  
  31.                 MemoryProxy proxy = new MemoryProxy(data);  
  32.  
  33.                 ArrayReader reader = new ArrayReader(recordDef);  
  34.                 Store store = new Store(proxy, reader);  
  35.                 store.load();  
  36.                 grid.setStore(store);  
  37.  
  38.                 ColumnConfig[] columns = new ColumnConfig[] {  
  39. new ColumnConfig("用户名", "username", 160, true, null,"username"),  
  40.                         new ColumnConfig("密码", "password", 45),  
  41.                         new ColumnConfig("邮箱", "email", 65),  
  42.                         new ColumnConfig("电话", "phone", 65) };  
  43.  
  44.                 ColumnModel columnModel = new ColumnModel(columns);  
  45.                 grid.setColumnModel(columnModel);  
  46.  
  47.                 grid.setFrame(true);  
  48.                 grid.setStripeRows(true);  
  49.                 grid.setAutoExpandColumn("username");  
  50.  
  51.                 grid.setHeight(350);  
  52.                 grid.setWidth(600);  
  53.                 grid.setTitle("用户信息");  
  54.  
  55.                 Toolbar bottomToolbar = new Toolbar();  
  56.                 bottomToolbar.addFill();  
  57.                 bottomToolbar.addButton(new ToolbarButton("清除排序",  
  58.                         new ButtonListenerAdapter() {  
  59. public void onClick(Button button, EventObject e) {  
  60.                                 grid.clearSortState(true);  
  61.                             }  
  62.                         }));  
  63.                 grid.setBottomToolbar(bottomToolbar);  
  64.  
  65.                 panel.add(grid);  
  66.  
  67.                 RootPanel.get().add(panel);  
  68.  
  69.             }  
  70.  
  71.         });  
  72.     }  
  73. } 

/**
* @author 七月天
*
*/
public class InfoList implements EntryPoint {

public void onModuleLoad() {
InfoListActionAsync action = InfoListAction.Util.getInstance();
action.queryData(new AsyncCallback() {

public void onFailure(Throwable caught) {
// TODO Auto-generated method stub

}

public void onSuccess(Object result) {
Panel panel = new Panel();
panel.setBorder(false);
panel.setPaddings(15);

RecordDef recordDef = new RecordDef(new FieldDef[] {
new StringFieldDef("username"),
new StringFieldDef("password"),
new StringFieldDef("email"),
new StringFieldDef("phone") });

final GridPanel grid = new GridPanel();

String[][] data = (String[][]) result;

MemoryProxy proxy = new MemoryProxy(data);

ArrayReader reader = new ArrayReader(recordDef);
Store store = new Store(proxy, reader);
store.load();
grid.setStore(store);

ColumnConfig[] columns = new ColumnConfig[] {
new ColumnConfig("用户名", "username", 160, true, null,"username"),
new ColumnConfig("密码", "password", 45),
new ColumnConfig("邮箱", "email", 65),
new ColumnConfig("电话", "phone", 65) };

ColumnModel columnModel = new ColumnModel(columns);
grid.setColumnModel(columnModel);

grid.setFrame(true);
grid.setStripeRows(true);
grid.setAutoExpandColumn("username");

grid.setHeight(350);
grid.setWidth(600);
grid.setTitle("用户信息");

Toolbar bottomToolbar = new Toolbar();
bottomToolbar.addFill();
bottomToolbar.addButton(new ToolbarButton("清除排序",
new ButtonListenerAdapter() {
public void onClick(Button button, EventObject e) {
grid.clearSortState(true);
}
}));
grid.setBottomToolbar(bottomToolbar);

panel.add(grid);

RootPanel.get().add(panel);

}

});
}
}





b.      AsyncCallback 接口定义了两个方法： onSuccess(Object result) 和   onFailure(Throwable caught)。必须定义一个可以实现这两个方法的类。当执行远程调用时，模型类的实例并将其传递给异步服务方法。最后，服务器端资源完成，然后调用代码中两个方法之一。成功方法的参数是接口和实现中的调用的返回值。

六、 展示效果

a.       凌晨1点了，收工睡觉；先看看效果吧