Tapestry 4 实现自定义组件-CheckboxList

[本文中的程序在JDK 6, Tapestry 4.1中测试通过]

用 Tapestry 自定义组件和创建一个page一样简单，同样要创建三个文件，html模板，配置文件，java类文件，只不过配置文件后缀不是page了，而是jwc。


定义组件的html模板

组件html模板和page的模板基本差不多，只不过组件模板可以是html的片段，也可以是完整的html文件。我们要实现的CheckboxList只需要一个html片段作为模板：

1. <table border="0" cellpadding="0" cellspacing="0">
2. <tr jwcid="allItems">
3. <td>
4. <input type="checkbox" jwcid="curItem"/>
5. <span jwcid="curItemLabel">Checkbox 1 span>
6. td>
7. tr>
8. table>

将一个表格作为模板，每一个checkbox和一个标签作为一行。

在 CheckboxList.java处理类中，添加两个组件的参数：

1. @Parameter(name = "allItems", required = true)
2. public abstract List getAllItems();
4. @Parameter(name = "selectedItems", required = false)
5. public abstract List getSelectedItems();

这两个参数接受用户指定的 所有checkbox项的集合和 组件显示的时候选中项的集合，前者是required，后者是可选的（不指定的话就是不选中任何的checkbox）


在 CheckList.jwc文件中，循环指定给组件参数的allItems：

1. <property name="curItem"/>
2. <property name="itemIndex"/>

1. <component id="allItems" type="For">
2. <binding name="source" value="allItems"/>
3. <binding name="value" value="curItem"/>
4. <binding name="index" value="itemIndex"/>
5. <binding name="element" value="literal:tr"/>
6. component>

将curItem和itemIndex输出给CheckboxList模板上的Checkbox组件和Insert组件，分别显示一个Checkbox和一个标签：

1. <component id="curItem" type="Checkbox">
2. <binding name="id" value="ognl:name"/>
3. <binding name="value" value="mapping[itemIndex]"/>
4. component>
6. <component id="curItemLabel" type="Insert">
7. <binding name="value" value="curItem"/>
8. component>

注意Checkbox中的value="mapping[temIndex]"，这个mapping是一个boolean的数组，和allItems中的 项一一对应，里面标识了所有的checkbox项的选中情况，某项选中则对应的mapping[i]为true，否则为false。这个mapping 需要我们根据组件使用者给定的两个参数来生成。 renderComponent方法是BaseComponent的用于渲染整个组件的方法，我们需要 override该方法并在这里生成或者说初始化mapping：

CheckboxList.java

1. private boolean[] mapping = null;
3. @Override
4. protected void renderComponent(IMarkupWriter writer, IRequestCycle cycle) {
5. mapping = new boolean[this.getAllItems().size()];
6. for(int i=0;i<this.getAllItems().size();i++){
7. if(getSelectedItems()==null)continue;
8. mapping[i] = getSelectedItems().contains(this.getAllItems().get(i));
9. }
10. super.renderComponent(writer, cycle);
11. }

然后，你就可以在你的页面中使用CheckboxList组件来显示内容了。

在你的页面中使用CheckboxList组件

1. <component id="userSelectionList" type="CheckboxList">
2. <binding name="name" value="literal:userSelectionList"/>
3. <binding name="allItems" value="ognl:allUsers"/>
4. <binding name="selectedItems" value="ognl:selectdUsers"/>
5. component>

至此，我们的CheckboxList组件已经可以页面上显示所有的Checkbox项，并正确选中用户指定的Checkbox项了。
但是还没有完， 在我们修改这些Checkbox的选中状态后，如何将改动反映给处理类，使之可以将改动保存到DB中呢？
可以看到，虽然我们将选定项集合从参数selectedItems传递到了我们自定义的CheckboxList组件中， 但是真正和Checkbox组件 绑定的是mapping，所以当你改变某个Checkbox的选中状态后相应的mapping的值会改变，而不会改变参数selectedItems的内 容。因此，我们需要自己编码来把他实现了。在前面的CheckboxList.java中的renderComponent后面方法中加入以下语句：

java 代码

1. if(cycle.isRewinding()){
2. List reselectedList = new ArrayList ();
3. for(int i=0;i<this.getAllItems().size();i++){
4. if(mapping[i] == false)continue;
5. reselectedList.add(this.getAllItems().get(i));
6. }
7. this.setSelectedItems(reselectedList);
8. }

调用cycle.isRewinding()方法告诉我们是否是用户提交表单。
完整的renderComponent方法就是：

java 代码

1. @Override
2. protected void renderComponent(IMarkupWriter writer, IRequestCycle cycle) {
3. mapping = new boolean[this.getAllItems().size()];
4. for(int i=0;i<this.getAllItems().size();i++){
5. if(getSelectedItems()==null)continue;
6. mapping[i] = getSelectedItems().contains(this.getAllItems().get(i));
7. }
8. super.renderComponent(writer, cycle);
10. if(cycle.isRewinding()){
11. List reselectedList = new ArrayList ();
12. for(int i=0;i<this.getAllItems().size();i++){
13. if(mapping[i] == false)continue;
14. reselectedList.add(this.getAllItems().get(i));
15. }
16. this.setSelectedItems(reselectedList);
17. }
18. }

这样，我们CheckboxList就可以和用户指定的选定项的集合完全的绑定起来，就是说既可以取值也可以设值了，一个具有完整功能的 自定义组件也就实现啦！