Статьи

Понимание атрибута ADC Faces clientComponent

Я считаю, что большинство разработчиков ADF знают атрибут ADF Faces clientComponent . В этом посте я собираюсь показать, как этот атрибут влияет на рендеринг компонентов и как он может изменить их поведение. Давайте начнем с рассмотрения очень простого примера:

1
2
<af:inputText label="Label 1" id="it1" />
<af:outputText value="outputText1" id="ot1"/>

Страница результатов выглядит следующим образом:

И давайте посмотрим на сгенерированный HTML:

Мы можем видеть, что наш outputText был превращен в простую текстовую строку. Там нет никакого компонента, представляющего его. Выражение Java Script AdfPage.PAGE.findComponent («ot1») вернет «неопределенное» . Даже выражение document.getElementById («ot1») будет возвращать ноль . Таким образом, у нас нет ни расширенного объекта ADS Faces JS, ни собственного элемента DOM, соответствующего нашему outputText . Вообще ничего

Давайте сделаем наш пример немного сложнее:

1
2
3
4
5
<af:inputText label="Label 1" id="it1" autoSubmit="true"
              value="#{MainTest.someValue}"
              valueChangeListener="#{MainTest.inputTextListener}"/>
<af:outputText value="#{MainTest.someValue}" id="ot1"
               binding="#{MainTest.outputText}"/>

InputText хранит свое значение в управляемом компоненте, и это значение должно быть отображено в outputText . Значение valueChangeListener для inputText добавляет outputText в контекст граней как частичную цель:

1
2
3
4
 public void inputTextListener(ValueChangeEvent valueChangeEvent) {
  AdfFacesContext ctx = AdfFacesContext.getCurrentInstance();
  ctx.addPartialTarget(outputText);
}

Кажется, все в порядке, но это не работает. Кроме того, мы найдем следующее сообщение в журнале:

1
<PprResponseWriter$PPRTag> <finish> no PPR-capable ID found for elements of: RichOutputText[UIXFacesBeanImpl, id=ot1]

Это из-за отсутствия соответствующего компонента на стороне клиента. Выходной текст представлен простым текстом.

Хорошо, давайте установим для clientComponent outputText значение true:

1
2
3
<af:outputText value="#{MainTest.someValue}" id="ot1"
               binding="#{MainTest.outputText}"
               clientComponent="true"/>

И наш пример работает !

Посмотрите на HTML:

Существует обработанный тег HTML, представляющий наш outputText. Выражение Java Script document.getElementById («ot1») возвращает HTMLSpanElement. А выражение AdfPage.PAGE.findComponent («ot1») возвращает AdfRichOutputText , представляющий собой объект JS ADF Faces, созданный с помощью следующего кода JS:

Хорошо, давайте сделаем outputText зависимым от inputText с точки зрения частичного рендеринга:

1
2
3
<af:inputText label="Label 1" id="it1" autoSubmit="true"
              value="#{MainTest.someValue}"/>
<af:outputText value="#{MainTest.someValue}" id="ot1" partialTriggers="it1"/>

Этот пример проще, чем предыдущий, и он работает. Выражение JS document.getElementById («ot1») возвращает HTMLSpanElement, однако выражение AdfPage.PAGE.findComponent («ot1») возвращает «undefined» . Не существует созданного объекта клиента ADF Faces для outputText, но элемент DOM ( span ) визуализирован.

Фактически, атрибут clientComponent обычно используется для получения объекта JS ADF Faces, созданного на стороне клиента. Но, кроме того, атрибут clientComponent вызывает рендеринг элемента DOM для компонента, и иногда нам может понадобиться использовать атрибут clientComponent только по этой причине. Мы сделали это в первом примере и получили его работать.


Это оно!

Ссылка: Понимание атрибута ADC Faces clientComponent от нашего партнера по JCG Евгения Федоренко из блога ADF Practice .