Question

让我们考虑以下问题。

有一个包含篮子的页面。篮子是包含水果或汽车等物品清单的组件。

在页面中有三个篮子：车篮，水果篮和全篮。汽车篮子包含汽车，水果篮子包含水果，所有篮子可以包含汽车和水果。

最初只有汽车和水果篮中的物品。通过点击这些篮子中的项目，该项目将被移动到全篮子。通过点击全部篮子中的项目，项目将被移回原来的篮子。

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

此渲染也必须保留在all-basket中。

你将如何使用Tapestry进行页面浏览？我不需要完整的实现。我只是对如何解决这个问题的原则感兴趣。

另外，为了简化实施，你能估计需要花多少时间吗？

Answer 1

首先，您要为汽车和水果创建components。然后显示汽车和水果篮只需loops通过物品，为每个物品展示水果/汽车组件。

混合篮子有点棘手。 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>

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

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

你应该能够在很短的时间内设置这个基本结构，总共花费多长时间取决于你想要的东西。

Answer 2

以下是Henning方法的延续：

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

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

2 个答案: