Как условно отобразить простые элементы HTML, такие как <div>s? - PullRequest
Новая
       6

Как условно отобразить простые элементы HTML, такие как <div>s?

25 голосов
/ 11 января 2012

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

Я знаю, что все компоненты пользовательского интерфейса могут отображаться с помощью атрибута rendered , но как быть с теми, которые не являются компонентами пользовательского интерфейса (например, div) 

<div class = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    Name: #{cc.attrs.value.name}
    Details: #{cc.attrs.value.details}
</div>

<div class = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <h:form>
        ...
    </h:form>
</div>

Я знаю, что у div нет атрибута рендеринга, и, вероятно, я не совсем правильно понимаю подход. Я мог бы очень легко использовать тег JSTL, но я хочу избежать этого.

Ответы [ 4 ]

54 голосов
/ 11 января 2012

Правильный JSF-компонент для представления элемента HTML <div> - это <h:panelGroup> с атрибутом layout, установленным в block. Итак, это должно сделать: 

<h:panelGroup layout="block" ... rendered="#{someCondition}">
    ...
</h:panelGroup>

В качестве альтернативы, оберните его в <ui:fragment>: 

<ui:fragment rendered="#{someCondition}">
    <div>
        ...
    </div>
</ui:fragment>

Обратите внимание, что если вы хотите ajax-обновить условно отображаемый компонент, вам следует вместо этого ajax-обновить его родительский компонент.

Смотри также:

10 голосов
/ 02 апреля 2016

Это было легко с JSF 2.2.Используя сквозные элементы, любой HTML-элемент может быть преобразован в компонент JSF с атрибутом рендеринга. 

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:jsf="http://xmlns.jcp.org/jsf">
    <div class="userDetails" jsf:rendered="#{cc.attrs.value.id != sessionController.authUser.id}">
        Name: #{cc.attrs.value.name}
        Details: #{cc.attrs.value.details}
    </div>
</html>

Подробнее на https://jsflive.wordpress.com/2013/08/08/jsf22-html5/#elements

8 голосов
/ 11 января 2012

Я бы просто обернул ваш HTML <h:panelGroup>

<h:panelGroup rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    <div class = "userDetails">
        Name: #{cc.attrs.value.name}
        Details: #{cc.attrs.value.details}
    </div>
</h:panelGroup>

<h:panelGroup  rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <div class = "userDetails">
        <h:form>
           ...
        </h:form>
    </div>
</h:panelGroup>

Другой вариант - использовать компоненты из библиотек Seam (<s:div>) или Tomahawk (<t:htmlTag>), если они у вас уже есть.ваш проект.

См .: http://www.jsftoolbox.com/documentation/seam/09-TagReference/seam-div.html

<s:div styleClass = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    Name: #{cc.attrs.value.name}
    Details: #{cc.attrs.value.details}
</s:div>

<s:div styleClass = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <h:form>
        ...
    </h:form>
</s:div>

Или: http://myfaces.apache.org/tomahawk-project/tomahawk12/tagdoc/t_htmlTag.html

<t:htmlTag value="div" styleClass = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    Name: #{cc.attrs.value.name}
    Details: #{cc.attrs.value.details}
</t:htmlTag>

<t:htmlTag value="div" styleClass = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <h:form>
        ...
    </h:form>
</t:htmlTag>
0 голосов
/ 16 июня 2015

Вы можете использовать другие составные компоненты.Там нет div или других дополнительных тегов, только тот, который вам нужен.См. Этот пример: 

<table>
    <tr>...</tr>
    <my:cc rendered="false">
        <tr>...</tr>
    </my:cc>
    <my:cc rendered="true">
        <tr>...</tr>
    </my:cc>
</table>

И компонент my: cc: 

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:cc="http://xmlns.jcp.org/jsf/composite">

    <cc:interface>
    </cc:interface>

    <cc:implementation>
        <cc:insertChildren />
    </cc:implementation>
</html>

Создает следующий HTML, без дополнительных тегов, работая с ajax. 

<table><tr>...</tr><tr>...</tr></table>
...