FastWeb页面布局

• 适用平台：WEB(桌面)，APP(移动)

1. 简介

  程序内的控件的布局，即对控件的位置，大小，顺序层级的排布，与程序的功能实现同样重要。好的页面布局能够让控件的排布更加有序，且层级清晰。同时能让界面更加美观。本文档将从布局的角度介绍布局相关的说明。

2. 基础知识

  在开始布局模式的介绍前，您应该先对布局有个基本的概念。

什么是布局？

  在FastWeb中，布局是指窗口中的各个控件的排布方式，即控件的相对位置以及层级排布的统称。

为什么要布局？

  因为FastWeb是网页应用程序，要求要在不同的分辨率下能够保持较为统一的样式，避免因为分辨率的变化导致布局出现混乱。

3. 布局模式

  FastWeb中支持两种布局模式，一种是服务端布局模式，另外一种是客户端布局的模式。接下来将对这两种布局模式进行详细介绍。

3.1. 服务端布局模式

  使用服务端的布局模式，在进入模块设计界面创建初始界面时，要将UgWebRunFrame中的AlignmentControl设置为uniAlignmentServer，此时表示为使用服务器定义的布局模式。

  FastWeb使用两种属性来提供不同的布局方式。分别为Align与Anchor。

3.1.1. Align

Align表示为控件布局中的对齐方式，对齐的意思就是向哪个方向靠拢。使用该属性可在窗体或面板上将组件排列到顶端、底端、左边或右边等多种对齐方式，并且即使窗体、面板或包含组件的大小发生变化，也仍然会保持对齐方式。可以使窗体以某种方式对齐，我们可以在这个属性的下拉框中看到以下选项：

名称	说明	图例
alBottom	组件被移到容器的底端
alClient	使组件填充整个容器
alCustom	以自定义方式显示窗体
alLeft	组件被移到容器的左端
alNone	组件仍然在其原来的位置
alRight	组件被移到容器的右端
alTop	组件被移到容器的顶端

  通过上述的属性设置，我们可以十分轻松地做出下图图示中的效果：

其中的各个控件的Align属性分别设置如下：

控件名称	Align属性
UgPanel01	alTop
UgPanel02	alLeft
UgPanel03	alBottom
UgPanel04	alRight
UgPanel05	alClient

3.1.2. Anchor

  Anchor表示为锚点，它用来表示控件与窗口各边框的固定的距离。在设置相关的属性后，即使改变窗口的大小也不会使得相关的边界距离发生变化，具体的设置项如下：

名称	说明
akLeft	固定控件与窗口左边界的距离
akTop	固定控件与窗口上边界的距离
akRight	固定控件与窗口右边界的距离
akBottom	固定控件与窗口下边界的距离

3.2. 客户端布局模式

  使用客户端的布局模式，在进入模块设计界面创建初始界面时，要将UgWebRunFrame中的AlignmentControl设置为uniAlignmentClient，此时表示为使用客户端(浏览器)定义的布局模式。

  支持容器模式的控件(即作为容器，其中可以包含其他控件)中通常会包含Layout属性，该属性中有以下样式可选：

  在桌面模式下，有以下模式可选：

名称	说明
absolute	绝对布局
accordion	关联布局
anchor	锚布局
auto	自动布局
border	边界布局
fit	自适应布局
form	窗体布局
hbox	水平盒布局
vbox	垂直盒布局
table	表格布局
column	列布局

  在移动模式下，有以下模式可选：

名称	说明
fit	自适应布局
float	悬浮布局
hbox	水平盒布局
vbox	垂直盒布局

3.2.1. absolute(绝对布局)

  在此模式下，所有的控件会按照设计模式下定义的宽度与高度和锚点位置进行布局，缩放窗口大小不会改变其大小及位置。

3.2.2. accordion(关联布局)

  即所有的容器会进行关联排序布局，这种布局适用在Panel类型的布局中，点击其中的一个Panel，其余Panel会自动收起。参考图如下：

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

属性	取值	说明
AlignmentControl	uniAlignmentClient	客户端布局模式
Layout	accordion	设置其包含的子控件的布局模式

