帶UiBinder模板的GWT ToggleButton不起作用

我有一個簡單模塊的以下UiBinder模板。但是當我運行它時，它沒有按預期設計切換按鈕的樣式。例如，當我將鼠標移動到按鈕上時，顏色，邊框，填充或邊距似乎不會改變。我錯過了簡單的東西嗎？帶UiBinder模板的GWT ToggleButton不起作用

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 

    <ui:style> 

.demo-ToggleButton 
{ 
    border      : 1px solid; 
    cursor      : hand; 
    cursor      : pointer; 
    margin      : 3px 1px; 
    padding      : 1px 10px; 
} 
.demo-ToggleButton-up-hovering 
{ 
    padding      : 0px 9px; 
    color      : #555; 
    border-top     : 4px solid; 
    border-left     : 4px solid; 
    border-right    : 4px solid; 
    border-bottom    : 4px solid; 
} 
.demo-ToggleButton-down, .demo-ToggleButton-down-hovering 
{ 
    padding      : 4px 9px; 
    border-top     : 4px solid; 
    border-left     : 4px solid; 
    border-right    : 4px solid; 
    border-bottom    : 4px solid; 
} 

     .eastPanel { 
      background-color: #F60; 
     } 

     .leftBar { 
      margin-left: 10px; 
      margin-top: 4px; 
      margin-right: 10px; 
      margin-bottom: 4px; 
      height: 100%; 
      border: 2px; 
     } 

     .leftButton { 

     } 

     .contentArea { 
      margin-left: 0px; 
      margin-top: 4px; 
      margin-right: 4px; 
      margin-bottom: 4px; 
      height: 100%; 
      width: 99%; 
     } 

     .northPanel { 
      background-color: #39F; 
     } 

     .southPanel { 
      background-color: #99C; 
     } 

     .centerPanel { 
      background-color: #FFC; 
     } 

     .messageLabel { 
      margin-left: 10px; 
     } 
    </ui:style> 


    <g:DockLayoutPanel unit='EM'> 

     <g:north size='2'> 
      <g:FlowPanel> 
       <g:Label>This is the NORTH panel</g:Label> 
      </g:FlowPanel> 
     </g:north> 



     <g:west size='10'> 
      <g:FlowPanel styleName="{style.leftBar}" width=""> 

<g:PushButton ui:field='dashboardButton' enabled='true' styleName="{style.demo-ToggleButton}"> 

    <g:upFace styleName="{style.demo-ToggleButton}">Dashboard</g:upFace> 
    <g:upHoveringFace styleName="{style.demo-ToggleButton-up-hovering}">sss</g:upHoveringFace> 
    <g:downFace styleName="{style.demo-ToggleButton-down}"/> 
    <g:downHoveringFace styleName="{style.demo-ToggleButton-down-hovering}"/> 

</g:PushButton> 


       <g:ToggleButton ui:field='projectsButton' styleName="{style.demo-ToggleButton}">Projects</g:ToggleButton> 
       <g:ToggleButton ui:field='activitiesButton' styleName="{style.demo-ToggleButton}">Activities</g:ToggleButton> 
       <g:ToggleButton ui:field='goalsButton' styleName="{style.demo-ToggleButton}">Goals</g:ToggleButton> 
       <g:ToggleButton ui:field='tagsButton' styleName="{style.demo-ToggleButton}">Tags</g:ToggleButton> 
      </g:FlowPanel> 
     </g:west> 


     <g:center> 

      <g:DockLayoutPanel unit='EM'> 

       <g:center> 
        <g:SimplePanel ui:field='contentPanel' /> 
       </g:center> 

       <g:south size='2'> 
        <g:VerticalPanel> 
         <g:Label styleName="{style.messageLabel}">message area</g:Label> 
        </g:VerticalPanel> 
       </g:south> 

      </g:DockLayoutPanel> 
     </g:center> 

    </g:DockLayoutPanel> 


</ui:UiBinder>

來源

2011-08-06 user881729

當改變狀態或懸停切換按鈕，GWT將次級樣式添加到元素。這些樣式是標準的，即使您重寫主要樣式（就像您使用demo-ToggleButton一樣），GWT仍將使用相同的輔助樣式。

所以，你會看到這樣的事情：即使你用你自己的主風格，

<div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up-hovering">

注意，你仍然會看到GWT添加.gwt-切換按鈕，向上盤旋 ...它不知道維持你的「演示」前綴：

<div tabindex="0" class="demo-ToggleButton gwt-ToggleButton-up-hovering">

在UI活頁夾的樣式部分

所以，你應該添加以下樣式：

@external gwt-ToggleButton-up, gwt-ToggleButton-down, gwt-ToggleButton-up-hovering, gwt-ToggleButton-down-hovering; 
.gwt-ToggleButton-up { } 
.gwt-ToggleButton-down { } 
.gwt-ToggleButton-up-hovering { } 
.gwt-ToggleButton-down-hovering { }

請確保將上述內容聲明爲「外部」，這將防止它們被GWT編譯器混淆。這應該允許您覆蓋默認的GWT樣式。

來源

2011-08-09 01:00:51

布拉德，謝謝你的回答，但我仍然不清楚該怎麼做。我在元素裏面添加了「@external gwt-ToggleButton-up，...」，從切換按鈕中刪除了「styleName =」（我認爲我們被覆蓋到了默認模板），但它不起作用。我添加了「styleName =」{style.gwt-ToggleButton-up}「到切換按鈕之一，它也不起作用。是否有任何網站或書籍描述這些？真的很奇怪，我們沒有更改togglebutton的文檔風格非編程式。 – user881729

當試圖覆蓋從UiBinder的.gwt的樣式最簡單的解決方法是這樣寫：

<g:whateverWidget stylePrimaryName='{desiredStyle}'></g:whateverWidget>

這告訴GWT，這是否指定新的風格要看着首要和基本的風格，而不是默認的主要和最重要的.gwt樣式。

來源

2015-02-06 02:19:57

帶UiBinder模板的GWT ToggleButton不起作用

回答

相關問題