Example: Echo Write

EchoWriter.java

public class EchoWriter extends Component {
    
    @Inject
    @Element
    private SimpleLabel echo;
    
    @ScriptElement(onUpdate=false)
    public JsInit jsInit() {
        return new JsInit(this);
    }
    
    @ScriptElement(onCreate=false, onUpdate=false)
    public JsUpdate echoUpdate() {
        return new JsUpdate(this, "updated");
    }
    @Remoted
    public void echoText(String text) {
        echo.setValue(text);
        echo.refresh();
        partialRefresh("echoUpdate", "echoUpdate");
    }
}

EchoWriter.js

EchoWriter = Component.extend({
  updating : false,
  timeout: null,
  init : function(id) {
    this._super(id);
    var self = this;
    this.el("input").keyup(function() {
      self.echoText();
    });
  },
  echoText : function() {
    var self = this;
    if (this.timeout != undefined) {
      clearTimeout(this.timeout);
      this.timeout = null;
    }
    
    if (this.updating == true) {
      this.timeout = setTimeout(function() {
        self.echoText();
      }, 100);
    } else {
      this.updating = true;
      this.call("echoText")(this.el("input").val());
    }
  },
  updated : function() {
    this.updating = false;
  }
});

EchoWriter.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:data="http://example.com/2006/some-data"
xmlns:txt="http://contextfw.net/ns/txt">

<xsl:template match="EchoWriter">
 <div id="{@id}">
  <p>
   Text: <input id="{@id}_input" style="width: 90%" type="text" class="stylish" />
  </p>
  <p>
   Echo: <xsl:apply-templates select="echo" />
  </p>
 </div>
</xsl:template>

</xsl:stylesheet>