2.4/samples/expenses/src/main/java/com/google/gwt/sample/expenses/client/ExpensesShell.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
  xmlns:ui='urn:ui:com.google.gwt.uibinder'
  xmlns:g='urn:import:com.google.gwt.user.client.ui'
  xmlns:m='urn:import:com.google.gwt.mobile.client'
  xmlns:e='urn:import:com.google.gwt.sample.expenses.client'
  xmlns:a='urn:import:com.google.gwt.sample.gaerequest.client'>

  <ui:with field='styles' type='com.google.gwt.sample.expenses.client.style.Styles' />

  <ui:image field='logo' />

  <ui:style>
    @sprite .logo {
      gwt-image: 'logo';
    }
    
    .login {
      position: absolute;
      left: 75%;
      right: 0%;
      text-align: center;
      background-color: white;
      color: #7b8fae;    
    }
    
    .title {
      border-bottom: 1px solid #c3c3c3;
    }
    
    .titleText {
      color: #7b8fae;
      font-size: 20pt;
      font-weight: bold;
      text-shadow: #ddd 3px 3px 1px;
    }
    
    .expenseTree {
      background-color: #d7dde8;
      border-right: 1px solid #c3c3c3;
    }
  </ui:style>

  <g:DockLayoutPanel unit='PX'>
    <g:north size='96'>
      <g:HTMLPanel styleName='{style.title}'>
        <a:LoginWidget styleName='{style.login}' ui:field="loginWidget"/>
        <table height='100%' cellpadding='8' cellspacing='0'>
          <tr>
            <td>
              <div class='{style.logo}' />
            </td>
            <td class='{style.titleText}' valign='middle'>
              Expense Reports
            </td>
          </tr>
        </table>
      </g:HTMLPanel>
    </g:north>

  <g:center>
    <g:DockLayoutPanel ui:field='dockLayout'>
      <g:west size='225'>
        <m:MobileScrollPanel addStyleNames='{style.expenseTree}'>
          <e:ExpenseTree ui:field='expenseTree' />
        </m:MobileScrollPanel>
      </g:west>
      <g:center>
        <e:SlidingPanel ui:field='slidingPanel'>
          <!-- The order of the children determines which way they slide -->
          <e:ExpenseReportList ui:field='expenseList' />
          <e:ExpenseReportDetails ui:field='expenseDetails' />
        </e:SlidingPanel>
      </g:center>
    </g:DockLayoutPanel>
  </g:center>
  </g:DockLayoutPanel>

</ui:UiBinder>