Location: PHPKode > scripts > Siviglia Templating > siviglia-templates/Manual/Manual.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <style type="text/css">
        body {font-family:Calibri;
            line-height: 1.5em;
            background-color: white;
            color: black;}

        .example {
            margin-bottom:15px;
            clear:both
         }
         h1 {
             border-bottom: 3px solid black;
             padding: 10px;
             background-color: blue;
             color: white;
         }
        
        .template, .usedWidgets, .result,.generated {
            color: black;
            background-color: #EEE;
            border: 1px solid black;
            margin-right: 20px;
          
            font-weight: bold;
            margin-top:10px;
            margin-bottom:10px;
         }
        .starttag {color:red;font-weight:bold}
        .tagcontents {color:blue;font-weight:bold}  
        .result,.generated {
            margin-top:5px;
            border:1px solid black;
            background-color:white;
            width:500px;
         }
        .resultCode {padding:10px}
        .widget 
            {
            margin:2px;
            border:1px solid black
        }
        p {
            padding:3px;
            margin:0px;
            background-color:#A0A0A0;
            font-weight:bold;
            font-size:16px
         }
        .widget p {background-color:#C0C0C0}
        .firstRow , .secondRow {clear:both}
        .comment {margin-bottom:20px}
        

        .bolder,.bolder2 {font-size:14px;font-weight:bolder;}
        
        </style>
    </head>                                              
 <body style="margin:10px;padding:10px">
 <h1>Siviglia Templating System (v 0.99b)</h1>

 The Siviglia Templating System is the template engine used by the Siviglia Framework (work in process).<br>
 You can find more information on this class, at <a href="http://xphperiments.blogspot.com/">my php development blog</a>.<br>
 <br>
 It was designed with the following goals in mind:
 <ul>
     <li><b>Intuitive</b>: It's syntax should be very intuitive.It should be usable without technical  knowledge (specially, for content creators)</li>
     <li><b>Reusable</b>: Templates should be composed of smaller bits ("widgets") ,which, in turn may be composed of other widgets.Those widgets may be reusable.</li> 
     <li><b>No need for "templating languages"</b>: Templates and widgets may use php freely, without needing of special template languages.</li>
     <li><b>Different levels of abstraction</b>: From the website structure, to the smallest boxes, should be expressed by templates.</li>
     <li><b>Cacheable</b>: Templates should generate code, which may be cached</li>
     <li><b>Output depending on platform</b>:Given a template, and using different widget resolution paths,code for different platforms may be generated.</li>
     <li><b>Extensible</b>: Using plugins, special actions can be taken.This distribution includes plugins to handle localization,css and javascript code.</li>
 </ul>

 The Siviglia Templating System is based in <b>widgets</b>, used from a <b>template</b>.Widgets are bits of reusable code.<br>
 Templates are the collection of widgets needed to compose a certain page.<br>
 But, both of them are just plain php files.In any of these you can use php and html as you would in a regular .php file.

 <br><br>
 <div class="example">
     <h1>Setup</h1>
     Adding the engine to your application is easy.
     You will need:
     <ul>
         <li>Define the constant <b>PROJECTPATH</b> to point to your project root folder.</li>
         <li>Define the constant <b>SIVIGLIA_PATH</b> to point to the folder where you've installed this class.</li>
         <li>Create folder(s) to store widgets.</li>
         <li>Initialize the class, specifying the widget folder paths, and plugin initialization options</li>
         <li>Specify the template to parse</li>
     </ul>
     Here's an example:

     <div class="template">
        <pre>        
         &lt;?php
            define(PROJECTPATH,getcwd());
            define(SIVIGLIA_PATH,realpath(getcwd()."/templating")."/");
            include_once(SIVIGLIA_PATH."TemplateParser2.php");
            include_once(SIVIGLIA_PATH."TemplateHTMLParser.php");

            /* First, we create a HTML generator */
            $oLParser=new CLayoutHTMLParserManager();

            /* Note: widgetPath is always relative to PROJECTPATH.You can add as many paths as needed. */
            $widgetPath=array("/tests/widgets/");

            /* The parser is created, setting it's output as html, specifying the widget path, and initializing the @L plugin to "en" */
            $oManager=new CLayoutManager("html",$widgetPath,array("L"=&gt;array("lang"=&gt;"en")));

            /* Here's the definition of the template we want to process */
            $definition=array("TEMPLATE"=&gt;PROJECTPATH."/templates/FullPage.html");

            /* The template is rendered, using the HTML generator, and asking to also output the result, instead simply returning it */
            $oManager-&gt;renderLayout($definition,$oLParser,true);  
         ?&gt;
         </pre>
     </div>
     <div style="clear:both">
     
     </div>     
 </div>
 <br>
 
 
<div class="example"><h1>Hello world</h1><div class="comment">This is our HelloWorld template: <div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre><span class="starttag">[*</span><span class="tagcontents">B</span><span class="starttag">]</span>Hello World<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br>
                         This template uses the <b>B</b> widget, to boldify whatever is specified between the widget start [*B] and it's matching end tag [#]
                         <br>The B widget is specified in a file named 'B.wid', located in a folder specified in the widget path.<br><br>
                         The content of that file is simply:
                         <div class="widget"><p>B (File: widgets/B.wid)</p><div class="widgetCode"><pre>&lt;b&gt;<span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span>&lt;/b&gt;
</pre></div></div>
                         
                         The tag [_*], means 'whatever the template contained within this tag'.The tag, in this case, is B.
                         The upper-level tag for any widget, is its file name (without extension).<br><br>
                         <div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode"><b>Hello World</b>

</div></div><div style="clear:both"></div><br>                        
                        </div></div></div><div class="example"><h1>Multilevel widgets</h1><div class="comment">The previous widget, had just one possible content.But widgets can specify a whole structure.<br>
                         For example, a typical "box" in a html page, has a <b>title</b> component, and a <b>content</b> component.<br>
                         So, first we create a template like this one: <div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre><span class="starttag">[*</span><span class="tagcontents">BOX</span><span class="starttag">]</span>
   <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Box Title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
   <span class="starttag">[_</span><span class="tagcontents">CONTENTS</span><span class="starttag">]</span>Box Contents<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br>
                         There you can see the start of the widget , <b>[*BOX]</b> and each one of its subtags.Subcomponents of a widget are specified using the <b>[_</b> tag.
                         Now, the BOX widget should be created somewhere in the widget path, in a file named 'BOX.wid':<br>
                         <div class="widget"><p>BOX (File: widgets/BOX.wid)</p><div class="widgetCode"><pre>&lt;div style="background-color:green;border:1px solid #018e08;width:200px"&gt;
    <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>&lt;div style="padding:3px;color:white;font-size:18px"&gt;<span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span>&lt;/div&gt;<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
    <span class="starttag">[_</span><span class="tagcontents">CONTENTS</span><span class="starttag">]</span>&lt;div style="background-color:#c3fac6;padding:3px"&gt;<span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span>&lt;/div&gt;<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
&lt;/div&gt;
</pre></div></div>

                         The meaning of the lines above,is:<br>
                         <ul><li>When a BOX widget is used from a template, first, open a div.</li>
                         <li>For each [_TITLE] present in the template, open a div, and add as contents of that div, whatever the template contains inside the [_TITLE] tag.</li>
                         <li>For each [_CONTENTS] present in the template, open a div, and add as contents of that div, whatever the template contains inside the [_CONTENTS] tag.</li>
                         <li>Finally, close the outer div</li>
                         </ul><br>
                         The final result is:<br>
                         <div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode"><div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">Box Title</div>
    <div style="background-color:#c3fac6;padding:3px">Box Contents</div>
</div>

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

                         A few rules to understand about widget subcomponents:
                         <ul>
                            <li>A subcomponent is rendered as many times as it's specified in the <b>template</b>.That ranges from 0 to n.Currently, there's no way to specify if a subcomponent is required,or how many times it can appear in the template.</li>
                            <li>A subcomponent is rendered in <b>widget</b> order, not in template order.This means that the [_TITLE] will be rendered before the [_CONTENT], no matter the order specified in the template.</li>
                            <li>Anything that has subcomponents (a widget, or a subcomponent), doesnt have a value of its own.So, a widget file, or a subcomponent of it, either has subcomponents, or has a [_*] tag.</li>
                            <li>Similarly, when a template uses anything that has subcomponents, only those subcomponents should be used.This means that, if you write:
                                <div><pre>             [*BOX]
                  &lt;?php //some php code ?&gt; &lt;---- This will be lost.
                  [_TITLE]..[#]
                  &lt;div ...&gt;                &lt;---- This will be lost.
                  [_CONTENTS]..[#]  
                  ....                     &lt;---- This will be lost.
             [#]
                            </pre></div>
                          </li>
                         </ul>                                                  
                         And, at this point, almost all components of the template engine have been presented: the [* , [_ and [_*] tags.<br>
                         This is a great moment to stop reading, doing a few tests with what you've seen until now, and then keep reading, as understanding
                         what has been presented so far will be enough to easily grasp all the rest.
             </div></div></div><div class="example"><h1>Nesting widgets (template side)</h1><div class="comment">The content of a leaf subcomponent (ie, these that have no child subcomponents), could be html code, php code, 
             or another widget.<br>This means, you can nest widgets in the template:<div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre><span class="starttag">[*</span><span class="tagcontents">BOX</span><span class="starttag">]</span>
   <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Box Title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
   <span class="starttag">[_</span><span class="tagcontents">CONTENTS</span><span class="starttag">]</span>   
            Box Contents.
            But you can use widgets inside widgets, too:
                <span class="starttag">[*</span><span class="tagcontents">BOX</span><span class="starttag">]</span>
                    <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Inner Box<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                    <span class="starttag">[_</span><span class="tagcontents">CONTENTS</span><span class="starttag">]</span>
                        Contents of the inner box
                    <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
            
            <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br> As you see, there's a BOX widget nested in the CONTENTS subcomponent of an outer BOX widget.<div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode"><div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">Box Title</div>
    <div style="background-color:#c3fac6;padding:3px">   
            Box Contents.
            But you can use widgets inside widgets, too:
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">Inner Box</div>
    <div style="background-color:#c3fac6;padding:3px">
                        Contents of the inner box
                    </div>
</div>

            
            </div>
</div>

</div></div><div style="clear:both"></div><br></div></div></div><div class="example"><h1>Nesting widgets (widget side)</h1><div class="comment">But widgets can be nested from other widgets.Let's start with the template:<div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre><span class="starttag">[*</span><span class="tagcontents">NEWSBOX</span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Latest news!<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>First title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">CONTENT</span><span class="starttag">]</span>First news contents<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Second title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">CONTENT</span><span class="starttag">]</span>Second news contents<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Third title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">CONTENT</span><span class="starttag">]</span>Third news contents<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>

<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br><br>By looking at that template, we can see that the NewsBox object has a TITLE,and a NEWS component.A NEWS component has a TITLE and a CONTENT.<br>
                         Now you can start to see how templates specify <b>what</b> to render, but not <b>how</b> to render it, creating several isolated layers on the page rendering process.<br>
              We will be rendering it using the following widget:<div class="widget"><p>NewsBox (File: widgets/NewsBox.wid)</p><div class="widgetCode"><pre>&lt;div style="padding-left:5px;width:625px;border:1px solid black;background-color:orange;"&gt;
   
  <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span><span class="starttag">[*</span><span class="tagcontents">:SIMPLETITLE</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
  &lt;div&gt;
       <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
           &lt;div style="float:left;margin-right:5px"&gt;
                <span class="starttag">[*</span><span class="tagcontents">:BOX</span><span class="starttag">]</span>
                     <span class="starttag">[_</span><span class="tagcontents">:TITLE</span><span class="starttag">]</span>
                        <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                    <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                    <span class="starttag">[_</span><span class="tagcontents">:CONTENTS</span><span class="starttag">]</span>
                        <span class="starttag">[_</span><span class="tagcontents">CONTENT</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                    <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
           &lt;/div&gt;
       <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
       &lt;div style="clear:both"&gt;&lt;/div&gt;
       &lt;br&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre></div></div>

              In this case, the widget acts as if it were a template.So all the rules mentioned above, apply.Specially, when mixing subcomponents.<br>
              The NewsBox TITLE subcomponent, will be rendered using the SIMPLETITLE widget.You can see that when a widget uses another widget, the tags of the used subwidgets have the added character <b>:</b>.<br><br>
              Each of the NewsBox NEWS subcomponent, will be rendered using BOX widgets.To do that, the NEWS subcomponent specifies that its subcomponents TITLE and CONTENTS must be rendered inside the TITLE and CONTENTS of the BOX widget.
              <br>
              Also, note how the template uses the NEWS subcomponent three times.
              
              The SIMPLETITLE widget is just:
              <div class="widget"><p>SIMPLETITLE (File: widgets/SIMPLETITLE.wid)</p><div class="widgetCode"><pre>&lt;h2&gt;<span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span>&lt;/h2&gt;
</pre></div></div><br>
              
              Here is the result:<div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode"><div style="padding-left:5px;width:625px;border:1px solid black;background-color:orange;">
   
  <h2>Latest news!</h2>

  <div>
       
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        First title
                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        First news contents
                    </div>
</div>

           </div>
       
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Second title
                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Second news contents
                    </div>
</div>

           </div>
       
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Third title
                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Third news contents
                    </div>
</div>

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

</div></div><div style="clear:both"></div><br>
             </div></div></div><div class="example"><h1>Omitting subcomponents.</h1><div class="comment">We've seen the effect of repeating a subcomponent.In this template, we will omit the TITLE tag in our previous example<div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre><span class="starttag">[*</span><span class="tagcontents">NEWSBOX</span><span class="starttag">]</span>        
        <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>First title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">CONTENT</span><span class="starttag">]</span>First news contents<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Second title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">CONTENT</span><span class="starttag">]</span>Second news contents<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Third title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">CONTENT</span><span class="starttag">]</span>Third news contents<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>

<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br><div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode"><div style="padding-left:5px;width:625px;border:1px solid black;background-color:orange;">
   
  
  <div>
       
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        First title
                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        First news contents
                    </div>
</div>

           </div>
       
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Second title
                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Second news contents
                    </div>
</div>

           </div>
       
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Third title
                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Third news contents
                    </div>
</div>

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

</div></div><div style="clear:both"></div><br>Currently, there's no way to indicate if a certain subcomponent is required or optional, or the number of times it can be repeated.<br>
                         Omitting a subcomponent in a template, means that nothing inside that subcomponent in the widget file, will be included.And that also includes any php code that may exist inside that subcomponent.
             </div></div></div><div class="example"><h1>Using PHP in the template</h1><div class="comment">Using PHP in the template is simple:<div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre><span class="starttag">[*</span><span class="tagcontents">NEWSBOX</span><span class="starttag">]</span>        
        <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>&lt;?php echo "Title Written from php";?&gt;<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>&lt;?php echo "First title";?&gt;<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">CONTENT</span><span class="starttag">]</span>First news contents<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Second title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">CONTENT</span><span class="starttag">]</span>Second news contents<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Third title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[_</span><span class="tagcontents">CONTENT</span><span class="starttag">]</span>Third news contents<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>

<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br><div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode"><div style="padding-left:5px;width:625px;border:1px solid black;background-color:orange;">
   
  <h2>Title Written from php</h2>

  <div>
       
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        First title                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        First news contents
                    </div>
</div>

           </div>
       
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Second title
                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Second news contents
                    </div>
</div>

           </div>
       
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Third title
                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Third news contents
                    </div>
</div>

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

</div></div><div style="clear:both"></div><br></div></div></div><div class="example"><h1>Widget parameters</h1><div class="comment">Widgets and subcomponents may have parameters.Let's first see an example.
                        This is the template: notice how parameters are passed:<div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre>&lt;?php
   $news1Title="First Title";
   $news1Contents="First Contents";
   $news2Title="Second Title";
   $news2Contents="Second contents";
   $news3Title="Third Title";
   $news3Contents="Third Contents";
?&gt;  
<span class="starttag">[*</span><span class="tagcontents">NEWSBOX2</span><span class="starttag">]</span>        
        <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>&lt;?php echo "Set from parameters";?&gt;<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS({"title":"$news1Title","contents":"$news1Contents"})</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS({"title":"$news2Title","contents":"$news2Contents"})</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS({"title":"$news3Title","contents":"$news3Contents"})</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br>Now, see how the widget simply uses these parameters:<div class="widget"><p>NEWSBOX2 (File: widgets/NEWSBOX2.wid)</p><div class="widgetCode"><pre>&lt;div style="padding-left:5px;width:625px;border:1px solid black;background-color:orange;"&gt;
   
  <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span><span class="starttag">[*</span><span class="tagcontents">:SIMPLETITLE</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
  &lt;div&gt;
       <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
           &lt;div style="float:left;margin-right:5px"&gt;
                <span class="starttag">[*</span><span class="tagcontents">:BOX</span><span class="starttag">]</span>
                     <span class="starttag">[_</span><span class="tagcontents">:TITLE</span><span class="starttag">]</span>
                        &lt;?php echo $title;?&gt;
                    <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                    <span class="starttag">[_</span><span class="tagcontents">:CONTENTS</span><span class="starttag">]</span>
                        &lt;?php echo $contents;?&gt;
                    <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
           &lt;/div&gt;
       <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
       &lt;div style="clear:both"&gt;&lt;/div&gt;
       &lt;br&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre></div></div><div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode">  
<div style="padding-left:5px;width:625px;border:1px solid black;background-color:orange;">
   
  <h2>Set from parameters</h2>

  <div>
                  <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        First Title                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        First Contents                    </div>
</div>

           </div>
                  <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Second Title                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Second contents                    </div>
</div>

           </div>
                  <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Third Title                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Third Contents                    </div>
</div>

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

</div></div><div style="clear:both"></div><br></div></div></div><div class="example"><h1>Widget Parameters (II)</h1><div class="comment">You can also use fixed values as parameter values:<div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre>&lt;?php
   $news2Title="Second Title";
   $news2Contents="Second contents";
   $news3Title="Third Title";
   $news3Contents="Third Contents";
?&gt;  
<span class="starttag">[*</span><span class="tagcontents">NEWSBOX2</span><span class="starttag">]</span>        
        <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>&lt;?php echo "Set from parameters";?&gt;<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS({"title":"Set Inline","contents":"Contents set inline"})</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS({"title":"$news2Title","contents":"$news2Contents"})</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">NEWS({"title":"$news3Title","contents":"$news3Contents"})</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br><div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode">  
<div style="padding-left:5px;width:625px;border:1px solid black;background-color:orange;">
   
  <h2>Set from parameters</h2>

  <div>
                  <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Set Inline                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Contents set inline                    </div>
</div>

           </div>
                  <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Second Title                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Second contents                    </div>
</div>

           </div>
                  <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Third Title                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Third Contents                    </div>
</div>

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

</div></div><div style="clear:both"></div><br></div></div></div><div class="example"><h1>Iteration</h1><div class="comment">The recommended way to do iteration, is to use a source and iterator widget variables.This variable is passed by reference, as you can see in the template:<div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre>&lt;?php
   $news=array(
       array("TITLE"=&gt;"First Title","CONTENTS"=&gt;"First Contents"),
       array("TITLE"=&gt;"Second Title","CONTENTS"=&gt;"Second contents"),
       array("TITLE"=&gt;"Third Title","CONTENTS"=&gt;"Third Contents")
       );
?&gt;  
<span class="starttag">[*</span><span class="tagcontents">NEWSBOX3({"source":"$news","iterator":"&amp;$iterator"})</span><span class="starttag">]</span>        
        <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Iterating over an array<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>        
        <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
            <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>&lt;?php echo $iterator["TITLE"];?&gt;<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
            <span class="starttag">[_</span><span class="tagcontents">CONTENTS</span><span class="starttag">]</span>&lt;?php echo $iterator["CONTENTS"];?&gt;<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br>.The widget implementation is: <div class="widget"><p>NEWSBOX3 (File: widgets/NEWSBOX3.wid)</p><div class="widgetCode"><pre>&lt;div style="padding-left:5px;width:625px;border:1px solid black;background-color:orange;"&gt;
   
  <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span><span class="starttag">[*</span><span class="tagcontents">:SIMPLETITLE</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
  &lt;div&gt;
      &lt;?php for($k=0;$k&lt;count($source);$k++)
      {
          $iterator=$source[$k];
      ?&gt;
       <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
           &lt;div style="float:left;margin-right:5px"&gt;
                <span class="starttag">[*</span><span class="tagcontents">:BOX</span><span class="starttag">]</span>
                     <span class="starttag">[_</span><span class="tagcontents">:TITLE</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                     <span class="starttag">[_</span><span class="tagcontents">:CONTENTS</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
           &lt;/div&gt;
       <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
       &lt;?php 
      }
       ?&gt;
       &lt;div style="clear:both"&gt;&lt;/div&gt;
       &lt;br&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre></div></div><br>
              In this case, the template doesnt specify several NEWS subcomponents.It's the widget the one that chooses to iterate over the subcomponent definition.
             The widget iterates over the source parameter,and sets the iterator with the value of the current row.As it has been passed by reference, the iterator variable in the widget is linked to the iterator variable in the template.<br>
             <div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode">  
<div style="padding-left:5px;width:625px;border:1px solid black;background-color:orange;">
   
  <h2>Iterating over an array</h2>

  <div>
             
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">First Title</div>
    <div style="background-color:#c3fac6;padding:3px">First Title</div>
</div>

           </div>
       
              
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">Second Title</div>
    <div style="background-color:#c3fac6;padding:3px">Second Title</div>
</div>

           </div>
       
              
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">Third Title</div>
    <div style="background-color:#c3fac6;padding:3px">Third Title</div>
</div>

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

</div></div><div style="clear:both"></div><br></div></div></div><div class="example"><h1>Iteration (II) and conditional subcomponents</h1><div class="comment">Suppose that, in some cases, you dont want to render a certain subcomponent.That would need an "if" sentence surrounding the subcomponent.<br>
                         Something like this:<div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre>&lt;?php $includeTitle=true; ?&gt;
<span class="starttag">[*</span><span class="tagcontents">NEWSBOX3</span><span class="starttag">]</span>
    &lt;?php if($includeTitle){ ?&gt;
          <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>This is the title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
    &lt;?php } ?&gt;
          &lt;... Rest of the widget...&gt;
<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span></pre></div></div><br><div style="clear:both"></div>The problem is that this would not work.Remeber what can be contained inside a widget or subcomponents?Just subcomponent content, if the subcomponent has no children, or child subcomponents in other case.<br>
                           The php code is outside the <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span> subcomponent, and, when the template is parsed, the php code will not be included in the output.<br><br>
    To solve this, you just have to move the php code <b>inside</b> the subcomponent tags:<div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre>&lt;?php
   $showTitle=true;
   $news=array(
       array("TITLE"=&gt;"First Title","CONTENTS"=&gt;"First Contents"),
       array("TITLE"=&gt;"Second Title","CONTENTS"=&gt;"Second contents"),
       array("TITLE"=&gt;"Third Title","CONTENTS"=&gt;"Third Contents")
       );
?&gt;  
<span class="starttag">[*</span><span class="tagcontents">NEWSBOX2</span><span class="starttag">]</span>        
        <span class="starttag">[_</span><span class="tagcontents">TITLE&lt;?php if($showTitle){?&gt;</span><span class="starttag">]</span>Showing Title<span class="starttag">[#</span><span class="tagcontents">&lt;?php }?&gt;</span><span class="starttag">]</span>                         
        <span class="starttag">[_</span><span class="tagcontents">NEWS({"title":"$t","contents":"$c"})&lt;?php foreach($news as $curNews){$t=$curNews["TITLE"];$c=$curNews["CONTENTS"]?&gt;</span><span class="starttag">]</span>
        <span class="starttag">[#</span><span class="tagcontents">&lt;?php }?&gt;</span><span class="starttag">]</span>
<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br>
    Notice how both the open and close subcomponent tags, are used to insert the php code.<br>
    Also, how this syntax allows iteration as well.Iteration is done as parameter passing, but this time, the value of those parameters are calculated in the code inside the subcomponent tag.<br><br>
    Code inserted in this way, cant span outside the line where the widget or subcomponent tag is used;<br><br>
                                 This is the widget implementation:
    <div class="widget"><p>NEWSBOX2 (File: widgets/NEWSBOX2.wid)</p><div class="widgetCode"><pre>&lt;div style="padding-left:5px;width:625px;border:1px solid black;background-color:orange;"&gt;
   
  <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span><span class="starttag">[*</span><span class="tagcontents">:SIMPLETITLE</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
  &lt;div&gt;
       <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
           &lt;div style="float:left;margin-right:5px"&gt;
                <span class="starttag">[*</span><span class="tagcontents">:BOX</span><span class="starttag">]</span>
                     <span class="starttag">[_</span><span class="tagcontents">:TITLE</span><span class="starttag">]</span>
                        &lt;?php echo $title;?&gt;
                    <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                    <span class="starttag">[_</span><span class="tagcontents">:CONTENTS</span><span class="starttag">]</span>
                        &lt;?php echo $contents;?&gt;
                    <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
           &lt;/div&gt;
       <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
       &lt;div style="clear:both"&gt;&lt;/div&gt;
       &lt;br&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre></div></div>
    <br>Notice how the widget implementation is not special.It's , in fact, the same used when we presented widgets parameters.
    <div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode">  
<div style="padding-left:5px;width:625px;border:1px solid black;background-color:orange;">
   
  <h2>Showing Title</h2>
  <div>
                  <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        First Title                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        First Contents                    </div>
</div>

           </div>
                  <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Second Title                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Second contents                    </div>
</div>

           </div>
                  <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Third Title                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Third Contents                    </div>
</div>

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

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

                                               
                                               </div></div></div><div class="example"><h1>Organizing your widgets</h1><div class="comment">You can store your widgets in subfolders of folders specified as widget paths.Then, add the subfolders as a prefix to the widget name:
                        <div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre><span class="starttag">[*</span><span class="tagcontents">/Containers/Boxes/BOX2</span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Box 2 title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">CONTENTS</span><span class="starttag">]</span>Box 2 contents<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br>
                        It's not important the content of those widgets, but to note that the BOX2 widget will be searched in the Container/Boxes folder inside the folders specified in the widget path.</div></div></div><div class="example"><h1>Putting it all together</h1><div class="comment">One of the key advantages of the Siviglia templating system is that it allows to build the user interface in several layers.<br>
                         The top layer is the template file.Each page of your website has it's own template.But this template doesn't handle any HTML code.Instead,
                         it should include classes (models, controllers) to get the data needed to render the page, and send it to appropiate widgets.<br>
                         So, you can begin writing templates using very high abstractions.For example: many pages shares the same  headers,footers,menus,etc.We can
                         call all this simply a <b>PAGE</b>,and what makes each page different, it's just the content.<br>
                         This is enough to allow us to write our template.We're using the same News widget:
                        <div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre><span class="starttag">[*</span><span class="tagcontents">PAGE</span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Latest news!<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">CONTENTS</span><span class="starttag">]</span>
                <span class="starttag">[*</span><span class="tagcontents">NEWSBOX</span><span class="starttag">]</span>
                     <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Latest news!<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                     <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
                        <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>First title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                        <span class="starttag">[_</span><span class="tagcontents">CONTENT</span><span class="starttag">]</span>First news contents<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                    <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                    <span class="starttag">[_</span><span class="tagcontents">NEWS</span><span class="starttag">]</span>
                        <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span>Second title<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                        <span class="starttag">[_</span><span class="tagcontents">CONTENT</span><span class="starttag">]</span>Second news contents<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
                    <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>                    
                <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br>
                         We're using the PAGE widget, and setting its contents to a NEWSBOX object.<br>
                         Does the PAGE widget include HTML code? No!:<div class="widget"><p>PAGE (File: widgets/PAGE.wid)</p><div class="widgetCode"><pre><span class="starttag">[*</span><span class="tagcontents">:LAYOUT</span><span class="starttag">]</span>
   <span class="starttag">[_</span><span class="tagcontents">:TITLE</span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
   <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>  
   <span class="starttag">[_</span><span class="tagcontents">:LEFTSIDEBAR</span><span class="starttag">]</span>
        Menu area
   <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
   <span class="starttag">[_</span><span class="tagcontents">:RIGHTSIDEBAR</span><span class="starttag">]</span>
        Widgets Area
   <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
   <span class="starttag">[_</span><span class="tagcontents">:CONTENT</span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">CONTENTS</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
   <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
   <span class="starttag">[_</span><span class="tagcontents">:FOOTER</span><span class="starttag">]</span>
        Footer Area
   <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div>
                         The PAGE widget is a <b>semantic</b> widget.When present in a template,its purpose is to represent the concept of a certain "web page", not how it
                         should be rendered.<br>
                         In turn, the PAGE widget file, redirects its conceptual components (title, contents) to a certain <b>renderer</b> widget, in this case, LAYOUT:
                         <div class="widget"><p>LAYOUT (File: widgets/LAYOUT.wid)</p><div class="widgetCode"><pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
&lt;style type="text/css"&gt;
/*-- style declarations ... */
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="maincontainer"&gt;

    &lt;div id="topsection"&gt;&lt;div class="innertube"&gt;<span class="starttag">[_</span><span class="tagcontents">TITLE</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>&lt;/div&gt;&lt;/div&gt;

    &lt;div id="contentwrapper"&gt;
    &lt;div id="contentcolumn"&gt;
    &lt;div class="innertube"&gt;<span class="starttag">[_</span><span class="tagcontents">CONTENT</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>&lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="leftcolumn"&gt;
    &lt;div class="innertube"&gt;<span class="starttag">[_</span><span class="tagcontents">LEFTSIDEBAR</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>&lt;/div&gt;

    &lt;/div&gt;

    &lt;div id="rightcolumn"&gt;
    &lt;div class="innertube"&gt;<span class="starttag">[_</span><span class="tagcontents">RIGHTSIDEBAR</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>&lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="footer"&gt;<span class="starttag">[_</span><span class="tagcontents">FOOTER</span><span class="starttag">]</span><span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span><span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>&lt;/div&gt;

    &lt;/div&gt;
    &lt;/body&gt;

&lt;/html&gt;
</pre></div></div>
                         This widget, LAYOUT, is a concrete implementation of an HTML layout.<br><br>
                         Suppose now that we want to change the whole site layout.The only file we'll need to modify, it's the PAGE widget, so it complies with the new LAYOUT widget.<br>
                         But all the pages on the site should remain the same, as, most probably, the "News" page, as defined in the previous template, shouldnt need any change.
                         <div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode"><!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>-->

<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>
<!-- </head>
<body>-->
    <div id="maincontainer">

    <div id="topsection"><div class="innertube">
        Latest news!
   </div></div>

    <div id="contentwrapper">
    <div id="contentcolumn">
    <div class="innertube">
        
                <div style="padding-left:5px;width:625px;border:1px solid black;background-color:orange;">
   
  <h2>Latest news!</h2>

  <div>
       
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        First title
                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        First news contents
                    </div>
</div>

           </div>
       
           <div style="float:left;margin-right:5px">
                <div style="background-color:green;border:1px solid #018e08;width:200px">
    <div style="padding:3px;color:white;font-size:18px">
                        Second title
                    </div>
    <div style="background-color:#c3fac6;padding:3px">
                        Second news contents
                    </div>
</div>

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

        
   </div>
    </div>
    </div>

    <div id="leftcolumn">
    <div class="innertube">
        Menu area
   </div>

    </div>

    <div id="rightcolumn">
    <div class="innertube">
        Widgets Area
   </div>
    </div>

    <div id="footer">
        Footer Area
   </div>

    </div>
<!--</body>

</html>-->


</div></div><div style="clear:both"></div><br></div></div></div><div class="example"><h1>Plugins</h1><div class="comment">Plugins are special classes that are able to process the template parsing tree at <b>parse</b> time.So, they
                              doesnt have access to variables,etc used by the php code present in the template.<br><br>
                              In a template, or widget, plugins are invoked using the <b>[@</b> tag.<br><br>
                             </div></div></div><div class="example"><h1>The Language (<b>@L</b>) plugin</h1><div class="comment">The language plugin is pretty straightforward to use.Just insert any text (including php code) inside the [@L] tag.
                  <div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre>&lt;?php
    $varText1="Variable text 1";
    $varText2="Variable text 2";
?&gt;

<span class="starttag">[@</span><span class="tagcontents">L</span><span class="starttag">]</span>Translate this!<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>&lt;br&gt;
<span class="starttag">[@</span><span class="tagcontents">L</span><span class="starttag">]</span>Inserting text with variables: &lt;?php echo $varText1;?&gt; and &lt;?php echo $varText2;?&gt;<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br>
                  If we go back to the class initialization, the following line initializes the L plugin, specifying for what language we're rendering the template:
                  <div class="template">
                    ....<br>
                    $oManager=new CLayoutManager("html",$widgetPath,array("L"=&gt;array("lang"=&gt;"en")));<br>
                    ...<br>
                  </div>
                  <div style="clear:both"></div>
                  So, when the previous template is rendered, the result is the following:
                  <div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode">
Translate this!<br>
Inserting text with variables:Variable text 1 and Variable text 2</div></div><div style="clear:both"></div><br>
                  But also, the plugin has created (or updated) the (PROJECTPATH)/lang/(language).txt file.Let's see its contents:
                  <div class="template">
                  <pre>translate this!::=::
inserting text with variables: {%1} and {%2}::=::
                  </pre>
                  </div>
                  <div style="clear:both"></div><br>
                  This file can be edited:
                  <div class="template">
                  <pre>translate this!::=::Static translation
inserting text with variables: {%1} and {%2}::=:: {%2} flipped {%1}
                  </pre>
                  </div><div style="clear:both"></div>
                  After editing the file, we need to <b>remove the cache file</b>.All the cache files are stored, by default, under the (PROJECTPATH)/cache directory.
                  For now, we'll just remove the whole cache folder.When the template is re-evaluated, it will render as:
                  <div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode">
Static translation<br>
Variable text 2 flipped Variable text 1</div></div><div style="clear:both"></div><br>
                  The reason why you need to remove the cache folder after editing the translations, will be clearer later in this documentation.<br><br>
                  But, what is important here, is that translations done in this way are resolved at <b>template parsing</b> time, not at <b>execution</b> time.
                  </div></div></div><div class="example"><h1>The @SCRIPT plugin</h1><div class="comment">The purpose of the SCRIPT plugin is to have both the presentation (html) and behaviour (js) code in the same file (simpler from a coding perspective),
                                     but, when the template is parsed, the javascript code will be stored in a separate file, possibly along with javascript code from other widgets.<br>
                                    This time, we will start showing the widget file:
                                    <div class="widget"><p>SAMPLEJS (File: widgets/SAMPLEJS.wid)</p><div class="widgetCode"><pre><span class="starttag">[@</span><span class="tagcontents">SCRIPT</span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">FILE</span><span class="starttag">]</span>widgetScripts<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">SRC</span><span class="starttag">]</span>
        function testOnOver(el)
        {
            el.style.backgroundColor='gray';
        }
        <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
&lt;div onmouseover="javascript:testOnOver(this)"&gt;<span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span>&lt;/div&gt;
</pre></div></div>
                                    Here you can see how the code and the target js file (where it'll be finally stored) are specified.<br><br>
                                    The target js file needs no extension, and it will be always stored in (PROJECTPATH)/scripts/widgets/(filename).js
                                    You need to load that script file from the template.A very simple template could be:
                                    <div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre>&lt;script src="scripts/widgets/widgetScripts.js"&gt;&lt;/script&gt;
<span class="starttag">[*</span><span class="tagcontents">SAMPLEJS</span><span class="starttag">]</span> Simple javascript event <span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br>
                                    Here is the result:
                                    <div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode"><script src="./Manual_files/widgetScripts.js"></script>

<div onmouseover="javascript:testOnOver(this)"> Simple javascript event </div>

</div></div><div style="clear:both"></div><br></div></div></div><div class="example"><h1>The @CSS plugin</h1><div class="comment">The purpose of the CSS plugin is similar to the SCRIPT plugin: keeping styles local to the current widget, inside the same file where the widget is defined.<br>
                                    The destination CSS file is specified with the FILE subcomponent, and the rest of the text is considered CSS rules.
                                    Here's the widget file:
                                    <div class="widget"><p>SAMPLECSS (File: widgets/SAMPLECSS.wid)</p><div class="widgetCode"><pre><span class="starttag">[@</span><span class="tagcontents">CSS</span><span class="starttag">]</span>
        <span class="starttag">[_</span><span class="tagcontents">FILE</span><span class="starttag">]</span>widgets<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
        .sampleClass {border:1px solid black;background-color:gray}
        
<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
&lt;div class="sampleClass"&gt;<span class="starttag">[_</span><span class="tagcontents">*</span><span class="starttag">]</span>&lt;/div&gt;
</pre></div></div>
                                    And here is the template using it:
                                    <div class="firstRow"><div class="template"><p>Template code</p><div class="templateCode"><pre>&lt;link rel="stylesheet" type="text/css" href="html/css/widgets.css"&gt;&lt;/link&gt;
<span class="starttag">[*</span><span class="tagcontents">SAMPLECSS</span><span class="starttag">]</span>This is the sample css template<span class="starttag">[#</span><span class="tagcontents"></span><span class="starttag">]</span>
</pre></div></div><div style="clear:both"></div><br>
                                    As you can see, the default location for CSS files is in (PROJECTPATH)/html/css/(file).css
                                    <div style="clear:both&gt;&lt;/div&gt;&lt;div class=" result"=""><p>Result</p><div class="resultCode"><link rel="stylesheet" type="text/css" href="./Manual_files/widgets.css">

<div class="sampleClass">This is the sample css template</div>

</div></div><div style="clear:both"></div><br></div></div></div><div class="example"><h1>Plugins revisited</h1><div class="comment">After reading about the CSS and the SCRIPT plugins, you can see why they exist:<br>
                        <ul>
                            <li>First, they keep everything related to a piece of html in the same file, and that's good to maintain the code.<br>
                                At the same time, CSS and SCRIPTs will be stored in js and css files, and that's good from the browser perspective.<br>
                                So, you have the best of both worlds :-).
                            </li>
                            <li>Widgets are self-contained, so they can be easily reused and shared, as in a single file, they have all they need to run: php, html, js and css.</li>
                        </ul></div></div><div class="example"><h1>The code generation</h1><div class="comment">
                                    The first time the template is parsed, its contents, and the contents of all the recursively included widgets, must be parsed and combined.This <br>
                                    may be slow with the current code.<br>
                                    Once the template has been fully parsed, the resulting php code is stored in a file under the (PROJECTPATH)cache folder.
                                    The cache has a separate folder for each language, so the same template rendered for different languages are saved in different cache files.<br>
                                    Also, the widgets used while parsing the template, are stored in a dependencies file.<br>
                                    The next time the template is rendered, it'll check the dependencies file, and see if any widget or the template is more recent than the cached php file.<br><br>
                                    If any of the widgets, or the template, changed since the cache file was created, the template will be reparsed.<br><br>
                                    In other case, it'll be simply included.<br><br>
                                    That's why , when the language files are edited, the template cache must be cleared: the language files, in this version, are not part of the template dependencies.<br>
                                    The same happens with widgets that cant be found.If, when a template is rendered, a certain widget is not found, the current version doesnt include it as a dependency.So, adding
                                    it later, will not cause the template to be regenerated.<br>
                                    Simply "touching" (re-saving) the template will also force a full re-parse.<br><br>
                                   </div></div><div class="example"><h1>Debugging widgets</h1><div class="comment">There are two kind of problems you can run into:
                                    <ul>
                                        <li>Parse-Time errors (problem with the widget syntax)</li>
                                        <li>Run-Time errors (problems with php code inside templates or widgets)</li>
                                    </ul>
                                    The Siviglia templating system can't,in its current version, give much information on Parse-Time errors:
                                    It will just print out the offending widget or template, but will not indicate in which line it has found the error.<br>
                                    Future versions will be able to give this information<br>.
                                    <br>
                                    As the parsing of templates and widgets generate a single php file, errors found in the "cache" php file should be mapped to
                                    a certain widget/template file and linenumber.Currently, the parser is unable to find this information, but there are plans to support it in future versions.</div></div><div class="example"><h1>About</h1><div class="comment">You can follow the development at the <a href="http://code.google.com/p/siviglia-templates/">Siviglia template engine for php</a> page in Google code.<br><br>
                                    Also, new insights and ideas about how to use this templating system may appear in my <a href="http://xphperiments.blogspot.com/">php blog</a>.<br><br>
                                    For any comments, please use these pages to contact me, or email me at dashiad - at - hotmail.com.</div></div>



</body></html>
Return current item: Siviglia Templating