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 " ;
    }
}