Smartlet Deployment guidelines

Release 1.1 - ...

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 CopyCode image Copy Code
<div id="{smartlet.id()}" class="{smartlet.name()}">
</div>

... generates:

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

In the CSS item:

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

... generates:

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

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

Smartlet CSS graphics in the CMS

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

Smartsite SXML CopyCode image 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 CopyCode image 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:

  CopyCode image 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 CopyCode image 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:

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.