Вопросы GWT. Как реализовать этот вид панели вкладок или панели Docklayout

Question

У меня сложный вопрос GWT. Жаль, что кто-то может дать мне несколько советов.

Я хочу создать панель, которая выглядит следующим образом (содержимое слева и некоторые тексты в середине правой стороны (вкладка), ИЛИ в верхней части правой стороны. (См. Первое изображение)

Во-первых, я рассмотрел панель вкладок. но панель касания имеет только горизонтальную вкладку сверху. Так что это не будет работать, если я не использую сторонние библиотеки.

Тогда мне надоела док-станция. но есть и некоторые проблемы. Я поместил содержимое в середину, а на востоке поместил ярлык с текстом. Высота вкладки будет равна высоте содержимого. (см. 2-е изображение). Мне это не нравится Я не хочу, чтобы появилось пустое пространство.

Так кто-нибудь имеет хорошее представление о том, как реализовать такую ​​панель?

Большое спасибо.

С уважением!

1-е изображение

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

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

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

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

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

---

2-я картина

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

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

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

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

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

Кроме того, для второго метода я попытался установить прозрачность восточной области панели док-станции. Но я не знал, как это сделать. и я не уверен, очистит ли это область пробела.

Answer 1

Поместите вкладки в "восточную" панель с height: 100%и дайте ему желаемый цвет фона. Поместите основной контент в "центральную" панель. Не используйте "север" или "юг".

Если вы хотите вертикальное центрирование для вкладок, то самый простой способ - использовать VerticalPanel с 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>

Результат выглядит так: