If you are new to exponent, you are probably not aware that the plugins folder contains a ton of great tools that you can use in building your module views.  Some of these tools are pretty simple, and some are much more complex. The important thing is to know that this is where they live.  We'll list a few here on this page, but you can also browse this folder to see the plethora of options available.  With a little studying, you will probably be able to create your own.

Probably the simplest of these handy little smarty snippets is the {br} plugin. Seems simple enough. What it does is add in a line break in your TPLs. However, first it checks to see if the theme you are using has XHTML on or off. It will then write the break with the appropriate syntax. Pretty handy if you want to ensure your doc is valid html.

This plugin: 

{br}


Will check the theme header for XHTML to be true or false, then produce one of the following:

<br>
or
<br />

Simple, but very handy for valid XHTML.

Chain is going to give you a lot of power in a simple snippet.  Here it is:

{chain module=faq view="showall" chrome="true" src="this_module`$src`" }

Chain allows you to link modules within modules.  You can designate module, view, chrome, etc.  The "src" is important if you want to have unique content in multiple instances of this chained module.  Checkout the plugin folder for a better undersanding as to what is available for you.  There is a slight difference in .97 and 2.0 syntax. Chain may use "controller" for 2.0 modules. 

Another simple little plugin, this is very useful to ensure there is no overlap in content. Here's the code:

This snippet:

{clear}

will write this to your document:

<div style="clear: both;"/>

Obviously if you are a purist and don't want any inline css it is easy enough to avoid using this plugin, but it's very handy for quick development.

If you need a way to throw some CSS in a view, exponent will use the "css" plugin to pull it out when that view is called upon and automatically put the css in the header (where it should be).

{css}
{literal}
your css goes here...
{/literal}
{/css}

Remember to use the "literal" plugin to keep the smarty from interpreting your css or you will have errors. The "css" wrapper will tell exponent to pull it out and put it in the header of your document on the fly.

Here's another killer snippet.

{script unique="yuitabs" yuimodules="tabview"}
{literal}

    (function() {
        var tabView = new YAHOO.widget.TabView('doctors-tabs');
    
    	//script fixes the "flicker" of delayed-instantiation
        YAHOO.util.Dom.removeClass('doctor-tabs-body', 'hide');
        var loading = YAHOO.util.Dom.getElementsByClassName('loadingdiv', 'div');
        YAHOO.util.Dom.setStyle(loading, 'display', 'none');
    
    })();

{/literal}
{/script}

The script and literal are used together.  Literal simply tells the smarty compiler to ignore what comes between the tags.  We want javascript to pass straight through without being interpreted by smarty because it will throw an error.   The script tag does a number of things.  First, it removes the code you put inside it and places it in the foot of your document.  This is important to keep clutter out, and is great for SEO.  Second, it is especially useful for YUI modules.  SCRIPT uses the YUI loader and will pull any of the YUI javascript files into your document through the loader.  All you have to do is designate the module in "yuimodule" (you can place a number of modules here if you need to).  If you are using a non-YUI script, add an "src" parameter to the script tag, and the YUI loader will still run, load the external javasript, and write your inline javascript to the footer of your document.

Very handy.

A quick note.  If you are running Exponent 2.0, YUI 2.7 and 3.0 Live in the "external" folder.  Take a quick look through these files, then run over to the official YUI website for extensive documentation on this powerful javascript library.   

you can still use the "script" plugin, as we said above, without using YUI modules. You can load an external file with the "src" attribute, then place the constructor between the "literal" tags.  As stated above, these snippets of javascript will automatically be moved to the foot of your document by Exponent.  The basic syntax is as follows:

//this is some scripts
//that use the YUI library DOM and animation
//but we also have our own external js to go with them
//so we have already done the above example
//to get the dom and animation yuimodles

{script unique="yuidomcollapse`$config.uniqueid`" src="`$smarty.const.URL_BASE`/framework/modules/common/js/yuidomcollapse/yuidomcollapse.js"}
	{literal} 
        // backticks are necessary on the $smarty.const.URL_BASE
        // have to have at least one line between the {script}{/script} tags, else the plugin assumes it is empty.  even if it is commented out //
	{/literal}
{/script}

{script unique="yuidomcollapse-css`$config.uniqueid`" src="`$smarty.const.URL_BASE`/framework/modules/common/js/yuidomcollapse/yuidomcollapse-css.js"}
	{literal} 
        // backticks are necessary on the $smarty.const.URL_BASE
        // have to have at least one line between the {script}{/script} tags, else the plugin assumes it is empty.  even if it is commented out //
	{/literal}
{/script}

