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

本文链接：https://blog.csdn.net/Heliumy/article/details/5277938

很早以前就听说了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上的图标了。