Simple Smartlet

Smartlets are can be used to build any kind of application. To illustrate one of the key features, Ajax/JSON capability, this simple Smartlet displays the server date and time and a button that refreshes it without doing a full roundtrip. Instead, a JSON request is sent to the server and a small part of the screen is updated.

Smartsite SXML CopyCode image Copy Code
<se:smartlet>
       <se:parameters>
             <se:parameter name="properties">
                    <se:collection>
                           <se:member name="data" callbackaccess="write" clientaccess="read" />
                    </se:collection>
             </se:parameter>
             <se:parameter name="xml">
                    <!--// Get the server datetime -->
                    {buffer.set(b, locale.formatdatetimecustom(datetime.now(),'dd-MM-yyyy HH:mm:ss.fff'))}

                    <se:if expression="smartlet.isajaxcallback()">
                           <se:then>
                                  {smartlet.set(data, $b)}
                           </se:then>
                           <se:else>
                                  <se:placeholder.addjavascriptonload>
                                        $j("#{smartlet.id()} button").scf.behavior(function(el, opts, j) {
                                               var sml= $j.scf.smartlet.get('{smartlet.id()}');
                                               
                                               function ready(){
                                                      $j("#{smartlet.id()} span").text(sml.get('data'));       
                                               }
                                               
                                               function ajax(){
                                                      sml.ajax(ready);
                                               }
                                               
                                               j.click(ajax).show();
                                        });
                                  </se:placeholder.addjavascriptonload>

                                  <se:placeholder.addcss rem="CSS">
                                        #{smartlet.id()} button { display: none; }
                                  </se:placeholder.addcss>
                                  
                                  <div id="{smartlet.id()}">
                                        Server time: <span>{buffer.get(b)}</span>
                                        <button type="button">Refresh using Ajax</button>
                                        <se:smartletnoscript>
                                               <form action="{request.location()}" method="post">
                                                      <input type="submit" value="Refresh using Post" name="{smartlet.id()}"/>
                                               </form>
                                        </se:smartletnoscript>
                                  </div>
                           </se:else>
                    </se:if>
             </se:parameter> 
       </se:parameters>
</se:smartlet>