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 | 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> |