RichFaces JSF e uma dupla deslizante

votos
1

Eu vejo em richfaces que há um único controle deslizante, perguntando se alguém criou uma dupla deslizante como em Scriptaculous para ele.

Existe alguma preocupação em mistura JSF, Richfaces e Scriptaculous em um aplicativo?

Publicado 10/12/2008 em 04:52
fonte usuário
Em outras línguas...                            


2 respostas

votos
2

Eu não posso responder à sua pergunta com precisão, mas aqui está o que eu sei.

Existe alguma preocupação em mistura JSF, Richfaces e Scriptaculous em um aplicativo?

Sim. Cerca de 50% dos problemas que as pessoas têm com JSF é porque eles tentam tratá-lo como uma biblioteca outra taglib em vez de um quadro UI como Swing ou SWT. O mundo previsto pelos designers JSF era mais parecido com os controles COM / ActiveX / VB conectáveis ​​que os mashups HTML atualmente em voga.

Dito isto, é possível usar Scriptaculous com JSF (veja abaixo). Observe que o controle JSF que assume o valor precisa de algum outro mecanismo para obter a sua clientId ao JavaScript (neste caso, um campo oculto HTML regular que é ligado ao bean gerenciado). Isto é um pouco confuso.

Uma maneira de limpá-lo seria mudar tudo em um renderizador JSF e ter o controle emitem todo o HTML apropriado e JavaScript. Imagino que esta é a lógica por trás RichFaces. Infelizmente, eu nunca usei-o, portanto, apenas a experimentação dirá se a sua biblioteca de JavaScript e Scriptaculous vão coexistir. Um bom indicador de se autores biblioteca JavaScript estive pensando sobre interoperabilidade é verificar se a biblioteca foi namespaced.


Esse código usa um controle deslizante para atualizar um campo de texto com um valor numérico:

Visão:

<?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 de sessão:

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>

Que o JavaScript pode ser um pouco desconexo.

Respondeu 10/12/2008 em 21:01
fonte usuário

votos
0

O código contém quatro guias com 4 imagens (você pode incluir imagens, páginas, etc.,) com deslizamento tempo padrão é de 5 segundos para cada mudança de imagem e clicando guia é fornecido para o usuário. Slides começa sempre que o usuário clicar em qualquer um dos 4 guias.

<%@ 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>

Respondeu 20/12/2012 em 11:30
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more