In Relation To

Back to home

JSF 2.0. Test Drive PDL. Part 4. PassThru attributes

Posted by    |      

Every JSF component has some specific attribute set unique for it. At the same time, almost all UI components have attributes that are common for all of them. For example, onclick, ondblclick, onblur, onmouseover, onmouseout, onmousedown and so on. They are named PassThru because they are rendered one-to-one to the final html layout.

RichFaces CDK uses a special meta-attribute x:passThruWithExclusions. Like: 

<div x:passThruWithExclusions="id,value,styleClass,class" ....>

This attribute directs to insert all PassThru attributes as attributes to this particular div except ones that are explicitly mentioned. Just one attribute, short and not so hard. Let see how JSF 2.0 PDL might help.

In the first article about PDL, we define only four style kind attributes for the sake of simplicity. 

<composite:interface>
    <composite:attribute name="style" required="false"/>
    <composite:attribute name="styleClass" required="false"/>
    <composite:attribute name="headerClass" required="false"/>
    <composite:attribute name="bodyClass" required="false"/>
</composite:interface>

Now, we are going to complete the missing part. According to the rich panel TLD documentation, it has 10 PathThru onxxxxxx attributes. To test how they work let's add the following to the test page: 

  <rich4:panel onmouseover="this.style.backgroundColor='#F9F9FF'"
      onmouseout="this.style.backgroundColor='#FFF'">
   <f:facet name="header">
    <h:outputText value="This is a header"/>
   </f:facet>
   <h:outputText value="panel with header"/>
  </rich4:panel>

BTW, the composite:interface above contains explicit declaration for four style attributes. What happen if we remove them like that: 

<composite:interface>
</composite:interface>

Actually, nothing is changed. The component and its styling work without any changes. This is because of the Facelets feature when Facelets implicitly pass any attributes defined by the end developer, instead of classic JSP where missing an attribute name in the TLD file is a big deal. Let's consider this Facelets feature as an advantage, at least for the size of the component code.

One drop of poison infects the whole tun of wine - if you have a typo in the attribute name, figuring it out is your personal problem. No any warning. However, declaring the attribute explicitly in the composite:interface, even the required="true" does not help. Still the same silence.

Does the composite:interface make sense at all. Yes!!! Do not forget about the most fabulous keyword of the JSF market - the Tools. The JSF tool, if it is smart enough, prompts you with the list of possible attribute sorting them by priority, helps with signature of the method and so one. According to the pdldoc for composite:attribute, it has a lot of useful (for the tools) attributes.

Let's return to the topic. Does the ability to implicitly declare attributes work for our onmouseover, onmouseout? ...Partly. We do not need to declare them implicitly in the composite:interface section (ok, ok. we still need to be kind to the future tools). However, PDL has no idea where to insert them in the composite:interface section. Thus, the test example does not work yet.

Mojarra implementation of PDL has nothing to shortcut the size of required code. Copy/Paste is a way to go. We will add the following as attributes of the top div: 

onclick="r#{compositeComponent.attrs.onclick}"
ondblclick="r#{compositeComponent.attrs.ondblclick}"
onkeydown="r#{compositeComponent.attrs.onkeydown}"
onkeypress="r#{compositeComponent.attrs.onkeypress}"
onkeyup="r#{compositeComponent.attrs.onkeyup}"
onmousedown="r#{compositeComponent.attrs.onmousedown}"
onmousemove="r#{compositeComponent.attrs.onmousemove}"
onmouseout="r#{compositeComponent.attrs.onmouseout}"
onmouseover="r#{compositeComponent.attrs.onmouseover}"
onmouseup="r#{compositeComponent.attrs.onmouseup}"

Now, we can see how it works: http://livedemo.exadel.com/richfaces4-panel-4/home.jsf

Looks like we are all set. However, let's look what is actually rendered: 

 <div class="rich-panel " style="" onclick="" ondblclick="" onkeydown="" 
        onkeypress="" onkeyup="" onmousedown="" onmousemove="" 
        onmouseout="this.style.backgroundColor='#FFF'" 
        onmouseover="this.style.backgroundColor='#F9F9FF'" onmouseup="">
   <div class="rich-panel-header ">This is a header
   </div>
 
  <div class="rich-panel-body ">panel with header
  </div> 

 </div>

We have a bunch of empty attributes out. Even the browser can have a deal with that, it is not acceptable result the end application developers will be happy with. The attribute should not appear in the result code if it is empty. So far, I did not find a solution how to avoid it in Mojarra 2.0.0 PR. The issue is posted.

Back to top