Search code examples
gwtuibindergwt-extgxtgwt-designer

How to make an application layout like desktop app in GWT?

I am new to GWT although having develop website for a long time, i really want to try this out.

Im trying to layout a GWT application using GWT Designer. My idea is to have the design as ff:

-----------------------------------
|Header - fixed height            |
-----------------------------------
|Navigation - fixed height        |
-----------------------------------
|  Component       <-|-> Right    |
|   box   (a)        |   sidebar  |
|resize with screen  |predefine   |
|                    |    width   |
-----------------------------------
|Group control- fixed size        |
-----------------------------------

What could be the best way to have this design since I am really stuck at the design phase of this application. How can I make it look like an desktop application with auto fit width and height for the component box (a).

I am using the GXT and GWT Combination. so the control can be pure GWT or with GXT Support is alright for me. Or the logic behind is good also.

Thank you very much.

Solution

  • Take look at Jason Hall's answer. Here is Uibinder sample (if needed):

    <g:DockLayoutPanel unit='EM'>
    <g:north size='4'>
      <g:Label> Header & Navigation </g:Label>
    </g:north>
    <g:center>
      <g:SplitLayoutPanel>
        <g:east size='128'>
          <g:Label> Right Sidebar </g:Label>
        </g:east>
        <g:center>
          <g:ScrollPanel>
            <g:Label> Component Box </g:Label>
          </g:ScrollPanel>
        </g:center>
      </g:SplitLayoutPanel>
    </g:center>
    <g:south size="2">
      <g:Label> Group control </g:Label>            
    </g:south>
</g:DockLayoutPanel>