FastWeb之菜譜展示-視覺化控制元件

1. 說明

  fotorama是一個開源的照片顯示工具，通過引入標籤以及圖片鏈接的方式來打開顯示元件中的內容。實現類似於幻燈片播放的效果。以下使用關聯控制元件UgAlbumView來實現照片墻的效果。

  通過本範例學習，可以掌握在示例中引入圖片展示的相關功能。

2. 設計明細

  開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

  1：TUgContainerPanel元件，控制元件名稱為UgContainerPanel01。

  2：TUgLabel元件，控制元件名稱為UgLabel01。

  3：TUgLabel元件，控制元件名稱為UgLabel02。

  4：TUgContainerPanel元件，控制元件名稱為UgContainerPanel02。

  5：TUgContainerPanel元件，控制元件名稱為UgContaienrPanel03。

  6：TUgAlbumView元件，控制元件名稱為AlbumView01。

  7：TUgContainerPanel元件，控制元件名稱為UgContainerPanel04。

• UgWebRunFrame屬性設定

  • AlignmentControl：設定其下子控制元件的對齊模式，設定為uniAlignmentClient。
  • Color：設定顯示的顏色的資訊，設定為ClMaroon。
  • Layout：設定子控制元件的佈局的方式，設定為vbox。
  • Height：設定頁面高度=600。
  • Width：設定頁面寬度=800。

• 1：UgContainerPanel01屬性設定

  • Layout：設定子控制元件的佈局方式，設定為vbox。
  • LayoutCofig：設定控制元件的佈局設定，其中的Flex設定為2，Width設定為100%。

• 2：UgLabel01屬性設定

  • Alignment：設定文字內容的對齊方式，設定為taCenter。
  • AutoSize：設定控制元件是否跟隨文字區域變化改變控制元件的尺寸大小，設定為False。
  • Caption：設定顯示的文字內容，設定為年年私房菜。
  • Font：設定顯示的文字字型，點選右側的[√]，打開字型設定的對話方塊，設定顯示的字型樣式。

  

• 3：UgLabel02屬性設定

  • Alignment：設定文字內容的對齊方式，設定為taCenter。
  • AutoSize：設定控制元件是否跟隨文字區域變化改變控制元件的尺寸大小，設定為False。
  • Caption：設定顯示的文字內容，設定為做您最喜歡的菜。
  • Font：設定顯示的文字字型，點選右側的[√]，打開字型設定的對話方塊，設定顯示的字型樣式。

  

• 4：UgContainerPanel02屬性設定

  • Layout：設定其下的子控制元件的佈局的方式，設定為hbox。
  • LayoutConfig：設定控制元件的佈局設定，其中Flex設定為4，Width設定為100%。

• 5：UgContainerPanel03屬性設定

  • LayoutConfig：設定控制元件的佈局設定，其中Flex設定為2，Height設定為100%。

• 6：UgAlbumView01屬性設定

  • LayoutConfig：設定控制元件的佈局設定，其中Flex設定為5，Height設定為100%。

• 7：UgContainerPanel04屬性設定

  • LayoutConfig：設定控制元件的佈局設定，其中Flex設定為2，Height設定為100%。

3. 指令碼設計

  點選指令碼設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式指令碼無需引用單元。

3.1. 指令碼初始設定

  該程式初始化顯示的圖片列表。

//JScript
function ViewInit();
//設定其中要顯示的圖片與文字描述內容
{
  UgAlbumView01.Images.Text = "<img src = 'library/js/fotorama/image/food1.jpg' data-caption = '" + UGMM.LT("宮保雞丁") + "'>"
  + "<img src = 'library/js/fotorama/image/food2.jpg' data-caption = '" + UGMM.LT("番茄牛蛙") + "'>"
  + "<img src = 'library/js/fotorama/image/food4.jpg' data-caption = '" + UGMM.LT("腐乳肉" ) + "'>"
  + "<img src = 'library/js/fotorama/image/food5.jpg' data-caption = '" + UGMM.LT("麻辣小龍蝦") + "'>"
  + "<img src = 'library/js/fotorama/image/food6.jpg' data-caption = '" + UGMM.LT("黃金堡") + "'>";
  UgAlbumView01.Options.data_loop = True;
  UgAlbumView01.Options.data_shuffle = True;
}

function UgWebRunFrameOnAfterRunScript(sender)
{
  UGMM.LC(Self);
}

{
  ViewInit();
}

//PasScript
Procedure ViewInit;
//設定其中要顯示的圖片與文字描述內容
Begin
  UgAlbumView01.Images.Text := '<img src = ''library/js/fotorama/image/food1.jpg'' data-caption = ''' + UGMM.LT('宮保雞丁') + '''>'
  + '<img src = ''library/js/fotorama/image/food2.jpg'' data-caption = ''' + UGMM.LT('番茄牛蛙') + '''>'
  + '<img src = ''library/js/fotorama/image/food4.jpg'' data-caption = ''' + UGMM.LT('腐乳肉' ) + '''>'
  + '<img src = ''library/js/fotorama/image/food5.jpg'' data-caption = ''' + UGMM.LT('麻辣小龍蝦') + '''>'
  + '<img src = ''library/js/fotorama/image/food6.jpg'' data-caption = ''' + UGMM.LT('黃金堡') + '''>';
  UgAlbumView01.Options.data_loop := True;
  UgAlbumView01.Options.data_shuffle := True;
End;

procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UGMM.LC(Self);
end;

Begin
  ViewInit;
End.

// Make sure to add code blocks to your code group

4. 運行結果

  使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  點選底部的圖片列表或者點選左右兩側的方向按鈕以切換圖片顯示。