Attribute 'for' of label component with id xxxx is not defined

I got the warning in the log file when I have used the tag <h:outputLabel> without attribute "for" in xhtml file. It was really polluting my server log files.

The logged information actually makes sense anyway! We could find an answer as the following:

"Having h:outputLabel without a "for" attribute is meaningless. If you are not attaching the label, you should be using h:outputText instead of h:outputLabel."

However, these solutions are not possible just for my situation. Instead of using h:outputText for only displaying text, my team has used h:outputLabel too many places. We were nearly in our release time (next day) so it is quite risky and takes much efforts if we try to correct it. Because the style (with CSS) is already done with h:ouputLabel. The alternative by adding attribute "for" the existing h:outputLabel is not reasonable either. I really need to find another solution.

**Fortunately, I came across a way if I change to use p:outputLabel, the warning won't be logged! What?**

I was just curious to know why; so then I decided to delve into the implementation of outputLabel of both Primefaces and Myfaces source code (at grepcode.com). I found the reason is:

In Myfaces (1.2.2), we can easily to find the line of code below in method "encodeBegin" in class "HtmlLabelRenderer". It is executed whether the attribute "for" is null.

log.warn("Attribute 'for' of label component with id " 
+ uiComponent.getClientId(facesContext)+" is not defined");

However, Primefaces (5.2) does not. In class "OutputLabelRenderer", it uses the default implementation of method "encodeBegin" from superclass without logging. Ahh! The method "encodeBegin" is just a hook!

Okay! The reason is clear. I saw that the only difference of HTML rendering between h:outputLabel and p:outputLabel is as below:

1. <h:ouputLabel> will be rendered to become <label>
2. <p:outputLabel> will be rendered to become <label class="ui-outputlabel">

It should be an acceptable approach to fix the issue in my case. I just do a little bit more with style and I can achieve my goal without spending much efforts for testing whole the application again. Yeah!

Something like this:

1. XHTML

<h:panelGroup layout="block" styleClass="child-add-ons-container">

    <ul>

        <li>

            <h:panelGroup layout="block" styleClass="type-of-check">

                <p:outputLabel value="bonity"></p:outputLabel>

            </h:panelGroup>

        <li>

        ....

    <ul>

</h:panelGroup>

2. CSS: just make sure the style of p:outputLabel is the same with current style of h:outputLabel, for example:

.add-ons-compliance-check .type-of-check label.ui-outputlabel {

    font-style: normal; /*style of tag label in our app*/

    color: inherit;  /*style of tag label in our app*/

    font: inherit;  /*style of tag label in our app*/

}

References
[1]. http://stackoverflow.com/questions/12744264/attribute-for-of-label-error
[2]. http://docs.oracle.com/javaee/5/javaserverfaces/1.2/docs/tlddocs/h/outputLabel.html
[3]. http://grokbase.com/t/myfaces/users/143vdzqp11/how-to-disable-label-warnings
[4]. http://grepcode.com/file/repo1.maven.org/maven2/org.primefaces/primefaces/5.2/org/primefaces/component/outputlabel/OutputLabelRenderer.java?av=f
[5]. http://grepcode.com/file/repository.springsource.com/org.apache.myfaces/com.springsource.org.apache.myfaces/1.2.2/org/apache/myfaces/renderkit/html/HtmlLabelRenderer.java?av=f

Comments

Selenium - Override javascript functions to ignore downloading process

I have got an issue with downloading process on IE 8. This browser blocks my automatic-download functionality on my app so that I could not work with my test case any more after that. In my case, I didn't care about the file is downloaded or not, I just focus on the result after downloading process finished successfully. Therefore, I found a solution to ignore this process so that I can work normally. I use Primefaces, here is the remote command to trigger the download process <p:remoteCommand name="cmdGenerateDocument" actionListener="#{logic.onGenerateDocument}" update="xrflDocumentCreationPanel" oncomplete="clickDownloadButton();"/> The following is my test case: @Test public void shouldUpdateStep6ToWarningIfStep1IsValidAfterFinished(){ MainPage mainPage = new MainPage(); waitForLoading(mainPage.getDriver()); EmployeeDetailPage empDetailPage = new EmployeeDetailPage(); waitForLoading(empDetailPage.getDriver()); e...

A Template for Software Engineering Standards

Software engineering standard template A well-structured standard acts as a blueprint that guides engineers in their daily tasks and long-term goals. Below, I will outline a template for creating a comprehensive software engineering standard. Header The header serves as the document's identifier. It contains the following: Authors : The people who have contributed to the creation of the standard. Created Date : The date when the document was initially created. Version : The version of the standard. It is typically updated with significant changes. Status : The current status of the document, whether it's in draft, in-review, or official. Next Review Date : The date when the standard will be reviewed for relevancy and accuracy. Table of Contents A table of contents provides an overview of what the document contains, making it easier for readers to navigate through the document. Body The body of the standard comprises: Values : The core beliefs that guide the decision-maki...

What the heck is Meteor DDP?

I was using Meteor for my messenger project. I was so curious about the real time connection. I wanted to know how exactly this mechanism works. In this post, I will go through the DDP Specification, an overview of WebSocket, and a simple demo about how to subscribe a publication of Rocket.Chat (containing a DDP server) from an external webpage. At a glance, I knew that Meteor invented a protocol called DDP which uses for handling real time connection. So then, what is DDP? "DDP (Distributed Data Protocol) is the stateful WebSocket protocol that Meteor uses to communicate between the client and the server." [1] All right! Why does DDP matter? "DDP is a standard way to solve the biggest problem facing client-side JavaScript developers: querying a server-side database, sending the results down to the client, and then pushing changes to the client whenever anything changes in the database" . [2] In order to understand deeply the protocol, I decided ...

Only allow input number value with autoNumeric.js

autoNumeric is a jQuery plugin that automatically formats currency and numbers as you type on form inputs. I used autoNumeric 1.9.21 for demo code. 1. Dowload autoNumeric.js file from https://github.com/BobKnothe/autoNumeric 2. Import to project <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="js/autoNumeric.js"></script> 3. Define a function to use it <script type="text/javascript"> /* only number is accepted */ function txtNumberOnly_Mask() { var inputOrgNumber = $("#numberTxt"); inputOrgNumber.each(function() { $(this).autoNumeric({ aSep : '', aDec: '.', vMin : '0.00' }); }); } </script> 4. Call the function by event <form> <input type="text" value="" id="numberTxt"/>(only number) </form> <script ty...

Installing NGINX on macOS

I have heard of a lot of NGINX recently. One of them was it can help for security issues; for sure, it much be more. It so happens that our team has got a ton of user stories from a security audit. It's time to delve into it. What is NGINX? In order to get a basic idea and have some fun , I've just picked some available posts from my favorite Vietnamese blogger communities as below: https://kipalog.com/posts/Cau-hinh-nginx-co-ban---Phan-1 https://viblo.asia/hoang.thi.tuan.dung/posts/ZabG912QGzY6 NGINX (pronounce: Engine-X) is a web server (comparing to IIS, Apache). It can be used as a reverse proxy ( this is what I need for security issues with configuration ), load balancer and more. How to get started? I found the below path for learning NGINX by googling "learn nginx": https://www.quora.com/What-are-some-good-online-resources-to-learn-Nginx In this post, I only went first step. This is installing NGINX on macOS and taking a first look at the confi...

vhandit

Search This Blog