如何使用 Tapestry 创建多个购物篮选择

Question

让我们考虑以下问题。

有一个包含购物篮的页面。篮子是一个包含一系列物品的组件，例如水果或汽车等。

页面中共有三个篮子：汽车篮子、水果篮子和全篮子。车篮里装的是汽车，果篮里装的是水果，全篮可以同时装汽车和水果。

最初，只有汽车篮和水果篮里有物品。通过单击这些购物篮中的商品，该商品将被移动到所有购物篮中。通过单击所有购物篮中的商品，商品将移回到原来的购物篮中。

此外，水果物品和汽车物品的渲染方式也不同。例如，汽车项目可能包含与水果项目不同类型的背景。项目也可能包含不同类型的信息。例如，car-item 包含汽车的最大速度，fruit-item 包含水果的颜色。

此效果图也必须保留在全篮中。

您将如何使用 Tapestry 制作页面？我不需要完整的实施。我只是对解决这个问题的原则感兴趣。

另外，为了简化实施，您能否估计一下需要多少时间？

Answer 1

首先，您需要为汽车和水果创建组件。汽车和水果篮的显示就只是 循环项目，显示每个项目的水果/汽车组件。

混合篮子有点棘手。 Tapestry 不太擅长动态结构（“动态行为，静态结构”），因此您需要一个 if 构造来渲染汽车或水果组件。

<t:loop t:source="items" t:value="currentItem">
    <t:if t:test="currentCar">
       <span t:type="Car" t:car="currentCar" />
    </t:if>
     <t:if t:test="currentFruit">
       <span t:type="Fruit" t:fruit="currentFruit" />
    </t:if>
</t:loop>

当 currentItem 不是汽车时，该组件中的 getCurrentCar() 方法应返回 null，而当该项目是汽车时，getCurrentFruit() 应返回 null不是水果。

要使内容在列表之间移动，您可以使用 ActionLinks 以及适当的事件处理程序。要支持 AJAX，您可以使用 Tapestry 的内置 区域功能。要一次更新多个区域，您可以返回 来自事件处理程序的 MultiZoneUpdate 对象。 （或者您可以编写自己的优化客户端代码。）

您应该能够在很短的时间内建立这个基本结构，总共需要多长时间取决于您希望事情变得多么复杂。

Answer 2

这是亨宁方法的延续：

<!-- render car basket -->
<t:loop t:source="carBasket" t:value="currentItem">
    <t:if t:test="currentCar">
       <span t:type="Car" t:car="currentCar" />
       <!-- TODO : eventlink for add to all basket -->
    </t:if>
</t:loop>

<!-- render fruit basket -->
<t:loop t:source="fruitBasket" t:value="currentItem">
     <t:if t:test="currentFruit">
       <span t:type="Fruit" t:fruit="currentFruit" />
       <!-- TODO : eventlink for add to all basket -->
    </t:if>
</t:loop>

<!-- render all basket -->
<t:loop t:source="allBasket" t:value="currentItem">
    <t:if t:test="currentCar">
       <span t:type="Car" t:car="currentCar" />
       <!-- TODO : eventlink for back to car basket -->
    </t:if>
     <t:if t:test="currentFruit">
       <span t:type="Fruit" t:fruit="currentFruit" />
       <!-- TODO : eventlink for back to fruit basket -->
    </t:if>
</t:loop>

在页面中你会看到这样的内容

@Property
private Item currentItem;

public Set<Item> getAllBasket(){
    return allBasket;
} 

public Set<Car> getCarBasket(){
    return carBasket;
} 

public Set<Fruit> getFruitBasket(){
    return fruitBasket;
}

public Fruit getCurrentFruit(){
   return currentItem instanceof Fruit ? (Fruit)item : null;
}

public Car getCurrentCar(){
    return curretItem instanceof Car ? (Car)item : null;
}