null

Вызов javascript функции при обновлении компонента в JSF

17 сентября 2016 0 Alexander Yarkeev

Порой разработчик приложений на JSF сталкивается с тем, что функциональность предоставляемая создателями framework'а не полностью удовлетворяет потребности. Имеется несколько решений данной проблемы. Одна из них - использование возможностей framework'а для расширения функциональности.  Но сегодня, на конкретном примере, мы рассмотрим небольшой lifehack, который позволит сократить драгоценное время, используя, возможно, менее лаконичное решение.

Давайте опишем ситуацию в которой мы пришли к тому, что нам не хватает функциональности встроенной в JSF компоненты:

Имеется некий компонент интерфейса. Он может быть как простым тегом, так и множеством  со сложной структурой, вложенностью и пачкой логики.

Также есть необходимость добавить в отображение интерфейса элемента дополнительную функциональность, которая:

А) Является избыточной для уровня модели
Б) Хорошо ложится на client-side сторону и обработку с помощью javascript'а

Часть наших нужд реализуется с помощью имеющихся у компонентов атрибутов (onclick, onchange и прочие), но редко наши желания ограничиваются лишь обработкой действий, совершаемых пользователем над самим компонентом. Требуется ещё и добавлять clientside обработку на события произошедшие извне.

Простым и понятным примером служат зависящие друг от друга selectOneMenu (например список стран, и список городов обновляющийся при смене страны). Хотя в этом примере обработка, скорее всего, будет унесена на serverside.

Но что если обработка компонента должна произойти при загрузке страницы?
А если перерисовку и изменений модели нашего компонента меняет не одно событие, а десятки событий разбросанные по огромному интерфейсу?

Неужели необходимо выискивать все места, которые приводят к update'у нашего и компонента и добавлять туда в соответствующие события вызов нашей функции?

"-Да, не... Мы же вскроемся!" прозвучит в голове разработчика.

Далее, как правило, включается процесс поиска готового решения, которое сократит время на написание кучи повторяющегося кода и избавит от глупых ошибок.

"-Если нам нужно вызывать функцию тогда, когда происходит update компонента, то, скорее всего, разработчики добавили нам атрибут onupdate".

К сожалению не добавили. Поэтому переходим к простому решению, которое удовлетворит наши потребности:

<p:outputPanel>
      <script type="text/javascript">onMyComponentUpdate()</script>
     <!-- Какой-то компонент, требующий вызова javascript функции при перерисовке -->
</p:outputPanel>

 

function onMyComponentUpdate() {
     /* Какой-то код */
}

 

Т.е. если нам нужно, чтобы при update нашего блока/компонента вызывалась наша js функция, а вставлять её вызов во всех местах, что к этому update'у приводит нудно, больно и опасно, то мы просто помещаем во внутрь тега, который будет обновляться тег <script>, который содержит вызов нашей функции. Теперь когда jsf сделает update нашего компонента, он повторно сделает и вызов нашей функции.

Вот и всё!