Я не могу ответить на ваш вопрос с точностью, но вот что я знаю.
Есть ли какие-либо проблемы в смешивании JSF,
Richfaces и Scriptaculous в
приложение?
Да. Около 50% проблем, с которыми сталкиваются люди с JSF, связаны с тем, что они пытаются рассматривать ее как другую библиотеку taglib, а не как структуру пользовательского интерфейса, такую как Swing или SWT. Мир, задуманный дизайнерами JSF, был больше похож на подключаемые элементы управления COM / ActiveX / VB, чем на гибридные приложения HTML, которые сейчас в моде.
Тем не менее, можно использовать Scriptaculous с JSF (см. Ниже). Обратите внимание, что элемент управления JSF, который принимает значение, нуждается в каком-то другом механизме для передачи его clientId в JavaScript (в этом случае обычное скрытое HTML-поле, которое связано с управляемым компонентом). Это немного грязно.
Один из способов очистки - переместить все в рендерер JSF и заставить элемент управления генерировать все соответствующие HTML и JavaScript. Я полагаю, что это обоснование RichFaces. К сожалению, я никогда не использовал его, поэтому только эксперименты покажут, будут ли сосуществовать его библиотека JavaScript и Scriptaculous. Хороший показатель того, задумывались ли авторы библиотеки JavaScript о совместимости, - это проверка пространства библиотеки.
Этот код использует ползунок для обновления текстового поля числовым значением:
Вид:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<jsp:directive.page language="java"
contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" />
<jsp:text>
<![CDATA[ <?xml version="1.0" encoding="ISO-8859-1" ?> ]]>
</jsp:text>
<jsp:text>
<![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ]]>
</jsp:text>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
<title>Script Test</title>
<script src="javascripts/prototype.js" type="text/javascript">/**/</script>
<script src="javascripts/scriptaculous.js" type="text/javascript">/**/</script>
<style type="text/css">
div.slider {
width: 256px;
margin: 10px 0;
background-color: #ccc;
height: 10px;
position: relative;
}
div.slider div.handle {
width: 10px;
height: 15px;
background-color: #f00;
cursor: move;
position: absolute;
}
div#zoom_element {
width: 50px;
height: 50px;
background: #2d86bd;
position: relative;
}
</style>
</head>
<body>
<div class="demo">
<p>Use the slider to change the value</p>
<div id="zoom_slider" class="slider">
<div class="handle"></div>
</div>
</div>
<f:view>
<h:form>
<h:inputText binding="#{sliderIdBean.mycontrol}"
value="#{sliderIdBean.value}" onchange="updateSlider()">
<f:validateLongRange minimum="0" maximum="10" />
</h:inputText>
<h:commandButton value="Submit" action="#{sliderIdBean.action}" />
</h:form>
<h:messages />
</f:view>
<script type="text/javascript">
var zoom_slider = $('zoom_slider'),
mycontrol = $('${sliderIdBean.clientId}');
var ctrl = new Control.Slider(zoom_slider.down('.handle'), zoom_slider, {
range: $R(0, 10),
sliderValue: mycontrol.getValue(),
onSlide: function(value) {
value = Math.ceil(value);
mycontrol.setValue(value);
},
onChange: function(value) {
value = Math.ceil(value);
mycontrol.setStyle(value);
}
});
function updateSlider() {
ctrl.setValue(mycontrol.value);
}
</script>
</body>
</html>
</jsp:root>
Сессионный компонент:
public class SliderIdBean {
private long value = 0;
private UIComponent mycontrol;
public long getValue() {
return value;
}
public void setValue(long value) {
this.value = value;
}
public UIComponent getMycontrol() {
return mycontrol;
}
public void setMycontrol(UIComponent mycontrol) {
this.mycontrol = mycontrol;
}
public String getClientId() {
FacesContext context = FacesContext
.getCurrentInstance();
return mycontrol.getClientId(context);
}
public String action() {
System.out.println("Submitted value was: " + value);
return null;
}
}
лица-config.xml:
<managed-bean>
<managed-bean-name>sliderIdBean</managed-bean-name>
<managed-bean-class>scripty.SliderIdBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
Этот JavaScript может быть немного неаккуратным.