×
关于

Vaadin Web 开发教程

概述安装开发环境Vaadin 应用程序框架介绍开始编写 Web 应用Vaadin Web 应用的基本组成部分使用资源UI 组件概述UI 组件-LabelUI 組件-LinkUI 組件-TextFieldUI 組件-TextAreaUI 組件-PasswordFieldUI 組件-RichTextAreaUI 組件-ButtonUI 組件-CheckboxUI 组件-Select 组件UI 组件-Table 组件UI 组件-Tree 组件UI 组件-MenuBar 组件UI 组件-Embedded 组件UI 组件-Upload 组件UI 组件-Form 组件UI 组件-ProgressIndicator 组件UI 组件-Slider 组件UI 组件-LoginForm 组件UI 组件-自定义组件UI 布局-概述UI 布局-VerticalLayout 和 HorizontalLayout 布局UI 布局-GridLayout 布局UI 布局-FormLayout 布局UI 布局-PanelUI 布局-HorizontalSplitPanel 和 VerticalSplitPanel 布局UI 布局-TabSheet 布局UI 布局-Accordion 布局UI 布局-AbsoluteLayout 布局可視化界面編輯插件使用主题-概述使用主题-创建和应用新主题数据绑定-概述数据绑定-Property 接口使用 Item 介面管理一組 Property使用 Container 介面管理一組 ItemSQLContainer 概述开始使用 SQLContainerSQLContainer-过滤及排序SQLContainer-编辑SQLContainer-引用其它 SQLContainerSQLContainer-使用 FreeformQuery

UI 布局-AbsoluteLayout 布局


AbsoluteLayout 布局允许将其中的UI组件任意指定其位置。方法 addComponent()可以指定相对于AbsoluteLayout 边界的纵横坐标。还可以指定一个Z方向深度值,用来表示 UI 组件的前后顺序。 UI 组件的位置是通过 left,right,top,bottom 及 z-index 来指定(CSS对应的属性)。

// A 400x250 pixels size layout
AbsoluteLayout layout = new AbsoluteLayout();
layout.setWidth("400px");
layout.setHeight("250px");

// A component with coordinates for its top-left corner
TextField text = new TextField("Somewhere someplace");
layout.addComponent(text, "left: 50px; top: 50px;");

// At the top-left corner
Button button = new Button( "left: 0px; top: 0px;");
layout.addComponent(button, "left: 0px; top: 0px;");

// At the bottom-right corner
Button buttCorner = new Button( "right: 0px; bottom: 0px;");
layout.addComponent(buttCorner, "right: 0px; bottom: 0px;");

// Relative to the bottom-right corner
Button buttBrRelative = new Button( "right: 50px; bottom: 50px;");
layout.addComponent(buttBrRelative, "right: 50px; bottom: 50px;");

// On the bottom, relative to the left side
Button buttBottom = new Button( "left: 50px; bottom: 0px;");
layout.addComponent(buttBottom, "left: 50px; bottom: 0px;");

// On the right side, up from the bottom
Button buttRight = new Button( "right: 0px; bottom: 100px;");
layout.addComponent(buttRight, "right: 0px; bottom: 100px;");

除了使用 px 指定据边界的距离外,也可以使用百分比。

// A panel that takes 30% to 90% horizontally and
// 20% to 80% vertically
Panel panel = new Panel("A Panel");
panel.setSizeFull(); // Fill the specified area
layout.addComponent(panel, "left: 30%; right: 10%;" +
                           "top: 20%; bottom: 20%;");

Tags: Java EE, Vaadin, Web


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)