這個東西是UI中使用最多的組件。html
你能夠在這個組件上設置Caption和Value。看下圖:前端
這是Label在構造時,傳入value值的效果。這個Label是經過以下代碼建立的:java
List-1
node
Label lbl = new Label("haha");
上面的代碼等效於:ide
List-2
ui
Label lbl = new Label(); lbl.setValue("haha");
生成的前端HTML代碼以下:spa
List-3htm
<div class="v-label v-widget v-has-width" style="width: 100%;">haha</div>
這裏須要注意的是,若是講null傳給label的value,那麼label什麼都不會顯示,但label這個元素還在頁面上,不會隱藏。也就是說,label的高度寬度都還有效,頁面空間仍然佔用着。下面的代碼是當label的value爲null時產生的代碼:blog
List-4
get
<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動態改變帶來的頁面內容竄動的問題。
上面介紹了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>