Seam text preview (without page reload)

14. Aug 2008, 10:03 CET | Link Agusti Dosaiguas

Hi All,

This is how I implemented Seam Text preview without reloading the page using Seam Remoting:

First of all I created a remote method into a session Bean:

@WebRemote
public static String formatSeamText(String text) {
    log.info("text to format {0}", text);
    Reader r = new StringReader(text);
    SeamTextLexer lexer = new SeamTextLexer(r);
    SeamTextParser parser = new SeamTextParser(lexer);
    try {
        parser.startRule();
    } catch (Exception e) {
        return e.getMessage();
    }
    return parser.toString();
}

I added the javascript code to be able to call the remote method:

<script type="text/javascript" src="seam/resource/remoting/resource/remote.js"></script>
<s:remote include="sessionBean"/>
<script type="text/javascript">
// <![CDATA[
    function formatSeamText(text) {
        Seam.Component.getInstance("sessionBean").formatSeamText(text, formatSeamTextCallback);
    }
    function formatSeamTextCallback(result) {
        var outnode = document.getElementById('page:textPreviewDecoration:seamTextPreview');
        var n = outnode.childNodes.length;
        for(var i=0; i < n; i++) outnode.removeChild(outnode.firstChild);
        outnode.innerHTML=result;
    }
// ]]>
</script>

And added the code to call te remote function:

<s:decorate id="textDecoration" template="layout/edit.xhtml">
    <ui:define name="label">text</ui:define>
    <h:inputTextarea id="text"
                     cols="80"
                     rows="10"
                     value="#{sessionBean.instance.text}"
                     required="true">
        <s:validateFormattedText/>
    </h:inputTextarea>
    <h:commandButton id="preview" 
                     value="Preview"
                     onclick="javascript:formatSeamText(document.getElementById('page:textDecoration:text').value); return false;"/>
</s:decorate>

<s:decorate id="textPreviewDecoration" template="layout/display.xhtml">
    <ui:define name="label">text preview</ui:define>
    <s:div id="seamTextPreview"><s:formattedText value="#{sessionBean.instance.text}"/></s:div>
</s:decorate>

How would you have implemented this functionality? Is there any remote method already bundled in Seam with the same functionality? How is it implemented in this forum?

Thank you,

Agusti