• UgPanel01、UgPanel02、UgPanel03属性说明

属性	取值	说明
Layout	fit	设置其包含的子控件的布局模式为fit，自适应全局布局
Title	UgPanel01/UgPanel02/UgPanel03	设置面板控件的标题名称

3.2.3. anchor(锚布局)

  锚布局将其中包含的控件根据固定的点位进行布局。参考图示如下，第一个图表示为按照其50%的宽度进行布局，第二个图表示按照窗口宽度减去100像素布局，第三个面板表示按照窗口宽度减去20像素，按照窗口的高度减去350像素进行布局。

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

属性	取值	说明
AlignmentControl	uniAlignmentClient	客户端布局模式
Layout	anchor	设置其包含的子控件的布局模式
Height	600	设置窗体的高度
Width	800	设置窗体的宽度

UgPanel01属性说明

属性	取值	说明
Caption	50% Width	设置此控件为50%的窗体宽度布局
LayoutConfig.anchor	50%	设置锚点为50%的宽度处
LayoutConfig.Margin	0 0 10 0	分别表示为上外边距、右外边距、下外边距与左外边距

UgPanel02属性说明

属性	取值	说明
Caption	Offset -100 Width	设置此控件宽度为窗体宽度减去100像素
LayoutConfig.anchor	-100	设置锚点为窗体宽度左侧100像素处
LayoutConfig.Margin	0 0 10 0	分别表示为上外边距、右外边距、下外边距与左外边距

UgPanel03属性说明

属性	取值	说明
Caption	Offset -20 Width, -350 Height	设置此控件宽度为窗体宽度减去20像素，窗体高度减去350像素
LayoutConfig.anchor	-20 -350	设置锚点为窗体宽度左侧100像素处

3.2.4. border(边界布局)

  将其中包含的控件按照边界进行布局，与服务端布局模式中的Align类似。布局如下图所示。

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

属性	取值	说明
AlignmentControl	uniAlignmentClient	客户端布局模式
Layout	border	设置其包含的子控件的布局模式

UgPanel01属性说明

属性	取值	说明
Caption	Region: West; Split: True	设置控件朝西布局，拥有分割线
LayoutConfig.Region	west	设置控件所在的区域
LayoutConfig.Split	True	设置控件是否有分割线

UgPanel02属性说明

属性	取值	说明
Caption	Region: Center; Split: False	设置控件居中布局，无分割线
LayoutConfig.Region	center	设置控件所在的区域
LayoutConfig.Split	False	设置控件是否有分割线

UgPanel03属性说明

属性	取值	说明
Caption	Region: South; Split: True	设置控件朝南布局，有分割线
LayoutConfig.Region	south	设置控件所在的区域
LayoutConfig.Split	True	设置控件是否有分割线

3.2.5. fit(自适应布局)

  自适应布局用于设置其中的控件完全铺满空间。图片如下所示，可设置BodyPadding使其有边界边框。

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

属性	取值	说明
AlignmentControl	uniAlignmentClient	客户端布局模式
Layout	hbox	设置其包含的子控件的布局模式

UgPanel01属性说明

属性	取值	说明
Layout	fit	设置子控件布局模式为fit
LayoutConfig.Flex	1	布局的单位，1表示参与hbox宽度等分分隔
LayoutConfig.Height	100%	设置高度的自适应

UgPanel02属性说明

属性	取值	说明
Layout	fit	设置子控件布局模式为fit
LayoutConfig.BodyPadding	15	设置内边界的宽度
LayoutConfig.Flex	1	布局的单位，1表示参与hbox宽度等分分隔
LayoutConfig.Height	100%	设置高度的自适应

UgPanel03属性说明

UgPanel03是UgPanel01中的子控件。

属性	取值	说明
Caption	This is the inner panel content without padding	显示的内容，表示当前的面板控件属性设置为无边距

UgPanel04属性说明

UgPanel04是UgPanel02中的子控件。

属性	取值	说明
Caption	This is the inner panel content	显示的内容，表示当前的面板控件属性设置为有边距

3.2.6. form(窗体布局)

  窗体布局使用于对字段进行排列时使用，方便进行对齐的操作。示意图如下。

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

