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