GWT - 未正确从 css 文件中获取样式

发布于 2024-12-12 07:28:34 字数 931 浏览 0 评论 0原文

我在使用 GWT 时遇到了这种奇怪的情况，其中样式未正确从 CSS 文件中获取。

我正在尝试设置文本区域的样式。我知道它从 clean.css 或 standard.css 中获取默认样式。

但我已经从 application.gwt.xml 文件中删除了继承行，并将所有这些样式复制到我自己的自定义样式表文件 - application.css 中

，并且我正在尝试将此样式名称（“close”见下文）添加到我的文本区域中，例如但

       TextArea ta = new TextArea();
       ta.addStylename("close");

它根本没有选择类名“close”。我将文本区域的默认样式从 standard.css 复制到 application.css 中。我使用 firebug 和 chrome 的检查元素检查了页面，我可以看到该元素是这样的 -

   <textarea class="gwt-TextArea close"></textarea>

我看到样式仅从类 - gwt-TextArea 中选取。

有人可以帮我吗？

//// styles in application.css
          .close  {
       font-size:150%;
          }

          .gwt-TextArea {
            border: 1px solid #d9dbdb;
             background: #ffffff;
             color: #8e8e8e;
             font: Arial, sans-serif;
              overflow: auto;
           }

原文

I am facing this wierd situation with GWT where styles are not picked up from the CSS file correctly.

I am trying to style a text area. I know that it picks up default styles from either clean.css or standard.css.

But i have removed the inherit line from the application.gwt.xml file and copied all those styles into my own custom stylesheet file - application.css

And i am trying to add this style name ("close" see below) to my textarea like this

       TextArea ta = new TextArea();
       ta.addStylename("close");

But it is not picking up the class name "close" at all. I have the default styles for text area copied into application.css from standard.css.
I checked the page using firebug and chrome's inspect element, i could see see the element as this -

   <textarea class="gwt-TextArea close"></textarea>

I see styles only being picked up from class - gwt-TextArea.

could someone help me out here.

//// styles in application.css
          .close  {
       font-size:150%;
          }

          .gwt-TextArea {
            border: 1px solid #d9dbdb;
             background: #ffffff;
             color: #8e8e8e;
             font: Arial, sans-serif;
              overflow: auto;
           }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

活泼老夫 2024-12-19 07:28:34

您正在寻找的是 setStyleName()，它将向对象添加样式名称。
完成此操作后，您可以像现在一样使用 .close { } 。

addStyleName 的作用是创建另一个样式，该样式依赖于本例中的主样式名称 .gwt-TextArea close{ } （我对此不是 100% 确定，文档不是很清楚）。

无论如何，使用 setStyleName() 和 setStylePrimaryName() 是一个好习惯。

顺便提一句。如果您喜欢这个答案，请单击帖子左侧的按钮，以便将其标记为已回答:)

回复收藏 0 原文

孤蝉 2024-12-19 07:28:34

在 GWT 中，默认情况下样式是模糊的，因此您可以在不同的小部件中重复使用样式名称。

您必须使用特殊的 CSS 类映射才能以编程方式使用样式：CssResource。

interface MyCssResource extends CssResource {
  String myCssClass();
}

class MyResources extends ClientBundle {
  @Source("my.css")
  MyCssResource css();

  @Source("some.png")
  ImageResource imageAccessor();

  @Source("some.png")
  @ImageOptions(repeatStyle=RepeatStyle.Horizontal)
  ImageResource repeatingImage();
}

然后，您可以通过 GWT 延迟绑定使用此 clientbundle。

In GWT, styles are obfuscated by default, so you can reuse style names across your different widgets.

You have to use a special CSS class mapping to use styles programmatically : the CssResource.

interface MyCssResource extends CssResource {
  String myCssClass();
}

class MyResources extends ClientBundle {
  @Source("my.css")
  MyCssResource css();

  @Source("some.png")
  ImageResource imageAccessor();

  @Source("some.png")
  @ImageOptions(repeatStyle=RepeatStyle.Horizontal)
  ImageResource repeatingImage();
}

You then use this clientbundle via GWT deferred binding.

See here for more information :
http://code.google.com/intl/fr-FR/webtoolkit/doc/latest/DevGuideClientBundle.html#CssResource

回复收藏 0 原文