Vaadin组件笔记——Label-创新互联
com.vaadin.ui.Label
这个东西是UI中使用最多的组件。
创新互联是一家专注网站建设、网络营销策划、小程序设计、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立10年以来,已经为数千家社区文化墙各业的企业公司提供互联网服务。现在,服务的数千家客户与我们一路同行,见证我们的成长;未来,我们一起分享成功的喜悦。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
haha
这里需要注意的是,如果讲null传给label的value,那么label什么都不会显示,但label这个元素还在页面上,不会隐藏。也就是说,label的高度宽度都还有效,页面空间仍然占用着。下面的代码是当label的value为null时产生的代码:
List-4
我们再来看一下设置caption之后的label是什么样子:
代码如下:
List-5
Label lbl = new Label(); lbl.setCaption("This is the caption."); lbl.setValue("This is the value.");
看看自动生成的前端HTML代码:
List-6
This is the caption.This is the value.
当我们为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
Label lbl = new Label(); lbl.addStyleName("haha-label"); lbl.setCaption("Mr. Wangbagaozi"); lbl.setValue("1000yrs");
看看前端自动生成的HTML代码中有什么变化:
List-8
Mr. Wangbagaozi1000yrs
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。
网页名称:Vaadin组件笔记——Label-创新互联
网站URL:http://myzitong.com/article/eshjc.html