[[TOC(heading=Quickstart Section Contents, QuickStart*)]]

= Quickstart 6: Adding a Site-Wide Template =

Model-Glue ships with a default template, which is really just another view file. This view, though, is special. Open it up. (/translator/views/templates/main.cfm).

See Line !#16? 'viewCollection.getView("body")'? What's with that?

Model-Glue makes it easy to display the rendered HTML from one view inside of another. In all of your .CFM view templates, a variable named "viewcollection" is available. To display the rendered HTML from a prior view, simply run getView(), passing it the value of the desired view's NAME attribute.

In English: because we named our <include> for frmPhrase.cfm and dspPhrase.cfm "body", we could use this event-handler to display a "wrapper" around their content.

If only we could tell Model-Glue to run the view.template event handler after translationForm and translationFormAction.

The easiest way to accomplish this is to use an '''event type''' to apply the template to individual event-handlers. You can think of event types as a way to create "shared" XML blocks that are applied to event-handlers either before, after, or before and after the event-handler's own XML.

In order to add an event type to our event-handlers, we first need to add it to the <event-types> block, so it looks like this:

{{{

<event-types>
    <event-type name="templatedPage">
    </event-type>	
</event-types>

}}}

Next, we indicate that we want to add some common functionality that will occur after our event-handler is processed:

{{{

<event-types>
    <event-type name="templatedPage">
        <after>
        </after>
    </event-type>	
</event-types>

}}}

Then we add our template view to the event type:

{{{

<event-types>
    <event-type name="templatedPage">
        <after>
            <views>
                <include name="main" template="templates/main.cfm" />
            </views>
        </after>
    </event-type>	
</event-types>

}}}

Finally, we use the "type" attribute of the event-handler tag to apply the new type to our events, so they now look like this:

{{{

<event-handler name="translationForm" type="templatedPage">
    <views>
        <include name="body" template="frmPhrase.cfm">
            <value name="xe_translate" value="translationFormAction" />
        </include>
    </views>
</event-handler>

<event-handler name="translationFormAction" type="templatedPage">
    <broadcasts>
        <message name="NeedTranslation" />
    </broadcasts>
    <views>
        <include name="body" template="dspPhrase.cfm">
            <value name="xe_translationForm" value="translationForm" />
        </include>
    </views>
    <results>
        <result name="ValidationError" do="translationForm" redirect="true" />
    </results>
</event-handler>

}}}

[http://localhost/translator/index.cfm?event=translationForm Browse to the site again], and you should see the default template "wrapping" the views.

Congratulations, you've finished the Quickstart!

Looking for more? Check out the [wiki:Training Model-Glue Training]


----

Back: [wiki:QuickStart/5:ValidatingaForm Quickstart 5: Validating a Form]