BlogJava-peacess-随笔分类-gwt（google web toolkit）

gwt项目开发的经验集----会一直增加

中东 — Mon, 06 Aug 2007 14:41:00 GMT

摘要: 13，用gwt在web中实现上下文菜单（右键菜单、弹出菜单） 2007年8月3日
12，gwt中使用float样式实现完成 2007年7月28日
11，11，文件下载（downloat，通过表单方式）完成 2007年8月6日
10，阻止事件传到父对象 2007年7月31日
9，文件上传客户端（隐藏表单） 2007年7月29日
8，不换行：表格字符、多种widget的组合计划中
7，css的（边框）margin、border、padding、width、height与dom对象的属clientWidth、offsetWidth、offsetHeight等的关系及gwt的获取与设置> 完成 2007年5月9日
6，学习资源完成 2006年12月21日
5，给gwt的ui组件增加事件完成 2006年12月17日
4，按钮的鼠标进出样式完成 2006年12月14日
3，元素宽度计算完成
2，对话框居中完成
< 阅读全文

中东 2007-08-06 22:41 发表评论

gwt在eclipse、tomcat中单步调试客户与服务的完整实例---（升级为gwt1.4 进行中）

中东 — Thu, 26 Jul 2007 12:44:00 GMT

使用tomcat进行浏览，而不使用gwt自带的，这样可以取得tomcat的上下文信息，并可以单步客户端

完整的源代码（为了方便编译后的文件也保留了）：Wylpeace-tomcat

环境的建立
1，下载eclipse3.3 :http://download.eclipse.org/eclipse/downloads/index.php
2，下载tomcat6.0 : http://tomcat.apache.org/download-60.cgi
3，下载Tomcat Plugin：http://www.sysdeo.com/eclipse/tomcatplugin
4，安装（怎么安装就自己去google吧）

正式开工
建一个用eclipse开发的gwt项目（如果不想建立，可以下载源代码）
    gwt的命令行方式:http://code.google.com/webtoolkit/gettingstarted.html

在eclipse中配置tomcat的运行环境

    首先把插件配置好
    window--》preference--》tomcat：配置“tomcat home”与“tomcat vesion” --》advanced ：配置“tomcat base”（与“tomcat home”相同） --》jvm setting ：选择“jre”，注意一定是jdk下的jre，不然不能调试服务端代码

    然后呢（配置的内容比较多，没有办法）
    1，在项目下建，如下目录wylpeace.samples.select.WylpeaceSelect/WEB-INF/classes、wylpeace.samples.select.WylpeaceSelect/WEB-INF/lib
    2，在“WEB-INF”下加入文件“web.xml”内容如源代码
    3，把文件gwt-user.jar、gwt-dev-windows.jar、gwt-ll.dll、swt-win32-3235.dll、ojdbc14.jar放入lib目录。
    4，增加库引用“gwt-user.jar、gwt-dev-windows.jar、ojdbc14.jar ”
    5，修改class文件的输出路径，如下图

配置gwt的hosted

    1，右键项目“Wylpeace”--》debug as--》debug如下图所示

    注意图中的选中部分“-noserver -port 8080”(用这种方式可以改变gwt的默认端口8888)，
    还是在这个图中“classpath”标签进行修改,参见：http://www.blogjava.net/peacess/archive/2007/07/24/49447.html

配置tomcat插件

所有配置都完成了，我们可以开始单步调试了
首先重起tomcat（在eclipse中），在调试运行“wylpeace”
这时会提示找不到网页，修改url为：http://localhost:8080/wylpeace.samples.select.WylpeaceSelect/WylpeaceSelect.html
好了整个过程结束，如果有什么问题请联系
    mail：peacess@163.com
    qq：64407724
你也可以参考：http://jroller.com/page/masini?entry=deploy_and_debug_google_web
你也可以参考：http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/338c4b765d7dfc39/c9382d0e65266248?q=tomcat&rnum=3#c9382d0e65266248

中东 2007-07-26 20:44 发表评论

gwt 1.4学习--数据库记录显示实现（二.1）(把源来的内容升级为gwt1.4)

中东 — Tue, 24 Jul 2007 14:42:00 GMT

实现的功能
   在gwt开发中实现，与数据库（oracle）的连接(jdbc)，并显示数据记录集，说白了就是在ajax的gwt架构下与数据库交互。
