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

Question

让我们考虑以下问题。

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

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

最初只有车篮和水果篮中有元素。通过单击这些篮子中的项目，该项目将被移动到所有篮子中。通过单击所有篮子中的项目，项目将被移回其原始篮子。

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

此呈现也必须保留在所有篮子中。

您将如何使用 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>

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

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

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