能否使用JSF构建无需使用表格的干净CSS布局？

Question

我想了解如何使用JSF开�基�CSS的布局，但是许多组件似�都广泛使用html表格进行布局，这让我有些�放心。

我好�有些误解，因为我看到的�一个JSF教程最终都会生�基�表格的HTML布局。我还查看了RichFaces和IceFaces的演示，那里也有很多用�布局的表格。

是�有人知�一个JSF教程�以开�基�CSS的布局？如�没有，有人愿�制作一个�？😉

- blank

Answer 1

许多组件都过度使用HTML表格进行布局。有据可查，只有两个组件不必要地这样做：<h:selectOneRadio>和<h:selectManyCheckbox>。如果您想要一个无需表格的单选按钮和复选框组，其中您完全控制生成的标记，请改用Tomahawk变体，它具有额外的 layout 属性值为 spread。以下是 <t:selectOneRadio> 方法的示例：

<t:selectOneRadio id="foo" value="#{bean.foo}" layout="spread">
    <f:selectItems value="#{bean.foos}" />
</t:selectOneRadio>
...
<t:radio for="foo" index="0" />
...
<t:radio for="foo" index="1" />
...
<t:radio for="foo" index="2" />
...

自 JSF 2.2 版本以来，新的透传元素/属性功能使得这甚至成为“开箱即用”功能。自 JSF 2.3 版本以来，它甚至已成为标准组件集的一部分。另请参见 <h:selectOneRadio> 渲染表格元素，如何避免？ 对于其余部分，您完全可以控制通用 HTML 输出。不要使用表格进行布局。即不要使用 HTML <table> 或 JSF <h:panelGrid> 进行布局。只需使用 HTML <div> 元素显示内容块。或者，如果您是 JSF 纯粹主义者，则可以使用 <h:panelGroup layout="block"> 让 JSF 生成一个 HTML <div> 元素。

至于应用 CSS，这并不难，每个 JSF HTML 组件都有一个 styleClass 属性，您可以在其中指定 CSS 类（这将最终成为 HTML class 属性），以及 style 属性，您可以在其中指定内联 CSS（这将最终成为 HTML style 属性）。

你甚至可以定义全局CSS样式并使用ID选择器。在JSF+CSS中需要注意的一件事是，JSF生成的HTML元素ID会以所有父级NamingContainer组件的ID（例如<h:form>，<h:dataTable>等）为前缀，并用冒号:分隔。由于冒号在CSS标识符中是非法字符，你需要使用\进行转义。因此，例如样式化输入元素：

<h:form id="form">
    <h:inputText id="input" ... />

生成 <input type="text" id="form:input" ... /> 的操作应该这样完成：

#form\:input {
    background: gray;
}

然而，通过ID选择表单输入元素或表格元素非常罕见。更常见的是使用类名（更具语义化和可重用性），因此无需转义。ID通常仅由主要布局组件使用（标题、菜单、内容、页眉、页脚等），它们通常不会出现在JSF NamingContainer中。

另请参阅：

• 如何在CSS选择器中使用带有冒号“:”的JSF生成的HTML元素ID？
• 默认情况下，JSF生成的ID无法使用，与Web标准的CSS部分不兼容
• 当UI可以通过CSS、HTML、JavaScript、jQuery实现时，为什么需要JSF？
• JavaServer Faces 2.2和HTML5支持，为什么仍在使用XHTML？

---

我似乎有一个误解，但我看到的每个JSF教程最终都会生成基于表格的HTML布局。我还查看了RichFaces和IceFaces演示，那里也有很多用于布局的表格。

从这里开始：Java EE Web开发，我应该从哪里开始，需要什么技能？

- BalusC

---

我认为这个答案没有回答问题。前端开发中的问题在于许多JSF组件，从dataTable到panelGrid和其他核心组件（例如用于数据呈现的组件）强制渲染旧式HTML table。CSS已经提供了超过五年的display:table和相关样式，使表格像表格一样运作，但可以做一些重要的功能，比如创建可点击的行。 - Darrell Teague

@Darrell：你的论点是无效的。HTML <table> 不是老派的。它的目的是用于显示表格数据。以前它经常被滥用于定位，但这确实需要由CSS来完成。 - BalusC

如果按照我的想法，我会对这个答案进行负分评价，因为我认为它完全没有回答问题... CSS UIComponent 渲染器默认不支持CSS表格布局设计，因为它们明确地渲染 dataTable、panelGrid 和所有其他相关组件的 table 元素。核心库渲染器都未考虑 CSS 表格布局以及使用 display:table 样式的 div/span 等。请参阅此相关帖子。请参见W3C定义。 - Darrell Teague

Balus是备受尊敬的，他正确地指出了<table>在表格数据方面的作用，但是...使用CSS表格也可以实现相同的效果，而且没有使table和特别是表格row难以样式化和使用的副作用（例如，对于链接）。 - Darrell Teague

关于第一种方法，使用<t：selectOneRadio..如果您不知道将有多少单选按钮怎么办？如果它是动态的呢？ - Koray Tugay

Answer 2

绝对可以使用JSF构建不使用表格进行布局的网站。我不确定为什么您认为JSF依赖于表格？JSF为您提供了开发任何类型页面的框架。

这里是另一个可能有用的链接： http://www.ibm.com/developerworks/java/library/j-jsf1/index.html

- user227223

---

我会在问题中添加更多内容，但通常是因为我看到的每个教程最终都会生成HTML表格，并且查看了来自richfaces、icefaces等组件的代码，它们似乎都在布局方面使用了很多表格。 - blank