JSF RichFaces and a dual slider
https://stackoverflow.com/questions/355038
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I see in richfaces that there is a single slider, wondering if anyone has created a dual slider like in Scriptaculous for it.
Is there any concerns in mixing JSF, Richfaces and Scriptaculous in an application?
Solution
I can't answer your question with precision, but here's what I know.
Is there any concerns in mixing JSF, Richfaces and Scriptaculous in an application?
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.
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.
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.
This code uses a slider to update a text field 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;
}
}
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>
That JavaScript might be a little scrappy.
OTHER TIPS
The code contains four tabs with 4 images ( you can include images, pages, etc., ) with sliding default time is 5 sec for every image change and tab clicking is provided for user. Slide begins whenever the user click on anyone of 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>
