jsf html标签里面的值

Question

我有这个命令按钮，我需要使用 Bootstrap 3 添加一个图标。

<h:commandButton  id="logoutButton" action="#{loginController.logout()}" class="btn btn-primary" style="margin-top: 10px;margin-left: 10px;" value="Log Out"></h:commandButton>

出于引导 3 的原因，该图标位于 span 标签中，因此我尝试将其添加到命令按钮中的 value 属性中，如下所示：

<h:commandButton  id="logoutButton" action="#{loginController.logout()}" class="btn btn-primary" style="margin-top: 10px;margin-left: 10px;" value="<span class="glyphicon glyphicon-log-out"></span>Log Out"></h:commandButton>

我遇到了一个错误，我想我不能在 value 属性中添加 html 标签，有没有简单的方法可以做到这一点？

Answer 1

您不能将标记放在 JSF 组件的 value 属性中。您应该像在普通 HTML 中一样将标记放在标签正文中。但是，<h:commandButton> 不支持这一点（原因很简单，因为它会生成一个 <input> 元素，并且任何子元素都会以无效的 HTML 结尾）。它将在生成的<input> 元素之后呈现。

只需改用<h:commandLink>。虽然它会生成一个 <a> 元素，但 Bootstrap CSS 也只是 supports 它以及 btn 样式类。

<h:commandLink id="logoutButton" action="#{loginController.logout}" styleClass="btn btn-primary">
    <span class="glyphicon glyphicon-log-out"></span>Log Out
</h:commandLink>

（请注意，我将错误的 class 属性修复为 styleClass）

Answer 2

我假设你得到一个解析错误。这是因为 value 属性不希望包含任何 html 代码。而是用这样的按钮包装你的引导代码：

<h:commandButton id="logoutButton" action="#{loginController.logout()}" class="btn btn-primary" style="margin-top: 10px;margin-left: 10px;" value="Log Out">
    <span class="glyphicon glyphicon-log-out"></span>
</h:commandButton>

生成 html 输出（不验证，请参见下面的注释）：

<input id="j_idt5:logoutButton" type="submit" name="j_idt5:logoutButton" value="Log Out" style="margin-top: 10px;margin-left: 10px;" class="btn btn-primary">
    <span class="glyphicon glyphicon-log-out"></span>
</input>

更新

Bootstrap 显然要求您拥有<button>。使用<input type=button> 无法正确设置它的样式，因此您必须创建一个自定义组件以将<button> 添加到 JSF 树中，因为 JSF 默认不提供这样的组件。您可以利用在 primefaces 中生成的代码。他们提供了一个button 组件，但不幸的是它不适合您的需求，因为它们已经包含了自己的内容和样式。

primefaces 中感兴趣的类别：

• Button component（第 3.5 节）
• Button renderer

注意：实际上我检查了input element specification，它可能没有托管内容。要有效（并且在这种情况下正确设置样式），您需要一个 <button>。