JSF RichFaces en een dual slider

stemmen
1

Ik zie in RichFaces dat er een enkele slider, benieuwd of iemand een dual slider heeft geschapen zoals in Scriptaculous voor.

Is er enige bezorgdheid in het mengen van JSF, RichFaces en Scriptaculous in een toepassing?

De vraag is gesteld op 10/12/2008 om 04:52
bron van user
In andere talen...                            


2 antwoorden

stemmen
2

Ik kan geen antwoord op uw vraag met precisie, maar hier is wat ik weet.

Is er enige bezorgdheid in het mengen van JSF, RichFaces en Scriptaculous in een toepassing?

Ja. Ongeveer 50% van de problemen die mensen hebben met JSF zijn, omdat ze proberen om het te behandelen als een ander taglib bibliotheek in plaats van een UI framework zoals Swing of SWT. De wereld van de JSF ontwerpers beoogde was meer verwant aan de pluggable COM / ActiveX / VB controles onderworpen dan de HTML-mashups die momenteel in zwang.

Dat gezegd hebbende, is het mogelijk om Scriptaculous te gebruiken met JSF (zie hieronder). Merk op dat de JSF controle die de waarde neemt moet een ander mechanisme om haar te krijgen ClientID de JavaScript-(in dit geval, een gewone HTML verborgen veld die is gebonden aan de beheerde bean). Dit is een beetje rommelig.

Een manier om het op te ruimen zou zijn om alles te verhuizen naar een JSF renderer en hebben de controle uit te zenden alle passende HTML en JavaScript. Ik kan me voorstellen dat is de gedachte achter RichFaces. Jammer genoeg, heb ik nooit gebruikt, dus alleen experimenten zal moeten uitwijzen of de JavaScript-bibliotheek en Scriptaculous naast elkaar zullen bestaan. Een goede indicator die aangeeft of JavaScript-bibliotheek auteurs hebben nagedacht over interoperabiliteit is om te controleren of de bibliotheek is naamruimten.


Deze code maakt gebruik van een schuifregelaar om een ​​tekstveld bij te werken met een numerieke waarde:

Uitzicht:

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

}

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

Dat JavaScript misschien een beetje scrappy zijn.

antwoordde op 10/12/2008 om 21:01
bron van user

stemmen
0

De code bevat vier tabbladen met 4 afbeeldingen (u kunt afbeeldingen, pagina's, enz., Bevatten) met schuifdeuren standaardtijd is 5 seconden voor elke afbeelding verandering en tab te klikken wordt verstrekt voor de gebruiker. Schuif begint wanneer de gebruiker klikt op een van 4 tabbladen.

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

antwoordde op 20/12/2012 om 11:30
bron van user

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