2

我在 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;">
  1. 这是因为我在设计布局时调整了组件的大小吗？或者这很常见吗？
  2. 如何避免这种内联样式？
  3. 在 Vaadin 中设计样式似乎有点困难。如果我错了，有人可以告诉我应用样式的最佳和标准方法吗？
  4. 我是否需要遵循任何标准或方法来设计布局以避免内联样式？. . .
4

1 回答 1

3

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

但是如果你想做 CSS 样式，你真的应该转移到 Vaadin 7 —— Jouni 和其他人已经非常清楚地清理了所有东西（主要是通过放弃旧的 IE 支持），这使得使用 CSS 的样式实际上变得实用。您现在也可以使用 SASS。有关更多信息，请查看Vaadin Wiki。

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

所以，这可能太明显了。但是这种构建页面的方式的好处在于，只要您不进行任何服务器端大小调整或任何会影响组件视觉样式的更改，您将拥有一个完全没有任何内联的最终 html 页面造型。您可以通过更改现有的 Vaadin css 类或添加您自己的 id ( component.setId("myId")) 或 class ( 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 应用程序处理页面重新加载和状态的方式，这有点更深入和棘手。

于 2013-03-27T14:42:12.253 回答