java - CSS 未在 UI Binder 中解析

Question

我已经使用 UI Binder 为我的应用程序创建了一个搜索面板，但所需的行为是不同的。

用户界面.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;
}

我的用户界面 Binder

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 选择。

我很期待

出现了什么

Answer 1

对于您使用的每个 CssResource，您都需要调用 ensureInjected()。此调用将对 CSS 的引用插入您的 DOM(“插入 HTML 页面”)。

我假设您的 SearchListBoxCss 扩展了 CssResource，因此只需调用 cssStyle.ensureInjected()。实际上，只需要调用一次，因此您甚至可以将调用设为静态(但如果您重复调用，则无所谓)。

(注意:当样式直接嵌入到 ui.xml 文件中时，GWT 会自动为您调用 ensureInjected()。)