SplitLayoutPanelのdraggersをGWT UIBinderテンプレート

Question

に書き直すにはどのようにすればSplitLayoutPanel用のUIBinderテンプレートのドラッカーのスタイルを変更できますか教えてください。ここで

は私MainMenu.ui.xmlです：

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 
    <ui:style src="Resources/GlobalStyles.css" /> 

    <g:SplitLayoutPanel width="100%" height="100%" styleName='{style.splitLayoutPanel}'> 
     <g:north size="100"> 
      <g:HTMLPanel/> 
     </g:north> 
     <g:west size="250"> 
      <g:HTMLPanel/> 
     </g:west> 
     <g:center> 
      <g:HTMLPanel/> 
     </g:center> 
     <g:south size="50"> 
      <g:HTMLPanel 
       styleName='{style.footerPanel}'> 
       <div> 
        <a href="#">Contact us</a> 
        <a href="#">Privacy</a> 
        <a href="#">About</a> 
       </div> 
      </g:HTMLPanel> 
     </g:south> 
    </g:SplitLayoutPanel> 

</ui:UiBinder> 

リソース/ GlobalStyles.cssは次のようになります。

body,table { 
    font-size: small; 
} 

body { 
    font-family: Helvetica, Arial, sans-serif; 
    color: #000; 
    background: #red; 
} 

.splitLayoutPanel { 
    .gwt-SplitLayoutPanel-HDragger { 
     background:#d0e4f6; 
     cursor: col-resize; 
    } 

    .gwt-SplitLayoutPanel-VDragger { 
     background: #d0e4f6; 
     cursor: row-resize; 
    } 

} 

.footerPanel { 
    margin-left: 11px; 
    padding: 10px; 
    border-top: 2px solid #5693d6; 
    text-align: right; 
} 

ここで何が悪いのでしょうか？私のドラッガーは目に見えず、手抜きの変更はありません。

Answer 1

GWTは入れ子が好きではないと思います。それを動作させる必要があり、次のようにCSSをrewritting：

.splitLayoutPanel .gwt-SplitLayoutPanel-HDragger { 
    background:#d0e4f6; 
    cursor: col-resize; 
} 
.splitLayoutPanel .gwt-SplitLayoutPanel-VDragger { 
    background: #d0e4f6; 
    cursor: row-resize; 
} 

またGWTは、おそらく.gwt-スタイルに文句を言うだろう、その場合には、あなたのCSSに以下の行：

@external .gwt-SplitLayoutPanel-HDragger; 
@external .gwt-SplitLayoutPanel-VDragger;