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" 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中顯示年齡。那麼我須要以下步驟：

一、在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>