0 Replies Latest reply on Aug 14, 2008 10:03 AM by agusti

    Seam text preview (without page reload)

    agusti

      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