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