Vaadin 支持自定义组件,典型的用法是将各种Vaadin内置的组件组合而成构成自定义组件。 创建自定义组件可以通过派生CustomComponent 然后调用setCompositionRoot 为自定义组件设置根容器。
例如:
class MyComposite extends CustomComponent {
public MyComposite(String message) {
// A layout structure used for composition
Panel panel = new Panel("My Custom Component");
panel.setContent(new VerticalLayout());
// Compose from multiple components
Label label = new Label(message);
label.setSizeUndefined(); // Shrink
panel.addComponent(label);
panel.addComponent(new Button("Ok"));
// Set the size as undefined at all levels
panel.getContent().setSizeUndefined();
panel.setSizeUndefined();
setSizeUndefined();
// The composition root MUST be set
setCompositionRoot(panel);
}}
需要注意的是,如果希望自定义的组件自适应其所包含的其它UI组件,必须将容器的大小设为“未定义”,如上面的setSizeUndefined方法就是起这个作用。
构造自定义组件,也可以从其它Vaadin内置UI组件派生,或者利用Google Web Toolbit提供的组件创建全新的Vaadin UI组件(后面介绍)。
分享到:
相关推荐
赠送jar包:android-json-0.0.20131108.vaadin1.jar; 赠送原API文档:android-json-0.0.20131108.vaadin1-javadoc.jar; 赠送源代码:android-json-0.0.20131108.vaadin1-sources.jar; 赠送Maven依赖信息文件:...
org.vaadin.addons.dcharts-widget-0.10.0-dcharts-widget-0.10.0.jar
是一个Web组件,提供应用程序菜单功能,是一部分。 < vaadin> </ vaadin> 安装 安装vaadin-menu-bar : npm i @vaadin/vaadin-menu-bar --save 安装后,将其导入您的应用程序: import '@vaadin/vaadin-menu-...
赠送jar包:android-json-0.0.20131108.vaadin1.jar; 赠送原API文档:android-json-0.0.20131108.vaadin1-javadoc.jar; 赠送源代码:android-json-0.0.20131108.vaadin1-sources.jar; 赠送Maven依赖信息文件:...
Vaadin来自北欧的__Web__应用开发利器
是一个Web组件,提供了一个可访问且可自定义的复选框,是一部分。 < vaadin> Checked </ vaadin> < vaadin> Unchecked </ vaadin> < vaadin> Indeterminate </ vaadin> 安装 安装vaadin-checkbox : npm i @...
| < vaadin> </ vaadin>安装安装vaadin-date-time-picker : npm i @vaadin/vaadin-date-time-picker --save 安装后,将其导入您的应用程序: import '@vaadin/vaadin-date-time-picker/vaadin-date-time-picker.js...
cd vaadin-microservices-demo mvn package 运行演示 使用多个(七个)终端执行以下步骤: 1)启动discovery-server应用程序(Eureka应用程序): cd vaadin-microservices-demo/discovery-server java -jar ...
< vaadin> </ vaadin>安装安装vaadin-rich-text-editor : npm i @vaadin/vaadin-rich-text-editor --save 安装后,将其导入您的应用程序: import '@vaadin/vaadin-rich-text-editor/vaadin-rich-text-editor.js' ...
Vaadin的UI组件CSS样式规则,Vaadin的UI组件CSS样式规则
vaadin-list-mixin vaadin-list-mixin是nav元素的混合,有助于导航和选择childNodes。 在浏览器中运行测试 分叉vaadin-list-mixin存储库并在本地克隆。 确保已安装和 。 在vaadin-list-mixin目录中时,运行npm ...
vaadin-material-styles是可自定义主题。 在浏览器中运行演示和测试 分叉vaadin-material-styles存储库并在本地克隆。 确保已安装和 。 在vaadin-material-styles目录中时,运行npm install ,然后运行bower ...
使用Web组件,redux和lit-html构建Web应用程序该存储库托管“事件”应用程序,该应用程序是在研讨会的期间开发的。 Web标准的新手? 结帐: : Web组件的新手? 结帐: : 从未构建过应用程序? 结帐: : 迁移到...
<vaadin> | 是一个Web组件,为item元素( 一部分)提供了一个容器。 < vaadin> Simple Item </ vaadin> ... import '@vaadin/vaadin-item/vaadin-item.js' ; 入门 Vaadin组件默认使用Lumo主题。 要使用M
vaadin-edit-table-example 使用 commons-vaadin 库类 EditableTableDecorator 的 VAADIN 可编辑表示例。 这个助手类在 commons-vaadin 1.0.17 或更高版本中可用。 下载 通过 Maven 抓取: < groupId>topgroup....
是用于业务Web应用程序的不断发展的高质量Web组件集。 安装 从npm安装所需的组件: npm install @vaadin/vaadin-grid 用法 导入组件JavaScript模块,在HTML中使用该组件,然后使用JavaScript对其进行控制: <!...
import '@vaadin/vaadin-crud/vaadin-crud.js' ; 入门 Vaadin组件默认使用Lumo主题。 要使用Material主题,请从theme/material文件夹导入对应的文件。 入口点 具有Lumo主题的组件: theme/lumo/vaadin-crud.js ...
<vaadin> | 包含两个组件: <vaadin>是Web组件,可提供无痛的登录体验,是一部分。 组件在覆盖内显示<vaadin>。 < vaadin> </ vaadin> <vaadin>... < vaadin> </ vaadin>安装安装vaadin-login : npm i @vaadin/vaadin-
通过这款插件,你可以利用标准WP条件标签来决定是否在某个页面显示你的widgets。
vaadin-charts元素的演示应用程序 设置 先决条件 首先,使用安装 (我们假设您已经预安装了 )。 npm install -g polymer-cli 安装依赖项 bower install 启动开发服务器 此命令在http://localhost:8080为应用...