Vaadin組件筆記——Label

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" >haha</div>

這里需要注意的是，如果講null傳給label的value，那么label什么都不會顯示，但label這個元素還在頁面上，不會隱藏。也就是說，label的高度寬度都還有效，頁面空間仍然占用著。下面的代碼是當label的value為null時產生的代碼：

List-4

<div class="v-label v-widget v-has-width" ></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" >
    <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"  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"  id="gwt-uid-5" aria-labelledby="gwt-uid-4">1000yrs</div>