Skip to content

Sqwidget Controller API

jaygooby edited this page Mar 29, 2013 · 9 revisions

Introduction

This is documentation of the API that Sqwidget presents to controller code. Controller code is javascript that is contained in <script> tags in the <head> section of a widget source file. Sqwidget evaluates controller code with a specific set of objects available. This documents the use of controller code to perform configuration, render templates, manage Sqwidget plugins and other utility functions.

Controller Code

When Sqwidget reads a widget source file, it looks for <script> tags containing javascript and executes these are what we call controller code.

When controller code is executed, it has the following available to the controller code:

widget - an object instance specific to this in-page widget. You can have multiple widgets using the same source in the same page. This object will be unique for all of them.

container - the DOM element of the Embed code div, where the widget will be placed. This is best used as the context in jQuery(selector, context) kind of accesses, to bound your jQuery selectors to inside the widget.

jQuery - the jQuery that sqwidget loaded that is available for you to use

sqwidget - a reference to the global Sqwidget object.

These objects gives the basics needed to get working on a widget in the controller code.

Widget Readiness

When Sqwidget has finished loading your widget and all its plugin dependencies, it will do one of two things:

  1. If you haven't called widget.ready(fn), then sqwidget will render the default template (normally the contents of the widget source <body> tag) into the widget container.
  2. If you have already called widget.ready(fn) with a function, it will call this function when the DOM has settled, and both jQuery and sqwidget are ready.

Normally, interactive widgets will always call widget.ready(fn) with a function.

widget.ready(function(){})

Supply a function to sqwidget that will be run when the widget is ready.

You'll also need to call widget.setTemplate('default'); to render your widget. The 'default' template is the content of your <body> tag. If you have defined other templates, you could call these instead.

Rendering Templates

The tim micro-templating engine is available in sqwidget to render html to your widget. If you have defined templates inside <script type="text/template"> in your widget source, then you can use the following methods to render these templates:

widget.render(html, [contents, [place]])

Renders, via the tim templating engine, html, templated with the keys of the object contents to the DOM element or jQuery selector place. If place is not provided, the template is rendered to the whole widget container.

widget.setTemplate(id, [contents, [place]])

Renders the text/template template identified by id id templated with the keys of the object contents to the DOM element or jQuery selector place. If place is not provided, the template is rendered to the whole widget container.

Configuring Sqwidget

See Sqwidget configuration for details.

Plugins

Settings

Clone this wiki locally