Skip to content

Sqwidget Templating

Jump to bottom Edit New page
thegingerbloke edited this page Sep 16, 2011 · 1 revision

Templating

A widget's HTML file may optionally be templated, by including any number of HTML snippets that represent different views of the application's user interface (e.g. a lightbox, or pop-up). The templates can include simple JavaScript variables, to allow dynamic content that has been sourced, say, from external APIs or offline data storage.

Using Templating

Sqwidget provides templating capabilities. This example generates how we can execute javascript controller code when the widget is ready and we can render a template with template variables.

The embed code still looks similar:

<div data-sqwidget="src:templates.html"></div>

And the source file, templates.html contains multiple parts, including widget css, a default template, and some controller JavaScript:

<!DOCTYPE html>
<html>
    <head>
        <style>
            #cwidget {
                font-size:1.2em;
                font-family:sans-serif;
                color:#336;
            }
            #cwidget li {
                padding:0.5em;
                list-style:none;
                width:10em;
            }
            #cwidget .r {background-color:#fcc;}
            #cwidget .g {background-color:#cfc;}
            #cwidget .b {background-color:#ccf;}
            #cwidget .blk {background-color:#333; color:#fff;}
        </style>

        <script type="text/javascript">
            widget.ready( function () {
                // use a template: the document's body is the 'default'
                widget.setTemplate('default', {
                    className: "blk",
                    colour: "black"
                });
            });
        </script>
    </head>
    
    <body>
        <div id=cwidget>
            <strong>Colours</strong>
            <ul class=colours>
                <li class=r>red</li>
                <li class=g>green</li>
                <li class=b>blue</li>
                <li class={{className}}>{{colour}}</li>
            </ul>
        </div>
    </body>
</html>

We can add CSS specific to the widget in a <style> tag in the head, and add controller javascript in <script> tags in the head. The body is the default template. Let's look at this controller code in detail:

            widget.ready( function () {
                // use a template: the document's body is the 'default'
                widget.setTemplate('default', {
                    className: "blk",
                    colour: "black"
                });
            });

Here we call the widget.ready() method giving it a function to call once the widget is ready. Ready, here, means the DOM has loaded, jQuery and sqwidget are loaded, and everything is ready for the widget to do something. Calling widget.ready() stops sqwidget automatically rendering the default template (the body).

So, once the widget is ready, we are calling widget.setTemplate('default', {...}) which renders the default template -- the body -- with an object of parameters to replace template tags with.

Typically, most widgets will call widget.ready() with their own function to kick off interactive elements of the widget.

I have used it on my website Sell tickets online No Fee

Add a custom sidebar
Clone this wiki locally