组件属性绑定
我所接触到的基于JSF的Web应用中，位于UI界面上的一个界面元素或组件，想要显示数据，通常的写法是这样：
greeting.xhtml
<h:inputText value="#{demo.helloduke.UserBean.name}"/>
demo.helloduke.UserBean.java:
@ManagedBean(name="demo.helloduke.UserBean", scope=ManagedBeanScope.SESSION)
public class UserBean {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
这样的写法意味着，在greeting.xhtml中，需要知道UserBean的存在，并且需要知道UserBean的name属性是对应着这个inputText组件的value。这在很大程度上，限制了greeting.xhtml的作用范围，使这个UI完全没有机会被重用。很长一段时间，这都是困照着我的一个问题。
Binding是IoVC包含的一个重要特性，它不仅可以使UI独立出来，而且Binding是采用后期绑定模式实现，为组件的无状态的实现提供了底层基础支撑。关于IoVC的实现方式，在这篇随笔中并不过多讨论。
在IoVC的编程模式下，对UI上的界面元素的控制力被转移到了ManagedBean中，UI不需要关心谁在使用它，以及数据的来源。
IoVC模式的Hello Duke的UI及managedBean:
greeting.xhtml
<h:inputText id="name"/>
demo.helloduke.UserBean.java:
@ManagedBean(name="demo.helloduke.UserBean", scope=ManagedBeanScope.SESSION)
public class UserBean {
@Bind
private String name;
}
@Bind标签，提供了将ManagedBean的filed绑定到组件的attributes中的能力，默认情况下，@Bind根据所作用的filed的name来匹配UI中的元素的id，然后将field的值取出绑定到对应的UI中的组件上，上述代码表示，将UserBean中的name属性，绑定到与之对应的inputText组件的value中。
下面列出了@Bind标签的典型使用场景：
@Bind
private UIDataGrid grid;
@Bind(id="grid", attribute="width")
private int width;
@Bind(id="grid", attribute="height")
private int height;
public void initGrid() {
this.width = 500;
this.height = 400;
}
public void reload() {
this.grid.reload();
}
使用@Bind标签将组件的attributes与ManagedBean中的属性一一绑定起来之后，在UI上如果组件发生变化，其变化了的属性会反映到ManagedBean中，同样，在ManagedBean中，如果更改了属性值，UI组件也会发生相应的变化。
一个使用IoVC模式的完整页面与ManagedBean（其中涉及到的其他标签，会在后面介绍到）：
运行效果：
calc.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<f:view xmlns:f="http://java.sun.com/jsf/core"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:w="http://www.apusic.com/jsf/widget"
renderKitId="AJAX">
<w:page title="View Binding Example">
<h:form>
<h:panelGrid columns="1">
<h:inputText id="first"/>
<h:inputText id="second"/>
<h:outputText id="result"/>
</h:panelGrid>
<h:commandButton value="+" id="add"/>
<h:commandButton value="-" id="subtract"/>
<h:commandButton value="*" id="multiply"/>
<h:commandButton value="/" id="divide"/>
</h:form>
<h:messages/>
</w:page>
</f:view>
CalcBean.java:
@ManagedBean(scope=ManagedBeanScope.SESSION)
public class CalcBean
{
@Bind
private double first = 10;
@Bind
private double second = 20;
@Bind
private double result;
@Bind(id="result", attribute="style")
private String style;
@Action
public void add() {
result = first + second;
style = "color:red";
}
@Action
public void subtract() {
result = first - second;
style = "color:green";
}
@Action
public void multiply() {
result = first * second;
style = "color:blue";
}
@Action
public void divide() {
result = first / second;
style = "color:black";
}
}