title: Read/Write attributes in Composite component
body: <p>I am writing a JSF datepicker composite component that is backed by jquery-ui's datepicker.(I don't have the option of using component libraries)</p>
  
  <p>I have gotten the functionality to work, but I am now trying to simplify the component's interface by removing unnecessary attributes.</p>
  
  <p>One of the attributes exposed by my component is called "value". I expect the user of the component to provide an el reference here eg. 
      <code>#{myCarBean.selectedCar}</code></p>
  
  <p>What I have noticed is that the component only ever seems to read the attribute's value. The setter never seems to get invoked.</p>
  
  <p>I managed to get around this by exposing this method as a clientBehaviour . 
  But now I have an actionListener that is invoked through this clientBehaviour(to set the value) as well as the "value" attribute which reads the value from <code>#{cc.attrs.values}</code>.</p>
  
  <p>How can I have a single attribute that can both read/write the "value" attribute to the underlying managedBean provided by the using page?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;ui:component xmlns="http://www.w3.org/1999/xhtml" xmlns:util="http://discovery.co.za/mytags" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
  xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:cc="http://java.sun.com/jsf/composite"&gt;
  &lt;cc:interface componentType="modal"&gt;
      &lt;cc:attribute name="value" type="java.util.Date" shortDescription="An El expression representing the managed bean field to which the selected date will be wired."&gt;&lt;/cc:attribute&gt;
      &lt;cc:attribute name="minYear" type="java.lang.Integer" shortDescription="An El expression representing a managed bean field which should return an Integer indicating the year component of the minDate"&gt;&lt;/cc:attribute&gt;
      &lt;cc:attribute name="minMonth" type="java.lang.Integer" shortDescription="An El expression representing a managed bean field which should return an Integer indicating the month component of the minDate.(January is 0)"&gt;&lt;/cc:attribute&gt;
      &lt;cc:attribute name="minDay" type="java.lang.Integer" shortDescription="An El expression representing a managed bean field which should return an Integer indicating the day component of the minDate."&gt;&lt;/cc:attribute&gt;
      &lt;cc:attribute name="maxYear" type="java.lang.Integer" shortDescription="An El expression representing a managed bean field which should return an Integer indicating the year component of the maxDate"&gt;&lt;/cc:attribute&gt;
      &lt;cc:attribute name="maxMonth" type="java.lang.Integer" shortDescription="An El expression representing a managed bean field which should return an Integer indicating the month component of the maxDate"&gt;&lt;/cc:attribute&gt;
      &lt;cc:attribute name="maxDay" type="java.lang.Integer" shortDescription="An El expression representing a managed bean field which should return an Integer indicating the day component of the maxDate"&gt;&lt;/cc:attribute&gt;
      &lt;cc:attribute name="render" type="java.lang.String" /&gt;
  
      &lt;cc:clientBehavior name="change" targets="#{cc.clientId}:dateInput" event="change" /&gt;
  &lt;/cc:interface&gt;
  &lt;cc:implementation&gt;
      &lt;div id="#{cc.clientId}"&gt;
          &lt;h:inputText id="dateInput" value="#{cc.attrs.value}" styleClass="jquery-datepicker"
              onclick="modifyDatePickerOptions('#{cc.attrs.clientId}', #{cc.attrs.minYear}, #{cc.attrs.minMonth}, #{cc.attrs.minDay}, #{cc.attrs.maxYear}, #{cc.attrs.maxMonth}, #{cc.attrs.maxDay} );"&gt;
              &lt;f:ajax execute="@form"  event="change"  render="#{cc.attrs.render}" /&gt;
          &lt;/h:inputText&gt;
  
      &lt;/div&gt;
  &lt;/cc:implementation&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the using page :</p>
  
  <pre><code>&lt;h:form id="datePickerForm"&gt;
              &lt;my:datepicker  render=":datePickerForm:datePickerAjax" value="#{datePickerBean.selectedDate}" minYear="1999" minMonth="0" minDay="1" maxYear="2019" maxMonth="0" maxDay="1"&gt;
                  &lt;f:ajax  event="change" listener="#{datePickerBean.selectedDate}" /&gt;
              &lt;/my:datepicker&gt;
              &lt;h:panelGroup id="datePickerAjax" layout="block"&gt;
              &lt;br /&gt;
                  &lt;b&gt;&lt;h:outputText value="You selected : #{datePickerBean.selectedDate}" rendered="#{datePickerBean.selectedDate != null}" /&gt;&lt;/b&gt;
              &lt;/h:panelGroup&gt;
          &lt;/h:form&gt;
  </code></pre>