jQuery libraries

The Smartsite iXperion Client Framework depends on a number of Javascript libraries.

The Scf library

/scf/jQuery/jquery.scf.js

The Smartsite iXperion Client Framework jQuery extensions library. Fully implemented as jQuery extensions, using a single entry point for the jQuery object extension (jQuery.scf) and a few plugin methods available as jQuery selector methods.

The Scf shared graphics folder

/scf/gfx/

Graphics required by the Scf components.

How it works

By adding the Scf macro, script references to jQuery.js (see below) and jQuery.Scf.js will be added to the page:

Smartsite SXML CopyCode image Copy Code
<script type="text/javascript" src="/scf/jquery/jquery.js"></script>
<script type="text/javascript" src="/scf/jquery/jquery.scf.js"></script>

The Scf Behavior system will automatically be launched when the DOM is ready.

Smartsite SXML CopyCode image Copy Code
<script type="text/javascript">
/*<![CDATA[*/
  $j(function(){$j.scf.start();onLoad()});
  // other javascript code
/*]]>*/
</script>

The jQuery library

The jQuery library is normally found in the /scf/jquery/ subfolder of the Site's web root.

Until iXperion 1.2, it should be named jquery.js, or you would have to specify an alternative jQuery location using the Scf macro's jQueryLocation property.

The Scf macro will include the following path:

  CopyCode image Copy Code
/scf/jQuery/jquery.js

New in 1.2

Since iXperion 1.2, you can simply place the latest version of jQuery in the /scf/jquery/ folder and the latest version will automatically be included:

Scf/jQuery/ folder

In the case shown here, the Scf macro will add the following javascript include:

  CopyCode image Copy Code
/scf/jQuery/jquery-1.4.1.min.js

For downward compatibility reasons, if the jquery.js file exists in the /scf/jquery folder, it will still be used and overrule any versioned jquery files.

Adding custom settings

In 1.2, you can use the Scf settings property to add custom settings to the client framework. These settings will be passed to the Scf runtime as a Json object:

This way, you can formalize passing data to the client layer.

for instance, if you wish to have the current item number available in javascript, but not as a global Javascript variable (to avoid conflicts), try this:

Smartsite SXML CopyCode image Copy Code
<se:scf startupmode="bodyscript">
 <se:collection>
  <se:member name="itemNumber" type="integer">{itemdata.number()}</se:member>
 </se:collection>
</se:scf>

In the HTML output of the page, you will see the following code:

Javascript CopyCode image Copy Code
$j.scf.start({"locale":1043,"conflict":true,"itemNumber":127});onLoad()

As you can see, locale (current locale id) and conflict (reflects the jQueryNoConflict property) are added by default.

Now, you can access the itemNumber variable via jQuery.scf.settings:

Smartsite SXML CopyCode image Copy Code
<se:placeholder.addjavascriptonload>
 alert($j.scf.settings.itemNumber);
</se:placeholder.addjavascriptonload>

Topics