通过GWT示例MAIL学习GWT的客户端开发一：整体布局

为了更好的使用GWT，Google提供了一些参考应用程序，MAIL(http://gwt.google.com/samples/Mail/Mail.html)是其中比较经典的一个。首先它给我们演示了如何利用GWT提供的控件来从整体上设计一个结构清晰的客户端。

 

一、整体框架：

一般一个网页整体看都分成了几部分，比如csdn的这个当前页面就可以看成是5部分，顶部包括一个网站菜单栏和一个博客菜单栏，左边是导航栏，右边是相信内容，底部是网站的信息。在GWT中网页框架是建立在各式各样的Panel的基础上的。像这种整体的分布就可以通过DockPanel或着是DockLayoutPanel来实现。（Google给我们提供了DockPanel的使用示例：http://gwt.google.com/samples/Showcase/Showcase.html#!CwDockPanel）。在MAIL示例中使用的是DockLayoutPanel将页面整体上分为North和center两部分（在GWT中是通过东西南北中来分的，与地图的方向表示一致），而center又被分成west、north、center三部分参见Mail.ui.xml：

<ui:UiBinder
  xmlns:ui='urn:ui:com.google.gwt.uibinder'
  xmlns:g='urn:import:com.google.gwt.user.client.ui'
  xmlns:mail='urn:import:com.google.gwt.sample.mail.client'>

  <g:DockLayoutPanel unit='EM'>
    <g:north size='5'>
      <mail:TopPanel ui:field='topPanel' />
    </g:north>

    <g:center>
      <g:SplitLayoutPanel>
        <g:west size='192'>
          <mail:Shortcuts ui:field='shortcuts' />
        </g:west>

        <g:north size='200'>
          <mail:MailList ui:field='mailList' />
        </g:north>

        <g:center>
          <mail:MailDetail ui:field='mailDetail' />
        </g:center>
      </g:SplitLayoutPanel>
    </g:center>
  </g:DockLayoutPanel>

</ui:UiBinder>

二、North的实现

 

MAIL的顶部内容较少，结构比较简单，所以只需要使用div既可满足需要，但是因为div是html标签，所以不能直接将其放到DockLayoutPanel中，而只能放到HtmlPanel中，所以在顶部先是添加了一个HtmlPanel，然后在HtmlPanel内部添加了div，代码示例TopPanel.ui.xml：

<g:HTMLPanel>
    <div class='{style.logo}'/>

    <div class="{style.statusDiv}">
      <div>
        <b>Welcome back, [e-mail]</b>
      </div>

      <div class='{style.linksDiv}'>
        <g:Anchor href='javascript:;' ui:field='signOutLink'>Sign Out</g:Anchor>
        &nbsp;
        <g:Anchor href='javascript:;' ui:field='aboutLink'>About</g:Anchor>
      </div>
    </div>
</g:HTMLPanel>

 

三、center的west部分的实现

MAIL的左部是一个导航栏，其内部又分成了三部分，而且可以做到隐藏其中的两部分，所以采用了StackLayoutPanel（可以垂直叠放其子节点且每次只能显示其中的一个，通过点击其头部来显示），代码示例Shorcuts.ui.xml

<g:StackLayoutPanel styleName='{style.shortcuts}' unit='EM'>
    <g:stack>
      <g:header size='3'><div class='{style.stackHeader}'><div class='{style.mailboxesIcon}'/> Mailboxes</div></g:header>
      <mail:Mailboxes ui:field='mailboxes'/>
    </g:stack>

    <g:stack>
      <g:header size='3'><div class='{style.stackHeader}'><div class='{style.tasksIcon}'/> Tasks</div></g:header>
      <mail:Tasks ui:field='tasks'/>
    </g:stack>

    <g:stack>
      <g:header size='3'><div class='{style.stackHeader}'><div class='{style.contactsIcon}'/> Contacts</div></g:header>
      <mail:Contacts ui:field='contacts'/>
    </g:stack>
  </g:StackLayoutPanel>

 

四、center的North部分的实现

这一部分实现的是邮件列表的显示功能，而其列表的表头和表体又是分开来实现的（上下结构），所以这部分又使用了一个DockLayoutPanel（当然也可以使用一个verticalPanel），代码示例MailList.ui.xml:

 <g:DockLayoutPanel styleName='{style.outer}' unit='EM'>
    <g:north size='2'>
      <g:FlexTable ui:field='header' styleName='{style.header}' cellSpacing='0' cellPadding='0'/>
    </g:north>

    <g:center>
      <g:ScrollPanel>
        <g:FlexTable ui:field='table' styleName='{style.table}' cellSpacing='0' cellPadding='0'/>
      </g:ScrollPanel>
    </g:center>
  </g:DockLayoutPanel>
五、center的center部分的实现

因为内部又是一个上下结构，所以又使用了DockLayoutPanel，代码示例MailDetail.ui.xml：

<g:DockLayoutPanel unit='EM' styleName='{style.detail}'>
    <g:north size='6'>
      <g:HTMLPanel styleName='{style.header}'>
        <div class='{style.headerItem}' ui:field='subject'/>
        <div class='{style.headerItem}'><b>From:</b> <span ui:field='sender'/></div>
        <div class='{style.headerItem}'><b>To:</b> <span ui:field='recipient'/></div>
      </g:HTMLPanel>
    </g:north>

    <g:center>
      <g:ScrollPanel>
        <g:HTML styleName='{style.body}' ui:field='body' wordWrap='true'/>
      </g:ScrollPanel>
    </g:center>
  </g:DockLayoutPanel>

 

GWT给我们提供了各式各样的Panel（http://blog.csdn.net/fhm727/archive/2010/04/04/5449648.aspx），在实际的开发中，我们要根据具体的需求来选择适合的panel