Skip to content

Sqwidget Tutorial

Jump to bottom Edit New page
grasuth edited this page Nov 10, 2010 · 18 revisions

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.

All that probably doesn't mean much yet, so let's look at a full example of the simplest possible widget.

The simplest example

Here's probably the simplest widget specification:

<!doctype html>
<html>
<head>
    <title>text sqwidget</title>
</head>
<body>
    <p><strong>This is a sqwidget widget</strong></p>
</body>
</html>

Because the default behaviour of Sqwidget is to display the body section of the specification in the div as the widget, this widget does nothing but display This is a sqwidget widget.

You can find this example in the sqwidget repository at samples/tutorial/part1/index.html.

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

Add a custom sidebar
Clone this wiki locally