Building HTML Smartlets
In the XML property of your Smartlet macros, you are free to use any HTML or SXML, but to build reusable Smartlets, a few guidelines will help:
Names and Ids
The Smartlet macro will automatically generate an Id, based on the name of the Translation it resides in:
sml_<translation name>_<counter>
If your translation is called Calendar, the first instance will have the Id sml_calendar_1.
Use this unless you have an important reason to specify one yourself.
The Smartlet Id can always be accessed using smartlet.id(), both on server and client.
Use the Id in the wrapping Html element you are emitting:
| Smartsite SXML |
Copy Code
|
|---|---|
<div id="{smartlet.id()}">
[Your SXML logic]
</div>
|
|
On the client, attach behavior to the element by emitting a jquery call:
| Smartsite SXML |
Copy Code
|
|---|---|
{smartlet.attach(smartlet.get(selector), "MyBehavior")}
|
|
This will attach the Behavior named MyBehavior to the div element with your Smartlet Id.
In the behavior javascript, you can then get to the Smartlet easily:
|
Copy Code
|
|
|---|---|
$j.scf.behavior.add("MyBehavior", {
attach: function(element, settings, jQueryObject) {
var smartlet = $.scf.smartlet.get(element);
alert(smartlet.get('myproperty'));
[Your Javascript logic]
}
});
|
|
Progressive Enhancement
Keep in mind that you build Smartlets not only for those who can fully appreciate the full richness of a modern browser: the Smartlet has to scale down gracefully.
Use the se:smartletnoscript macro for this. It represents a client-side noscript tag, but with added intelligence. When the client supports scripting, it will suppress everything inside it. It will even suppress the execution of SXML code. This makes it ideal for creating business logic for scriptless environments.