是否可以使用JSF构建干净的CSS布局而不使用表？

Question

我想看一下使用JSF,但是我被许多组件的自由使用html表格布局所拖延.

你如何使用JSF开发基于CSS的布局？

---

我似乎在这里陷入了一种误解,但我见过的每一篇JSF教程最终都会产生基于表格的HTML布局.我还看了RichFaces和IceFaces的演示,并且那里还有很多表格用于布局.

有没有人知道开发基于CSS的布局的JSF教程？如果没有,是否有人想要制作一个？;)

Answer 1

自由地使用html表进行布局的许多组件

很多组件？据我所知,只有两个 "不必要地"这样做:<h:selectOneRadio>和<h:selectManyCheckbox>.如果你想要一个无表格的radiobuttons组和复选框,你可以完全控制生成的标记,只需使用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开始,甚至可以通过新的passthrough元素/属性功能"开箱即用".从JSF 2.3开始,它甚至成为标准组件集的一部分.另请参阅ao <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与所有父母的ID前缀NamingContainer组件(例如<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部分不兼容
• 当用户可以通过CSS,HTML,JavaScript,jQuery实现UI时,JSF的需求是什么？
• JavaServer Faces 2.2和HTML5支持,为什么还在使用XHTML

我似乎在这里陷入了一种误解,但我见过的每一篇JSF教程最终都会产生基于表格的HTML布局.我还看了RichFaces和IceFaces的演示,并且那里还有很多表格用于布局.

从这里开始:Java EE Web开发,我从哪里开始,我需要什么技能？