3.0 beta 2

ActiveWidgets as MVC

I would like to read that document, but the link is dead..


Can someone repost it?


Alex Barros
May 18,
Here is the text of that article (sorry, I still did not find a proper place for it).

Written by [Lewis Hoffman](http://www.grasscommons.org/).

Model View Controller (MVC)

ActiveWidgets is a MVC framework. (see <http://en.wikipedia.org/wiki/MVC>
for a definition) The model and controller base classes in ActiveWidgets are named Model and Control, and the View base class is named Template.

### Model

In ActiveWidgets, models provide access to a set of properties. A model should provide methods for all of it's properties- for example a model with a property "size" should have getSize() and setSize() methods.
ActiveWidgets also provides a define Property() method which will create a private variable and get/set accessors.

### Template

Templates are graphical components which can be linked with a data model.
Once linked, a template can access properties of the data model through dynamically generated methods. For example if a template has a "user"
model, it can access user properties through getUserProperty() and
setUserProperty() methods. Templates can also contain other templates, which can be created with defineTemplate().

### Control

The control defines templates and models for use in the application and creates the links between them. Models are added with defineModel().
Templates are added with defineTemplate() in the Control just as they are in Template. The ActiveWidgets Control is actually a Control/View hybrid- it derives from Template class and has all the methods that templates do.
In an application with a tree of nested templates, the control is the root.

Working with Models and Properties

### Creating Models and Properties

defineModel() creates a basic model and several related methods. For example calling MyControl.defineModel("foo") creates the following methods:

getFooModel(), setFooModel() // model accessors
defineFooProperty() // property creation method
getFooProperty(), setFooProperty() // property accessors

Some of these methods are essentially wrappers:

`MyControl.defineFooProperty("prop")` is like `MyControl.getFooModel().defineProperty("prop");`

`MyControl.getFooProperty("prop")` is like `MyControl.getFooModel().getProp();`

`MyControl.setFooProperty("prop","thing")` is like `MyControl.getFooModel().setProp("thing");`

It's important to always access properties through the wrappers however, since they may be overridden to point to other models.

### Retrieving Models and Properties

Templates have methods for accessing both models and properties. For example, to access property "color" in a "car" model:

var color = myTmpl.getCarProperty("color");

This will work even if you haven't mentioned anything else about a car model in your template, as long as it is defined a template or control that contains the current template. A request for a model or property crawls up the tree of templates until it finds a definition. (If no definition is present in any of the templates or the control, the request will break- error handling hopefully will be improved in future versions.) So in general, all templates have access to all the models defined in the Control. A complete example might looks like this:



var tmpl = MyControl.getBarTemplate();
var color = MyControl.getFooProperty("color"); // "red"

### Redirecting Model Requests

It's easy to change the model used by a template. This is usually done by setting it to another model that the template has access to. Suppose our template is full of references to Foo properties, and we define a Faz model in our control. Then we say:

MyTmpl.setFooModel( MyControl.getFazModel());

Now all requests for "Foo" properties are redirected to properties in the Faz model. If we have a specific template that we want to always use the Faz model, we can override the accessor for that template.

MyControl.getBarTemplate = function(){
var template = this.defaultBarTemplate();
return template;

Now whenever we request the bar template, we are handed an object that's using the "faz" model.

### Using a Custom Model

A call to defineModel() in the control creates a "proxy" model. Methods are created, but they access private variables in the control object- no model object is actually instantiated. Some of the methods created in this way are needed even if an actual external model object will be used, so a call to defineModel() is always the first step is setting up a model. However, it's easy to assign an actual model object to be used:

MyControl.setFooModel( new My::Model );

All we have to do is make sure My::Model implements get/set accessors for each property that will be used.

Working with Templates

The ActiveWidgets getTemplate() and setTemplate() methods are able to access templates anywhere in the tree, using a directory notation, so the control always has access to all the templates in the system. For example, if you have a template "main" which defines a template "left" which defines a template "menu", you could still access that template from the control:

var tmpl = MyControl.getTemplate("main/left/menu");
MyControl.setTemplate("main/left/menu", new SpecialMenuTemplate);

Dynamic Accessors

There are three major classes of accessors in AW: templates, models, and properties. Any of these can "set" to a function which will be called when the object is requested. Dynamically generated accessors always "pass-through" several extra parameters, so you may assign a function to a slot that takes several parameters, and the get() accessor will pass those along from your call.

Alex (ActiveWidgets)
May 18,

This topic is archived.

See also:

Back to support forum


Version 2

Looking for AW 2.6 ?
The old site is here.