相关工具
gwt1.4，eclipse3.3
首先说明一下要原理
分为两部分：客户端部分与服务端部分
如果对gwt的远程调用不怎么清楚，请参见：http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.RemoteProcedureCalls.html

客户端部分
   由于客户端只支持jdk1.4的包util与lang（没有jdbc），所以只能自己写一个类存放记录集，如下
public class PeaceResultSet {
    private String[] cols;
    /**
    * @gwt.typeArgs
    */
    private List rows;
    public String[] getCols() {
        return cols;
    }
    public void setCols(String[] cols) {
        this.cols = cols;
    }
    public List getRows() {
        return rows;
    }
    public void setRows(List rows) {
        this.rows = rows;
    }
}
    对此类作一个简单的说明。cols是存放列名的，rows是存放记录行的，请注意在它前面的那一个注释（/**
    * @gwt.typeArgs
    */），一定不能少的，因为，最终这个java代码会被转换成javascript，这里告诉转换的类型的
有了记录集，我们就可以用FlexTable来把我们的记录集显示出来了,如下
public class PeaceTable extends Composite{

    private FlexTable table = new FlexTable();
    public FlexTable getTable() {
        return table;
    }
    public PeaceTable() {
        this.initWidget(table);
    }
    public void showResultSet(PeaceResultSet re)
    {
        this.table.clear();
        if(re != null && re.getRows()!= null && re.getRows().size()>0)
        {
            String[] cols = re.getCols();
            List rows = re.getRows();

            for(int j = cols.length-1; j >= 0; j--)
            {
                table.setText(0,j,cols[j]);
            }

            for(int i = 0; i < rows.size(); i++)
            {
                cols = (String[])rows.get(i);
                for(int j = cols.length-1; j >= 0; j--)
                {
                    table.setText(i+1,j,cols[j]);
                }
            }
        }
        else
        {
            table.setText(0,0,"no data");
        }
    }
    public void callServer(String sql) {
        PeaceSelectResultSetAsync.Util.getInstance().select(sql, new AsyncCallback() {
            public void onFailure(Throwable caught) {
            }
            public void onSuccess(Object result) {
                showResultSet((PeaceResultSet) result);
            }
          });
    }
服务端部分
这一部分是完全的java，可以用java可以使用的全部库（当然自己写的也可以）
我这里用的是jdbc来连接数据库（只是最简单的，因为这里不是说明数据怎么操作的），代码如下
public class PeaceSelectResultSetImpl extends RemoteServiceServlet implements
        PeaceSelectResultSet {

    private static final long serialVersionUID = 1L;

    public PeaceResultSet select(String sql) {
        Connection conn = null;
        Statement stmt = null;
        ResultSet se = null;
        try {
            Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
            String url = "jdbc:oracle:thin:@192.168.1.11:1521:XXXX"; // orclΪ��ݿ��SID
            String user = "uuser";
            String password = "pwd";
            conn = DriverManager.getConnection(url, user, password);
            stmt = conn.createStatement();
            se = stmt.executeQuery(sql);
            ResultSetMetaData rsmd = se.getMetaData();

            String[] cols = new String[rsmd.getColumnCount()];
            List rows = new ArrayList();
            for (int i = cols.length; i > 0; i--) {
                cols[i - 1] = rsmd.getColumnName(i);
            }
            while (se.next()) {
                String[] row = new String[cols.length];
                rows.add(row);
                for (int i = cols.length - 1; i >= 0; i--) {
                    row[i] = se.getString(cols[i]);
                }
            }
            PeaceResultSet kfse = new PeaceResultSet();
            kfse.setCols(cols);
            kfse.setRows(rows);
            return kfse;
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (se != null)
                try {
                    se.close();
                } catch (SQLException e1) {
                    e1.printStackTrace();
                }
            if (stmt != null)
                try {
                    stmt.close();
                } catch (SQLException e1) {
                    e1.printStackTrace();
                }
            if (conn != null)
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
        }
        return null;
    }
}
在下一部分中，我将说明一些注意事项，以及给出完整的源代码！！

中东 2007-07-24 22:42 发表评论

gwt 1.4 学习--数据库记录显示实现（二.2）(把源来的内容升级为gwt1.4)

中东 — Tue, 24 Jul 2007 14:42:00 GMT

接着上一次的内容
注意事项：
    在客户端部分，只能使用jdk的一部分
    把服务端的程序写完后，记得在文件“WylpeaceSelect.gwt.xml”中进行配置，如下代码

