When I'm iterating through building a new page, I often get "duplicate Id for a component" while constructing pieces of the page. When I get this, I have to guess where I'm having an "id" problem. I've never actually specifically set two fields with the same "id" value, this error only really happens when the framework generates two fields that result in the same "id" value. The problem is, how the heck do you figure out what you did wrong that produces that error? I usually have to hunt around on the whole page to figure this out.
For instance, here is a page that I'm working on:
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>TabPanel Experiment</title>
</head>
<body>
<f:view>
<a4j:form>
<rich:tabPanel id="tabpanel" switchType="client">
<rich:tab name="obligor" label="Obligor">
<h:panelGrid columns="2" id="obligorFields">
<h:column>Field1:</h:column>
<h:column><h:inputText id="field1"/></h:column>
</h:panelGrid>
</rich:tab>
<rich:tab name="property" label="Property">
<h:panelGrid columns="2" id="propertyFields">
<h:column>Field2:</h:column>
<h:column><h:inputText id="field2"/></h:column>
</h:panelGrid>
</rich:tab>
<rich:tab name="ratings" label="Ratings">
<h:panelGrid columns="2" id="ratingsFields">
<h:column>Field3:</h:column>
<h:column><h:inputText id="field3"/></h:column>
</h:panelGrid>
</rich:tab>
</rich:tabPanel>
</a4j:form>
</f:view>
</body>
</html>
This produces "duplicate Id for a component _id0:_id1". In general, how do I figure out how to fix these errors?