CSS未在UI綁定器中解析

我已經使用UI綁定器爲我的應用程序創建了一個搜索面板，但所需的行爲不同。CSS未在UI綁定器中解析

Ui.xml

<g:HTMLPanel> 
<c:SimpleContainer> 
     <c:InfoContainerHeader text="{labels.searchFilter}" /> 
       <g:FlowPanel ui:field="searchPanel" styleName="{res.style.searchPanel}"> 
       <g:FlowPanel ui:field="searchLabelPanel" styleName="{res.style.searchLabelPanel}"> 
       <g:InlineLabel ui:field="searchLabel" styleName="{res.style.searchLabel}" text="{labels.searchFor}"/> 
       <g:InlineLabel ui:field="searchRedStarLabel" styleName="{res.style.searchRedStarLabel}">*</g:InlineLabel>     
      </g:FlowPanel>  
      <chzn:ChosenListBox ui:field="searchListBox" styleName="{res.style.searchListBox}" width="35%"/>  
     </g:FlowPanel> 
     <g:SimplePanel addStyleNames="{rscb.style.textAlignCenter}"> 
      <g:Button ui:field="searchButton" text="{clabels.search}"/> 
     </g:SimplePanel> 
</c:SimpleContainer> 
</g:HTMLPanel>

我的CSS

.search-panel { 
    border-radius: 2px 2px 2px 2px; 
    border: 1px solid #F2AF00; 
    color: #000F16; 
    margin: 2% 0; 
} 

.search-label-panel { 
    margin: 0 15px 0 0; 
    width: 40%; 
    text-align: right; 
    float: left; 
    font-weight: bold; 
} 

.search-red-star-label { 
    color: #790000; 
    margin-left: 4px; 
    display: inline; 
} 

.search-label { 
    display: inline; 
} 

.search-list-box { 
    width: 35%; 
    margin-bottom: 4px; 
    font-size: 13px; 
    display: inline-block; 
    position: relative; 
}

我的UI粘結劑

public class SearchFilterViewImpl implements SearchFilterView 
{ 
    HTMLPanel rootElement; 
    SearchFilterViewPresenter presenter; 

    @Override 
    public void setPresenter(SearchFilterViewPresenter presenter) 
    { 
     this.presenter = presenter; 
    } 

    @Override 
    public void refresh() 
    { 

    } 

    @Override 
    public Widget asWidget() 
    { 
     return rootElement; 
    } 

    interface FilterViewImplUiBinder extends UiBinder<HTMLPanel, SearchFilterViewImpl> 
    { 
    } 

    private static FilterViewImplUiBinder ourUiBinder = GWT.create(FilterViewImplUiBinder.class); 

    public SearchFilterViewImpl() 
    { 
     rootElement = ourUiBinder.createAndBindUi(this); 
    } 

    @UiField 
    ChosenListBox searchListBox; 
    @UiField 
    FlowPanel searchPanel; 
    @UiField 
    FlowPanel searchLabelPanel; 
    @UiField 
    Label searchLabel; 
    @UiField 
    Label searchRedStarLabel; 

    @Override 
    public void setSearchListElements(List<AdminSearchType> searchElements) 
    { 
     for (AdminSearchType searchElement : searchElements) 
     { 
     searchListBox.addItem(searchElement.getSearchType(), searchElement.name()); 
     } 
     searchListBox.setPlaceholderTextSingle("What would you like to search for?"); 
    } 

    @Override 
    public void setStyles(SearchListBoxCss cssStyle) 
    { 
     searchPanel.setStylePrimaryName(cssStyle.searchPanel()); 
     searchLabel.setStylePrimaryName(cssStyle.searchLabelPanel()); 
     searchLabel.setStylePrimaryName(cssStyle.searchLabel()); 
     searchRedStarLabel.setStylePrimaryName(cssStyle.searchRedStarLabel()); 
     searchListBox.setStylePrimaryName(cssStyle.searchListBox()); 
    } 

}

不過貌似沒有我的CSS變化正在GWT採摘。

我期待 enter image description here

什麼是出現 enter image description here

來源

2013-12-16 Ashish

你在你的CssResource調用ensureInjected（）？ –

@ChrisLercher不，我不叫它，我不知道怎麼稱呼它。請指導我。 – Ashish

對於每次使用CssResource，你需要調用ensureInjected（）。該調用將對CSS的引用插入到DOM中（「進入HTML頁面」）。

我假設你的SearchListBoxCss擴展了CssResource，所以只需撥打cssStyle.ensureInjected()即可。實際上，它只需要進行一次，所以你甚至可以將呼叫設置爲靜態（但重複地調用它並不重要）。

（注：當風格被嵌入直接在ui.xml文件，然後GWT爲你調用ensureInjected（）自動）

來源

2013-12-16 21:08:03

非常感謝。 – Ashish

CSS未在UI綁定器中解析

回答

相關問題