$form

 

The form demonstrates a custom RichTextArea control using the YUI editor. The control overrides the Field method getHtmlImports() to include its JavaScript imports automatically: 

protected static final String HTML_IMPORTS =
          "<link rel=\"stylesheet\" type=\"text/css\" href=\"{0}/yui/fonts/fonts-min.css\"/>\n"
        + "<link rel=\"stylesheet\" type=\"text/css\" href=\"{0}/yui/editor/skins/sam/simpleeditor.css\"/>\n"
        + "<script type=\"text/javascript\" src=\"{0}/yui/yahoo-dom-event/yahoo-dom-event.js\"></script>\n"
        + "<script type=\"text/javascript\" src=\"{0}/yui/element/element-beta-min.js\"></script>\n"
        + "<script type=\"text/javascript\" src=\"{0}/yui/container/container_core-min.js\"></script>\n"
        + "<script type=\"text/javascript\" src=\"{0}/yui/editor/simpleeditor-min.js\"></script>\n";

public String getHtmlImports() {
    String[] args = { getContext().getRequest().getContextPath() };
    return MessageFormat.format(HTML_IMPORTS, args);
}
The control is rendered using a Velocity template (/examples/control/RichTextArea.htm) which is loaded from the classpath: 
${textArea}
<script type="text/javascript">
(function() {
  var myConfig = {
    ${config}
  };

  var myEditor = new YAHOO.widget.SimpleEditor('${id}', myConfig);
  myEditor.render();
})();
</script>
The control's toString() method merges the RichTextArea.htm template and the model returning rendred HTML. 
public String toString() {
    Map model = new HashMap();
    model.put("textArea", super.toString());
    model.put("config", getConfig());
    model.put("id", getId());

    return getContext().renderTemplate(getClass(), model);
}