JSF RichFacesのデュアルスライダー
https://stackoverflow.com/questions/355038
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私は、誰もがそれのためにScriptaculousの中のような二重のスライダーを作成している場合疑問に、単一のスライダーがあることがRichFacesの中で見ています。
は、アプリケーションでJSF、RichFacesのとScriptaculousの混合のいずれかの懸念がありますか？
解決
私は正確にあなたの質問に答えるが、ここで私が知っているのですができません。
JSFの混合のいずれかの懸念があり、 でRichFacesのとScriptaculousの アプリケーション？
はい。彼らは別のtaglibライブラリーではなく、スイングやSWTなどのUIフレームワークのように扱うしようとするため、人々はJSFに持っている問題の約50％があります。 JSFデザイナーが想定される世界は、現在流行中のHTMLマッシュアップよりも、プラグイン可能なCOM / ActiveXの/ VBコントロールにもっと似ていた。
がJSF（下記参照）とScriptaculousのを使用することが可能である、と述べています。値をとるJSFコントロールがのclientIdをの（この場合は、管理対象Beanにバインドされている通常のHTML hiddenフィールド）はJavaScriptにを取得するための、いくつかの他のメカニズムが必要であることに注意してください。これは少し厄介です。
JSFレンダラにすべてを移動し、コントロールを持っているだろう、それをクリーンアップする1つの方法は、すべての適切な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は少し断片的かもしれないと。
他のヒント
のコードは、デフォルトの時間をスライドして4枚の画像（あなたが画像、ページ、などを挙げることができる）との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>
所属していません StackOverflow
