a. 请参照 Gwt-Ext学习笔记之基础篇
b. 此教程是在 基础篇 和 进级篇 的基础上做的扩展,具体细节请参照前面教程。
二、 在 gwtext项目上创建客户端模型文件
- publicclassInfoListimplementsEntryPoint{
- publicvoidonModuleLoad(){
- ExtElementmain=Ext.get("main");
- PanelmainPanel=newPanel(){
- {
- setTitle("测试");
- setHeight(300);
- setWidth(500);
- setFrame(true);
- setHtml("<p>如果看到这些信息,说明你的环境已经配置成功了!</p>");
- setStyle("margin:10px0px0px10px;");
- }
- };
- if(main!=null){
- mainPanel.setApplyTo(main.getDOM());
- mainPanel.render("");
- }else{
- RootPanel.get().add(mainPanel);
- }
- }
- }
b. 修改 HTML宿主页面 InfoList.html文件
- <linkhref="js/resources/css/ext-all.css"rel="stylesheet"type="text/css"/>
- <scripttype="text/javascript"src="js/adapter/ext/ext-base.js"></script>
- <scripttype="text/javascript"src="js/ext-all.js"></script>
c. 在 InfoList.gwt.xml文件中加入以下代码
- <inheritsname="com.gwtext.GwtExt"/>
d. 测试环境是否配置成功,运行方式参考 Gwt-Ext学习笔记之基础篇 ,效果如下图
三、 定义服务
a. 在 gwtext项目上,创建名为 InfoListAction.java远程服务接口。
b. 把 Postgresql数据库的 JDBC包 postgresql-8.2-505.jdbc3.jar加入到项目中(其他数据库,加入相应的 JDBC包)。
c. 远程服务的实现类,在 InfoListActionImpl.java中加入如下代码:
- /**
- *@author七月天
- *
- */
- publicclassInfoListActionImplextendsRemoteServiceServletimplements
- InfoListAction{
- publicString[][]queryData(){
- Connectionconn=null;
- String[][]allInfo=null;
- try{
- Class.forName("org.postgresql.Driver");
- StringconnString="jdbc:postgresql://127.0.0.1:5432/gwtext";
- conn=DriverManager.getConnection(connString,"julycn","julycn");
- StringsqlQuery="selectusername,password,email,phonefromperson";
- Statementstmt=conn.createStatement(
- ResultSet.TYPE_SCROLL_INSENSITIVE,
- ResultSet.CONCUR_READ_ONLY);
- ResultSetrst=stmt.executeQuery(sqlQuery);
- //行数
- introws=0;
- if(rst.last()){
- rows=rst.getRow();
- rst.beforeFirst();
- }
- //表的列数
- ResultSetMetaDatarsm=rst.getMetaData();
- intcolumns=rsm.getColumnCount();
- //初始化输组
- allInfo=newString[rows][columns];
- inti=0;
- while(rst.next()){
- for(intj=0;j<columns;j++){
- allInfo[i][j]=rst.getString(j+1);
- }
- i++;
- }
- }catch(Exceptione){
- e.printStackTrace();
- }finally{
- if(conn!=null){
- try{
- conn.close();
- }catch(sqlExceptione){
- e.printStackTrace();
- }
- }
- }
- returnallInfo;
- }
- }
四、 绑定代码
a. 定义一个远程接口类 InfoListAction.java,代码如下:
- /**
- *@author七月天
- *
- */
- publicinterfaceInfoListActionextendsRemoteService{
- publicstaticfinalStringSERVICE_URI="/InfoListAction";
- publicstaticclassUtil{
- publicstaticInfoListActionAsyncgetInstance(){
- InfoListActionAsyncinstance=(InfoListActionAsync)GWT
- .create(InfoListAction.class);
- ServiceDefTargettarget=(ServiceDefTarget)instance;
- target.setServiceEntryPoint(GWT.getModuleBaseURL()+SERVICE_URI);
- returninstance;
- }
- }
- publicString[][]queryData();
- }
b. 定义远程异步接口类 InfoListActionAsync.java,代码如下:
- /**
- *@author七月天
- *
- */
- publicinterfaceInfoListActionAsync{
- publicvoidqueryData(AsyncCallbackcallback);
- }
c. 注册服务器代码,将下面的一行加入到 InfoList.gwt.xml中
- <servletclass="com.gwtext.julycn.server.InfoListActionImpl"path="/InfoListAction"/>
五、 执行客户端调用
- /**
- *@author七月天
- *
- */
- publicclassInfoListimplementsEntryPoint{
- publicvoidonModuleLoad(){
- InfoListActionAsyncaction=InfoListAction.Util.getInstance();
- action.queryData(newAsyncCallback(){
- publicvoidonFailure(Throwablecaught){
- //TODOAuto-generatedmethodstub
- }
- publicvoidonSuccess(Objectresult){
- Panelpanel=newPanel();
- panel.setBorder(false);
- panel.setPaddings(15);
- RecordDefrecordDef=newRecordDef(newFieldDef[]{
- newStringFieldDef("username"),
- newStringFieldDef("password"),
- newStringFieldDef("email"),
- newStringFieldDef("phone")});
- finalGridPanelgrid=newGridPanel();
- String[][]data=(String[][])result;
- MemoryProxyproxy=newMemoryProxy(data);
- ArrayReaderreader=newArrayReader(recordDef);
- Storestore=newStore(proxy,reader);
- store.load();
- grid.setStore(store);
- ColumnConfig[]columns=newColumnConfig[]{
- newColumnConfig("用户名","username",160,true,null,"username"),
- newColumnConfig("密码","password",45),
- newColumnConfig("邮箱","email",65),
- newColumnConfig("电话","phone",65)};
- ColumnModelcolumnModel=newColumnModel(columns);
- grid.setColumnModel(columnModel);
- grid.setFrame(true);
- grid.setStripeRows(true);
- grid.setAutoExpandColumn("username");
- grid.setHeight(350);
- grid.setWidth(600);
- grid.setTitle("用户信息");
- ToolbarbottomToolbar=newToolbar();
- bottomToolbar.addFill();
- bottomToolbar.addButton(newToolbarButton("清除排序",
- newButtonListenerAdapter(){
- publicvoidonClick(Buttonbutton,EventObjecte){
- grid.clearSortState(true);
- }
- }));
- grid.setBottomToolbar(bottomToolbar);
- panel.add(grid);
- RootPanel.get().add(panel);
- }
- });
- }
- }
b. AsyncCallback 接口定义了两个方法: onSuccess(Object result) 和 onFailure(Throwable caught)。必须定义一个可以实现这两个方法的类。当执行远程调用时,模型类的实例并将其传递给异步服务方法。最后,服务器端资源完成,然后调用代码中两个方法之一。成功方法的参数是接口和实现中的调用的返回值。
六、 展示效果
a. 凌晨1点了,收工睡觉;先看看效果吧