ansaurus

Question

Answer 1

+1 A:

I can't answer your question with precision, but here's what I know.

Is there any concerns in mixing JSF, Richfaces and Scriptaculous in an application?

Yes. About 50% of the problems people have with JSF are because they try to treat it like a another taglib library rather than a UI framework like Swing or SWT. The world envisaged by the JSF designers was more akin to the pluggable COM/ActiveX/VB controls than the HTML mashups currently in vogue.

That said, it is possible to use Scriptaculous with JSF (see below). Note that the JSF control that takes the value needs some other mechanism to get its clientId to the JavaScript (in this case, a regular HTML hidden field that is bound to the managed bean). This is a bit messy.

One way to clean it up would be to move everything into a JSF renderer and have the control emit all the appropriate HTML and JavaScript. I imagine this is the rationale behind RichFaces. Unfortunately, I've never used it, so only experimentation will tell whether its JavaScript library and Scriptaculous will coexist. A good indicator of whether JavaScript library authors have been thinking about interoperability is to check if the library has been namespaced.

This code uses a slider to update a text field with a numeric value:

View:

<?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"&gt;
  <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"&gt; ]]>
  </jsp:text>
  <html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <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;
  }

}

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>

That JavaScript might be a little scrappy.

McDowell 2008-12-10 20:01:40

ansaurus

tags:

views:

answers:

JSF RichFaces and a dual slider

related questions