$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); }