GWT 学习笔记2

 一、用户界面（User Interface）
在开发GWT应用程序时要注意一件事，它的开发非常像Swing，SWT，甚至是VB。你创建按钮、列表、表单，经事件监听器与之交互。你进行布局，试着让它们在一定的屏幕分辨率和屏幕尺寸下看起来更好看。主要的不同之处在于GWT应用是显示在Web浏览器上，它涉及到HTML页面。
传统的Web应用程序是以一系列的HTML页面为结构，并以之导航的。
1、与HTML的联系
每一个GWT应用程序里面都存在一个HTML页面，它可以是一个静态的页面，或者是服务器端的页面如JSP，Struts，Ruby on Rails等。
实际上，MyApp.html存在于public目录，意味着它将被一字不差的复制到最终的服务器端的部署区域，如果页面还链接着图片，样式表等，它们也都会复制到同样的目录下。
在HTML页面代码的顶部需要meta标签来联系GWT组件。
如：<meta name='gwt:module' content='com.xyz.MyApp'>
一个GWT组件是一个客户端代码和资源的集合。名为com.mycompany.MyApp的组件被定义到组件文件src/com/mycompany/MyApp.gwt.xml中。
-----------------------------------------------
<module>
  <!-- Inherit the core Web Toolkit stuff. -->
  <inherits name='com.google.gwt.user.User'/>
  <!-- Specify the app entry point class. -->
  <entry-point class='com.xyz.client.MyApp'/>
</module>
-----------------------------------------------
在逻辑上，当HTML页面载入后，GWT查看meta标签，读入xml文件并得到类名，在入口点类中开始调用代码。
2、入口点（Entry Point）
入口点类（MyApp）扩展了入口点接口并提供了一个方法onModuleLoad()。这个方法在构造GWT应用程序用户界面中起作用。
MyProject/src/com/xyz/client/MyApp.java
-----------------------------------------------
public void onModuleLoad(){
  final Button button=new Button("Click me");
  final Label label=new Label();
  //...
-----------------------------------------------
上面的脚手架代码创建了两个GWT用户界面元素，一个按钮和一个标签。
如果要追溯和浏览HTML文件，其代码底部有两个占位符用于动态内容：
MyProject/src/com/xyz/public/MyApp.html
-----------------------------------------------
<table align=center>
  <tr>
    <td id="slot1"></td>
    <td id="slot2"></td>
  </tr>
</table>
-----------------------------------------------
Java代码将通过“id=”来引用并填充你创建的按钮和标签。
MyProject/src/com/xyz/client/MyApp.java
-----------------------------------------------
RootPanel.get("slot1").add(button);
RootPanel.get("slot2").add(label);
-----------------------------------------------
上面的表定义了怎样使用小部件在屏幕上布局。
还有一个更好的布局方式是使用面板（Panel）。GWT面板也是一个小部件，它能容纳一个或多个小部件并以特殊的方式管理它们。
例如：你可以创建一个水平面板（Horizontal Panel），在其上加入按钮和标签，再把该面板加入到RootPanel的页面。即：
RootPanel.get().add(hPanel);
3、事件（Event）
继续看刚才的例子，让按钮做一些事：
MyProject/src/com/xyz/client/MyApp.java
-----------------------------------------------
button.addClickListener(new ClickListener(){
  public void onClick(Widget sender){
    ...
-----------------------------------------------
4、小部件（Widget）
（1）文件上传 FileUpload
设置输入element的名字并使用setName()方法提交到服务器。
（2）伸缩表和网格 FlexTable and Grid
表可以包含文本、HTML和其它任意小部件。网格总是相同的，有固定的尺寸。
使用setText()，setHTML()，setWidget()方法来加入单元项，使用getCellFormatter()来定制单元的外观。单元可以跨越多行或多列。
（3）Frame and NamedFrame
此部件包裹在HTML的<iframe>元素中，包含于任意Web站点。
使用setUrl()方法来设置web页面地址。
其CSS风格：.gwt-Frame{}
（4）HTML
其CSS风格：.gwt-HTML{}
（5）Image
在给定的URL显示图片的小部件。
使用setUrl()方法来设置图片地址。使用addLoadListener()方法来检测图片是否载入或是否有错。
其CSS风格：.gwt-Image{}
（6）Hyperlink
其CSS风格：.gwt-Hyperlink{}
（7）Label
其CSS风格：.gwt-Label{}
（8）ListBox
其CSS风格：.gwt-ListBox{}
（9）MenuBar and MenuItem
使用addItem()来加入菜单栏。
其CSS风格：
.gwt-MenuBar{the menu bar itself}
.gwt-MenuItem{menu items}
.gwt-MenuItem-selected{selected menu items}
.gwt-Frame{}
（10）PasswordTextBox
其CSS风格：.gwt-PasswordTextBox{}
（11）TabBar
常用于Tab面板的一部分。调用addTab()方法来加入TarBar，调用addTabListener()来检测聚焦前（onBeforeTabSelected()）和聚集后（onTabSelected()）tab被选择的情况。
其CSS风格：
.gwt-TarBar{the tab bar itself}
.gwt-TarBarFirst{the left side spacer of the bar}
.gwt-TabBarRest{the right side spacer of the bar}
.gwt-TabBarItem{tabs}
.gwt-TabBarItem-selected{additional style for selected tabs}
（12）TextArea
文本域允许显示键入的多行文本。使用setCharacterWidth()和setVisibleLines()方法来设置文本域的尺寸。
调用getCursorPos()，getSelectionLength()，getSelectedText()来检测当前所选择的文本。
调用addKeyBoardListener()方法来监测按键情况。
其CSS风格：.gwt-TextArea{}
（13）TextBox
文本框显示键入的单行文本。
设置文本框的尺寸用setVisibleLength()方法。
调用getCursorPos()，getSelectionLength()，getSelectedText()来检测当前所选择的文本。
调用addKeyBoardListener()方法来监测按键情况。
（14）Tree and TreeItem
调用addItem()方法增加树子项。
其CSS风格：
.gwt-Tree{the tree itself}
.gwt-TreeItem{a tree item}
.gwt-TreeItem-selected{a selected tree item}
5、面板（Panel）
面板是一个包含多个小部件的部件。面板也可以包含其它面板。可以使用它在网格下、层面下（deck）、行、列下布局小部件。
（1）AbsolutePanel
允许面板重叠。
（2）DeckPanel
所有的小部件在一个“deck”中，一次只能显示一个小部件。
用add()方法加入小部件，用showWidget()显示某个小部件。
（3）DockPanel
面板的中央部分是保留部分，四周东西南北均可添加部件。
（4）FlowPanel
使用缺省的HTML布局。
（5）FocusPanel
（6）FormPanel
面板的内容对应HTML的<form>元素。
FormPanel只包含如下元素：TextBox，PasswordTextBox，RadioButton，CheckBox，TextArea，ListBox，FileUpload。
使用setName()方法把各元素名和表单域联系在一起，传递到服务器。
使用setAction()方法设置URL用于提交表单。submit()实际提交表单。
调用addFormHandler()检测表单是否已提交。
（7）HorizontalPanel
（8）HTMLPanel
（9）PopupPanel
popup面板可以弹出其它小部件。
（10）ScrollPanel
面板的内容可卷。使用构造器或者setWidget()函数定义包裹的部件。
（11）StackPanel
垂直的方式显示，类似于子菜单。
（12）TabPanel
（13）VerticalPanel