JSF的RichFaces和双滑盖 [英] JSF RichFaces and a dual slider
问题描述
我在RichFaces的看到有一个滑块，如果有人已经为其创建了双向滑盖像Scriptaculous的疑惑。
I see in richfaces that there is a single slider, wondering if anyone has created a dual slider like in Scriptaculous for it.
有没有在混合JSF，RichFaces的和Scriptaculous在应用程序中的任何问题？
Is there any concerns in mixing JSF, Richfaces and Scriptaculous in an application?
推荐答案
我不能回答与precision你的问题，但这里是我知道的。
I can't answer your question with precision, but here's what I know.
有没有在混合JSF有任何疑问， RichFaces的和Scriptaculous在 应用程序？
Is there any concerns in mixing JSF, Richfaces and Scriptaculous in an application?
是的。大约有50％的人与JSF的问题是因为他们试图把它当作另一种标签库库，而不是像Swing或SWT的UI框架。由JSF设计者所设想的世界是更接近比HTML混搭可插拔的COM / ActiveX / VB控件目前流行。
Yes. About 50% of the problems people have with JSF are because they try to treat it like a another taglib library rather than a UI framework like Swing or SWT. The world envisaged by the JSF designers was more akin to the pluggable COM/ActiveX/VB controls than the HTML mashups currently in vogue.
这就是说，它有可能使用的是Scriptaculous和JSF（见下文）。需要注意的是JSF控件取值需要一些其他的机制来获得它的客户端ID 的给JavaScript（在这种情况下，一个普通的HTML隐藏字段绑定到托管bean）。这是一个有点乱。
That said, it is possible to use Scriptaculous with JSF (see below). Note that the JSF control that takes the value needs some other mechanism to get its clientId to the JavaScript (in this case, a regular HTML hidden field that is bound to the managed bean). This is a bit messy.
要清理，将是移动一切都变成JSF渲染器和有控制的一种方式发出所有适当的HTML和JavaScript。我想这是RichFaces的背后的基本原理。不幸的是，我从来没有使用过它，所以只有实验会告诉它的JavaScript库和Scriptaculous是否会共存。是否JavaScript库的作者一直在思考的互操作性一个很好的指标是检查库已经命名空间。
One way to clean it up would be to move everything into a JSF renderer and have the control emit all the appropriate HTML and JavaScript. I imagine this is the rationale behind RichFaces. Unfortunately, I've never used it, so only experimentation will tell whether its JavaScript library and Scriptaculous will coexist. A good indicator of whether JavaScript library authors have been thinking about interoperability is to check if the library has been namespaced.
这code采用的是滑盖与数值更新文本字段：
This code uses a slider to update a text field with a numeric value:
查看：
<?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>
的Session bean：
Session bean:
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;
}
}
faces-config.xml中：
faces-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的可能会有点斗志。
That JavaScript might be a little scrappy.
这篇关于JSF的RichFaces和双滑盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
