com.vaadin.ui.Label
这个东西是UI中使用最多的组件。
caption & value
你可以在这个组件上设置Caption和Value。看下图:
这是Label在构造时,传入value值的效果。这个Label是通过如下代码创建的:
List-1
1 | Label lbl = new Label( "haha" ); |
上面的代码等效于:
List-2
1 2 | Label lbl = new Label(); lbl.setValue( "haha" ); |
生成的前端HTML代码如下:
List-3
1 | < 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
1 | < div class = "v-label v-widget v-has-width" style = "width: 100%;" ></ div > |
我们再来看一下设置caption之后的label是什么样子:
代码如下:
List-5
1 2 3 | Label lbl = new Label(); lbl.setCaption( "This is the caption." ); lbl.setValue( "This is the value." ); |
看看自动生成的前端HTML代码:
List-6
1 2 3 4 5 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中显示年龄。那么我需要如下步骤:
1、在Java代码中给这个label加一个特有的stylename:
List-7
1 2 3 4 | Label lbl = new Label(); lbl.addStyleName( "haha-label" ); lbl.setCaption( "Mr. Wangbagaozi" ); lbl.setValue( "1000yrs" ); |
看看前端自动生成的HTML代码中有什么变化:
List-8
1 2 3 4 | < 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 > |