Skip to content

Using Sqwidget

Jump to bottom Edit New page
thegingerbloke edited this page Sep 16, 2011 · 11 revisions

Sqwidget is a jQuery-based widget toolkit, for the rapid development and deployment of simple or complex multi-platform JavaScript widget applications.

Quick Start

Here's a quick four step process to building a Sqwidget widget. For more on getting started with Sqwidget, see the emerging Sqwidget Tutorial to start from the very beginning to make a sqwidget.

To quickly build a widget, here's all you need to do is follow these four steps:

  1. Create a new blank html page in a text or html editor

  2. Add the widget embed code and sqwidget script tag to it like this... Place a <div> containing your widget in the page with some data-sqwidget attributes and an id attribute and initial content to display before sqwidget fires up and loads the widget, or to handle the no-javascript case. For example:

    <div id="currency" data-sqwidget="src:template1.html" data-sqwidget-settings="currrency:GBP">
        Loading currency widget... 
    </div>
    <script src="sqwidget.js" type="text/javascript" charset="utf-8" async="async"></script>
  1. Create a template file (in this case the file is called template1.html) containing your widget html, scripts, and templates. The template file looks something like this:
    <!doctype html>
    <html>
    <head>
        <title>Currency Sqwidget</title>
        <script type="text/javascript">
        // config widget template
        widget.config({
          "name": "mysqwidget",
          "version": "0.1.0",
          "title": "My widget does stuff",
          "desc": "Lorem ipsum",
          "url": "http://example.com/widget", // get the widget, via your taskbar
          "ui": "hostpage",
          "dependencies": [
            "nitelite",
            "appleofmyiframe"
          ]
        });
       </script>
       <script type="text/javascript" charset="utf-8">
    		//widget controller script here
       </script>
        <script type="text/template" id="lightbox">
            <p>Look closer</p>
        </script>
        <script type="text/template" id="docked">
            <img src="{{data.logoSrc}}" alt="{{data.title}}">
        </script>
    </head>
    <body>
        <p>Hello world - this is the default body template</p>
    </body>
    </html>

Template files aren't ever displayed as such -- they are loaded by sqwidget based on the data-sqwidget attribute of a widget embed div. So, this page <head> contains:

  • a script element that calls widget.config() with config information for this sqwidget template,
  • a script element (or elements) for the controller for this template
  • script elements (type="text/template") that define named templates for overlays, lightboxes, other views and widget pages.

And then the template body element that contains the default template for this widget (ie. the initial widget content).

  1. And then load you page into your browser. Done.

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

Add a custom sidebar
Clone this wiki locally