IoVC的组件属性绑定----@Bind

组件属性绑定

    我所接触到的基于JSF的Web应用中，位于UI界面上的一个界面元素或组件，想要显示数据，通常的写法是这样：
greeting.xhtml

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><h:inputText value="#{demo.helloduke.UserBean.name}"/>

demo.helloduke.UserBean.java:

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->@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

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><h:inputText id="name"/>

demo.helloduke.UserBean.java:

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->@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

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><?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:

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->@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";
    }
}