JSF RichFaces and double slider
2 answers
I cannot answer your question exactly, but here's what I know.
Are there any problems mixing JSF, Richfaces and Scriptaculous into an application?
Yes. About 50% of the problems people face with JSF are because they try to treat it as a different taglib and not as a UI interface like Swing or SWT. The world envisioned by the JSF designers was more akin to COM / ActiveX / VB pluggable controls than HTML mosaics are currently in vogue.
However, it is possible to use Scriptaculous with JSF (see below). Note that a JSF control that takes a value needs some other mechanism to get its clientId for JavaScript (in this case, it is a regular hidden HTML field associated with a managed bean). It's a little messy.
One way to clean it up would be to move everything into a JSF renderer and force the control to emit all relevant HTML and JavaScript. I believe this is RichFaces explanation. Unfortunately I've never used it, so only experimentation will tell if its JavaScript and Scriptaculous library will coexist. A good indicator of whether the authors of a JavaScript library have thought about interoperability is to check if the library has been put into a namespace.
This code uses a slider to update a textbox with a numeric value:
View:
<?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:
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;
}
}
person-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>
That JavaScript can be a little patchy.
+2
source to share
The code contains four tabs with four images (you can include images, pages, etc.) with a sliding default of 5 seconds for each image change and a tab for the user. The slide starts whenever the user clicks on any of the 4 tabs.
<%@ 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>
0
source to share