是否可以使用JSF来构建干净的CSS布局而不使用表？ [英] Is it possible to use JSF to build clean CSS layouts without using tables?

问题描述

我想看看使用JSF，但是我推迟了许多组件的自由使用html表布局。

I want to look at using JSF but I'm put off by what appears to be the liberal use of html tables for layout by many components.

如何做你会使用JSF开发基于css的布局吗？

How do you go about using JSF to develop css-based layouts?

在这里的误会，但每个JSF教程，我看到最终产生基于表的html布局。我也看过RichFaces和IceFaces演示，还有一个非常多的表格为布局。

I seem to be labouring under a misaprehension here, but every JSF tutorial I've seen ends up producing table-based html layouts. I've also looked at RichFaces and IceFaces demos and there's an awful lot of tables-for-layout there as well.

有人知道一个JSF教程，开发CSS基于布局？如果没有，是否有人喜欢做一个？ ;）

Does anyone know of a JSF tutorial that develops a CSS based layout? If not, does anybody fancy making one? ;)

推荐答案

许多组件自由使用html表格布局

the liberal use of html tables for layout by many components

据我所知，只有两个不必要的： < h：selectOneRadio> 和 < h：selectManyCheckbox> 。如果你想要一个无桌面组的单选按钮和复选框，其中你有完全控制生成的标记，只需使用 Tomahawk 变体，其具有分布的额外布局属性值。以下是 < t：selectOneRadio> ; 方法：

Many components? There are as far as I know only two which do that "unnecessarily": the <h:selectOneRadio> and <h:selectManyCheckbox>. If you want a table-less group of radiobuttons and checkboxes wherein you have the full control over the generated markup, just use the Tomahawk variant instead, which has an extra layout attribute value of spread. Here's an example of the <t:selectOneRadio> approach:

<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元素/属性功能。参见a.o. < h：selectOneRadio>呈现表格元素，如何避免这种情况？

Since JSF 2.2 it's even possible to do it "out the box" with new passthrough elements/attributes feature. See also a.o. <h:selectOneRadio> renders table element, how to avoid this?

对于剩余部分，你只需要掌握一般的HTML输出。只是不要使用表格的布局。也就是说不要使用HTML < table> 或JSF < h：panelGrid> 只需使用HTML < div> 元素来显示内容块。或者如果你是一个JSF纯粹，你可以使用< h：panelGroup layout =block> 让JSF生成一个HTML < div> 元素。

For the remainder, you just have the control of the general HTML output fully in your own hands. Just do not use tables for layout at all. I.e. do not use HTML <table> or JSF <h:panelGrid> for layout. Just use HTML <div> elements to display content blocks. Or if you're a JSF-purist, you can use <h:panelGroup layout="block"> to let JSF generate a HTML <div> element.

对于应用CSS，并不难，每个JSF HTML组件都有 styleClass 属性，其中可以指定CSS类（最终将以HTML 类属性结束）和 style 属性，其中您可以指定内联CSS（最终将以HTML 样式属性结束）。

As to applying CSS, it isn't that hard, every JSF HTML component has a styleClass attribute wherein you can specify CSS classes (which would end up in a HTML class attribute) and style attribute wherein you can specify inline CSS (which would end up in a HTML style attribute).

您甚至可以定义全局CSS样式并使用ID选择器。只有在JSF + CSS中需要注意的事情是，JSF生成的HTML元素ID前面带有所有父 NamingContainer 组件（例如< h：form& ：：，< h：dataTable>由于冒号在CSS标识符中是非法字符，因此您需要使用 \ 转义。因此，样式的输入元素例如

You can even define global CSS styles and use the ID selectors. Only thing which you need to take care in JSF+CSS is that the JSF-generated HTML element IDs are prepended with the IDs of all parent NamingContainer components (e.g. <h:form>, <h:dataTable>, etc) with a colon : as separator. As the colon is an illegal character in CSS identifiers, you need to escape it using \. So styling the input element of for example

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

它产生< input type =textid =输入... /> 应该像

#form\:input {
    background: gray;
}

然而，很少通过ID选择表单输入元素或表格元素。更常见的是使用类名（这是更语义和更好的可重用），这不需要被转义。 ID通常由主布局组件（头，菜单，内容，脚注，标题等）使用，它们通常不会在JSF NamingContainer 中结束。

It's however very rare to select form input elements or table elements by ID. More commonly the classname is to be used (which is more semantic and better reuseable) and this doesn't need to be escaped. The ID are usually used by main layout components only anyway (header, menu, content, footer, title, etc) and they usually don't end up in a JSF NamingContainer.

• 如何使用JSF生成的HTML元素ID和冒号：在CSS选择器中？


• 默认情况下，JSF生成不可用的id，它与web标准的css部分不兼容

• How to use JSF generated HTML element ID with colon ":" in CSS selectors?
• By default, JSF generates unusable ids, which are incompatible with css part of web standards

这篇关于是否可以使用JSF来构建干净的CSS布局而不使用表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！