彩蛋 caidan( 三 ) _生活百科

文章插图
Search查询元件，弹窗中输入Create from Template，找到对应元件后点选然后再点击OK按钮放入开发区，这个元件是用给定的模板生成字符串结果，然后为其添加一个输入元件命名为“biaoti”添加一个字符常量元件---从常数常量类元件中选中，在开发区中需要的位置再次点击放入元件，重命名中输入值为“images/${biaoti}.png”，此常量连线传值到上步添加的模板生成字符元件的<Template>输入元件用快捷键“b”添加一个“Branch是哪些值”元件，将两个输出元件名称改为“花生”、“木耳”添加两个字符常量命名为“huasheng”和“muer.png”，连线将“花生”、“木耳”输出元件分别连至“huasheng”和“muer.png”常量将“huasheng”和“muer.png”常量连线传值至模板生成字符元件的“biaoti”输入元件模板生成字符元件的<Text>输出元件与数据类型对象“菜单项目”下Thumbnail/<SRC>相连，传入生成的图片路径使用的是项目文件夹中的图片路径下载“huasheng.png”和“muer.png”图片提前放入项目文件夹下的web/images下注意名称和格式\存放地址我们要用到开发结果如下图

文章插图

保存开发结果，返回至浏览器，自动刷新后点击左侧“凉菜”后显示为

文章插图

开发操作演示

文章插图

显示的图片大小不一致且过大，需要设定统一大小属性，可以为Thumbnail设定样式类属性定义大小，在此我们用最简单快速的方式设定显示大小双击进入以下元件位置：Content/Content Pane/List/菜单项目/Thumbnail单击选中Thumbnail图标元件为其添加属性：可以选中元件后右键单击，在弹出的菜单中选Add Property，或者在属性区右上角单属性添加按钮图标，弹出添加属性窗口，在属性名称中输入“html.style”，点击OK后完成属性添加开发工具下部属性区中就会有一行名称为“html.style”新属性出现，在Shared列中对应输入样式标签和样式值“height:80px;width:80px;”，注意输入时是英文输入法以上处理同样可以用添加“html.height”和“html.width”两个属性的方式处理，Shared列中对应输入样式值“80px”

文章插图

设置元件样式属性的操作演示

文章插图

在本地浏览器刷新浏览前，为菜单添加一些标题外的描述信息双击菜单项目/外部退出至Content元件，双击进入Content/Left Menu/Menu Item/<On Click>/liangcai/“生成显示菜单”元件中添加两个字符常量，命名为“配料：花生、醋、糖”和“配料：木耳、辣椒、香菜、醋”将“Branch是哪些值”元件两个输出元件“花生”、“木耳”分别连线至刚添加的配料常量，再将配料常量连线传值至数据类型对象“菜单项目”下Details/Description/<Value>