为了让使用者更直觉的修改，我希望能直接点英雄的名字就切换成可修改的输入元件，修改完後就直接存回後端。

页面设计

修改英雄，首先要先调整页面元件，将原本的 <label> 换成 <textbox>：

<listbox id="heroBox" ...>
    <listhead>
        ...
    </listhead>
    <template name="model">
        <listitem>
            ...
            <listcell>
                <textbox inplace="true" value="${each.name}" width="100%" 
                forward="onChange=heroBox.onChange"/>
            </listcell>
            ...
        </listitem>
    </template>
</listbox>

• inplace="true" 可以让 textbox 在没有 focus 时显示成 <label> 的外观，一但使用者点击该文字，就会立刻转变成输入元件 <textbox>
• 这里使用 forward 的原因跟前一篇相同，都是因为无法用 @Listen注册倾听器在动态产生的元件上
• onChange 事件发出的时机点是，当使用者输入後，将焦点(focus) 移出至textbox 外时，该元件就会发出 onChange 事件。我可以注册对应的倾听器在服务器端实作对应的应用程序逻辑来处理名称修改的情况。如果使用者只是点击了名字，并没有修改名字，或是修改之後的名字跟原本相同，元件都不会发出 onChange 事件。

倾听器实作

当使用者修改名称之後，虽然可在浏览器中看见文字内容变了，但是後端 Hero 物件并没有改变，这只是使用者浏览器上的文字变了，我必须要在倾听器中把 <textbox> 储存的值，设到 Hero 物件上去才行。如果你有资料库，还必须自行呼叫 method 把资料存到资料库，才是真的更新完成。

@Listen("onChange= #heroBox")
public void change(ForwardEvent event){
    String newName = ((Textbox) event.getOrigin().getTarget()).getValue();
    Hero selectedHero = heroList.getSelection().iterator().next();
    selectedHero.setName(newName);
}

• 因为 zul 上已经转发事件，所以我听得是 #heroBox上的 onChange 事件
• 这个方法上我宣告了一个参数，如果是转发事件呼叫的 method，一律都是传入 ForwardEvent，如果不是转发事件，就要根据不同的事件宣告不同的事件参数型态
• event.getOrigin(): 从 ForwardEvent 上取得来源事件（就是转发前的 onChange）
• getTarget(): 回传事件发生的目标元件，本例来说是 <textbox>，因为原本是使用者修改 <textbox> 的值才触发的事件
• 因为先前设定 nonselectableTags，所以当使用者点英雄名字时，也会造成选择了该项目，我就可以透过 heroList 取得正被选择的项目，并取得对应的、被修改的 Hero 物件
• 最後透过 setter 把 <textbox> 中储存的新名字设到 Hero 物件中，完成更新

透过运用元件的特性，就可以立刻做出"文字—输入"原地置换的效果，而你只要处理服务器的实作就好。