03.11.2012

JSF: как изменить значение свойства класса из JavaScript.

Как правило, в JSF с каждым представлением (страницей) связан java класс (managed bean) веб-приложения, свойства которого связаны с компонентами JSF страницы - кнопками, полями ввода и пр. Веб-приложение на java выполняется на сервере приложений, но в тонкости отправки запросов от клиента к серверу вникать нет необходимости. Допустим, что нужно вызвать произвольную javascript функцию и из нее установить значение некоторого свойства класса. Вполне возможная ситуация, например когда какая-то часть интерфейса реализована на непосредственно на javascript, без использования JSF.

Сделать это очень просто, если использовать известную библиотеку компонентов для JSF - RichFaces. Для использования RichFaces подключите все необходимые библиотеки к проекту веб-приложения, вот список библиотек с зависимостями, которые нужны для подключения RichFaces (в этом примере я использовал в качестве сервера приложений Jboss 7.1).

common-annotations.jar

commons-beanutils.jar

commons-collections.jar

commons-digester-with-deps.jar

commons-logging-.jar cssparser.jar

guava.jar httpclient.jar httpcore.jar

httpmime.jar json_simple.jar jstl.jar

richfaces-components-api.jar

richfaces-components-ui.jar

richfaces-core-api.jar

richfaces-core-impl.jar

sac.jar standard.jar

Теперь предположим, что есть вот такой класс (managed bean):

package test;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "formBean")
@SessionScoped
public class FormBean implements Serializable {

private static final long serialVersionUID = 1L;
private String value;

public void setValue(String value){
this.value = value;
}
public String getValue(){
return value;
}
}

И допустим, что нужно установить значение поля value из javascript. Для этого можно использовать элемент <a4j:jsFunction>. Выглядит его использование подобным образом:

<a4j:jsFunction name="setValue" render="ajaxArea">
<a4j:param name="value" assignTo="#{formBean.value}" />
</a4j:jsFunction>

Этот тег создает javascript функцию с именем name, параметром value, который привязан к свойству класса - #{formBean.value}. И соответственно, когда эта js функция выполняется, перерисовывается область ajaxArea. Вот пример страницы, при загрузке которой вызывается js функция, которая устанавливает свойство value, после чего перерисовывается соответствующее текстовое поле.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">

<h:head>

<script type="text/javascript">
window.onload = function() {
setValue('hello');
};
</script>

<a4j:jsFunction name="setValue" render="ajaxArea">
<a4j:param name="value" assignTo="#{formBean.value}" />
</a4j:jsFunction>

</h:head>
<h:body>
<h:form>
<f:view>
<a4j:outputPanel id="ajaxArea">
<h:outputText value="#{formBean.value}"/>
</a4j:outputPanel>
</f:view>
</h:form>
</h:body>
</html>

 



Теги: programming java richfaces javaEE

comments powered by Disqus