Template Engine and TagsΒΆ

The template3d front-end is a experimental concept with high quality results. The current implementation requires Javascript to be inserted into base templates via the {% t3d_engine %} tag. There are many helper tags included for developer convenience. Included is a template tag and Javascript explanation.

Note

It is perfectly fine to use only the Javascript functions or a combination of both template tags and Javascript calls.

Template Tags:

  • {% t3d_engine %}
    • Inserts the Template3d Javascript engine into the template. Put this into the <head> tag of a first dimension template.
  • {% t3d_link “t3d_main” “Infor Page” template_name=”infor_page.html” %}
    • Couples a link to to a template and {% t3d %} tag. Parameters are single entry.
      t3d_link
      • Define a link to use with the {% t3d %} tag.
      “t3d_main”
      • The corresponding id of a {% t3d %} tag.
      “Infor Page”
      • The text to display as the link.
      template_name=”infor_page.html”
      • The name of the template to render. Does not include paths or slashes. Can omit the .html extension if desired.
  • {% t3d “t3d_id” “t3d_main” “css_class” “t3d_style” “html_tag” “div” %}
    • Parameters are used as space separated pairs. Will default to the above parameters if not set.
      t3d
      • Define a template area to populate with {% t3d_link %}.
      “t3d_id” “t3d_main”
      • The id of the {% t3d %} tag. This is used as the first parameter with {% t3d_link %}.
      “css_class” “custom_class”
      • The text to display as the link.
      “html_tag” “div”
      • Change the html tag, e.g. span, td, etc..

Javascript functionality: Template3d uses javascript for its optional front-end template loader. The template tags are mere wrappers to insert html and javascript into the templates. Here is what the template3d javascript engine looks like, and how it performs.

The minified template3d engine source code:

<script type="text/javascript" id="t3d_engine">function GetHttpRequest(){if(window.XMLHttpRequest)return new XMLHttpRequest;if(window.ActiveXObject)return new ActiveXObject("MsXml2.XmlHttp")}function load_template(e_vi,f_id){var b_el=document.getElementById(e_vi);b_el.innerHTML="";var c_st=f_id.split("\\n");for(x=0;x<c_st.length;x+=3)if(b_el.innerHTML+=c_st[x],c_st[x+2]){var d=c_st[x+1].split("="),h_he=document.getElementsByTagName("HEAD")[0],g_sc=document.createElement("script");for(a=0;a<d.length;a+=2)"undefined"==typeof d[a+1]&&(d[a+1]=""),g_sc[d[a]]=d[a+1];g_sc.text=c_st[x+2];h_he.appendChild(g_sc)}}function load_t3d(e_vi,f_id){var b_el=GetHttpRequest();b_el.onreadystatechange=function(){4==b_el.readyState&&(200==b_el.status||304==b_el.status?load_template(f_id,b_el.responseText):parent.location=e_vi)};b_el.open("GET",e_vi,!0);b_el.send(null)}</script>

The human friendly source:

function GetHttpRequest() {
    if ( window.XMLHttpRequest ) // Gecko
         return new XMLHttpRequest() ;
    else if ( window.ActiveXObject ) // IE
              return new ActiveXObject("MsXml2.XmlHttp") ;
                      } // Endo GetHttpRequest()


function load_template( t3d_id, source )  {

       var box_ele = document.getElementById(t3d_id);
       box_ele.innerHTML = "";
       var lines = source.split('\n');
       for ( x = 0; x < lines.length; x += 3 )
           {
             box_ele.innerHTML += lines[x];
             if ( lines[x+2] )
                {
                  var script_params = lines[x+1].split('=');
                  var oHead = document.getElementsByTagName('HEAD')[0];
                  var oScript = document.createElement("script");
                  for ( a = 0; a < script_params.length; a += 2 )
                      {
                        if ( typeof script_params[a+1] == "undefined" )
                             script_params[a+1] = ""
                        oScript[script_params[a]] = script_params[a+1]
                      }
                  oScript.text = lines[x+2];
                  oHead.appendChild(oScript);
                }//Endo if ( lines[x+2] )
           } //Endo for ( x = 0; x < lines.length; x += 3 )
}// Endo load_template( fileUrl, source )


function load_t3d( view, t3d_id ) {
var oXmlHttp = GetHttpRequest();
oXmlHttp.onreadystatechange = function() {
if ( oXmlHttp.readyState == 4 )
     if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 )
        {
          load_template(t3d_id, oXmlHttp.responseText );
          fade_template(t3d_id);
        }
     else
          parent.location=view
          // Redirect to hard url for de-buging
}//Endo oXmlHttp.OnReadyStateChange = function()
oXmlHttp.open('GET', view, true);
oXmlHttp.send(null);
} // Endo AjaxPage(sId, url)

</script>

The concept of this engine is simple.

onclick="load_t3d( view, t3d_id );"
  • Pass the view name or template name as the first argument to load_t3d( view, t3d_id )
  • The second argument is the id of the html tag where the template data is to be loaded.