私は持っWidget
ていTabBar
ます。
<g:DockLayoutPanel unit="EM">
<g:north size="2.5">
<g:TabBar height="2.5em" ui:field="tabBar" />
</g:north>
<g:center>
<g:SimpleLayoutPanel ui:field="contentWidget" />
</g:center>
</g:DockLayoutPanel>
ユーザーがタブを選択すると、ウィジェットを設定しますcontentWidget
。
@UiHandler("tabBar")
void onTabsSelection(final SelectionEvent<Integer> event) {
// ...
}
これは完璧に機能します!
いくつかのタブには共通の 1 つのウィジェットがあるため、このウィジェットの単一のインスタンスを (同期のために) 使用したいと考えています。
<g:LayoutPanel>
<!-- query -->
<g:layer top="0" height="3em">
<g:HorizontalPanel width="100%" height="3em" verticalAlignment="ALIGN_MIDDLE">
<g:SimpleLayoutPanel ui:field="queryNode" />
<g:cell horizontalAlignment="ALIGN_RIGHT">
<my:StepPager ui:field="pager" />
</g:cell>
</g:HorizontalPanel>
</g:layer>
<!-- map -->
<g:layer left="0" right="17em" top="3em" bottom="0">
<g:SimpleLayoutPanel ui:field="mapNode" />
</g:layer>
</g:LayoutPanel>
もちろん、ウィジェットは 1 つの親にしか接続できません。そのため、すべてのタブ ウィジェットのメソッドをオーバーライドしてonAttach
、クエリ ウィジェットを読み取ります。
@Override
protected void onAttach() {
queryNode.setWidget(queryBar);
super.onAttach();
}
メソッドが呼び出され、ウィジェットは DOM にありますが、表示されません。SimpleLayoutPanel
queryNode
問題は、セルのサイズが 3x35 pxであることだと思います。