Sqwidget Tutorial

This tutorial leads you through all that is need to get started working with Sqwidget to build you own easily-deployable widget. We begin with a very simple embedded block of text and move all the way through to something a lot more complex and useful.

But first, a little bit of architecture of Sqwidget will help you work out what we are trying to do.

A Sqwidget widget is put in a page using a small piece of html embed code that contains a <div> element that the resulting widget will be put into, and a <script> element to load sqwidget.js, Sqwidget's core code. So, you need to put this embed code on any page where you want your widget to appear.

Here's the simplest possible embed code:

    <div data-sqwidget="src:spec.html"></div>
    <script type="text/javascript" charset="utf-8" src="sqwidget.js"></script>

How does this work? Well, once sqwidget.js is loaded, and once the DOM is settled, sqwidget code is executed that goes and looks for any divs in the page that have a data-sqwidget attribute. In this case, the data-sqwidget attribute is set to src:spec.html. This tells sqwidget to load the widget specification file from spec.html and use that to populate this div with the spec.html widget.

So, what is a widget specification and how does it work? Well, the widget specification contains:

1. A default template (html) code for the widget
2. Other templates that can be loaded into the widget using javascript.
3. Configuration and settings specified in javascript, including the loading of Sqwidget plugins to add features.
4. javascript controller code to enable interaction in the widget.