JSF RichFaces et un double curseur
https://stackoverflow.com/questions/355038
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je vois dans richfaces qu'il ya un seul curseur, se demandant si quelqu'un a créé un double curseur comme dans Scriptaculous pour elle.
Y at-il des préoccupations dans le mélange JSF, RichFaces et Scriptaculous dans une application?
La solution
Je ne peux pas répondre à votre question avec précision, mais voici ce que je sais.
Y at-il des préoccupations dans le mélange JSF, Richfaces et Scriptaculous dans un l'application?
Oui. Environ 50% des problèmes les gens ont avec JSF sont parce qu'ils essaient de le traiter comme une autre bibliothèque taglib plutôt qu'un cadre de l'assurance-chômage comme swing ou SWT. Le monde envisagé par les concepteurs JSF était plus proche des contrôles COM connectables / ActiveX / VB que le HTML mashups en vogue actuellement.
Cela dit, il est possible d'utiliser Scriptaculous avec JSF (voir ci-dessous). Notez que le contrôle JSF qui prend la valeur a besoin d'un autre mécanisme pour obtenir son clientId au JavaScript (dans ce cas, un champ caché régulier HTML qui est lié à la fève géré). C'est un peu en désordre.
Une façon de nettoyer serait de déplacer tout en un JSF et renderer ont le contrôle émette tous les fichiers HTML et JavaScript approprié. J'imagine que c'est la raison d'être RichFaces. Malheureusement, je ne l'ai jamais utilisé, donc que l'expérimentation nous dira si sa bibliothèque JavaScript et Scriptaculous coexisteront. Un bon indicateur de savoir si les auteurs de la bibliothèque JavaScript ont pensé à l'interopérabilité est de vérifier si la bibliothèque est un espace de nommage.
Ce code utilise un curseur pour mettre à jour un champ de texte avec une valeur numérique:
Voir:
<?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>
Ce JavaScript pourrait être un peu décousu.
Autres conseils
Le code contient quatre onglets avec 4 images (vous pouvez inclure des images, des pages, etc.), avec le temps par défaut de glissement est 5 sec pour chaque changement d'image et en cliquant sur l'onglet est fourni pour l'utilisateur. Faites glisser commence chaque fois que l'utilisateur clique sur une des 4 onglets.
<%@ 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>