{script unique="yuidomcollapse-fancy`$config.uniqueid`" src="`$smarty.const.URL_BASE`/framework/modules/common/js/yuidomcollapse/yuidomcollapse-fancy.js"}
	{literal} 
        // backticks are necessary on the $smarty.const.URL_BASE
        // have to have at least one line between the {script}{/script} tags, else the plugin assumes it is empty.  even if it is commented out //
        //alert('We love Exponent!');
	{/literal}
{/script}

The icon plugin gives you quick access to all the icons available in the "themes/common/skin" folder, without having to write out the urls yourself.  Here's a snippet:

{icon img=view.png}

The path to the icon "view.png" will be called, and the html for the image will be written.  Heres a second sample with a few more parameters:

{icon action=edit record=$items title="Edit this `$modelname`"}

You can see that you can give you icons particular actions within the module, title them, give them alt tags, etc.

Pay attention to the comments between the "script" and "literal" tags.  You need at least 1 line between script tags, else Exponent will fly right by assuming it is empty.  Even if it is empyty.  I suggest writing some comments in there so you remember, like you can see above.  Also, remember the smarty.const which is explained below.  The "config unique id" snippet is great if you have multiple instances of a particular view on your page.  This will cause Exponent to generate some random IDs for each of these and keep your scripts from interfering with one another.

The "smarty.const" tag has a number of uses.  Here are some sample snippets:

{$smarty.const.PATH_RELATIVE}

{permissions level=$smarty.const.UILEVEL_NORMAL}

{$smarty.const.ICON_RELATIVE}

{$smarty.const.THEME_RELATIVE}

{$smarty.const.PATH_RELATIVE}

Each of these uses will write a path for you so you don't have to.  There are tons of advantages to this.  The ease of accessing icons, the ease of accessing resources in your theme, the simplicity of relative linking... And of course the ability to migrate your code from one site to another without having to worry about broken links.

This isn't Exponent specific, but if you haven't visited the Smarty Docs yet, you should really know about it. Here's a sample piece of code:

{foreach name=items from=$items item=item}          
   <div class="item {cycle values="column-left,column-right"}">
     <h2>{$item->title}</h2>      
     <div class="bodycopy">{$item->body}</div>   
   </div>
{/foreach}        
{clear}

The "cycle values" expression lets you tell Exponent, through the Templating Engine, to output alternating values for your div classes in this case. This can be used with table rows and other HTML.

When your tpl files begin to get fairly complex, or if you just really want to be efficient with your code, using "include" allows you to break a piece of your code out into a separate file:

{include file="showitems.tpl"}

This is extremely handy if you have a chunk of a view that needs to be used by other views.  Be warned though, these "partial" views need to be copied into your theme directory with the "parent" view, else you will have issues with linkage.

The pop plugin makes a simple popup box.  This is handy if you need to notify visitors of something immediately when they visit the page.  Has a built in cookie, so it will only display once, and when closed a visitor can refresh the page without being irritated with a repeated message.

{pop}
   wassup?  hope you like javascript popups!
{/pop} 

Unique ID will cause Exponent to generate a unique identifier for you on the fly. This can be used with TPLs that have a depending javascript file.  If you have multiple instances of the same script being used, you can avoid errors by doing the following:

<div id="carousel-container{uniqueid}">
  
  <div id="container{uniqueid}">

      <ol id="carousel{uniqueid}">
      
         {if $items|@count gt 0}
           {foreach from=$items item=text name=items}
             <li class="item">
               {if $text->title}<h2>{$text->title}</h2>{/if}
               {bodycopy}
             </li>
           {/foreach}
         {/if}

      </ol><!-- end carousel -->

  </div> <!-- end carousel -->

</div> <!-- end carousel containter -->




{script unique="yuicarousel`uniqueid`" yuimodules="carousel,animation"}
{literal}

    YAHOO.util.Event.onDOMReady(first);
    
           var carousel;
                
       function first () {
            var carousel    = new YAHOO.widget.Carousel("container{/literal}{uniqueid}{literal}", {
                        animation: { speed: 1.0, effect:YAHOO.util.Easing.easeOut},

   <!-- other carousel params -->
   <!-- other carousel params -->
   <!-- other carousel params -->

{/literal}
{/script}

In the javascript snippet at the bottom of your TPL, you will have to break out of the "literal" tag for a moment and introduce a "uniqueid".  Look carefully and you will see what we are doing.  We are applying a uniqueid to the div names, and to the references in the javascript, so they point to the same thing.  In the end, if the view is used multiple times on the page, there will be no javascript errors because of the unique id.  Efficient code reuse.

There is a ton of other things that can be done with native smarty functionality.  We encourage you to visit the Smarty templating engine home page for more information.