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>