ctrl

scriptcontextname: js, scriptcontext: org.tagnetic.core.scriptcontext.implementer.javascript.JavaScriptContext
Defines the set of tags that are considered part of the "Control" in a MVC design. The control layer in this case is javascript that is run in the user's web browser, not when the source files are transformed during Tagneto compilation. Use the view tags for that case. In other words, the javascript execution context for the script that are used for these tags is "run time" in the user's browser, instead of "compile time" on the developer/build machine that runs Tagneto.

function

classname: org.tagnetic.tagneto.tags.control.Function

Defines a javascript function. The HTML content in the body of this tag will be javascript-escaped into strings, and the string of HTML is the return value of this function. Example:

<ctrl:function name="getHelloWorld" parameters="name, planet"> <b>Hello &ctrl:out-value:planet;, this is <ctrl:out value="name/>.</b> </ctrl:function>

This ctrl:function uses some variations of the ctrl:out tag. This ctrl:function would be translated into a Javascript function that conceptually does the following (the actual implementation is a bit more complex):

function getHelloWorld(name, planet) { return '<b>Hello ' + planet + ', this is ' + name + .</b>'; }

Since this tag generates a javascript function, be sure to put the ctrl:function tag inside a <script> tag, if the ctrl:function tag is used in an HTML file. If the ctrl:function is used in a stand-alone .js file, then the <script> tag is not needed. Basically, follow the normal rules for where a javascript function can be defined.

name REQUIRED

The name of the javascript function to generate.
  • property: name
  • default:

params

The parameters the function accepts. As in javascript, it should be a comma-separated list. See above example.
  • property: parameters
  • default:

out

classname: org.tagnetic.tagneto.tags.control.Out
Returns the value of a script variable. If that value is null, it will return the body of the tag. It should only be used as a child of the ctrl:function tag. Example:

<ctrl:function name="getColorTableCell" parameters="color"> <td><ctrl:out value="name>blue</ctrl:out></td> </ctrl:function>

This ctrl:function would be translated into a Javascript function that conceptually does the following (the actual implementation is a bit more complex):

function getColorTableCell(color) { return '<td>' + (color != null ? color : 'blue') + '</td>'; }

value REQUIRED

The script value to use in the escaped HTML output.
  • property: value
  • default:

stmt

classname: org.tagnetic.tagneto.tags.control.Statement
Used to section off a block of script inside a ctrl:function tag. It basically means the body of the tag will not be escaped like a javascript string and added to the result string. Extensive example that also shows how the ctrl:brace tag:

<ctrl:function name="getLoopContent"> <ctrl:stmt>var myCount = 10;</ctrl:stmt> <ctrl:stmt>for (var i = 0; i < myCount; i++)</ctrl:stmt> <ctrl:brace> <p> <ctrl:stmt>if (i == 0)</ctrl:stmt> <ctrl:brace> <h1><ctrl:out value="i"/></h1> </ctrl:brace> <ctrl:stmt>else</ctrl:stmt> <ctrl:brace> <b><ctrl:out value="i"/></b> </ctrl:brace> </p> </ctrl:brace> </ctrl:function>

If this function was then called by javascript that used the return value of this function to update the page, the resulting HTML would look something like this:

<h1>0</h1> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b>

brace

classname: org.tagnetic.tagneto.tags.control.Brace
Used to wrap a section of code in javascript braces. Only use inside ctrl:function tags. Used in conjunction with ctrl:stmt tags. Since just the javscript statement (like an if() statement) is used in the body of a ctrl:stmt tag, the brace tag is used to indicate which block of other statements and escaped HTML goes with the preceding ctrl:stmt tag. See ctrl:stmt for an example.

jsout

classname: org.tagnetic.tagneto.tags.control.JsOut
Used to write out the the result of some javascript. This tag SHOULD NOT be used inside a ctrl:function tag, and this tag SHOULD NOT be a child of a <script> tag. It should only be used inside the page's HTML. The body of this tag is wrapped in a document.write(). This example:

<html> <head> <script type="text/javascript"> var firstName = 'John'; </script> </head> <body> Hello <ctrl:jsOut>firstName</ctrl:jsOut>. </body> </html>

results in the following HTML:

<html> <head> <script type="text/javascript"> var firstName = 'John'; </script> </head> <body> Hello <script type="text/javascript"> document.write(firstName); </script>. </body> </html>

Be careful with this tag. All script variables referenced in this tag's body should already be defined in the page before the document.write() stetement is reached. The document.write() statement will be executed as soon as the browser parses it. It won't wait until the document is fully loaded.

listen

classname: org.tagnetic.tagneto.tags.control.Listen

This tag will bind some javascript an HTML element as an event listener. This tag does not have to be a child of a script tag. It can occur anywhere in the source. This tag will automatically insert a post file filter that will inject the event handling in the correct place.

A listener attribute can be used to specify the name of a javascript function to call as the event listener. If no listener attribute is specified, then the body of this tag will be treated as the javascript to be treated as the listener. This tag will create a javascript function to encapsulate the javascript in the tag body. The name will take the format of target_eventN, where target and event are the attribute values for the respective tag attributes. N refers to an integer number. If there are many listener tags that are registering for the same event on the same target, the N number is used to uniquely identify them. For instance:

<ctrl:listen target="myButton" event="onclick"> alert('Button Clicked'); </ctrl:listen>

Would generate the following javascript function:

function myButton_onclick1() { alert('Button Clicked'); }

The tag will then register the function as an event listener on the target. As indicated above, multiple listeners for an event on a target is allowed.

There are three types of event binding this tag supports:

      element: The listener's function name will be inserted inline in the HTML. If there is an existing attribute, the tag will add it after the existing value. Simple example:

      <html> <head> <ctrl:listen target="myButton" event="onclick" binding="element"> alert('Button Clicked'); </ctrl:listen> </head> <body> <button id="myButton"></button> </body> </html>

      The HTML page result:

      <html> <head> </head> <body> <button id="myButton" onclick="myButton_onclick1()"></button> <script type="text/javascript"> function myButton_onclick1() { alert('Button Clicked'); } </script> </body> </html>

      script: REQUIRES Tagneto's Ctrl.js file (or the javascript functions defined in that file) to be used. That file should be included as one of the first elements in the HEAD area of the HTML.

      This binding type binds the listener to the element's event at the end of the HTML. Does not modify the element's HTML, but a script element is inserted right before the </body> tag. This means the script binding should occur before the page is fully loaded, but after all of the HTML elements are defined. This binding type is useful if the onload event for the page will not fire for a little while because there are lots of other assets (images, iframe content) that need to load first. Example:

      <html> <head> <script type="text/javascript" src="Ctrl.js"></script> <ctrl:listen target="myButton" event="onclick" binding="script"> alert('Button Clicked'); </ctrl:listen> </head> <body> <button id="myButton"></button> </body> </html>

      The HTML page result:

      <html> <head> <script type="text/javascript" src="Ctrl.js"></script> </head> <body> <button id="myButton"></button> <script type="text/javascript"> function myButton_onclick1() { alert('Button Clicked'); } </script> <script type="text/javascript"> Ctrl.listenToId('myButton', 'onclick', myButton_onclick1); </script> </body> </html>

      scriptonload: REQUIRES Tagneto's Ctrl.js file (or the javascript functions defined in that file) to be used. That file should be included as one of the first elements in the HEAD area of the HTML.

      This binding type binds the listener to the element's event when the page's onload event has fired. Does not modify the element's HTML, but script elements are inserted right before the </head> and </body> tags. This binding type is useful if it is best to wait for the page to load before the event should be handled. Example:

      <html> <head> <script type="text/javascript" src="Ctrl.js"></script> <ctrl:listen target="myButton" event="onclick" binding="scriptonload"> alert('Button Clicked'); </ctrl:listen> </head> <body> <button id="myButton"></button> </body> </html>

      The HTML page result:

      <html> <head> <script type="text/javascript" src="Ctrl.js"></script> <script type="text/javascript"> function ___bindEventListeners() { Ctrl.listenToId('myButton', 'onclick', myButton_onclick1); } Ctrl.listenToWindow('load', ___bindEventListeners); </script> </head> <body> <button id="myButton"></button> <script type="text/javascript"> function myButton_onclick1() { alert('Button Clicked'); } </script> </body> </html>

target REQUIRED

The DOM element ID to bind the event listener with. There is one reserved value for this attribute, window. If window is used as the target, then the event listener will be bound to the correponding event on the window object (or <body> or <frameset> tag, if the binding type is element.
  • property: target
  • default:

event REQUIRED

The event name. The "on" prefix is optional. For instance, "onload" or "load" are both valid values for the attribute.
  • property: event
  • default:

binding

The type of binding to use. Valid values are:
  • element
  • script
  • scriptonload
See above for examples of usage.
  • property: binding
  • default: element

listener

The name of the javascript function that will execute when the event is triggered. If this attribute is not specified, then the body of the tag will be used as a function body, and a function name will be generated.
  • property: listener
  • default:
Copyright © 2005 tagnetic.org.