单一布局回复的运行效果
div 窗口。有标题和关闭按钮。
GWT Wave 开源代码运行跑通分析(1)
Created Wednesday 13 April 2011
google 果然是大神。虽然早就知道 wave的代码开源了但是一直据没有跑通。
连编译都没有通过。不过最近终于有了点突破。
找到了一个demo的入口。
如上图第一个所示。借助GWT google 将ajax 做到了及至。同时弄的应用具复杂。
看这个代码看了很久了。好多地方没有太明白。
将学习理解的记录下来。
编辑器文件路径
org/waveprotocol/wave/client/wavepanel/impl/toolbar/images/edit
多种颜色边框,绿色,银色
org/waveprotocol/wave/client/wavepanel/view/dom/full/frame
聊天按钮,默认头像图片
org/waveprotocol/wave/client/wavepanel/view/dom/full/mock/
面板,添加,窗口图片
org/waveprotocol/wave/client/wavepanel/view/dom/full/
三种颜色,蓝色,白色,绿色,肉色button
org/waveprotocol/wave/client/widget/button/text/
添加,灯泡,最大最小关闭按钮。
org/waveprotocol/wave/client/widget/button/icon
wave破损图片,wave加载图片
org/waveprotocol/wave/client/gadget/renderer
附件加载,边框图片
org/waveprotocol/wave/client/doodad/attachment/render
没有使用其他的 ioc框架。和一般的系统不同 在client 下面的类都要转换成 javacript 代码。
google在 client 下面使用了大量的接口。
1)分析google的窗口构造。
创建一个桌面窗口。
// 桌面窗口
DesktopPopupChrome desktopPopupChrome = new DesktopPopupChrome();
通过一个构造器DesktopPopupProvider创建窗口的弹出布局。
UniversalPopup desktopUniversalPopup = new DesktopPopupProvider()
.createPopup(RootPanel.get().getElement(),
dropdownPopupPositioner, desktopPopupChrome, false);
这个 UniversalPopup 就是一个接口。
创建一个按钮是通过 工厂类创建的。
ClickButtonWidget iconButtonTemplateMin = ButtonFactory
.createIconClickButton(IconButtonStyle.PANEL_MINIMIZE, "最小化",
new ClickButtonListener() {
@Override
public void onClick() {
}
});
变量 IconButtonStyle.PANEL_MINIMIZE 是类里面写死的常量。
不同数值代表不同的按钮图标。
创建一个桌面窗口的全部代码
2)创建一个聊天程序
// 桌面窗口
DesktopPopupChrome desktopPopupChrome = new DesktopPopupChrome();
// 显示标题栏
desktopPopupChrome.enableTitleBar();
desktopPopupChrome.setPixelSize(300, 300);
DropdownPopupPositioner dropdownPopupPositioner = new DropdownPopupPositioner();
UniversalPopup desktopUniversalPopup = new DesktopPopupProvider()
.createPopup(RootPanel.get().getElement(),
dropdownPopupPositioner, desktopPopupChrome, false);
// 显示
desktopUniversalPopup.show();
// 设置标题
desktopUniversalPopup.getTitleBar().setTitleText("1234");
// 添加弹出窗口内容
HTML html = new HTML("普通html组件");
// html.setPixelSize(300, 300);
desktopUniversalPopup.add(html);
ClickButtonWidget iconButtonTemplateMin = ButtonFactory
.createIconClickButton(IconButtonStyle.PANEL_MINIMIZE, "最小化",
new ClickButtonListener() {
@Override
public void onClick() {
}
});
desktopUniversalPopup.getTitleBar().addButton(iconButtonTemplateMin);
ClickButtonWidget iconButtonTemplateMax = ButtonFactory
.createIconClickButton(IconButtonStyle.PANEL_MAXIMIZE, "最大化",
new ClickButtonListener() {
@Override
public void onClick() {
}
});
desktopUniversalPopup.getTitleBar().addButton(iconButtonTemplateMax);
ClickButtonWidget iconButtonTemplateClose = ButtonFactory
.createIconClickButton(IconButtonStyle.PANEL_CLOSE, "关闭",
new ClickButtonListener() {
@Override
public void onClick() {
}
});
desktopUniversalPopup.getTitleBar().addButton(iconButtonTemplateClose);
2) 代码/src/com/freewebsys/sns/client/TestTwo.java
是创建图1的代码。刚跑通。代码本身可能只是google的一个测试。
但是上面的回复。都可以用。效果都可以看到。
光标选中。
点击回复。。
传说中的盖楼。
程序比较大 37 MB ,超出上传的范围了。直接上传到googlecode的服务器上面了。
下子地址:
http://code.google.com/p/freewebsys/downloads/detail?name=GwtWave.2011.04.13.tar.gz
如果要运行程序需要使用google的GWT插件,安装使用参考google文档。
http://code.google.com/webtoolkit/usingeclipse.html
接下来继续研究Wave的代码。然后用GWT + wave 创建一个SNS 社区。
继续研究中。
- 大小: 183.4 KB
- 大小: 18.5 KB
- 大小: 49 KB
- 大小: 59.9 KB
- 大小: 94.4 KB
分享到:
相关推荐
《gwt揭秘》书上源代码,由于版本更新较快,new一个新的web application project后copy代码比较好
是gwt的入门技术框架,里面包含常用api的使用,非常适合对gwt和gxt框架有兴趣的人进行学习
GWT开源项目,使用了很多的表格!很不错的!
博文链接:https://xmx0632.iteye.com/blog/52499
gwt 练习gwt 练习gwt 练习gwt 练习
GWT入门与经典实例解析源码
使用GWT的一个简单的Login示例 GWT是 Google Web Toolkit的简称。
客户端请求,服务端返回数据完成,虽然代码很简单,但代表这整个GWT流程;接下来就需要熟悉GWT各种控件、面板、样式等。 具体说明可参考:http://blog.csdn.net/chiperfect/article/details/7666102
EXT-GWT2.0.1+API+DOC gwtdesigner Gwt-Ext基础-中级-进阶 GWT快速开发 GWT入门 GWT中文教程
fwefwefwGWT工具GWT工具GWT工具GWT工具GWT工具GWT工具
gwt 入门,是你开始学习gwt的大道 安装之后的目录结构为: C:\程序开发\Java\gwt-windows-1.4.59 doc(文档目录,开发文档和Java API文档) samples(示例代码目录,非常有名的KitchenSink示例代码即在此目录中)...
NULL 博文链接:https://zkf60553.iteye.com/blog/1269685
Gwt中文手册,GWt入门Gwt中文手册,GWt入门Gwt中文手册,GWt入门
Google最近推出的GWT有望为我们解决这个难题,GWT是一个开发Ajax应用的框架,它使程序员用Java同时开发客户端和服务器端的代码。GWT的编译器会把用于开发客户端的Java代码转化成Javascript和Html,而程序员不用关心...
NULL 博文链接:https://musicmmm.iteye.com/blog/751262
GWT GWT是GWT 2.5及更高版本的官方开源项目。 在本文档中,您将获得一些快速说明,以根据源代码构建SDK并运行其测试。 有关更详细的文档,请访问我们的。 如果您有兴趣为该项目做贡献,请阅读部分。构建GWT SDK: ...
很好的资源,在这边分享下,提供给想要寻找GWT资源的兄弟姐妹们 如果哪位兄弟有好的资源不要忘了分享啊
1. 准备开发环境 2. Hello GWT 3. 模块 4. JSNI 5. 在GWT中使用XML 6. GWT控件详解 7. 使用GWT控件 8. GWT-RPC 9. Ext GWT 10. (实战)俄罗斯方块游戏 11. (实战)费用申请审批流程 12. GWT与Flex整合 13. 图片缓存 ...
GWT的环境搭建详细配置说明,GWT中RPC调用的详细例子,内附代码加文档说明。
GWT与Spring整合,分析的很透彻,有代码过程。