Можно ли использовать JSF для создания чистых макетов CSS без использования таблиц?

Ответ 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 он даже стал частью стандартного набора компонентов. См. Также a.o. < 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 и использовать селектора идентификаторов. Единственное, что вам нужно позаботиться в JSF + CSS, это то, что идентификаторы HTML-кода с JSF добавляются с идентификаторами всех родительских NamingContainer (например, <h:form>, <h:dataTable> и т.д.) с двоеточием : в качестве разделителя. Поскольку двоеточие является недопустимым символом в идентификаторах CSS, вам нужно выйти, используя \. Таким образом, стиль элемента ввода, например,

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

который генерирует <input type="text" id="form:input" ... />, должен выполняться как

#form\:input {
    background: gray;
}

Однако очень редко можно выбрать элементы ввода формы или элементы таблицы по идентификатору. Чаще всего используется имя класса (которое более семантично и лучше повторное использование), и это не нужно избегать. Идентификатор обычно используется основными компонентами макета только в любом случае (заголовок, меню, контент, нижний колонтитул, заголовок и т.д.), И они обычно не попадают в JSF NamingContainer.

См. также:

• Как использовать сгенерированный JSF идентификатор элемента HTML с двоеточием": " в селекторах CSS?
• По умолчанию JSF генерирует непригодные идентификаторы, которые несовместимы с частью веб-стандартов css.
• В чем заключается необходимость JSF, когда пользовательский интерфейс может быть достигнут из CSS, HTML, JavaScript, jQuery?
• Поддержка JavaServer Faces 2.2 и HTML5, почему XHTML все еще используется

Кажется, я работаю под непониманием, но каждый учебник JSF, который я видел, заканчивает создание табличных макетов HTML на основе таблиц. Я также посмотрел демоверсии RichFaces и IceFaces, и там было очень много таблиц для макета.

Начните здесь: Java EE веб-разработка, где я начинаю и какие навыки мне нужны?

Ответ 2

Возможно создание веб-сайта, созданного на основе JSF, который не использует таблицы для макета. Я не уверен, почему вы думаете, что JSF полагается на таблицы? JSF предоставляет вам основу для разработки любого типа страницы, которую вы хотите.

Вот еще одна ссылка, которая может оказаться полезной: http://www.ibm.com/developerworks/java/library/j-jsf1/index.html