Most Infusion Components encompass a model and a view. (Of course, there are always exceptions to the rules, but it's helpful to start with the basics.) Before starting to write any code, it's helpful to think about the model and the view for your component.

Model

The model of a component is a JavaScript object that contains the raw data that the component is working with. A component's model might be very simple, or rather complicated. For example, the Inline Edit's model is very simple: it is just the string value of the editable field, and might look like this:

that.model = {
    value: "Tuesday"
};

The model for the (Floe) UI Options (2008-2009) component contains many fields - all of the preferences a user has specified - and might look like this:

that.model = {
    textFont: "times",
    textSpacing: "wide1",
    theme: "lowContrast",
    layout: "default",
    textSize: 14,
    lineSpacing: "",
    backgroundImages: false,
    toc: false,
    linksUnderline: false,
    linksBold: false,
    linksLarger: false,
    inputsLarger: false
};

The model might not contain anything that is being edited, but rather might contain information about the configuration of the component. The Pager's model contains the current settings for the Pager, such as the current page index and the page size. A model doesn't have to be a flat structure, either: it can contain other objects, arrays, etc. (For more discussion about models, see the Framework Concepts page.)

The important thing is this: It's very useful to give some thought to what the model for your component might look like - what is the basic underlying data or information will your component be working with, independent of what's being displayed on the screen. You might want to sketch out a sample or two, to help your thinking. It doesn't have to be perfect to start - no matter how much thinking you put into it, it's bound to change somewhat once you start coding. But it's important to think a bit about it before you start. Later sections of this page will go over how to attach a model to your component in the code.

View

The view of a component is the user interface that is presented on-screen. It might be a rendering of the data in the model (such as in the Inline Edit and UI Options examples above), but it might not. The Pager component's view doesn't display the information in the model, but rather uses that information to shape the display of other data, such as search results - whatever the implementer is using the Pager for.

The important thing to remember about the model and view is that they are separate: your model shouldn't contain any mark-up, and your view should be able to display any data.

Up: Getting Started Creating Infusion Components

Next: Basic Code Structure