Question

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

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());
   }

}

但看起来GWT没有选择任何我的CSS更改。

我在期待 enter image description here

出现了什么 enter image description here

Answer 1

对于您使用的每个CssResource，您需要调用ensureInjected（）。此调用将对CSS的引用插入到DOM中（“进入HTML页面”）。

我假设您的SearchListBoxCss扩展了CssResource，因此只需调用cssStyle.ensureInjected()即可。实际上，它只需要完成一次，所以你甚至可以使调用静态（但是如果你反复调用它并不重要）。

（注意：当样式在ui.xml文件中直接嵌入时，GWT会自动为您调用ensureInjected（）。）

UI绑定器中未解析CSS

1 个答案: