JSF RichFaces和双滑块

我在RichFaces中看到有一个滑块，想知道是否有人在Scriptaculous中创建了双滑块。JSF RichFaces和双滑块

在应用程序中混合JSF，Richfaces和Scriptaculous是否有任何顾虑？

2008-12-10 boyd4715

我无法准确回答你的问题，但这里是我所知道的。

是否有在应用混合JSF，RichFaces的和Scriptaculous任何问题？

是的。 JSF中约有50％的问题是因为他们试图把它当作另一个taglib库而不是像Swing或SWT这样的UI框架。 JSF设计者所设想的世界更类似于可插拔的COM/ActiveX/VB控件，而不是目前流行的HTML混搭。

也就是说，可以在JSF中使用Scriptaculous（见下文）。请注意，采用该值的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; 
    } 

}

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>

这个JavaScript可能有点令人费解。

来源

2008-12-10 20:01:40 McDowell

该代码包含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>

来源

2012-12-20 10:30:20 pudaykiran

JSF RichFaces和双滑块

回答

相关问题