Question

在<ui:style>文件中使用class或在css文件中写HTML以GWT Widgets个文件中的GWT ui.xml元素（<ui:style>}更优选。我知道如果要使用class，那么<ui:style>属性的名称非常难。请帮助我找出何时使用<ui:style> .panel { width: 100%; } .decPanel { height:100%; } </ui:style> <g:HTMLPanel addStyleNames='{style.panel}'> <fieldset addStyleNames='{style.decPanel}'> <legend> ... </legend> </fieldset> </g:HTMLPanel>

class

以及何时使用.panel { width: 100%; } .decPanel { height:100%; }

CSS 文件

<g:HTMLPanel class="panel">
   <fieldset class="decPanel">
        <legend>
            ...
        </legend>
   </fieldset>
</g:HTMLPanel>

ui.xml 文件

{{1}}

Answer 1

它可能有助于您理解使用<ui:style>而不是常量静态类名称的优势。

Hello Stylish World

使用<ui:style>元素，您可以根据需要为您的用户界面定义CSS。

样品：

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>

    <ui:style>
      .pretty { background-color: Skyblue; }
    </ui:style>

    <div class='{style.pretty}'>
      Hello, <span ui:field='nameSpan'/>.
    </div>

</ui:UiBinder>

优势

为您生成CssResource界面以及ClientBundle。这意味着当您尝试使用拼错类名时，编译器会发出警告（例如{style.prettty}）。
此外，您的CSS类名称将模糊，从而保护它免受其他CSS块中与类名称冲突的冲突 - 无需更多全局CSS命名空间！

注意：大多数真实世界的项目可能会将CSS保存在单独的文件中。在下面给出的示例中，src值是相对于ui.xml文件的位置。

样品

  <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
    <ui:style src="MyUi.css" />
    <ui:style field='otherStyle' src="MyUiOtherStyle.css">

    <div class='{style.pretty}'>
      Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.
    </div>
  </ui:UiBinder>

首选<span class='{otherStyle.pretty}'代替<span class='pretty'。

======================

修改

根据@Thomas在评论中提出的建议，请使用<ui:with>

有时，您的模板需要使用来自模板外部的样式或其他对象。使用<ui:with>元素使其可用。

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'> <ui:with field='res' type='com.my.app.widgets.logoname.Resources'/> <g:HTMLPanel> <g:Image resource='{res.logo}'/> <div class='{res.style.mainBlock}'> <div class='{res.style.userPictureSprite}'/> <div> Well hello there <span class='{res.style.nameSpan}' ui:field='nameSpan'/> </div> </div> </g:HTMLPanel> </ui:UiBinder> /** * Resources used by the entire application. */ public interface Resources extends ClientBundle { @Source("Style.css") Style style(); @Source("Logo.jpg") ImageResource logo(); public interface Style extends CssResource { String mainBlock(); String nameSpan(); Sprite userPictureSprite(); } } // Within the owner class for the UiBinder template @UiField Resources res; ... res.style().ensureInjected();

请参阅Using an external resource
上的GWT文档

Ui：GWT / UiBinder中的style或css类

1 个答案:

Hello Stylish World

优势