JSF RichFaces和双滑块

时间:2008-12-10 03:52:10

标签: java ajax jsf richfaces scriptaculous

我在richfaces中看到有一个滑块,想知道是否有人为Scriptaculous创建了一个双滑块。

在应用程序中混合JSF,Richfaces和Scriptaculous有什么顾虑吗?

2 个答案:

答案 0 :(得分:2)

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

  

混合JSF是否有任何问题,   Richfaces和Scriptaculous in a   应用

是。人们对JSF的问题大约有50%是因为他们试图将其视为另一个taglib库,而不是像Swing或SWT这样的UI框架。 JSF设计者设想的世界更像是可插拔的COM / ActiveX / VB控件,而不是目前流行的HTML mashup。

也就是说,可以在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可能有点杂乱无章。

答案 1 :(得分:0)

代码包含四个带有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>