Ответ 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 веб-разработка, где я начинаю и какие навыки мне нужны?