Smartlet Deployment guidelines

One of the major advantages of Smartlets is the ability to deploy them just by copying the folder structure. For this to work instantaneously, a few measures must be taken however:

Use The ClientData folder

Use the ClientData folder to store Css, Javascript and graphics.

Use the Folder-wide viper methods 

Smartlet.Name(), Smartlet.Location(), Smartlet.GetResource() and Smartlet.Selector() can be used throughout the folder structure of a Smartlet. For instance, if you use the Smartlet.Name() method to generate a CSS class name for your main HTML element, you can use the Smartlet.Selector() method to create a CSS- or jQuery-selector for it in your CSS and Javascript items in the ClientData folder.

Let's say we have a CoolMenu Smartlet:

Smartsite SXML	Copy Code
<div id="{smartlet.id()}" class="{smartlet.name()}"> </div>

... generates:

HTML	Copy Code
<div id="sml_coolmenu_1" class="sml_coolmenu"> </div>

In the CSS item:

Smartsite SXML	Copy Code
{smartlet.selector('', NameAsHtmlClassName)} {border: 1px solid #33e}

... generates:

HTML	Copy Code
.sml_coolmenu {border: 1px solid #33e}

To refer to graphics from your Smartlet CSS items, use the Smartlet.GetResource() viper method:

To generate a reference to the PhoneCall.png image, use:

Smartsite SXML	Copy Code
{smartlet.getresource('/clientdata/images/eventtypes/phonecall.png')}

Translation.LocalScope

Use the translation.localscope directive for helper-translations. This will ensure a translation within the Smartlet folder will be used when called from your Smartlet-code:

Smartsite SXML	Copy Code
{translation.localscope.formatevents(this.field(day), this.field(date), this.field(events))}

Carefully sculpt behaviors

When building Smartsite Client Framework (Scf) behaviors,  use the smartlet.name() for shared, smartlet.id() for specific behavior. In other words, if your behavior is to be shared for all instances of the same smartlet, bind it to the CSS classname:

	Copy Code
$j("{smartlet.selector('', 'NameAsHtmlClassName')").behavior(function(element, opts, jqo) {        jqo.find('div').hover(     function(){$j(this).animate({fontSize: 15}, 200)},      function(){$j(this).animate({fontSize: 8}, 200)}   ); });

Also, use the DOM container model for defining the behavior. Your behavior gets the element it is bound to, and the related jQuery object, in its constructor. Use this to do jQuery selects. In the previous example, the 'jqo' in jqo.find() refers to the jQuery object of the element the behavior is attached to.

• $j("a") will select every anchor in the page
• $j("a", j) or jqo.find("a") will select every anchor within the container div of the smartlet

Be alert on dependencies

Create as little as possible dependencies between behavior Javascript and your smartlet SXML code. It is advised to use the behavior settings parameter in order to have generic behaviors and pass specific settings to them. This way, multiple instances of your smartlet can coexist on a page without conflicting:

Smartsite SXML	Copy Code
{smartlet.behavior.attach(smartlet.selector(), smartlet.name(Behavior),       root, smartlet.get(path),       openTime, smartlet.get(opentime),       closeTime, smartlet.get(closetime))}

Content Access

Within the Smartlet folder structure, two access types are relevant:

• BrowseAccess
• SmartletEditorAccess

Browse access should be restricted on the Configuration sub folder and possibly on the Documentation. Unrestricted access should usually be granted to the ClientData, the smartlet icon and the smartlet itself.