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菜单，点击[保存至数据库]按钮，将其保存至数据库，点击[调试运行]确认能够正常打开。

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