Model-View-Controller

Sandvox plug-ins use the Model-View-Controller paradigm.

The Plugin Properties are the model.

The inspector is the view, with the ability to display values from the model and send changes entered by the user back to the model.

The HTML that is generated is also a view, though it is read-only; it is generated by an HTML template for display in the web view.

The controller is managed by Sandvox.

Example

Imagine a plug-in property with the key of "badgeLabel."

For a newly created plug-in, the value of the label is loaded into the model from the Info.plist using the key of KTPluginInitialProperties:

If loading from an existing document, the model is loaded from the document file.

The controller in Sandvox loads this value into the inspector via the binding that you had set up in the nib. You would set up a text field in your nib:

...and then bind the text field to the plug-in's object controller using the controller key "selection" and model path "badgeLabel." When the user types into the field, it will be saved in the plug-in properties of the object.

When the element is viewed in the web view, the following chunk of text is parsed:

<p>[[=&badgeLabel]]</p>

This command uses Sandvox's HTML preprocessor language to insert the text located using the keypath "badgeLabel" in the plug-in properties.

If the value of 'badgeLabel is "Flotsam & Jetsam" then the following will be inserted into the HTML of the Web View. Note that the & is converted to &amp; to be properly formed HTML.

<p>Flotsam &amp; Jetsam</p>

No Code?

You can actually do a lot of very simple things with no code. It's possible to get basic data stored in the model, edited in the inspector, and put on the web page without any code whatsoever.

Of course your plug-in will probably want to observe properties, synthesize properties, etc. that go beyond just the basics, but it's amazing how little code you often need for a plug-in.

How can we improve this page? Let us know.