<STYLE>
  .example { 
      background-color: #DEA;
      display:block;
      padding: .25em;
      margin: .25em;
  }
  code.result { background-color: #ADA; }
</STYLE>
<H1>Learn Yote by example</H1>

<h2>Level 1 - template commands not using Yote objects </h2>

<p>
This is a simple walkthrough that touches on all parts of the client templates that don&apos;t involve
Yote objects. Only the <code>BODY</code> section and the template definitions are included here. The surrounding HTML tags,
javascript includes and template init code is omitted.
<p>





<h3>Using a template in a page.</h3>

<P>The simplist template example. This just places the text of the template in the <code>div</code> calling the template.</P>

<pre><code class="example">
  &lt;script type="text/template" class="yote_template_definition" template_name="HelloWorld"&gt;
    Hello &lt;i&gt;World&lt;/i&gt;
  &lt;/script&gt;

  &lt;BODY&gt;
    &lt;DIV class="yote_template side_panel" template="HelloWorld"&gt;&lt;/div&gt;
  &lt;/BODY&gt;
  </code></pre>
   HTML Result
  <code class="example result"><pre>
  &lt;BODY&gt;
     &lt;DIV class="yote_template side_panel" template="HelloWorld"&gt;
     Hello &lt;i&gt;World&lt;/i&gt;
     &lt;/DIV&gt;
   &lt;/BODY&gt;
</pre></code>






<h3>Calling a template from an other template.</h3>

<P>
    The directive <code>&lt;$$ <i>templatename</i> $$&gt;</code> gets replaced by the filled out
    content of the named template.
</P>

<code class="example"><pre>
   &lt;script type="text/template" class="yote_template_definition" template_name="HelloTemplate"&gt;
     Hello Template
   &lt;/script&gt;

  &lt;script type="text/template" class="yote_template_definition" template_name="HelloWorld"&gt;
    &lt;$$ HelloTemplate $$&gt; &lt;BR&gt;
    Hello World
  &lt;/script&gt;

   &lt;BODY&gt;
     &lt;DIV class="yote_template side_panel" template="HelloWorld"&gt;&lt;/div&gt;
   &lt;/BODY&gt;
   </pre></code>
    HTML Result
   <code class="example result"><pre>
    &lt;BODY&gt;
      &lt;DIV class="yote_template side_panel" template="HelloWorld"&gt;
   Hello Template &lt;BR&gt; 
   Hello World
      &lt;/DIV&gt;
    &lt;/BODY&gt;
</pre></code>





<h3>Function building templates.</h3>

<p>
  The directive <code>&lt;? <i>registered-function-name</i> ?&gt;</code> incidates that
a function is to be called and its return value replaces the directive. The function
must be registered with the templating system.
</p>

<code class="example"><pre>
   &lt;SCRIPT&gt;
     $.yote.util.register_function( "hello", function() { return "Hello Functional World" } );
   &lt;/SCRIPT&gt;

   &lt;script type="text/template" class="yote_template_definition" template_name="HelloWorld"&gt;
     &lt;? hello ?&gt;
   &lt;/script&gt;

   &lt;BODY&gt;
     &lt;DIV class="yote_template side_panel" template="HelloWorld"&gt;&lt;/div&gt;
   &lt;/BODY&gt;
</pre></code>
 HTML Result
<code class="example result"><pre>
    &lt;BODY&gt;
      &lt;DIV class="yote_template side_panel" template="HelloWorld"&gt;
        Hello Functional World
      &lt;/DIV&gt;
    &lt;/BODY&gt;
</pre></code>




<h3>Buttons and Links</h3>

<p>Buttons and links can be quickly placed in a template using <code>&lt;$ button <i>registered-function-name</i> <i>Button Text</i> $&gt;</code>
and <code>&lt;$ action_link <i>registered-function-name</i> <i>Link Text</i> $&gt;</code>.
The templating system automatically attaches a click listener that calls the named registered function.
</P>

<code class="example"><pre>
   &lt;SCRIPT&gt;
     $.yote.util.register_function( "hello", function() { return "Hello CLICK" } );
   &lt;/SCRIPT&gt;

   &lt;script type="text/template" class="yote_template_definition" template_name="HelloWorld"&gt;
     &lt;$ button hello Clickme for Hello $&gt; &lt;BR&gt;
     &lt;$ action_link hello Click Link $&gt;
   &lt;/script&gt;

   &lt;BODY&gt;
     &lt;DIV class="yote_template side_panel" template="HelloWorld"&gt;&lt;/div&gt;
   &lt;/BODY&gt;
</pre></code>
 HTML Result
<code class="example result"><pre>
   &lt;BODY&gt;
     &lt;DIV class="yote_template side_panel" template="HelloWorld"&gt;
  &lt;BUTTON type="BUTTON" id="__yidx_<i>n</i>" class="yote_button" template_id="__yidx_<i>m</i>"&gt;Clickme for Hello&lt;/BUTTON&gt; &lt;BR&gt;
  &lt;A HREF="#" id="__yidx_<i>o</i>" class="yote_action_link" action="hello" template_id="__yidx_<i>m</i>"&gt;Click Link&lt;/A&gt;
     &lt;/DIV&gt;
   &lt;/BODY&gt;
</pre></code>



<h3>Variables</h3>

<p>
  A variable set with the <code>var</code> directive and accessed with the <code>val</code> directive. 
  Variables are passed up from template to template.    
</p>

<code class="example"><pre>
  &lt;script type="text/template" class="yote_template_definition" template_name="HelloTemplate"&gt;
    Hello &lt;b&gt;&lt;$ val name $&gt;&lt;/b&gt;.
  &lt;/script&gt;

  &lt;script type="text/template" class="yote_template_definition" template_name="HiAgatha"&gt;
    &lt;$$$ var name Agatha $$$&gt; &lt;BR&gt;
    &lt;$ val name $&gt;
    &lt;$$ HelloTemplate $$&gt;  &lt;BR&gt;
  &lt;/script&gt;

  &lt;BODY&gt;
    &lt;DIV class="yote_template side_panel" template="HiAgatha"&gt;&lt;/div&gt; &lt;BR&gt;
  &lt;/BODY&gt;

</pre></code>
 HTML Result
<code class="example result"><pre>
   &lt;BODY&gt;
     &lt;DIV class="yote_template side_panel" template="HelloWorld"&gt;
        Hello Agatha
     &lt;/DIV&gt;
   &lt;/BODY&gt;
</pre></code>

<h3>Reassigning Variables</h3>

<p>
  A variable can be reassigned in a template. The new value will remain for any templates
  called by the template where the value was reassigned.
</p>

<code class="example"><pre>
  &lt;script type="text/template" class="yote_template_definition" template_name="HelloTemplate"&gt;
    Hello &lt;b&gt;&lt;$ val name $&gt;&lt;/b&gt;.
  &lt;/script&gt;

  &lt;script type="text/template" class="yote_template_definition" template_name="HiAgatha"&gt;
    &lt;$$$ var name Agatha $$$&gt; &lt;BR&gt;
    &lt;$ val name $&gt; &lt;BR&gt;
    &lt;$$ HelloSomeoneElse $$&gt;
  &lt;/script&gt;

  &lt;script type="text/template" class="yote_template_definition" template_name="HiSomeoneElse"&gt;
    &lt;$$$ var name Bart $$$&gt; &lt;BR&gt;
    &lt;$$ HelloTemplate $$&gt;  &lt;BR&gt;
  &lt;/script&gt;

  &lt;BODY&gt;
    &lt;DIV class="yote_template side_panel" template="HiAgatha"&gt;&lt;/div&gt; &lt;BR&gt;
  &lt;/BODY&gt;

</pre></code>
 HTML Result
<code class="example result"><pre>
   &lt;BODY&gt;
     &lt;DIV class="yote_template side_panel" template="HelloWorld"&gt;
        Hello Agatha &lt;BR&gt;
        Hello Bart
     &lt;/DIV&gt;
   &lt;/BODY&gt;
</pre></code>



<h3>Variables and functions</h3>

<p>
  Assigned variables are automatically passed to registered functions when they are called by the template system.
  A context object is automatically passed to all functions, and its vars dictionary keying the
  var values to their name.
</p>

<code class="example"><pre>
   &lt;SCRIPT&gt;
     function sayhello( context ) {
         alert( "Greetings " + context.vars[ 'name' ] );
     }
     $.yote.util.register_function( "hello", sayhello );
     function puthello( context ) {
         return "Hello : " + context.vars[ 'name' ];
     }
     $.yote.util.register_function( "hello", sayhello );
   &lt;/SCRIPT&gt;

   &lt;script type="text/template" class="yote_template_definition" template_name="HelloTemplate"&gt;
     &lt;$$$ var name Dude $$$&gt;
     &lt;$ button hello Clickme $&gt; &lt;BR&gt;
     &lt;? sayhello ?$&gt;
   &lt;/script&gt;

   &lt;BODY&gt;
     &lt;DIV class="yote_template side_panel" template="HelloTemplate"&gt;
   &lt;BUTTON type="BUTTON" id="__yidx_<i>n</i>" class="yote_button" template_id="__yidx_<i>m</i>"&gt;Clickme&lt;/BUTTON&gt; &lt;BR&gt;
   Hello : Dude
     &lt;/div&gt;
   &lt;/BODY&gt;
</pre></code>
 HTML Result
<code class="example result"><pre>
   &lt;BODY&gt;
     &lt;DIV class="yote_template side_panel" template="HelloTemplate"&gt;
   &lt;BUTTON type="BUTTON" id="__yidx_<i>n</i>" class="yote_button" template_id="__yidx_<i>m</i>"&gt;Clickme&lt;/BUTTON&gt; &lt;BR&gt;
   Hello : Dude
     &lt;/div&gt;
   &lt;/BODY&gt;
</pre></code>







<h3>Controls as variables and after rendering functions</h3>

<p>
 The directive &lt;$$$ control <i>name</i> <i>html control</i> $$$&gt; assigns a serialized 
 id to the html control and replaces the directive with this control. The assigned id is 
 stored in the controls dictionary of the context; the name is the key and the control id is 
 the value. The control can be looked up by the ID.
</P>

<code class="example"><pre>
   &lt;script type="text/template" class="yote_template_definition" template_name="HelloTemplate"&gt;
     &lt;$$$ control text &lt;INPUT TYPE="TEXT"&gt; $$$&gt; &lt;BR&gt;
     &lt;$$$ control button &lt;BUTTON type="BUTTON"&gt;Clickme&lt;/BUTTON&gt; $$$&gt;
     &lt;?? setup_hello ??&gt;
   &lt;/script&gt;

   &lt;SCRIPT&gt;
       $.yote.util.register_function( "setup_hello", 
         function( context ) { 
   	  var button_id = context.controls[ 'button' ];
   	  var text_id   = context.controls[ 'text' ];
   	  $( '#' + button_id ).click( function() { 
   	      alert( "Greetings " + $( '#' + text_id ).val() );
   	  } );
         } );
   &lt;/SCRIPT&gt;

   &lt;BODY&gt;
     &lt;DIV class="yote_template side_panel" template="HelloTemplate"&gt;&lt;/div&gt;
   &lt;/BODY&gt;
</pre></code>
 HTML Result 
<code class="example result"><pre>
   &lt;BODY&gt;
     &lt;DIV class="yote_template side_panel" template="HelloTemplate"&gt;
   &lt;INPUT TYPE="TEXT" id="__yidx_<i>m</i>"&gt; &lt;BR&gt; 
   &lt;BUTTON type="BUTTON" id="__yidx_<i>n</i>" class="yote_button" template_id="__yidx_<i>m</i>"&gt;Clickme&lt;/BUTTON&gt; &lt;BR&gt;
     &lt;/div&gt;
</pre></code>