我正在使用JSF 2.0 + Primefaces 3 + Twitter Bootstrap。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<f:metadata charset="utf-8"></f:metadata>
<f:metadata name="viewport"
content="width=device-width, initial-scale=1.0"></f:metadata>
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Starting Page</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"></link>
<link href="css/bootstrap-responsive.css" rel="stylesheet"
type="text/css"></link>
<link href="css/override.css" rel="stylesheet" type="text/css"></link>
</h:head>
<h:body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner navbar-large">
<div class="container">
<a class="brand" href="#">CompanyName</a>
<ul class="nav">
<li><a href="#buy">Link</a></li>
<li><a href="#about">Link</a></li>
</ul>
<h:form class="navbar-form pull-left">
<div class="input-append offset1">
<h:inputText value="" class="span5"
placeholder="put search terms here" type="text" />
<button class="btn" type="submit">
<i class="icon-search"></i>
</button>
</div>
</h:form>
<ul class="nav pull-right">
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#"> How to <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="nav-header">Link</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="divider"></li>
<li class="nav-header">Link</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul></li>
<li><a href="#login">Login</a></li>
<li><a href="#register">Signup</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="well">
<h:form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>
<h3>Create Product</h3>
</legend>
<!-- Product Name-->
<div class="control-group">
<label class="control-label">Product Name</label>
<div class="controls">
<h:inputText id="textinput" name="Product Name"
class="input-xlarge" type="text" />
</div>
</div>
<!-- Categorie-->
<div class="control-group">
<label class="control-label">Categorie</label>
<div class="controls">
<h:inputText id="textinput" name="Product Name"
class="input-xlarge" placeholder="Insert Categorie" type="text" />
</div>
</div>
<!-- Textarea -->
<div class="control-group">
<label class="control-label">Description</label>
<div class="controls">
<div id="textarea" name="textarea" class="textarea">
<textarea rows="3"></textarea>
</div>
</div>
</div>
<!--Price -->
<div class="control-group">
<label class="control-label">Price</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">$$$</span>
<h:inputText id="prependedtext" name="prependedtext"
class="span2" type="number" />
</div>
</div>
</div>
<!--Divider -->
<hr></hr>
<!--Picture Uploader -->
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail"
style="width: 200px; height: 150px;">
<img
src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image"></img>
</div>
<div class="fileupload-preview fileupload-exists thumbnail"
style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select
image</span> <span class="fileupload-exists">Change</span> <h:inputText
type="file" /> </span> <a href="#" class="btn fileupload-exists"
data-dismiss="fileupload">Remove</a>
</div>
</div>
<!--Divider -->
<hr></hr>
<div class="form-actions">
<button class="btn btn-inverse btn-large">Cancel</button>
<button class="btn btn-primary btn-large" type="submit">
Next <i class="icon-ok icon-white"></i>
</button>
</div>
</fieldset>
</h:form>
</div>
</div>
<hr></hr>
</h:body>
<!--Le JavaScript -->
<!--Input Validation -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- or use local jquery -->
<script src="/js/jqBootstrapValidation.js"></script>
<script>
$(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
</html>
但是，当我执行此* .xhtml页面时，我收到错误：
严重：JSF1007：重复的组件ID j_idt12：在视图中找到textinput。
那就是输出：
10.04.2013 17:47:14 com.sun.faces.util.Util checkIdUniqueness
SCHWERWIEGEND: +id: j_id1
type: javax.faces.component.UIViewRoot@b53b098
+id: j_idt1
type: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+id: j_idt2
type: <html xmlns="http://www.w3.org/1999/xhtml">
+id: j_idt3
type: javax.faces.component.UIOutput@40591a4d
+id: j_idt4
type:
<title>Starting Page</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
<link href="css/override.css" rel="stylesheet" type="text/css"/>
+id: j_idt5
type: javax.faces.component.UIOutput@19cdd63c
+id: j_idt6
type:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner navbar-large">
<div class="container">
<a class="brand" href="#">CompanyName</a>
<ul class="nav">
<li><a href="#buy">Link</a></li>
<li><a href="#about">Link</a></li>
</ul>
+id: j_idt7
type: javax.faces.component.html.HtmlForm@18ac0a60
+id: j_idt8
type:
<div class="input-append offset1">
+id: j_idt9
type: javax.faces.component.html.HtmlInputText@46dd3147
+id: j_idt10
type:
<button class="btn" type="submit">
<i class="icon-search"/>
</button>
</div>
+id: j_idt11
type:
<ul class="nav pull-right">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> How to <b class="caret"/>
</a>
<ul class="dropdown-menu">
<li class="nav-header">Link</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="divider"/>
<li class="nav-header">Link</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul></li>
<li><a href="#login">Login</a></li>
<li><a href="#register">Signup</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="well">
+id: j_idt12
type: javax.faces.component.html.HtmlForm@63ce50a9
+id: j_idt13
type:
<fieldset>
<legend>
<h3>Create Product</h3>
</legend>
<div class="control-group">
<label class="control-label">Product Name</label>
<div class="controls">
+id: textinput
type: javax.faces.component.html.HtmlInputText@7e11ba6f
+id: j_idt14
type:
</div>
</div>
<div class="control-group">
<label class="control-label">Categorie</label>
<div class="controls">
+id: textinput
type: javax.faces.component.html.HtmlInputText@3de70e12
+id: j_idt15
type:
</div>
</div>
<div class="control-group">
<label class="control-label">Description</label>
<div class="controls">
<div id="textarea" name="textarea" class="textarea">
<textarea rows="3"/>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Price</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">$$$</span>
+id: prependedtext
type: javax.faces.component.html.HtmlInputText@c4cdf7e
+id: j_idt16
type:
</div>
</div>
</div>
<hr/>
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image"/>
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"/>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select
image</span> <span class="fileupload-exists">Change</span>
+id: j_idt17
type: javax.faces.component.html.HtmlInputText@1faf67f0
+id: j_idt18
type: </span> <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>
<hr/>
<div class="form-actions">
<button class="btn btn-inverse btn-large">Cancel</button>
<button class="btn btn-primary btn-large" type="submit">
Next <i class="icon-ok icon-white"/>
</button>
</div>
</fieldset>
+id: j_idt19
type:
</div>
</div>
<hr/>
+id: j_idt20
type:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>
<script src="/js/jqBootstrapValidation.js"/>
<script>
$(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
</script>
<script src="http://code.jquery.com/jquery-latest.js"/>
<script src="js/bootstrap.js"/>
</html>
如何修复此异常？我非常感谢你的回答。