Vaadin元件筆記——Label

這個東西是UI中使用最多的元件。

你可以在這個元件上設定Caption和Value。看下圖：

<a href="https://s5.51cto.com/wyfs02/M00/8C/B3/wKiom1h0rhPwwlHdAAACueUSy_A796.png" target="_blank"></a>

這是Label在構造時，傳入value值的效果。這個Label是通過如下代碼建立的：

List-1

<code>Label lbl = </code><code>new</code> <code>Label(</code><code>"haha"</code><code>);</code>

上面的代碼等效于：

List-2

<code>Label lbl = </code><code>new</code> <code>Label();</code>

<code>lbl.setValue(</code><code>"haha"</code><code>);</code>

生成的前端HTML代碼如下：

List-3

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"v-label v-widget v-has-width"</code> <code>style</code><code>=</code><code>"width: 100%;"</code><code>&gt;haha&lt;/</code><code>div</code><code>&gt;</code>

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

List-4

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"v-label v-widget v-has-width"</code> <code>style</code><code>=</code><code>"width: 100%;"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

我們再來看一下設定caption之後的label是什麼樣子：

<a href="https://s5.51cto.com/wyfs02/M00/8C/B3/wKiom1h0sUKzRmyEAAAK9xYpTcw884.png" target="_blank"></a>

代碼如下：

List-5

<code>lbl.setCaption(</code><code>"This is the caption."</code><code>);</code>

<code>lbl.setValue(</code><code>"This is the value."</code><code>);</code>

看看自動生成的前端HTML代碼：

List-6

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"v-widget v-has-caption v-caption-on-top v-has-width"</code> <code>style</code><code>=</code><code>"width: 100%;"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"v-caption"</code> <code>id</code><code>=</code><code>"gwt-uid-4"</code> <code>for</code><code>=</code><code>"gwt-uid-5"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>span</code> <code>class</code><code>=</code><code>"v-captiontext"</code><code>&gt;This is the caption.&lt;/</code><code>span</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"v-label v-widget v-has-width"</code> <code>style</code><code>=</code><code>"width: 100%;"</code> <code>id</code><code>=</code><code>"gwt-uid-5"</code> <code>aria-labelledby</code><code>=</code><code>"gwt-uid-4"</code><code>&gt;This is the value.&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

當我們為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中顯示年齡。那麼我需要如下步驟：

1、在Java代碼中給這個label加一個特有的stylename：

List-7

<code>lbl.addStyleName(</code><code>"haha-label"</code><code>);</code>

<code>lbl.setCaption(</code><code>"Mr. Wangbagaozi"</code><code>);</code>

<code>lbl.setValue(</code><code>"1000yrs"</code><code>);</code>

看看前端自動生成的HTML代碼中有什麼變化：

List-8

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"v-caption v-caption-hahaha-label"</code> <code>id</code><code>=</code><code>"gwt-uid-4"</code> <code>for</code><code>=</code><code>"gwt-uid-5"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>span</code> <code>class</code><code>=</code><code>"v-captiontext"</code><code>&gt;Mr. Wangbagaozi&lt;/</code><code>span</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"v-label v-widget v-has-width hahaha-label v-label-hahaha-label"</code> <code>style</code><code>=</code><code>"width: 100%;"</code> <code>id</code><code>=</code><code>"gwt-uid-5"</code> <code>aria-labelledby</code><code>=</code><code>"gwt-uid-4"</code><code>&gt;1000yrs&lt;/</code><code>div</code><code>&gt;</code>

版權聲明：原創作品，如需轉載，請注明出處。否則将追究法律責任

本文轉自 rickqin 51CTO部落格，原文連結:http://blog.51cto.com/rickqin/1890805