GWT questions. How to implement this kind of Tab Panel or Docklayout Panel

Question

I have a complicated GWT question. Wish someone can give me some tips.

I want to create a panel that looks like in the following( content on the left, and some texts in the middle of the right side(tab), OR on the top of right side. (see the first picture)

Firstly, I considered the tab panel. but tap panel only has the horizontal tab on top. So this will not work unless I use third party libraries.

Then I tired the docklayoutpanel. but there is some problem as well. I put the content in mid, and put a label with some text in east. The height of the tab will be the same as the height of content. (see the 2nd picture). I dont like this. I dont want the white space shown up.

So does anyone have good idea about how to implement this kind of panel?

Thanks a lot.

Regards!

1st picture

|-------------------------|

|------- content ---------|---------|

|-------------------------|---tab---|

|-------------------------|---------|

| ------------------------|

---

2nd picture

|-------------------------|white space|

|------- content ---------|-----------|

|-------------------------|----tab----|

|-------------------------|-----------|

| ------------------------|white space|

Also, for the 2nd method, I tried to set the east area of docklayoutpanel to be transparent. But I did not know how to do this. and i am not sure if it will clean out the white space area.

Answer 1

Put the tabs in an "east" panel with height: 100%, and give it the background color you want. Put the main content in a "center" panel. Do not use "north" or "south".

If you want vertical centering for the tabs, then the easiest method is to use VerticalPanel with verticalAlignment="MIDDLE".

<ui:style>
  .centerPanel { background-color: royalblue; }
  .eastPanel { background-color: lightblue; width: 100%; height: 100%; }
</ui:style>

<g:DockLayoutPanel unit="EM">

  <g:center>
    <g:FlowPanel addStyleNames="{style.centerPanel}">
      <g:Label>Content</g:Label>
    </g:FlowPanel>
  </g:center>

  <g:east size="8">
    <g:VerticalPanel addStyleNames="{style.eastPanel}" 
                   verticalAlignment="MIDDLE">
      <g:FlowPanel>
        <g:Label>Tab1</g:Label>
        <g:Label>Tab2</g:Label>
      </g:FlowPanel>
    </g:VerticalPanel>
  </g:east>

</g:DockLayoutPanel>

The result looks like this: