中继器：选择对比商品

第一部分

案例描述：
点击某个商品的“对比”按钮时，页面下方向上滑出对比栏，选中的商品将在对比栏中出现。点击对比栏“隐藏”按钮时，关闭对比栏。

元件准备

动态面板“ContrastPanel”中：

中继器“ContrastList”中：

中继器“ContrastList”中的数据集：
注意：中继器"ContrastList"在动态面板"ContrastPanel"里，而"ItemPanel"是在中继器"ContrastList"里。

注意：如果在浏览器页面中看到中继器里拿到的数据在页面显示不全，可以调整对应的元件大小。
动态面板“ItemPanel”中：

中继器“GoodsList”中：

中继器“GoodsList”的数据集：

包含命名：
中继器（用于商品列表）：GoodsList
中继器（用于对比列表）：ContrastList
图片（用于商品列表的商品图片）：GoodsImage
图片（用于商品列表的促销图标）：PromotionImage
文本标签（用于商品列表的商品价格）：GoodsPrice
文本标签（用于商品列表的商品名称）：GoodsName
文本标签（用于商品列表的商品简介）：GoodsSynopsis
文本标签（用于商品列表的评论数量）：CommentNumber
图片（“对比”按钮的复选框图标）：CheckImage
动态面板（用于对比栏的位置固定以及显示/隐藏）：ContrastPanel
动态面板（用于对比列表悬停显示“删除”按钮效果）：ItemPanel
文本标签（用于显示对比商品名称）：ContrastName
文本标签（用于显示对比商品价格）：ContrastPrice
文本标签（用于对比列表删除按钮）：DeleteButton
图片（用于对比商品图片）：ContrastImage
思路分析：
中继器可以动态的添加数据。本案例中对比列表的信息可以动态添加，就可以通过中继器来实现。

本案例中的中继器“GoodsList”，并非所有的商品都显示促销图标“PromotionImage”；我们可以在中继器数据集中添加“IsPromotion”列，并预先设置好列值；中继器载入每一行数据时，根据 “IsPromotion”列的值是 “True”还是“False”，决定其是否显示。（操作步骤2~3）
点击“对比”按钮时，要让复选框切换样式（操作步骤4）；
点击“对比”按钮时，要让对比列表从底部向上滑出；（操作步骤5）
“对比”按钮的复选框选中时，要向对比列表添加一条商品信息；（操作步骤6）
点击对比栏中的“隐藏”按钮时，关闭对比栏。（操作步骤7）

操作步骤：

1、完成中继器“GoodsList”与“ContrastList”的设置以及【每项加载时】事件的交互；

事件交互设置：

2、设置图片“PromotionImage”默认为显示的状态；然后，在元件属性中，设置该元件的【禁用】时的交互样式为{不透明(%)}“0”,这样禁用该元件时，该元件则完全透明不可见；

3、在中继器【每项加载时】事件中，添加"情形2"；设置判断条件，判断【值】“[[Item. IsPromotion]]”【==】【值】“False”时，执行动作【禁用】图片“PromotionImage”；最后，在该用例上点击<鼠标右键>，选择【切换为或】,将用例的判断转换为“If”格式。。
①在中继器【每项加载时】事件中【添加情形】

②"情形1"不用设置条件

③添加"情形2"

4、在元件属性中为图片“CheckImage”添加【选中】的交互样式，导入被选中样式的图片；然后，为该元件所在的动态面板【鼠标单击时】事件添加“用例1”，设置动作为【切换选中状态】“CheckImage”

用例动作设置：

5、继续上一步，添加第2个动作为【显示】动态面板“ContrastPanel”，{动画}为【向上滑动】，持续{时间}“500”毫秒；

6、为图片“CheckImage”的【选中时】事件添加“用例1”，设置动作为【添加行】到中继器“ContrastList”；配置中点击【添加行】的按钮，再打开的界面中添加一行数据，对应列名分别填入“[[Item.GoodsName]]”、“[[Item.GoodsPrice]]”和“[[Item.GoodsImage]]”；这样就将当前被选中的商品的信息读取出来，添加到了中继器“ContrastList”的数据集中，并通过【每项加载时】的交互动态的显示到对比栏中；
【添加交互【——【选中时【——【添加行】

7、为对比栏的“隐藏”按钮的【鼠标单击时】事件添加“用例1”，设置动作为【隐藏】动态面板“ContrastPanel”。

第二部分

在第一部分的案例中，对比商品是可以重复添加的，下面的操作是添加对重复添加对比商品的限制。

在第一部分的基础上新增内容(IsSelected)：
中继器“GoodsList”的数据集：

思路分析：
中继器在每项数据加载时，可以通过对列值进行判断对元件进行控制；所以，如果想限制“对比”按钮被点击时，不会重复添加数据，我们可以单独在中继器数据集中添加一列，用于记录选中的状态（见元件准备）；然后，通过对这个状态值的判断，进行不同的交互：
①如果状态值为“True”，说明商品已添加，该项数据加载时，要对复选框图片进行选中的操作；（操作步骤1）
②如果状态值为“False”，说明商品未添加，可以进行添加对比商品信息的操作；（操作步骤3）
③每个商品的选中状态值，初始时为“False”，成功添加对比商品信息时，要将状态值更新为“True”。（操作步骤4）

操作步骤：
1、在中继器“GoodsList”的【每项加载时】事件中，添加“用例3”；为用例添加条件判断【值】“[[Item.IsSelected]]”【==】【值】“True”；设置符合条件时的动作为【选中】图片“CheckImage”；最后，在该用例上点击<鼠标右键>，选择【切换为或】,将用例的判断转换为“If”格式；
条件判断设置：

用例动作设置：

事件交互设置：

2、因为，在上一步中，添加了中继器【每项加载时】对图片“CheckImage”的选中交互；“第一部分”中“操作步骤4”所设置的动作就不再需要，将其删除；
事件交互设置：

3、为“对比”按钮所在动态面板的【鼠标单击时】事件添加“情形2”，设置条件判断【值】“IsSelected”【==】【值】“False”；完成条件判断设置后确定保存，退出用例编辑界面；将上面“第一部分”中“操作步骤6”所设置的动作，从图片“CheckImage”的交互中复制到“情形2”中，并删除图片“CheckImage”的交互；最后，在该用例上点击<鼠标右键>，选择【切换为或】,将用例的判断转换为“If”格式；

4、继续上一步，在“用例2”中添加第2个动作，【更新行】到中继器“GoodsList”；配置中选择【This】，表示更新当前行；然后，在【选择列】列表中选择“IsSelected”，为其设置新值“True”。

补充说明：
本案例交互流程为：点击“对比”按钮时，会对状态值进行判断；如果状态值为“False”，表示按钮未被选中，这时，将商品信息添加到对比栏，并更新当前商品的“IsSelected”列值为“True”；中继器数据集的数据被更新时会让中继器重新加载数据，从而触发【每项加载时】事件，那么，我们写在事件里的“用例3”就会发生作用，通过判断改变图片“CheckImage”的样式。
(简单来说就是：点击“对比”按钮→添加商品到对比栏→“IsSelected”列值为更新为“True”→图片“CheckImage”变为选中的样式)

第三部分

案例描述：
取消选中或点击对比栏中的“删除”按钮都可以删除对比栏中的商品信息；点击“清空对比栏”按钮，可以删除对比栏中所有的商品信息。

思路分析：
①在第二部分中，我们设置了中继器“GoodsList”【每项加载时】事件的“用例3”，如果状态值是“True”就选中图片“CheckImage”；在当前的案例中，我们需要做删除对比信息的效果；而删除对比信息时，要对应取消选中图片“CheckImage”；（操作步骤1）
②点击“清空对比栏”需要删除全部商品信息；同时，需要取消商品列表中“对比”按钮复选框的选中状态；（操作步骤2~3）
③点击“删除”按钮，可以删除当前的商品信息；同时，需要取消商品列表中对应的“对比”按钮复选框的选中状态；（操作步骤5~6）
④点击“对比”按钮时，如果复选框是选中的状态，则取消复选框的选中状态；同时，删除对比栏中对应当前的商品信息。（操作步骤7~8）

操作步骤：

在案例21的基础上继续进行操作：
1、为中继器“GoodsList”【每项加载时】事件添加“用例4”，软件会自动设置条件为“Else If”，与“用例3”形成关联；在“用例4”中直接添加，不符合“用例3”条件时的动作为【取消选中】图片“CheckImage”；

事件交互设置：

2、为“清空对比栏”按钮的【鼠标单击时】事件添加“用例1”，设置动作为【删除行】中继器“ContrastList”，删除目标选择【规则】，{规则}中填写“True”；“True”表示该中继器数据集中每一个数据行都符合删除条件；
用例动作设置：

3、继续上一步，为“用例1”添加第2个动作，【更新行】到中继器“GoodsList”；更新目标选择“条件”；{条件}中填写“[[Item.IsSelected==‘True’]]”；点击【选择列】，选择“IsSelected”，为其设置新值“False”；
用例动作设置：
事件交互设置：
4、“对比”商品信息中的删除按钮“DeleteButton”默认为白色，在元件属性中设置【鼠标悬停】的交互样式，设置字体颜色为蓝色；在动态面板“ItemPanel”的元件属性中勾选【允许触发鼠标交互】，这样鼠标只要进入动态面板范围内，就会触发“DeleteButton”的【鼠标悬停】交互样式，呈现蓝色可见状态。

5、为对比商品信息中删除按钮“DeleteButton”（图1-197）的【鼠标单击时】事件添加“用例1”，设置动作为【更新行】到中继器“GoodsList”；更新目标选择“条件”；{条件}中填写“[[TargetItem.GoodsName==Item.ContrastName]]”；点击【选择列】，选择“IsSelected”，为其设置新值“False”；“TargetItem”表示目标中继器的数据行，该条件表示要更新目标中继器中“GoodsName”列值与当前数据行“ContrastName”列值相同的数据行；
(GoodsName是中继器“GoodsList”的数据行，ContrastName是中继器"ContrastList"的数据行，该条件表示找出“GoodsName”列值中与当前ContrastName列值相同的“数据行，更新“IsSelected”，为其设置新值“False”)

注意：TargetItem和Item的区别是Item指当前项TargetItem指被影响/受影响/目标项。
6、继续上一步，为“用例1”添加第2个动作，【删除行】中继器“ContrastList”，删除目标选择【This】，表示删除当前项所对应的数据行；
用例动作设置：
事件交互设置：

7、为“对比”按钮的动态面板，添加“用例3”；这时，软件会自动关联“用例2”，设置条件为“Else If”，即不满足“用例2”的条件的情形；添加动作【更新行】到中继器“GoodsList”；更新目标选择【This】；点击【选择列】，选择“IsSelected”，为其设置新值“False”；
用例动作设置：

8、继续上一步，设置动作为【删除行】中继器“ContrastList”，删除目标选择【条件】，{条件}填写“[[TargetItem.ContrastName==Item.GoodsName]]”；这个条件表示删除目标中继器中“ContrastName”列值与当前数据行 “GoodsName” 列值相同的数据行。
用例动作设置：
事件交互设置：

补充说明：
本案例中未对商品列表其它交互进行设置，比如鼠标进入商品信息区域显示带阴影的背景矩形；该效果大家可以参考本案例中元件“DeleteButton”鼠标悬停效果的实现思路。