如何在Vaadin 6中編寫CSS？

我正在Vaadin 6中做一個項目。我爲我的項目創建了所有的佈局。但是，我陷入了CSS風格。我找不到任何簡單的方法將CSS樣式應用於我的佈局。如何在Vaadin 6中編寫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造型似乎有點困難。如果我錯了，有人可以向我展示應用樣式的最佳標準方法嗎？
我是否需要遵循任何標準或方法來設計佈局以避免內聯樣式？。。。

來源

2013-03-27 Gugan

在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）作爲基地佈局。（或者不是擴展CustomComponent，我想可以擴展CustomLayout。）我使用pageXLayout.html作爲骨架或模板，並且無論我想要哪個頁面的交互式或可更改部分（按鈕，編輯字段，圖形，'視圖'等）我把一個<div location="componentY"></div>標籤。然後，您可以隨時填寫這些div（初始化時，延遲加載，響應服務器事件或用戶交互等），甚至可以刪除它們並根據需要進行替換。

所以，這可能都太明顯了。但是這種構建頁面的好處是隻要你不做任何服務器端大小調整或者任何會影響組件視覺風格的改變，你就會有一個最終的html頁面，它完全沒有任何內聯造型。您可以通過更改現有的Vaadin css類或通過添加您自己的標識（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爲基礎的單頁面webapps的簡單方法。你甚至可以添加任何你想要的基於JavaScript的前端chrome，但是這對於GWT應用程序處理頁面重新加載和狀態的方式來說更加深入和棘手。

來源

2013-03-27 14:42:12

Hello Christopher。我在應用樣式方面沒有問題。但是，我的問題是這些內聯樣式。真的是setWidth（）和setHeight（）等是這些內聯樣式的原因嗎？ – Gugan 2013-03-28 11:41:35

@Gugan這是Vaadin 6的工作原理。你不應該嘗試覆蓋CSS的大小。 – 2013-03-28 12:14:16

@亨利我不僅試圖覆蓋大小。我沒有得到很多div的類名。 – Gugan 2013-03-28 13:31:49

如何在Vaadin 6中編寫CSS？

回答

相關問題