自己写代码 - HelloHi开发流水账 一 先画个躯壳

很早以前就听说了AppEngine，可惜当时只支持Python，本来大有为了AppEngine学习Python的意思，可惜当时忙着毕业。后
来AppEngine支持Java了，并且有了Eclipse插件，从创建工程到部署到AppEngine，点几个按钮就可以了事，实在是便宜了我这种被
windows便宜惯了的菜鸟。夸张一点的说，对我这样的菜，IDE的差异甚至不亚于语言的差异。那些在Linux下，用着Vim/Emacs，敲着命令
行的老鸟就不要嘲笑我了。

其实Java我也不是很熟，都怪大学没好好学，大学里被老师暗示，以为C++/Java选
一即可，后来发现这两种语言也没那么大的差别，至于.net和Java，那基本就是一样的。支持Java还不算，还有了GWT这么个东西，可以用Java
来写JavaScript，让我这种从未接触过Js的人也有幸能玩玩Ajax。

于是乎也想玩玩Web2.0，做个啥呢，猛
然想起N就以前听说的Omegle
这
么个东西。这是一个随机聊天系统，大约同时有两三千人在线，你登陆上去之后，可以开始聊天，系统会随机选择一个空闲的陌生人和你聊。玩了玩发现上面基本北
欧人居多，北欧人真的那么闲么？

咱也打算山寨一把，一步一步来吧。

IDE就不说多了，Eclipse3.5，Help->Install New
Software->http://dl.google.com/eclipse/plugin/3.5，安装好插件，就可以了。

然后
File->New->Web Application Project，填好project
name：hellohi和package就生成了一个Web Application Project的sample。

这就已经可以跑了，看看
先。Run as->Web Application
，Eclipse下面的Development
Mode窗口会显示一个地址，copy之，放到浏览器。可以看到一个页面，有一个输入框，有一个Send按钮，按了会弹出一个对话框，显示一些从服务器来
的信息。第一次使用会需要安装浏览器插件，我的ff3.6还是有兼容性问题，推荐使用chrome。

先把界面改成我们想要的。修改
Hellohi.html，去掉那些不要的内容，加入我们想要的内容。先放一个Power by
Google的Logo吧。在html的body中加入<img
src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif"
alt="Powered by Google App Engine"
/>，然后我们加一个div，用来放置聊天的界面，在Logo后面加入<div
id="mainDiv"></div>。

创建一个类HelloUi，extends Composite，

public
class HelloUi extends Composite{

private DecoratorPanel decPanel
= new DecoratorPanel();

private VerticalPanel vPanel = new
VerticalPanel();

private ScrollPanel scrollPanel = new
ScrollPanel();

private VerticalPanel contentPanel = new
VerticalPanel();

private TextArea inputText = new TextArea();

public HelloUi() {

initWidget(decPanel);

decPanel.add(vPanel);

vPanel.add(scrollPanel);

scrollPanel.add(contentPanel);

scrollPanel.setPixelSize(400,
300);

vPanel.add(inputText);

inputText.setPixelSize(400, 100);

}

}
修改Hellohi，他是一个
EntryPoint，把不要的全删掉，然后在onModuleLoad()里面把我们的HelloUi添加到页面上：

public class Hellohi implements EntryPoint {

private HelloUi ui = new HelloUi();

@Override

public void
onModuleLoad() {

RootPanel.get("mainDiv").add(ui);

}

}
现
在刷新一下，页面会是这个样子：



当然
这只是左上角的页面，其余地方都是空白。顶上是App
Engine的Logo，下面是我们的mainDiv。DecoratorPanel就是外面这一圈蓝色的边边，DecoratorPanel里面是一个
VerticalPanel，VerticalPanel里面一个ScrollPanel，一个TextArea，ScrollPanel里面又有一个
VerticalPanel是作为现实聊天内容的，放在ScrollPanel里面聊太多的话就会有滚动条。Panel的大小都是写死在里面
的，GWT2.0提供了一种UiBinder的方式，在xml里面编辑界面，不用把这些都写在程序里。不过一来刚开始我不想搞那么复杂，二来个人认为对程
序员来讲直接写在代码里其实是更方便的一种方式，如果横竖都是我一个人在写也就不需要把界面和逻辑分那么严格。当年做毕设的时候用WPF，写xaml实在
是费劲，那还是有blend可以用。如果google这个uibinder没有图形化的界面，除了可以把界面和逻辑的代码从物理强行掰开，貌似也没有大的
意义。愚见哈。

最后，在war中添加一个favicon.ico，这样就不会再有得不到favicon的报错。http://www.favicon.cc/
这
里可以制作favicon，我在上面随便画了个“Hi”，然后把icon下载下来放到war下面。现在刷新一下页面，可以看到tab上的图标了。