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

Я хочу взглянуть на использование JSF, но меня отталкивает то, что, как представляется, либеральное использование таблиц html для компоновки многими компонентами.

Как вы собираетесь использовать JSF для разработки макетов на основе CSS?

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

Кто-нибудь знает учебник JSF, который разрабатывает макет на основе CSS? Если нет, кто-нибудь хочет сделать это?;)

Источник

2 ответа

Решение

либеральное использование 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 он даже стал частью стандартного набора компонентов. Смотрите также ao отображает элемент таблицы, как этого избежать?

В остальном, вы просто полностью управляете выводом 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-элементов предваряются идентификаторами всех родительских элементов. 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-макетов на основе таблиц. Я также посмотрел демонстрации RichFaces и IceFaces, и там очень много таблиц для разметки.

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

Источник

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

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

Источник
Другие вопросы по тегам