Widget introduction

In this article, we discuss the PAX Widget system, and go through the process of designing a simple widget.

PAX Widget system

The PAX widget system is based on the MVC pattern, and typically a widget has a structure like so:

Model - a method called model is used to return an object with the values we want in our model.
View - a method called template that return PAX template(s) that this widget uses; this can return multiple named templates.
Controller - The controller method is called init in PAX, and is used to setup the model, render the widget, and bind events.

All widgets use pax.widget.js, which contains various event management methods, and binding patterns, that you can use in your widget. It also contains an init method, which pulls the various parts of the widget together and allows overriding of methods through the model; this is a very powerful concept when extending widgets. More on this later in this article. A typical widget initialisation looks like this:

    
var myButton = pax.widget.init( {

    target: target,

    model: model, 

    template: pax.widget.button.template()

} );

The target is an element that the widget is applied to, the model is an object containing state and other information specific to the widget instance, and the template is a PAX template, in string format. So typically you will initialise your model, create your template, and then pass them to the pax.widget.init method.
Read on for an example widget!