com.vaadin.ui.Label
這個東西是UI中使用最多的組件。
caption & value
你可以在這個組件上設置Caption和Value。看下圖：
這是Label在構造時，傳入value值的效果。這個Label是通過如下代碼創建的：
List-1
Label lbl = new Label("haha");上面的代碼等效於：
List-2
Label lbl = new Label();
lbl.setValue("haha");生成的前端HTML代碼如下：
List-3
<div class="v-label v-widget v-has-width" style="width: 100%;">haha</div>
這裏需要注意的是，如果講null傳給label的value，那麼label什麼都不會顯示，但label這個元素還在頁面上，不會隱藏。也就是說，label的高度寬度都還有效，頁面空間仍然佔用着。下面的代碼是當label的value爲null時產生的代碼：
List-4
<div class="v-label v-widget v-has-width" style="width: 100%;"></div>
我們再來看一下設置caption之後的label是什麼樣子：
代碼如下：
List-5
Label lbl = new Label();
lbl.setCaption("This is the caption.");
lbl.setValue("This is the value.");看看自動生成的前端HTML代碼：
List-6
<div class="v-widget v-has-caption v-caption-on-top v-has-width" style="width: 100%;"> <div class="v-caption" id="gwt-uid-4" for="gwt-uid-5"> <span class="v-captiontext">This is the caption.</span> </div> <div class="v-label v-widget v-has-width" style="width: 100%;" id="gwt-uid-5" aria-labelledby="gwt-uid-4">This is the value.</div> </div>
當我們爲label加上caption之後，整個HTML的代碼發生了改變。可以看到，Java代碼中看似是label上加了caption，而在HTML中卻是用class爲“v-has-caption v-caption-on-top”的div元素將原本class爲”v-label“的元素給包裹了起來。List-6代碼中1至4行都是在處理caption結構和內容，而那段與List-3代碼相似的用來處理label結構和內容的代碼出現在第List-6代碼的第5行。
這種處理方式帶來了一個問題，那就是當label組件有caption時，這個普遍意義上的label組件在頁面上變高了（因爲多了一行用來顯示caption）。那麼，如果在運行時，如果給setCaption方法傳入null值，caption這一行就會消失，隨之帶來的效果是label組件變矮了。所以，在使用caption時要注意處理label動態改變帶來的頁面內容竄動的問題。
Theming
上面介紹了Label組件的數據相關處理，但是作爲一個UI組件，除了數據處理之外，我們無法避免的需要對這種組件進行樣式自定義，例如，將label的caption字號設置爲40px，使value的內容變成斜體灰色。在vaadin中，我們通過CSS對組件的樣式進行自定義。遇到各種我們經常需要對label進行theming渲染。vaadin中對某一個元素進行渲染是通過元素的class來實現的。也就是說，CSS中通過元素的class name來定位某一種你想要搞的組件，之後，編寫特定的CSS代碼就可以了。但是，看看我們這個帶着caption的label不難發現，如果我想自定義這個label的caption的樣式，幾乎做不到。首先，caption部分的class爲“v-has-caption v-caption-on-top”。如果你要針對這兩個class name來寫CSS rules，那就慘了，你會把所有其他帶有caption特性的組件的caption樣式全都改掉了。而你又不能限定是v-label下的包含“v-has-caption v-caption-on-top” class name的元素，因爲，caption部分根本不在v-label元素裏面，caption部分並不是label的child node。
怎麼辦？給需要做theming的label添加自定義的class name。例如：我需要修改一個label的caption樣式，這個label的caption中顯示人名，value中顯示年齡。那麼我需要如下步驟：
1、在Java代碼中給這個label加一個特有的stylename：
List-7
Label lbl = new Label();
lbl.addStyleName("haha-label");
lbl.setCaption("Mr. Wangbagaozi");
lbl.setValue("1000yrs");看看前端自動生成的HTML代碼中有什麼變化：
List-8
<div class="v-caption v-caption-hahaha-label" id="gwt-uid-4" for="gwt-uid-5"> <span class="v-captiontext">Mr. Wangbagaozi</span> </div> <div class="v-label v-widget v-has-width hahaha-label v-label-hahaha-label" style="width: 100%;" id="gwt-uid-5" aria-labelledby="gwt-uid-4">1000yrs</div>