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%	設定寬度的大小值，可用百分比表示