1 Reply Latest reply on Sep 12, 2008 11:07 AM by jmoreira

    Implement Woodstock JSF Bubble with error messages

    jmoreira

      Hello,


      i'm implementing form error message css (speech) bubbles with Woodstock JSF components, using standard s:decorate approach to decorate each form field.
      I managed to display the bubble with the validation error message using:


      form.xhtml


      <s:decorate id="adecextdat" template="../layout/edit2.xhtml">
           <ui:define name="label">Data</ui:define>
           <s:div>
                <rich:calendar id="dataAlg" style=" width : 143px;" datePattern="yyyy-MM-dd" value="" required="true" />
           </s:div>
      </s:decorate>
      



      edit2.xhtml


      <div class="prop">
                     
           <s:label styleClass="name #{invalid?'errors':''}">
                <ui:insert name="label"/>
                <s:span styleClass="required" rendered="#{required}">**</s:span>
           </s:label>
      
           <span class="value #{invalid?'errors':''}">
                <s:validateAll>
                     <ui:insert/>
                </s:validateAll>
           </span>
      
           <webuijsf:bubble closeButton="false" styleClass="bubble" visible="#{invalid}" autoClose="false">
                <h:outputText><s:message styleClass="error2 errors2" /></h:outputText>
           </webuijsf:bubble>
      
      </div>
      



      This code displays the error message (for each decorated field) without any Javascript activation,
      but the optimum case is to redisplay the bubble when the user hoovers
      or enters the control (even because without doing this the bubble does not display the arrow poiting to the control AFAIK)
      and for that i need to have access to the control ID from inside the template so i can do for example:


      document.getElementById('path:to:control:id:bubble').open(event);
      



      or to bind an event to the control using jQuery


      $("#ID").bind("mouseenter mouseleave", function(e){
              $(this).open(event); // example
          });
      



      One solution could be passing a template variable to the template with the control id.
      Also i would like to know if it is possible to access the s:message for the control from EL, like s:message does and also the 'label' content, for displaying in the bubble 'window' title :


      <ui:insert name="label"/>