我在richfaces 中看到有一个滑块，想知道是否有人为它创建了一个像Scriptaculous 中那样的双滑块。
在应用程序中混合 JSF、Richfaces 和 Scriptaculous 是否有任何顾虑？
boyd4715
问问题
3594 次
2 回答
2
我无法准确回答您的问题，但这是我所知道的。
在应用程序中混合 JSF、Richfaces 和 Scriptaculous 是否有任何顾虑？
是的。人们在使用 JSF 时遇到的大约 50% 的问题是因为他们试图将其视为另一个 taglib 库，而不是像 Swing 或 SWT 这样的 UI 框架。JSF 设计者所设想的世界更像是可插入的 COM/ActiveX/VB 控件，而不是当前流行的 HTML 混搭。
也就是说，可以将 Scriptaculous 与 JSF 一起使用（见下文）。请注意，获取该值的 JSF 控件需要一些其他机制来将其clientId获取到 JavaScript（在本例中，绑定到托管 bean 的常规 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>
会话 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;
}
}
面孔-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 可能有点杂乱无章。
于 2008-12-10T20:01:40.323 回答
0
该代码包含四个带有 4 个图像的选项卡（您可以包括图像、页面等），每个图像更改的滑动默认时间为 5 秒，并为用户提供选项卡单击。每当用户单击 4 个选项卡中的任何一个时，幻灯片就会开始。
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<f:view>
<body>
<h:form id="signup">
<table class="logo_background">
<tr>
<td valign="top">
<table style="margin-left: 55px; background:#FFCC00" class="tab_background">
<tr>
<td width="145px" style="padding-left: 25px;">
<a4j:commandLink id="linkHowToPlayId" onclick="retTabClick(this.id);" value="howtoplay"></a4j:commandLink>
</td>
<td width="100px" align="center" style="padding-left: 5px;">
<a4j:commandLink id="linkRulesId" onclick="retTabClick(this.id);" value="rules"/>
</td>
<td width="5px">
</td>
<td width="130px" align="center" style="padding-left: 5px;">
<a4j:commandLink id="linkChallengesId" onclick="retTabClick(this.id);" value="challenges"></a4j:commandLink>
</td>
<td width="5px">
</td>
<td width="130px" align="center" style="padding-left: 5px; padding-right: 15px;">
<a4j:commandLink id="linkPickATeamId" onclick="retTabClick(this.id);" value="pickateam"/>
</td>
</tr>
</table>
<table>
<tr>
<td width="100px"></td>
<td valign="top">
<table class="signup_background" style="width: 565px; height: 390px; border: solid 1px #5F8CC2;">
<tr>
<td id="content" style="width: 100%;" valign="top">
<a4j:region>
<a4j:poll id="poll1" interval="2000" enabled="true" reRender="signup:howtoplay,signup:rules,signup:challenges,signup:pickateam" oncomplete="javascript:loopIt();"></a4j:poll>
</a4j:region>
<a4j:outputPanel id="howtoplay" layout="block" style="display:none;">
<h:graphicImage value="http://connectnigeria.com/articles/wp-content/uploads/2012/12/Google.jpg"></h:graphicImage>
</a4j:outputPanel>
<a4j:outputPanel id="rules" layout="block" style="display:none;">
<h:graphicImage value="http://good-wallpapers.com/pictures/4528/1280_countryside_landscape_wallpaper.jpg"></h:graphicImage>
</a4j:outputPanel>
<a4j:outputPanel id="challenges" layout="block" style="display:none;">
<h:graphicImage value="http://www.hdwallpapers.in/walls/windows_8_official-wide.jpg"></h:graphicImage>
</a4j:outputPanel>
<a4j:outputPanel id="pickateam" layout="block" style="display:none;">
<h:graphicImage value="../../images/87643.jpg"></h:graphicImage>
</a4j:outputPanel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</h:form>
<script type="text/javascript">
var first= 1;
if( first == 1)
{
document.getElementById("signup:howtoplay").style.display = 'block';
document.getElementById("signup:rules").style.display = 'none';
document.getElementById("signup:challenges").style.display = 'none';
document.getElementById("signup:pickateam").style.display = 'none';
}
function retTabClick(tabId) {
if (tabId == "signup:linkHowToPlayId") {
first = "1";
} else if (tabId == "signup:linkRulesId") {
first = "2";
} else if (tabId == "signup:linkChallengesId") {
first = "3";
} else if (tabId == "signup:linkPickATeamId") {
first = "4";
}
}
function loopIt()
{
if( first == 1)
{
document.getElementById("signup:howtoplay").style.display = 'block';
document.getElementById("signup:rules").style.display = 'none';
document.getElementById("signup:challenges").style.display = 'none';
document.getElementById("signup:pickateam").style.display = 'none';
first = 2;
}
else if (first == 2)
{
document.getElementById("signup:howtoplay").style.display = 'none';
document.getElementById("signup:rules").style.display = 'block';
document.getElementById("signup:challenges").style.display = 'none';
document.getElementById("signup:pickateam").style.display = 'none';
first = 3;
}
else if (first == 3)
{
document.getElementById("signup:howtoplay").style.display = 'none';
document.getElementById("signup:rules").style.display = 'none';
document.getElementById("signup:challenges").style.display = 'block';
document.getElementById("signup:pickateam").style.display = 'none';
first = 4;
}
else if (first == 4)
{
document.getElementById("signup:howtoplay").style.display = 'none';
document.getElementById("signup:rules").style.display = 'none';
document.getElementById("signup:challenges").style.display = 'none';
document.getElementById("signup:pickateam").style.display = 'block';
first = 1;
}
}
</script>
</body>
于 2012-12-20T10:30:20.603 回答