如何在 Vaadin 6 中编写 CSS？答案

【问题标题】：How to write CSS in Vaadin 6?如何在 Vaadin 6 中编写 CSS？
【发布时间】：2013-03-27 13:22:43
【问题描述】：

我在 Vaadin 6 中做一个项目。我为我的项目创建了所有布局。但是，我陷入了 CSS 样式中。我找不到任何简单的方法将 CSS 样式应用于我的布局。

我在 Vaadin 的书中看到了这个例子。

<body>
<div id="v-app">
<div>
   <div class="v-orderedlayout">
    <div>
       <div class="v-panel">
        <div class="v-panel-caption">Log In</div>
        <div class="v-panel-content">
           <div class="v-orderedlayout">
            <div>
               <div>
                <div class="v-caption">
                  <span>Username:</span>
                </div>
               </div>
               <input type="text" class="v-textfield"/>
            </div>
            <div>
               <div>
                <div class="v-caption">
                  <span>Password:</span>
                </div>
               </div>
               <input type="password"
                      class="v-textfield"/>
            </div>
            <div>
              <button type="button"
                      class="v-button">Login</button>
              </div>
           </div>
        </div>
        <div class="v-panel-deco"/>
        </div>
       </div>
    </div>
   </div>
</div>

在那;他们为他们添加的所有组件获得了一个默认的类名。但是，在我的项目中，我没有得到我添加的所有组件的默认类名。

我不是通过类应用样式，而是通过内联函数应用样式。我想，是因为我在设计布局的时候调整了组件的大小。

我的代码：

<div style="height: 781px; width: 762px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;">
<div style="float: left; margin-left: 0px;">
<div style="overflow: hidden; height: 781px; width: 762px;" class="v-verticallayout">
<div style="overflow: hidden; margin: 0px; width: 762px; height: 781px;">
<div style="height: 573px; width: 762px; overflow: hidden; padding-left: 0px; padding- top: 0px;">
<div style="float: left; margin-left: 0px;">
<div class="v-customcomponent" style="height: 573px; width: 762px;">
<div class="v-absolutelayout" style="height: 573px; width: 762px;">
<div style="position: relative; overflow: hidden; height: 573px; width: 762px;">
<div class="v-absolutelayout-wrapper" style="top: 0px; left: 0px; right: 0px; bottom: 0px;">
<div class="v-tabsheet v-tabsheet-hover-closable hover-closable" style="overflow: hidden; height: 573px; width: 762px;">

这是因为我在设计布局时调整了组件的大小吗？还是这很常见？
如何避免这种内联样式？
在 Vaadin 中设计样式似乎有点困难。如果我错了，谁能告诉我应用样式的最佳和标准方法？
我是否需要遵循任何标准或方法来设计布局以避免内联样式？ . . .

【问题讨论】：

标签： css stylesheet vaadin

【解决方案1】：

在 Vaadin 6 中，在 Java 代码中完成的任何组件样式（例如，component.setWidth() 等）都直接作为内联 CSS 插入。如果你不想内联，你可以在VAADIN/themes/themename/目录下的styles.css文件中手动定义这些规则，并在你的Application类上设置@Theme("themename")注解。

但是，如果您想进行 CSS 样式设置，您真的应该迁移到 Vaadin 7 —— Jouni 和其他人确实已经显着地清理了所有内容（主要是通过放弃对旧版 IE 的支持），这使得使用 CSS 进行样式设置实际上很实用。您现在也可以使用 SASS。欲了解更多信息，请查看Vaadin Wiki。

编辑：
要回答您列表中的第 4 点，我的方法是制作一个 CustomComponent，它以 CustomLayout (link) 作为基本布局。（或者，我想你可以扩展 CustomLayout，而不是扩展 CustomComponent。）我使用 pageXLayout.html 作为骨架或模板，以及我想要页面的交互或可更改部分（按钮、编辑字段、图形、'查看'等）我放了一个<div location="componentY"></div>标签。然后，您可以在需要时（在初始化、延迟加载、响应服务器事件或用户交互等）填写这些 div，甚至可以根据需要删除它们并替换它们。

所以，这可能太明显了。但是这种构建页面的方式的好处在于，只要您不进行任何服务器端大小调整或任何会影响组件视觉样式的更改，您将拥有一个完全没有任何内联的最终 html 页面造型。您可以通过更改现有的 Vaadin css 类或添加您自己的 id (component.setId("myId")) 或类 (component.addStyleName("myStyle")) 来完成所有视觉样式。如果这样更容易，您也可以将 id 和类名添加到位置 div 本身 (<div location="componentY" class="myClass"></div>)。但有时这些样式可能会被组件自己的基于 Vaadin 的 css 覆盖（您可以在 myTheme.scss 或 myTheme.css 文件中自行更改）。

（之前假设 Vaadin 7. 6 可能仍会添加内联样式，我忘记了。）

无论如何，这就是我最终以简单的方式构建对设计人员友好的 html 和基于 css 的单页 web 应用程序的方式。您甚至可以添加任何您想要的基于 javascript 的前端 chrome，但是对于 GWT 应用程序处理页面重新加载和状态的方式，这有点更深入和棘手。

【讨论】：

你好克里斯托弗。我在应用样式方面没有问题。但是，我的问题是那些内联样式。真的 setWidth() & setHeight() 等是那些内联样式的原因吗？
@Gugan 这就是 Vaadin 6 的工作原理。您不应该尝试覆盖 CSS 上的尺寸。
@Henri 我不仅试图覆盖尺寸。我没有得到许多 div 的类名。
@Gugan，你什么意思？您可以通过说 mycomp.addStylename("foobar")? 为组件添加类名？
@Gugan 是的，内联样式是由 java 端组件大小/间距/等产生的。 Henri 是对的（当然——他在 Vaadin 团队中：）你可以设置组件的类名，但在 Vaadin 6 中，div 结构是……冗长的。它在 Vaadin 7 中要干净得多。