属性	取值	说明
AlignmentControl	uniAlignmentClient	客户端布局模式
Layout	fit	设置其包含的子控件的布局模式

UgPanel01属性说明

属性	取值	说明
Layout	form	窗体布局的设置

UgEdit01属性说明

  此控件放置于UgPanel01中。

属性	取值	说明
EmptyText	First Name	设置First Name
FieldLabel	First Name	显示控件的标签信息
Text		清空编辑框中原有的信息

UgEdit02属性说明

  此控件放置于UgPanel01中。

属性	取值	说明
EmptyText	Last Name	设置Last Name
FieldLabel	Last Name	显示控件的标签信息
Text		清空编辑框中原有的信息

UgEdit03属性说明

  此控件放置于UgPanel01中。

属性	取值	说明
EmptyText	Age	设置Age
FieldLabel	Age	显示控件的标签信息
Text		清空编辑框中原有的信息

UgHTMLMemo01属性说明

  此控件放置于UgPanel01中。

3.2.7. hbox(水平盒布局)

  水平盒布局可以自定控制各控件的统一宽度信息。

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

属性	取值	说明
AlignmentControl	uniAlignmentClient	客户端布局模式
Layout	hbox	设置其包含的子控件的布局模式

UgPanel01属性说明

属性	取值	说明
Caption	Flex: 2, Height: 100%	设置名称
Layout.Flex	2	宽度将被设为一个宽度的数值
Layout.Height	100%	设置垂直方向上的对齐

UgPanel02属性说明

属性	取值	说明
Caption	Flex: 1, Height: 60%	设置名称
Layout.Flex	1	宽度将被设为一个宽度的数值
Layout.Height	60%	设置垂直方向上的对齐

UgPanel03属性说明

属性	取值	说明
Caption	Flex: 1, Height: 35%	设置名称
Layout.Flex	1	宽度将被设为一个宽度的数值
Layout.Height	35%	设置垂直方向上的对齐

3.2.8. table(表格布局)

  将控件按照表格的排列方式进行布局。示例图见下。

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

属性	取值	说明
AlignmentControl	uniAlignmentClient	客户端布局模式

UgButton01属性说明

属性	取值	说明
Align	alTop	顶部对齐显示
Caption	Add Cell Into Table	设置字幕显示

UgContainerPanel01属性说明

属性	取值	说明
Layout	table	表格形式的布局
LayoutAttribs.Columns	3	表格的列数

UgBtton01-OnClick事件

Var
  PanelNumber: Integer;

procedure UgButton01OnClick(sender: tobject);
begin
  PanelNumber := PanelNumber + 1;
  with TUgPanel.Create(Self) Do
    Begin
      Parent := UgContainerPanel01;
      Caption := 'UgPanel-'+IntToStr(PanelNumber);
      Name := 'UgPanelTable'+IntToStr(PanelNumber);
      Height := 35;
      LayoutConfig.Width := '100%';
    End;
end;

3.2.9. vbox(垂直盒布局)

  垂直盒布局中的内容根据宽度进行自动布局，示例见下：

  其中关键的控件参考属性设置如下：

UgWebRunFrame属性说明

属性	取值	说明
AlignmentControl	uniAlignmentClient	客户端布局模式
Layout	vbox	设置子控件的布局模式

UgPanel01属性说明

属性	取值	说明
Caption	Flex: 2 , Width: 50%;	显示设置的项目
LayoutConfig.Flex	2	所有项目加起来的成分数
LayoutConfig.Width	50%	设置宽度的大小值，可用百分比表示

UgPanel02属性说明

属性	取值	说明
Caption	Flex: 3 , Width: 100%;	显示设置的项目
LayoutConfig.Flex	3	所有项目加起来的成分数
LayoutConfig.Width	100%	设置宽度的大小值，可用百分比表示

UgPanel03属性说明

属性	取值	说明
Caption	Flex: 4 , Width: 30%;	显示设置的项目
LayoutConfig.Flex	4	所有项目加起来的成分数
LayoutConfig.Width	30%	设置宽度的大小值，可用百分比表示