3

让我们考虑以下问题。

有一个页面包含篮子。篮子是一个组件，其中包含诸如水果或汽车之类的物品列表。

在页面中有三个篮子：汽车篮子、水果篮子和全篮子。car-basket 包含汽车，fruit-basket 包含水果，all-basket 可以同时包含汽车和水果。

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

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

此渲染图也必须保留在所有篮子中。

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

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

4

2 回答 2

2

首先，您将为汽车和水果创建组件。然后，汽车和水果篮的展示会循环显示这些项目，为每个项目显示一个水果/汽车组件。

混合篮子有点棘手。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与适当的事件处理程序一起使用。要支持 AJAX，您可以使用 Tapestry 的内置区域功能。要一次更新多个区域，您可以从事件处理程序返回MultiZoneUpdate对象。（或者您可以编写自己的优化客户端代码。）

你应该能够在很短的时间内建立这个基本结构，总共需要多长时间取决于你想要得到的东西有多精细。

于 2010-09-05T17:58:01.670 回答
1

这是 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;
}
于 2010-09-06T08:06:05.407 回答