FastWeb之菜譜展示(3D)

1. 說明

  fotorama是一個開源的照片顯示工具，通過引入標籤以及圖片鏈接的方式來打開顯示元件中的內容。實現類似於幻燈片播放的效果。關於此範例使用的jQueryFrame示例的製作過程請參考瀏覽-照片-顯示元件。

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

2. 設計明細

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

  TUgImage元件，控制元件名稱為UgImage01，此控制元件用於顯示背景圖片。

  TUgContainerPanel元件，控制元件名稱為UgContainerPanel06，此控制元件用於整體佈局。

  TUgContainerPanel元件，控制元件名稱為UgContainerPanel01，此控制元件用於左側佈局。

  TUgContainerPanel元件，控制元件名稱為UgContainerPanel03，此控制元件用於中間佈局。

  TUgContainerPanel元件，控制元件名稱為UgContainerPanel04，此控制元件用於中間的頂部佈局，放置標題欄。

  1：TUgImage元件，控制元件名稱為UgImage02。

  2：TUgjQueryFrame元件，控制元件名稱為UgjQueryFrame01。

  TUgContainerPanel元件，控制元件名稱為UgContainerPanel05。

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

  3：TUgTimer元件，控制元件名稱為UgTimer01。

• UgWebRunFrame屬性設定

  • AlignmentControl：設定對齊的方式，設定為uniAlignmentClient。
  • Height：設定頁面高度=600。
  • Width：設定頁面寬度=800。

• UgImage01屬性設定

  • Align：設定對齊的方式，設定為alClient。
  • Stretch：設定是否拉伸圖片顯示，設定為True。
  • Picture：設定圖片顯示，點選[√]打開圖片顯示的對話方塊，選擇圖片上傳。

• UgContainerPanel06屬性設定

  • Align：設定對齊的方式，設定為alClient。
  • Layout：設定佈局的模式，設定為hbox。

• UgContainerPanel01屬性設定

  • LayoutConfig：設定佈局參數，設定Flex為2，設定Height為100%。

• UgContainerPanel03屬性設定

  • Layout：設定佈局模式，設定為vbox。
  • LayoutConfig：設定佈局參數，設定Flex為6，設定Height為100%。

• UgContainerPanel04屬性設定

  • Layout：設定佈局模式，設定為vbox。
  • LayoutConfig：設定佈局參數，設定Flex為1，設定Width為100%。

• 1：UgImage02屬性設定

  • LayoutConfig：設定佈局參數，設定Flex為1，設定Width為100%。
  • Stretch：設定是否拉伸圖片顯示，設定為True。
  • Picture：設定圖片顯示，點選[√]打開圖片顯示的對話方塊，選擇圖片上傳。

• 2：UgjQueryFrame01屬性設定

  • Layout：設定佈局模式，設定為hbox。
  • LayoutConfig：設定佈局參數，設定Flex為3，設定Width為100%。

    雙擊打開管理器，選擇其中的瀏覽-照片-顯示元件，點選[OK]按鈕。

• UgContainerPanel05屬性設定

  • LayoutConfig：設定佈局參數，設定Flex為1。

• UgContainerPanel02屬性設定

  • LayoutConfig：設定佈局參數，設定Flex為2，設定Height為100%。

• 3：UgTimer01屬性設定

  • Interval：設定計時器的時間間隔，設定為100。

3. 程式設計

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

3.1. 程式初始設定

  初始化程式設定。

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

{
  Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;
  UgTimer01.OnTimer = &UgTimer01OnTimer;
  UgJQueryFrame01.Init("3106F44F-1BF8-4C74-9C2D-EA969B1A9A86"); 
}

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

Begin
  UgJQueryFrame01.Init('3106F44F-1BF8-4C74-9C2D-EA969B1A9A86'); 
End.

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

3.2. 事件設定

• 3：UgTimer01-OnTimer事件

  定時器的定時觸發事件，設定顯示內容。

//JScript
function UgTimer01OnTimer(sender)
{
  UgJQueryFrame01.JSONToData("{\"param_list\":\"<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("黃金堡") + "'>\"}");
  UgTimer01.Enabled = False;
}

//PasScript
procedure UgTimer01OnTimer(sender: tobject);
begin
  UgJQueryFrame01.JSONToData('{"param_list":"<img src = ''library/js/fotorama/image/food1.jpg'' data-caption = ''宮保雞丁''>'
  + '<img src = ''library/js/fotorama/image/food2.jpg'' data-caption = ''番茄牛蛙''>'
  + '<img src = ''library/js/fotorama/image/food4.jpg'' data-caption = ''腐乳肉''>'
  + '<img src = ''library/js/fotorama/image/food5.jpg'' data-caption = ''麻辣小龍蝦''>'
  + '<img src = ''library/js/fotorama/image/food6.jpg'' data-caption = ''黃金堡''>"}');
  UgTimer01.Enabled := False;
end;

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

4. 運行結果

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

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