JSF Richfaces og en dual skyve

stemmer
1

Jeg ser i Richfaces at det er en enkelt skyveknapp, lurer på om noen har opprettet en dual skyveknapp som i Scriptaculous for det.

Er det noen bekymringer i å blande JSF, Richfaces og Scriptaculous i en søknad?

Publisert på 10/12/2008 klokken 03:52
kilden bruker
På andre språk...                            


2 svar

stemmer
2

Jeg kan ikke svare på spørsmålet ditt med presisjon, men her er hva jeg vet.

Er det noen bekymringer i å blande JSF, Richfaces og Scriptaculous i en søknad?

Ja. Om lag 50% av de problemene folk har med JSF er fordi de prøver å behandle det som en annen taglib bibliotek i stedet for en UI rammeverk som Swing eller SWT. Den forutsatt av JSF designere verden var mer beslektet til de pluggbare COM / ActiveX / VB kontroller enn HTML mashups for tiden på moten.

Når det er sagt, er det mulig å bruke Scriptaculous med JSF (se nedenfor). Merk at JSF kontroll som tar verdien trenger litt annen mekanisme for å få sin kunde- til Javascript (i dette tilfellet en vanlig HTML skjult felt som er bundet til den administrerte bønne). Dette er en litt rotete.

En måte å rydde opp ville være å flytte alt inn i en JSF renderer og har kontroll avgir alle nødvendige HTML og Javascript. Jeg antar at dette er begrunnelsen bak Richfaces. Dessverre, jeg har aldri brukt det, så bare eksperimentering vil fortelle om sin Javascript-bibliotek og Scriptaculous vil eksistere. En god indikator på om Javascript bibliotek forfattere har vært å tenke på interoperabilitet er å sjekke om biblioteket har blitt namespaced.


Denne koden bruker en glidebryter for å oppdatere et tekstfelt med en numerisk verdi:

Utsikt:

<?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;
  }

}

ansikter-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>

At Javascript kan være litt rufsete.

Svarte 10/12/2008 kl. 20:01
kilden bruker

stemmer
0

Koden inneholder fire kategorier med 4 bilder (du kan inkludere bilder, sider, etc.) med skyvestandardtiden er 5 sek for hvert bilde endring og tab klikke er gitt for brukeren. Skyv begynner når brukeren klikker på noen av 4 faner.

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

Svarte 20/12/2012 kl. 10:30
kilden bruker

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