          。。。。。。。

          。。。。。。。。

    在eclipse中调试时，会提示找不数据库相的类，要记住做如下操作
       。。。“debug”----》选中“WylpeaceSelect”----》选中“classpath”，单击右下的“restore default entries”，再单击“addvaced”增加源代码目录
如图：

完整个代码（eclipse）：WylpeaceSelect
注意：
     下载代码后修改WylpeaceSelect.launch中的gwt包的路径
      注意加入你的数据库包（oracle的jdbc）

中东 2007-07-24 22:42 发表评论

一个基于gwt的开源项目 -- Dune

中东 — Fri, 04 Aug 2006 08:54:00 GMT

下载：http://sourceforge.net/projects/pdune
说明：基于gwt的项目管理的开源项目

1，实现了像jsp一样的session管理，这一点是相当好的一个参考实现
2，有一个表格的实现
3，对gwt自身的例子参考比较多，比如“sink”等
4，。。。。。。

中东 2006-08-04 16:54 发表评论

gwt的开发工具(含可视化)

中东 — Wed, 26 Jul 2006 05:56:00 GMT

可视化开发工具
一 gwt的可视化开发工具 ---- VistaFei
特点：
1，基于eclipse
2，可以自由拖放组件
3，没有说是否免费
4，这个版本对于初学gwt的人很有帮助，但对于真实的应用还不行

主页：http://www.wirelexsoft.com/
下载地址：http://www.wirelexsoft.com/wforum/viewtopic.php?t=48
要注册用户才可以下载

二 gwt的可视化开发工具 ---- GWTDesigner
1，没有使用过
2，相关链接 http://www.instantiations.com/windowbuilderpro/gwt/install.html

开发工具
一 eclipse这个就不用我介绍了

二 netbean 这个也不说了

三 googlipse
1，eclipse的一个插件
2，现在不支持可视化
3，相关链接 http://sourceforge.net/project/showfiles.php?group_id=169652

官方的参考：http://code.google.com/webtoolkit/thirdparty.html
以后再增加

中东 2006-07-26 13:56 发表评论

gwt学习--新增包（一）

中东 — Sat, 27 May 2006 01:06:00 GMT

    在一个gwt（google web toolkit）中，一般有一个默认的包“client”，如果我新增了一个包“lib”应该怎么做呢？
    方法一（直接增加资源路径）：
       比如你的项目名为“AX”，那么会有一个对应的文件“AX.gwt.xml”，在此文件中加入如下内容

          。。。。。

          。。。。。

    方法二（多重包含）：
       首先找到文件“AX.gwt.xml”在文件中加入对另外一个文件（比如“YY.gwt.xml”）的引用，如下
       。。。。

       。。。。
       然后在文件“YY.gwt.xml”中加入与方法一相似的代码，如下



    方法三（新增包与包“client”不在同一目录时）(参考)
       这里举一个定义组件的例子
       自定义组件包为“com.gwt.components.client”
       在增加文件:在“com.gwt.components”下增加文件“user.gwt.xml”
          内容：

在

AX.gwt.xml中加入如下
       。。。。

       。。。。
       此时默认的会包含文件“user.gwt.xml”所在目录下的“client”，如果在此目录下你还有其它的目录，就需要用文件“user.gwt.xml”中加入“
在google的网站上有对“module”更专业的说明：http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.Fundamentals.Modules.html

中东 2006-05-27 09:06 发表评论

gwt介绍（web应用程序开发的桌面版）

中东 — Sat, 20 May 2006 04:04:00 GMT

几大特点

优秀的ajax开发架构

以与桌面应用程序相同的方式开发web应用程序
    整个开发，你都是在用java来写代码，写完后可以单步调试
    参见：http://code.google.com/webtoolkit/documentation/examples/desktopclone/demo.html

适用于：
    界面不多，
    相互变化复杂
    且与后台交互较多的应用程序，
    还有加上一点，就是数据要集中保存的。
    比如聊天工具，就比较适合用这个来做；比如客户关系管理软件；比如edi软件等

工具地址：http://code.google.com/webtoolkit/

正在学习中....后继

中东 2006-05-20 12:04 发表评论