菜谱展示(WEB)

# 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"); 
}

1
2
3
4
5
6
7
8
9
10
11

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

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

1
2
3
4
5
6
7
8
9

// 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;
}

1
2
3
4
5
6
7
8
9
10

//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;

1
2
3
4
5
6
7
8
9
10

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

# 4. 运行结果

使用鼠标在FastWeb菜单，点击[保存至数据库]按钮，将其保存至数据库，点击[调试运行]确认能够正常打开。

点击底部的图片列表或者点击左右两侧的方向按钮以切换图片显示。

← 别墅3D展示(WEB) 环绕风景展示(WEB)→