Gwt-Ext学习笔记之中

前端之家收集整理的这篇文章主要介绍了Gwt-Ext学习笔记之中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

转帖:http://www.javaeye.com/topic/192772

一、 配置 Gwt-Ext开发环境

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

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

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

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

Java代码
  1. publicclassInfoListimplementsEntryPoint{
  2. publicvoidonModuleLoad(){
  3. ExtElementmain=Ext.get("main");
  4. PanelmainPanel=newPanel(){
  5. {
  6. setTitle("测试");
  7. setHeight(300);
  8. setWidth(500);
  9. setFrame(true);
  10. setHtml("<p>如果看到这些信息,说明你的环境已经配置成功了!</p>");
  11. setStyle("margin:10px0px0px10px;");
  12. }
  13. };
  14. if(main!=null){
  15. mainPanel.setApplyTo(main.getDOM());
  16. mainPanel.render("");
  17. }else{
  18. RootPanel.get().add(mainPanel);
  19. }
  20. }
  21. }

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

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

Java代码
  1. <linkhref="js/resources/css/ext-all.css"rel="stylesheet"type="text/css"/>
  2. <scripttype="text/javascript"src="js/adapter/ext/ext-base.js"></script>
  3. <scripttype="text/javascript"src="js/ext-all.js"></script>

c. InfoList.gwt.xml文件中加入以下代码

Java代码
  1. <inheritsname="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. publicclassInfoListActionImplextendsRemoteServiceServletimplements
  6. InfoListAction{
  7. publicString[][]queryData(){
  8. Connectionconn=null;
  9. String[][]allInfo=null;
  10. try{
  11. Class.forName("org.postgresql.Driver");
  12. StringconnString="jdbc:postgresql://127.0.0.1:5432/gwtext";
  13. conn=DriverManager.getConnection(connString,"julycn","julycn");
  14. StringsqlQuery="selectusername,password,email,phonefromperson";
  15. Statementstmt=conn.createStatement(
  16. ResultSet.TYPE_SCROLL_INSENSITIVE,
  17. ResultSet.CONCUR_READ_ONLY);
  18. ResultSetrst=stmt.executeQuery(sqlQuery);
  19. //行数
  20. introws=0;
  21. if(rst.last()){
  22. rows=rst.getRow();
  23. rst.beforeFirst();
  24. }
  25. //表的列数
  26. ResultSetMetaDatarsm=rst.getMetaData();
  27. intcolumns=rsm.getColumnCount();
  28. //初始化输组
  29. allInfo=newString[rows][columns];
  30. inti=0;
  31. while(rst.next()){
  32. for(intj=0;j<columns;j++){
  33. allInfo[i][j]=rst.getString(j+1);
  34. }
  35. i++;
  36. }
  37. }catch(Exceptione){
  38. e.printStackTrace();
  39. }finally{
  40. if(conn!=null){
  41. try{
  42. conn.close();
  43. }catch(sqlExceptione){
  44. e.printStackTrace();
  45. }
  46. }
  47. }
  48. returnallInfo;
  49. }
  50. }

四、 绑定代码

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

Java代码
  1. /**
  2. *@author七月天
  3. *
  4. */
  5. publicinterfaceInfoListActionextendsRemoteService{
  6. publicstaticfinalStringSERVICE_URI="/InfoListAction";
  7. publicstaticclassUtil{
  8. publicstaticInfoListActionAsyncgetInstance(){
  9. InfoListActionAsyncinstance=(InfoListActionAsync)GWT
  10. .create(InfoListAction.class);
  11. ServiceDefTargettarget=(ServiceDefTarget)instance;
  12. target.setServiceEntryPoint(GWT.getModuleBaseURL()+SERVICE_URI);
  13. returninstance;
  14. }
  15. }
  16. publicString[][]queryData();
  17. }

b. 定义远程异步接口类 InfoListActionAsync.java代码如下:

Java代码
  1. /**
  2. *@author七月天
  3. *
  4. */
  5. publicinterfaceInfoListActionAsync{
  6. publicvoidqueryData(AsyncCallbackcallback);
  7. }

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

Java代码
  1. <servletclass="com.gwtext.julycn.server.InfoListActionImpl"path="/InfoListAction"/>

五、 执行客户端调用

a. 修改模型文件 InfoList.java,代码如下:

Java代码
  1. /**
  2. *@author七月天
  3. *
  4. */
  5. publicclassInfoListimplementsEntryPoint{
  6. publicvoidonModuleLoad(){
  7. InfoListActionAsyncaction=InfoListAction.Util.getInstance();
  8. action.queryData(newAsyncCallback(){
  9. publicvoidonFailure(Throwablecaught){
  10. //TODOAuto-generatedmethodstub
  11. }
  12. publicvoidonSuccess(Objectresult){
  13. Panelpanel=newPanel();
  14. panel.setBorder(false);
  15. panel.setPaddings(15);
  16. RecordDefrecordDef=newRecordDef(newFieldDef[]{
  17. newStringFieldDef("username"),
  18. newStringFieldDef("password"),
  19. newStringFieldDef("email"),
  20. newStringFieldDef("phone")});
  21. finalGridPanelgrid=newGridPanel();
  22. String[][]data=(String[][])result;
  23. MemoryProxyproxy=newMemoryProxy(data);
  24. ArrayReaderreader=newArrayReader(recordDef);
  25. Storestore=newStore(proxy,reader);
  26. store.load();
  27. grid.setStore(store);
  28. ColumnConfig[]columns=newColumnConfig[]{
  29. newColumnConfig("用户名","username",160,true,null,"username"),
  30. newColumnConfig("密码","password",45),
  31. newColumnConfig("邮箱","email",65),
  32. newColumnConfig("电话","phone",65)};
  33. ColumnModelcolumnModel=newColumnModel(columns);
  34. grid.setColumnModel(columnModel);
  35. grid.setFrame(true);
  36. grid.setStripeRows(true);
  37. grid.setAutoExpandColumn("username");
  38. grid.setHeight(350);
  39. grid.setWidth(600);
  40. grid.setTitle("用户信息");
  41. ToolbarbottomToolbar=newToolbar();
  42. bottomToolbar.addFill();
  43. bottomToolbar.addButton(newToolbarButton("清除排序",
  44. newButtonListenerAdapter(){
  45. publicvoidonClick(Buttonbutton,EventObjecte){
  46. grid.clearSortState(true);
  47. }
  48. }));
  49. grid.setBottomToolbar(bottomToolbar);
  50. panel.add(grid);
  51. RootPanel.get().add(panel);
  52. }
  53. });
  54. }
  55. }

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

六、 展示效果

a. 凌晨1点了,收工睡觉;先看看效果

原文链接:https://www.f2er.com/postgresql/197288.html

猜你在找的Postgre SQL相关文章